Why do we design for web accessibility?
The people who use our solutions are diverse, not only in gender, age, and culture, but also in their abilities and the way they interact with our solutions.
According to Web AIM, 20% of the world’s population suffer from a disability. Solutions that aren’t accessible exclude millions of people from getting the information they need. Of the UK population, 18% is impaired in some way (mostly age related) and about one third is temporarily impaired due to illness, injury or circumstance.
To deliver an inclusive experience, accessibility must be an integral part of the user experience design and is something MySuperuser.com have implemented for some of the UK’s leading charities.
Web accessibility considerations
The World Wide Web Consortium (W3C) have produced guidelines on web accessibility the are know as the Web Content Accessibility Guidelines (WCAG) 2.0. The guidelines cover four main areas that designers should consider when designing for accessibility. According to WCAG, web content must be:
Perceivable – Information and user interfaces must be presented to users in ways that they can perceive e.g. help people to see and hear web content whether in the browser or using screen readers and other assistive technologies.
Operable – User interface components and navigation must be operable e.g. give disabled web users the ability to interact with website content using a keyboard, mouse or other helping device.
Understandable – Information and the operation of the user interface must be understandable e.g. Use design best practices and be consistent.
Robust – Content must be robust e.g. web content can be interpreted reliably and accessed by a wide range of technologies.
Our 10 top tips for designing web accessible solutions
Use standard user interface elements and familiar design patterns so content and interactions quickly become recognisable. At MySuperuser.com we use popular front-end frameworks such as Bootstrap and Atlassian User Interface to create our user interfaces.
2) Give control
Always give users control over the content. For users of varying disabilities this can really help them understand the content they are interacting with and know where they are in the solution. This also means not suppressing device features like the pinch zoom or forcing a specific orientation on mobile devices.
3) Offer choice
Give multiple ways to control interaction with components and show which component has focus. It is helpful for everyone to be able to see or hear that a component can be interacted with. Use visible focus, hover or touch states, and suitable labels or text for screen readers. This will make it easier for more people to complete tasks.
4) Well structured headings, labels, text and links
Headings indicate page hierarchy and provide context. Labels and text provide meaning to content. Links are used to navigate. Whether headings, labels, text or links, ensure consistency across your solution. Make sure labels, tooltips and text make sense out of context.
5) Group related information
Grouping related information makes content more understandable to users, as related information is easier to identify. It also makes it easier for people to focus on smaller and more manageable groups of information. In web accessibility this is particularly important when users interact with web forms.
Input focus should follow the order of the visual layout, from the top to the bottom of the screen from the most important to the least important. Consider the order in which the page elements receive focus and how this is indicated to the user. Ideally this should be through a combination of visual indicators and accessible text. Furthermore, not everyone uses a mouse so ensure all inputs can be accessed using a keyboard.
Consider how text colour contrasts against the colour behind it, and whether any meaning is implied by colour alone. Remember, not everyone sees all colour. Test the colour contrast in your designs and where applicable provide alternative colour options implemented using custom Cascading Style Sheets (CSS). Consequently, for some of our client’s projects we have created high visibility as well as black and white stylesheets to facilitate various visual impairments. Text size options can also be offered using this method.
8) Use ARIA attributes when applicable
9) Use your toolkit
There are many tools out there for accessibility testing. Below are some of the tools we use at MySuperuser.com when designing, building and testing our solutions.
This is a favourite of ours at MySuperuser.com and we find this Chrome browser extension extremely useful. Wave is a free web accessibility tool created by WEBAIM. It validates a web page manually for various aspects of accessibility. Major functions of Web Accessibility Toolbar includes identifying components of a webpage, providing access to alternative view of page content and facilitating the use of third party online applications. It ensures 100% private and secure accessibility reporting.
Use this checklist to help build accessibility into your process no matter your role or stage in a project. Accessibility guidelines are provided for the various tasks that are common in projects for the roles of designers, engineers, project managers, QA and editorial.
Test your solutions on popular screen readers. JAWS, Job Access With Speech, is the world’s most popular screen reader, developed for computer users whose vision loss prevents them from seeing screen content or navigating with a mouse. JAWS provides speech and Braille output for the most popular computer applications on your PC.
NVDA (NonVisual Desktop Access) is a free “screen reader” which enables blind and vision impaired people to use computers. It reads the text on the screen in a computerised voice. You control what is read to you by moving the cursor to the relevant area of text with a mouse or the arrows on your keyboard.
This tool is built for designers and developers to test color contrast compliance with the Web Content Accessibility Guidelines (WCAG) as set forth by the World Wide Web Consortium (W3C). Calculations are based on formulas specified by the W3C. To run your test, select a foreground color and a background color. The results will automatically generate and you will receive your scores. You will receive a pass, margin or fail, depending on your selections.
Accessibility Checker is a web accessibility evaluation tool. Examine your web accessibility by entering your web page URL or by uploading an HTML file. It is a free tool that gives the choice to choose report format. AChecker enables user to create accessibility guidelines.
10) Test, test, test!
You won’t always achieve the best solution straight away. Continue to test and iterate until you feel confident that as many users as possible can achieve their goals whilst using your solution. If possible test your product with a wide range of users, including people with cognitive, motor, hearing or vision impairments.