The A to Z of UX - A is for Accessibility - 12 top tips for designing an inclusive user experience
- UXcentric
- Dec 13, 2018
- 15 min read
Updated: May 6
Darren Wilson
What is accessibility?
Digital ‘accessibility’ relates to the design of content (on the web or otherwise) so it can be used by everyone, inclusive of those with (varying) limitations of the following abilities:
Visual: Blindness, low vision and colour-blindness
Motor: Reduced ability to use a mouse, slow response time, limited fine motor control
Auditory: Profound deafness and hard of hearing
Cognitive: Learning difficulty, easily distracted, an inability to focus on large quantities of information or data
Accessibility is one facet of usability. Unless deliberately alienating users with such limitations, you cannot claim your user experience as usable until it is accessible [1].
Not everything is easy to implement, but I will share some top tips to help ensure you can make some quick wins to make your digital experiences more accessible.
No users should be ostracised because of their disability.
As user-centred design professionals, we have a responsibility to ensure everyone can access what we create irrespective of ability, context or situation. We have the competence and should be empowered to do so.
We should also regularly challenge information we believe to be correct, and engage our users, including ‘outliers’ outside of the norm and ‘the rest of us’, to ensure we provide a compelling experience for all.
Inclusive design produces better experiences for everyone.
Why is accessibility important?
Approximately 13.9 million disabled people live in the UK (circa 20% of the population) [2], and there are over 1 billion worldwide [3].
Such numbers cannot be ignored.
There are obligations to consider. Under the Equality Act 2010, all retailers must provide access to their goods online as well as in-store.
In 2016, the EU adopted the Web Accessibility Directive to support improved access to public service websites and mobile applications, especially those used by people with disabilities, and those with vision or hearing impairments.
This Directive has now been integrated into UK legislation and will enforce obligations for new websites from 2019, for pre-existing websites from 2020, and for all public sector apps from 2021 [4].
All of us have abilities and limitations to those abilities.
How can my business benefit?
The potential target market is huge. From a business perspective, it makes sense to sell to them just as you would to anyone else.
Studies have also proven that websites with good accessibility produce better search results, reaching a larger audience, are kind to SEO, have quicker download speeds and always have better usability [5].
These improvements can have a significant impact on the profitability of even the largest of companies [6]:
“Improvements in accessibility doubled Legal and General’s life insurance sales online.”
“Improvements in accessibility increased Tesco’s grocery home delivery sales by £13 million in 2005… To their surprise they found that many normal visitors preferred the ease of navigation and improved simplicity of the [parallel] accessible site and switched to use it. Tesco have replaced their ‘normal’ site with their accessible version and expect a further increase in revenues.”
“Improvements in accessibility increased Virgin online sales by 68%.
You cannot meet the standards required without designing for and researching with users with access needs.
How can I do it?
I have shared 12 simple to follow steps and guidelines to follow to help improve the accessibility of your digital experiences. There are some well-established design techniques to follow that will help you in creating an accessible experience that many people will appreciate, and also some process techniques that will help you.
1. Make accessibility part of your day-to-day activity
Given time and opportunity, always design for accessibility as part of your day-to-day activity and project process. Ideally, whatever your software delivery process, before even the first line of code is developed, accessibility requirements should have been considered as part of the user research, clarified and then disseminated to the project team.
It will save you time and money later.
Unfortunately, when projects become stressed, it’s often the first thing to be deferred. A caveat may be that it will be added back later, which may be true. However, it can prove difficult to crowbar in and/or the end user experience may be compromised as a result.
As an absolute minimum, accessibility should be covered as part of the testing protocol to ensure that the final design and experience is adequate. However, the most successful, accessible designs rely on sound decisions made at the outset of a project.
These decisions may relate to design calls or tools employed. Do remember, though, that if you create designs which make it difficult for people to interact with, changing them afterwards will incur cost, time and effort.
If you have knowledge in your team, great, you may only need to allocate additional support for testing. However, if you have a knowledge gap, you should consider extra resources for development and/or training, or bring in someone to fill the gap.
2. Implement sufficient colour contrast
Colour contrast is often overlooked, yet the World Health Organisation (WHO) estimates that approximately 1.3 billion people live with some form of vision impairment [7].
It is critical to display text with sufficient contrast. People with low visual ability can find it difficult to read text from a background colour if it has low contrast. As an example, never use light grey text on a dark grey background.
Black on white or vice versa is optimal. The exception to this rule is where elements are in an unavailable state. This includes buttons in a disabled state or inactive menu items.
The WCAG Guidelines indicate the contrast ratio should be a minimum of 4.5:1.
Ratios are more lenient with larger and heavier fonts, which are easier to read at lower contrast [8]. Tools to check this objectively are available, e.g. the Contrast app on Mac, which checks contrast using a colour picker. Use the WebAIM colour contrast checker for greater detail. This tool will calculate the score for text sizes according to different conformance levels.
As a sufferer of red-green colour blindness, as 1 in 12 men (8%) and 1 in 200 women in the world, I appreciate the value of ensuring colour contrast. In the United Kingdom alone, this equates to approximately 3 million colour blind people (about 4.5% of the entire population), mostly male [9].
What it means in real terms is that I cannot deal with issues seen below. This is an illustration of the Ishihara test, which I failed in school. This admittedly is an extreme case and dashed my dreams of becoming a fighter pilot! Yet the principle remains, and examples of poor contrast will render content unreadable.
Finally, perform verification testing with actual users in different brightness conditions that are representative of where your product will be used or viewed. Nothing can beat representative data.
3. Use more than one variable to visually differentiate information
Using colour as a singular visual cue can make it hard for people with low visual acuity or colour blindness to comprehend that content. By applying an additional variable, it will help users to differentiate information and process it.
For example, simple tricks such as text labels or patterns can help differentiate information beyond colour alone, i.e. use in charts. Trello’s colorblind mode is a brilliant example of this.
When activated, labels become more accessible by adding texture. Another useful technique is to print content in monochrome and see if you can still interpret it correctly.
For informing the user of an error, adding an icon and a title to the description of the error can help. Using formatting such as font weight or underlined text style can also create prominence for hyperlinks.
This will help beyond just the use of colour, though both would be preferable, as this will help everyone. The description helps, but the colour is a strong indicator too, and the cue is diluted when it is removed.
4. Apply instructions on form fields and text inputs
It has been commonplace to use placeholder text as a label when designing a form. Don’t, it’s a mistake, for a couple of reasons. Text used inside the fields usually has low contrast and is harder to read. It’s also easy to forget what you need to write when you’ve clicked the box so maintaining an instruction is useful.
For those using screen readers, navigating through a form is achieved using the Tab key. Any non-label text, such as placeholder text, is usually skipped over, meaning a completely unintuitive experience.
If labels, and indeed any other information related to a specific field, do not get removed having interacting with it, people shouldn’t lose context with what they’re doing. By removing content, the designer is pushing simplicity in preference to usability [10].
This practice doesn’t mean that you have to clutter your design with unnecessary information; just make sure to provide essential cues. Too much instructional text can be just as much of a problem as too little. The goal is to confirm that the individual has enough information to complete their tasks without friction.
5. Make use of alternative text fields to describe information
Those with low visual ability employ assistive technology such as screen readers so that “hear” web content rather than read it. To describe what is happening in context, designers can apply two techniques to present alternative text.
By assigning text within the <alt> attribute of the image element.
By adding context or surroundings of the image itself.
The trick is to describe what is going on within an image as below, and contextually how it relates to the surrounding content. Simply stating “image” does not help the reader.
If an image is redundant because additional content describes what is happening, adding an empty <alt> attribute will provoke screen readers to skip it.
If you don’t write any alt text, some screen readers will read the file name to the individual. This is the worst experience of all.
6. Use formatting to give information structure and hierarchy
Much like printed documents, headings indicate where content begins. They are tags assigned to text to articulate purpose and establish hierarchy within the context of a given page. It is essential that design documents conveys the intended structure of content. Titles with larger fonts enable users to comprehend the order of the content more easily, and also scan it more quickly for what they are looking for.
In much the same way, screen readers also use the heading tags to read page content. As such, people using assistive technology can get an overview of the page by utilising page headings hierarchically.
Tag should not be used for style impact in isolation. Not using headings correctly affects accessibility. When implemented correctly, people can use them to listen to a list of all of the headings and be able to navigate directly to what it is that they need.
Use <h1> for the page title or main heading
Use <h2> for the main section headings
Use <h3> for subheadings etc…
CSS can then be applied to define the visual language for each level
Adding an ability that skips to the main content will also aid usability. In that sense, you don’t have to listen to the global navigation at the beginning of each page. Once you’ve tried it, it will become self-explanatory.
No one will read every word on every page. Instead, we normally look for the general summary. Screen reader users are no different from the rest of us. Experienced users often like to speed up the reading rate to 300 words per minute or more, which their equivalent to scanning the page [11].
The BBC produce good examples of page structures that are both visually easy to interpret and help assistive technologies. The text size and heading level are proportioned appropriately in terms of their importance, and are presented in order. Visually, it’s easy to scan and pick out what you would like.
Another example from the Government Home Page has what appears to be a sound design, but on closer inspection suffers from a couple of problems. The <h2> text size is smaller than the <h3> distorting the priority. There is also H2 text, which not displayed, meaning it will be read out but cannot be seen.
Having a style guide with rules for use by the team will reinforce consistency for images and alternative text, form labels, and headings across a site or system. There should also be a peer review in place to ensure the implementation is correct.
7. Interactive elements must be clearly distinguishable
Users need to be able to determine if elements are interactive or static. Elements which have actions such as links, buttons, navigation, and other controls (including swipe areas on touch devices) may be less obvious.
Actionable elements must be identified visually, by convention, and by information provided to assistive technologies. Using proprietary components within platforms can help with this, as they already contain such information.
Focus indicators help people know which element has the focus on an interface. This helps them understand where they are when navigating your site. This is equally valid for point-and-shoot remote control interactions, as well as when using keyboards.
They are required by people with a variety of disabilities:
Low visual ability and requires screen readers
Those with low mobility, or individuals who have suffered injuries like carpal tunnel syndrome
Power users who prefer this type of navigation
Those who prefer the keyboard as opposed to using a mouse
Elements that require focus include hyperlinks, form fields, widgets, buttons, and menu/list items. The focus indication needs to differentiate itself from the other elements around it in context.
While they should fit the visual language if the interface and be on brand, it should also be highly visible, with good contrast and stand out.
The UK Government's websites for public services are usually very good at this. Links are presented in a common colour and are underlined on hover state. Interestingly, though, the breadcrumb items are always underlined, whereas the action buttons to different pages are not.
8. Support keyboard navigation
Following on from the previous tip, keyboard navigation is a vital aspect of web accessibility. The Tab key supports quick navigation with the focus state providing visual indication for what is currently active.
The order of interactive elements as pages are navigated is essential and must be logical and intuitive, following the visual flow of the page. This is pre-determined to be from left to right, top to bottom — header, main navigation, content buttons and inputs, and finally the footer.
Use the Tab key to navigate and the Enter key to select items on your site. You should verify that all interactive components have predictability and a logical order. If a site can be used without a mouse, happy days!
The size of navigation elements should also be considered, including the number of links and text string lengths. Tabbing through long menus is demanding for those with motor disabilities. And listening to lengthy links can be cumbersome for people who use screen readers. As with all content, be concise and to the point.
In the example below, MailChimp uses the default browser visual focus state to make it clear that the user is on the link 'Email Designer.' Pressing Enter would direct them to that page.
Unfortunately, in this Barclays example, it is not intuitive how to select the save for next time option. The tab action highlights the descriptive text and info icon, and pressing Enter brings up the relevant information. It’s not clear how to check the box.
There are many stereotypical keyboard shortcuts in use [12]. It is good practice to test your site only using a keyboard to see how your site performs under such a test.
9. Ensure touch targets and large enough and in reach
Everyone benefits from larger touch targets, in particular users with motor and/or vision impairments, as accuracy can be difficult. Interactive elements should be easy to hit accurately and consistently.
Recommended sizes of touch targets can vary, though they should be large enough to tap comfortably with one finger. For a device in hand, a good steer is to have a minimum interactive target area of at least 7㎟, but ideally 10㎟ [13]. There are instances where text that is large enough to read, yet is too small to touch.
For example, a linked letter in an A-Z listing may be too fine to touch accurately and could invoke a dedicated dialogue for easier, accurate interaction of the individual elements.
Alternatively, a second related interaction which aids finer control to find what you need will also help, such as moving your finger along the screen to dynamically change the parameter being adjusted, i.e. moving down the list as in iOS. OnePlus Android does the same, with an additional dialogue to visualise where you are in the list to aid usability.
Grouping related elements in close proximity that link to the same point can act as a single touch target. This augments the touch area and simplifies the interface.
Where elements are not easily within reach, for example, in touch-based in-vehicle infotainment systems, extra consideration should be given to the size and placement of buttons. Primary interactive elements that are more important and/or are used more frequently should be given priority and be within easier reach.
In this Range Rover, there are two large touch screen display devices. This allows the user to configure what they would like to be displayed, and where, at any given time. The primary screen is located higher in line of sight of the driver and can therefore display more complex information and features.
It is compartmentalised into a main feature window, summary panel, header and footer. The main window is closest to the driver for viewing and easier access to primary controls.
Dedicated feature buttons are placed in the footer for increased accuracy, although there are a lot of them which compromise ease of use. The back button, the highest frequency of use button, is closest to the driver in a corner for the same reason.
The secondary screen displays less complex features, which the driver needs quick access to or regularly wants to check. It is supported by hard controls for frequently used functions, which can then be operated ‘blindly’ comfortably by the driver.
10. Test, test, and test again
Unless you have personal experience with someone with a disability, assessing accessibility can be problematic, but it is not insurmountable. Try putting yourself in the same position and simulate experiences as if you were in the world of the people you are designing for.
Use voice interaction tools to read something out to you (like a news article or email message). It’s the same technology that drives screen readers. Try viewing content at different zoom levels to simulate different screen magnification experiences required depending on an individual's eyesight. Finally, when testing digital interfaces with a mouse and touch, also try keyboard interactions.
These are all simple versions of the same technologies and/or experiences that someone using an assistive technology will have. Many devices now have accessibility settings, too. These will also help guide you to what some users are experiencing and what they would benefit from.
Given that a large proportion of developers and designers are often young able-bodied people, getting those guys to carry out such tricks is useful too. It will help put them in the same mindset and help you to convince them why you are advocating accessibility so much.
It is imperative to test your experience with real, representative users, however. This will give you absolute clarity on whether you have an inclusive experience. To facilitate this, ensure you have included a spread of users across the digital inclusion curve.
Researching with people with disabilities can also quickly highlight other usability issues.
11. Make use of the tools and information available
There is a great deal of information available to help you reach the targets set out in AA of the Web Content Accessibility Guidelines (WCAG 2.1). Following these will optimise your customer experience on commonly used assistive technologies such as screen readers, screen magnifiers and speech recognition devices.
Here are some tools and guidelines which can also help you:
iOS Accessibility Guidelines are a useful reference for built-in accessibility features, accessibility API's, and developer tools.
Android Accessibility Overview is equally a valuable resource for improving accessibility and integrating features.
BBC Accessibility Standards and Guidelines also have some useful information to access about their standards and practices.
WebAIM Color Contrast Checker provides results in real time for regular and large text.
Inclusive Components is a pattern library in the form of a blog, with a focus on inclusive design. Each post explores a common interface component and comes up with a better, more robust and accessible version of it.
Color Oracle is a free colour blindness simulator. It works on Windows, Mac, and Linux and demonstrates in real time how people with common colour vision impairments see things.
Vox Product Accessibility Guidelines provides detailed, bespoke checklists for people with different roles within a project team.
AXE Google Chrome Extension allows you to test accessibility violations using its inspector, though you will need to use Chrome.
WAVE Web Accessibility Evaluation Tool is an automated tool to provide guidance on where your site needs tweaking to improve accessibility. While no substitute for real users, it can provide valuable insights.
ARIA Authoring Practices Guide (APG) provides design patterns for common interface elements, i.e. checkboxes, tab panels, sliders, toggle buttons, toolbars, etc.).
12. Do the hard work, so your customers don’t have to!
Whether it is related to accessibility, usability or otherwise, doing the hard graft so that your users don’t, is one of the fundamentals of great user-centred design. It doesn’t matter if the experience is on websites, apps or in-vehicle infotainment, designing experiences or products that people can use is our duty, and we should get it right.
As we have seen, the impact that can be seen by businesses is massive. The changes that can be made, small or large, should not be underestimated. You can, and your customers will appreciate it.
Having accessibility as part of the customer experience process will only serve to reinforce the significance it has within your business. Ensuring your design teams and workforce think in that way has to be of benefit. So long as we do the best we can, we can only improve!
CONCLUSION
Millions of people are affected by limiting conditions every day.
The World Bank [14] report that 1 billion people (15% of the world’s population) experience some form of disability, while the ageing world population is expected to double by as early as 2050 [15].
We are duty-bound and empowered to do something about it. As a result, it will help not only these potential customers but also everyone who interacts with your products.
Taking steps to improve your digital accessibility will undoubtedly improve your users' experience and boost your business. Here is my 12-step summary of how you can go about it:
Make accessibility part of your day-to-day activity
Implement sufficient colour contrast
Use more than one variable to visually differentiate information
Apply instructions on form fields and text inputs
Make use of alternative text fields to describe information
Use formatting to give information hierarchy and structure
Interactive elements must be clearly distinguishable
Support keyboard navigation
Ensure interactive elements are large enough and in reach
Test, test, and test again
Make use of the tools and information available
Do the hard work so your customers don’t have to!
All the very best of luck. Should you have any comments, please don’t hesitate to get in touch.
References
[1] Krug, S. (2014). Don’t make me think. Revisited. A common sense approach to Web and Mobile Usability. USA: Pearson.
[7] https://www.who.int/news-room/fact-sheets/detail/blindness-and-visual-impairment [8] https://www.w3.org/TR/WCAG21/
Get in touch with the author
Darren Wilson
Managing Director at UXcentric
07854 781 908
Коментарі