2.7 million colour blind1.87 million sight loss224,000 Blind358,000 Registered blind14.2 million older people over 60 – trend UP1.4 million over 853 million diabetes96,500 Long-term disability who are blind11 million people limiting long term illness, impairment or disability
If you are using colour, then use a secondary method to distinguish the elements from each other.Avoid placing red and green together. Other poor matches are:Green and brownBlue and purpleGreen and blueLight green and yellowBlue and greyGreen and greyGreen and black
Hidden away in the View > Proof Setup menu and a few options to quickly test how your design will look for a few common forms of colour blindness.
Double AA requirement but all sites must be: distinguishable as standard so as a minimum you should aim to pass AA standards. There are numerous tools out there. A link to the tool used here can be found in the “Resources” section at the end of this document.
Its important to consider the size of interactive elements and leave space between items so they don’t get accidently selected. This consideration is not just for touch-based devices. It can also help users of assistive technology and users with poor motor controls.
Links can appear out of context so ensure the link text is descriptive. Linking to popular keywords helps your pages be indexed for relevant results and improves your SEO performance. Links should alsolook like links, and nothing else should. Users may get frustrated if they try to click on textual phrases or graphics that look like links but are not. They will also be frustrated if they have to move their mouse all over the page trying to discover links that do not look like links.Also don’t underline text that isn’t a link, as again this can cause confusion.
This is why “structure” is so important. Alternate methods of navigation in AT, can navigate by headings and linksThis why “link text” needs to make sense out of context. 100 “read more” links isn’t helpful at all. This makes restricting number of links on the page a really good thing to do.
Most users will understand individual text input areas, however some users may attempt to enter the entire number in the first box. If the label is placed inside the text input, and disappears once the user starts entering data can be problematic for some users, since they may not be able to recall the label and ultimately what data they need to enter.Informs users before the text input how you wish their data to be entered. If you require it in a particular format. E.g. dd/mm/yyyy
Early notification of errors and feedback proximity can be really useful
“On-change” menus can be problematic for screen readers and keyboard accessibility. This is because the change event is fired each time the user is moves through options. With this example, the page would continue to change language until they found the option they wanted. Care must be taken with any “on-change” event particularly on form elements. The user must be in control. No unexpected behaviour should take place.
This feature, collecting bookmarks for related itemsrequires a pointing device and dexterity. Instead, you can offer a keyboard-accessible alternative way to move items from one place to another.
Basic typography principles help users with visual or cognitive impairments improve the readability massively. AAA line length: Maximum of 80 characters per line, line spacing 1.5A good range for aim for is between 45-75 characters, with the optimum length being 66 including spaces. The minimum recommended font-size is 12pt, with a good reading size of around 16pt. Its also beneficial if the text is left-aligned.
Movement can be very distracting and can break concentration from information elsewhere on the page. Some may not be able to read quickly so will prefer elements to remain static. If movement is required then do not let it start automatically and provide options to control playback.
Example of cognitive overload!
Duplication: “click here” linksHierarchy: Organise page by headingsPredictable: Consistent mechanisms appear in same location, Informed users: Changes do not happen without user consent or notification. E.g. Errors, new browser windowsVerbosity: Efficient, clear, concise. Do not overloadChunk: Break content up into manageable pieces. No more than 4.
No surprisesInform user of changesNo duplication
Mando UX and Design Accessibility Training
Accessibility and UX/Design
*Accessibility is often abbreviated to A11y. Where the number 11 refers to the number of letters omitted.
1 in 5 people of working age have a disability
1in 6 struggle with literacy
1in 6 are unable to read, write or add up
people in the UK are over 60 years old
people in the UK have a long-term illness, impairment or disability
Over 10 million
people in the UK have some form of hearing loss
people in the UK are colour blind
Mayo Marriot uses Dragon
Naturally Speaking voice
recognition software (04:06)
Sip and Puff
Darren Carr uses a head mouse
and an on-screen keyboard (04:41)
Robin Christopherson uses the
Jaws screenreader (04:32)
Geoff Adams-Spink uses
ZoomText software (04:19)
Voiceover on iPhone
Victor Tsaran shows you how
to navigate a web page using
VoiceOver on an iPhone
Note: Android equivalent is TalkBack, Windows Phone has
“ease of access” options which include a screen reader.
• Track ball/pad
• Sip and Puff
• Reliance on colour
• Active areas too small
• Undescriptive links
• Hidden labels
• Interactive elements aren’t
• Interactive elements cannot be
visually distinguished from
DON’T RELY ON
Not very helpful Better!
Not very helpful Better!
16 -17 years
“Link one six one seven years end link”
“Link Double-U, Double-U, Double-U, Dot, El-
16 to 17 years
“Link sixteen to seventeen years end link”
London Toy Library
“Link London Toy Library end link
Not very helpful Better!
Keep it simple
• Efficient, clear, concise
• Avoid overloading the user with too much content.
• Utilise progressive disclosure to reveal more as
• No more than 4 steps to a goal
1. Avoid duplication
2. Provide a clear hierarchy
4. Keep users informed
5. Avoid verbosity
6. Chunk/sequence steps
(not too many steps!)
• Touch interaction can be difficult
• Notifications appearing off
• Long pages
• Permanence of place – as
resolutions change, elements
may move to an unfamiliar place
• Auto adjust to users device
• Designing for mobile focuses on
key features and accessibility.
• Sites also remember preferences
• Having less content can be
easier to understand
JUST NOT POSSIBLE
“dealing with things sensibly
and realistically in a way that
is based on practical rather