Accessibility
When it comes to design, accessibility shouldn’t be an afterthought. Any designs that are created with accessibility in mind will more than likely be helpful for all users, accessibility = usability.
With that in mind here are just a few things I have done to create one of the most accessible websites in its sector.
Types of Disability
To design with accessibility in mind it helps to have a good understanding of potential issues people may have such as:
- Visual Impairment
- Deafness & Hard of hearing
- Cognitive
- Mobility
Use of Colour
Making sure there is enough contrast ratio between foreground and background colours is important users who have a visual impairment, such as colour-blindness. But this can also help people who have glare on their screen, such as outdoors using a mobile device.
Don’t use colour only to convey a message, use labels/obvious iconography too.
If initial designs are done in greyscale, it is a good indicator whether there is a usablity issue that could arise if someone has a visual impairment.
Touch Target Size
When designing elements that are supposed to be clicked it is important to make them at least 44px X 44px, this helps users who may have a mobility issues.
Font Size
It is important to use a font size that is easily legible and use relative CSS values to make sure the user has the ability to magnify the screen if they need to do so.
Screen Readers
Use markup that meets WCAG criteria and is screen reader friendly. Make sure links and buttons use descriptive text and keep headings in the correct order.
Keyboard Only Users
Some users may not be able to navigate websites with a mouse, because of this a website should be easily navigable by only using a keyboard. This can be helped by keeping the default tab order on clickable elements, having an obvious focus state on elements, and allowing a nav to be accessed by click, not hover.
Testing
Testing should ideally be done by real users, but if this isn’t possible, we should try and mimic situations that they may find themselves in by:
- Testing with a screen reader/voiceover
- Designing in greyscale to check for usability issues introduced by colour
- Test using keyboard only
Testing Tools
Testing tools such as Lighthouse/Axe/Siteimprove only approximate issues and should be used as validation for other tests that have already been done.
However, they are very handy for highlighting current issues on existing sites. Siteimprove has a very in-depth accessibility module which has been essential in fixing issues with legacy code.