Skip to content

Commit

Permalink
Deployed 0e9fa43 with MkDocs version: 1.4.2
Browse files Browse the repository at this point in the history
  • Loading branch information
baracoffice committed Jul 4, 2024
1 parent 590dc98 commit 64f87bd
Show file tree
Hide file tree
Showing 3 changed files with 27 additions and 13 deletions.
38 changes: 26 additions & 12 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -274,8 +274,8 @@
</li>

<li class="md-nav__item">
<a href="#3-using-colours" class="md-nav__link">
3. Using colours
<a href="#3-accessibility" class="md-nav__link">
3. Accessibility
</a>

</li>
Expand Down Expand Up @@ -408,6 +408,13 @@
Time
</a>

</li>

<li class="md-nav__item">
<a href="#other-numbers" class="md-nav__link">
Other numbers
</a>

</li>

</ul>
Expand Down Expand Up @@ -546,22 +553,27 @@ <h3 id="1-core-colours">1. Core colours</h3>
<p><p class="inline-container">White<span class="colour-rect" style="--colour: #FFFFFF; --txt_clr: black">#FFFFFF</span> Use this for labels on buttons, NHS logo, headings on NHS blue</p></p>
</li>
</ul>
<h3 id="2-type-sizes">2. Type sizes</h3>
<ul>
<li>the FDP uses type sizes Small, Medium and Large. We believe that the “small” size is unreadable for many users, therefore would recommend only using Medium and Large</li>
<li>if specifying text in points or pixels, the optimal default font size for maximum readability for most users is 19px on large screens and 16px on small screens. Font size should not be smaller than size 10px.</li>
</ul>
<h3 id="3-using-colours">3. Using colours</h3>
<p>Users think that when colour is used it is trying to convey information, so make sure the use of colour is intentional and consistent. Don't use colour just for decoration.</p>
<ul>
<li>see the section on Guidance on use of colour - to ensure consistent experience for users across all products </li>
<li>a proportion of users cannot differentiate different colours. To communicate with people who cannot see well or distinguish colours, you may need to: <ul>
<li>ensure that the contrast between colours is high enough using a colour tool</li>
<li>word things differently</li>
<li>use more than one visual cue, for example, text and an icon as well as colour </li>
<li>use more than one visual cue, for example, text and an icon as well as colour</li>
</ul>
</li>
</ul>
<h3 id="2-type-sizes">2. Type sizes</h3>
<ul>
<li>the Workshop uses type sizes Small, Medium and Large. We believe that the “small” size is unreadable for many users, therefore would recommend only using Medium and Large</li>
<li>if specifying text in points or pixels, the optimal default font size for maximum readability for most users is 19px on large screens and 16px on small screens. Font size should not be smaller than size 10px.</li>
</ul>
<h3 id="3-accessibility">3. Accessibility</h3>
<ul>
<li>In the UK, almost 1 in 5 people have a disability of some kind. Many more have temporary or situational disabilities, like an illness or injury. When you're working on NHS internal services, think about how people with different needs might use what you're making. </li>
<li>set up automated accessibility testing and fix issues you identify</li>
<li>use the NHS <a href="https://nhsdigital.github.io/accessibility-checklist/">accessibility checklist</a> to carry out an initial WCAG evaluation</li>
</ul>
<h3 id="4-headings">4. Headings</h3>
<ul>
<li>make them meaningful, let readers know where they are/ what they are looking at </li>
Expand Down Expand Up @@ -663,11 +675,13 @@ <h3 id="dates">Dates</h3>
</ul>
<h3 id="time">Time</h3>
<ul>
<li>"5:30pm", not "1730hrs"</li>
<li>"midnight" not "00:00"</li>
<li>"midday" not "12 noon", "noon" or "12pm"</li>
<li>check what time format the users and Trust use, but it's likely to be 24 hour clock</li>
<li>"6 hours 30 minutes", not "6.5hrs" </li>
</ul>
<h3 id="other-numbers">Other numbers</h3>
<ul>
<li>when showing the age of a patient it is important to be accurate and express the age in years and months not decimals</li>
</ul>
<h2 id="images">Images</h2>
<h3 id="informative-images">Informative images</h3>
<ul>
Expand Down
Loading

0 comments on commit 64f87bd

Please sign in to comment.