A comprehensive guide to improving accessibility for people with visual impairments. We’ll be looking at different types of assistive technology, UX testing with blind people, content best practices and the role SEO has played in creating more accessible websites.
According to the World Health Organization, an estimated 253 million people live with vision impairment across the globe. 36 million are blind and 217 million have moderate to severe vision impairment.
As of 2014, there are around 360,000 people registered as blind or partially sighted in the UK. But these are just the people who are registered. According to the RNIB the figure doesn’t take into account, “those who are waiting for treatment, those whose sight could be improved, those who have not registered for whatever reason and people whose sight loss is not at a level that allows them to register.”
RNIB estimates that a truer figure is roughly two million people living with significant sight loss in the UK.
These are some of the realities of people living with sight loss in the modern world:
- Almost half of blind and partially sighted people feel ‘moderately’ or ‘completely’ cut off from people and things around them.
- Older people with sight loss are almost three times more likely to experience depression than people with good vision.
- Only one in four registered blind and partially sighted people of working age are in employment.
However, advancements in web-related technology has opened up the world to blind and partially sighted people in a positive away, and can help them feel more connected to friends, family and services across the world.
As Paul Johnson’s interview with blind internet user Sunil Peck, who grew up in the pre-internet era, reveals, “The arrival of the internet was (even more) profound for those with visual impairments. [Sunil] explained “it was thanks to the internet that at the age of 25 I read my first newspaper.” At the time things we took for granted were just not available to the blind.”
For 3% of the UK, navigating the online world has it’s own specific set of issues that arise not just because of bad design, but also thoughtless design. We can do our best to avoid building a website with poor navigation and confusing menus, but how many of us forget to add alt-text to images, or even make them vaguely readable?
This article is intended to walk you through the various ways you can ensure your own website is as accessible as possible for people with visual impairments.
It’s an investigative piece, drawing information from numerous sources and opinions, that won’t necessarily get overly technical – but I will point to resources where you can find out more. It will also tackle various levels of vision ability, including colour blindness.
What are the most popular types of assistive technology for using the internet?
In November 2016, Gov.uk published the results of their assistive technology survey, in which the Government Digital Service asked 712 users about what devices, web browsers and assistive technology they used to access GOV.UK.
These are the results:
- Screen magnifier 30%
- Screen reader 29%
- Speech recognition 18%
- Readability 15%
- Other 8%
According to the survey, 30% of users told Gov.uk that they use a screen magnifier, which is a piece of software that enlarges and enhances anything users are reading and interacting. 38% of those magnifiers also have screen reader capabilities, with ZoomText being the most commonly used in both categories. Other popular screen magnifiers included Supernova and MAGic.
As an example of a screen magnifier, this promo video from Supernova shows the software in action.
Almost the same percentage of respondents accessed GOV.UK with a screen reader. A screen reader is described by Gov.uk as an application that turns on-screen content into speech or shows it on a Braille display. Most screen readers are made up of two things: the screen reader software, and a Text To Speech (TTS) engine, which is what converts the text from the screen reader into speech.
The most commonly used is JAWS, (or Job Access With Speech). This is followed by VoiceOver, a feature for Apple products that gives, “auditory descriptions of each onscreen element and provides helpful hints along the way — whether you prefer using gestures, a keyboard or a braille display.”
Here’s computer programmer Austin Seraphin, who has been blind since birth, on the iPhone’s VoiceOver feature and how it impacted his life.
The next popular option is NVDA (NonVisual Desktop Access), a free and open-source software that you can download or transfer to a USB stick so you can use it with any computer.
Another interesting takeaway from the survey is that despite the worldwide dominance of Google Chrome (54% market share, with the next popular being Safari with 14%) this isn’t translating to users with assistive technology.
In fact the most common browser and assistive technology combinations are:
- JAWS with Internet explorer 11
- VoiceOver with Safari
- NVDA with Firefox
This is a rather complex snapshot of how blind and visually impaired people are accessing the internet. And although it should be noted that this is a survey of people who specifically use the Gov.uk website, it should reveal the range of options available and the way they can be configured to best improve accessibility.
So how can you improve the accessibility of your own website for people visiting your website using this range of assistive technology?
I talked to Andreas Savva, an accessibility consultant at a leading charity, and asked his advice…
What do you recommend to improve accessibility for blind and partially sighted people?
Andreas: What I suggest is that developers and designers should know their audience, and that includes people with a variety of abilities and disabilities. Accessibility should not be considered at the end of the development process, often the last ‘check’, but incorporated through the design and development process of the website/product.
There are guidelines (WCAG 2.0) that can help designers and developers to create accessible websites. Also, the WAI-ARIA Authoring Practices 1.1 (working draft) provide a comprehensive documentation of design patterns that can be used to create accessible website ‘components’.
However, that does not necessarily mean a website that conforms to the guidelines will be easy to use by people with disabilities. It is important to include people with disabilities during the evaluation process to ensure that a website/product is easy to use.
Do you run user testing with blind and partially sighted people? If so, what are the most common issues they find navigating the web?
Andreas: Yes, we run user testing with blind and partially sighted people. Here are some of the more frequent problems found by blind users:
- Areas not accessible via the screen reader
- Page content not structured with headings
- Headings do not follow logical sequence
- Images without alternative text
- Inputs without associated labels
- Links without accessible description
- Buttons without accessible description
- Interactive elements not properly marked using the appropriate HTML element
We often find that the problems reported by blind and partially sighted people differ a lot.
Is there anything that can make the web experience better for people with colour blindness?
Andreas: There are a few approaches that can be used to avoid problems for people with colour blindness on the web.
- There are known colour combinations that are causing problems, which can be avoided (e.g. green/red)
- Use high contrast between the background colour and text: WCAG 2.0 AA requires a contrast ratio of 4.5:1 for normal text and 3.1 for large text. Large text is considered 14 point and bold text, or 18 point or larger text.
- Do not solely rely on colour to convey information. Ensure that information conveyed by colours is available in other visual ways.
- Interactive elements, such as links, should not be identified relying on colour only.
- Form messages (success or error) should not rely on colour only.
- Required form elements being marked in red can be problematic as users may not be able to see the differences in the colour. An approach that can be used is to mark the required field with an asterisk (*) and having a message at the top of the form indicating that fields marked with asterisk are required. Another approach is to add the word required next to each required form element.
- Graphs can be filled using colour and texture.
- Colour pickers can be accompanied with labels
- Text over background images can be problematic, as part of the image or the entire image may not have sufficient contrast in relation to the text colour.
How to write content that works best with screen readers
The same principles that apply to writing clear and concise copy for the web also apply to writing content that can easily be translated by a screen reader.
Gov.uk offers a breakdown of how screen readers respond to content, which is important to keep in mind and is definitely worth taking the time to read.
Basically it reiterates how the English language is a complex beast even at the best of times. We have plenty of words that are spelled the same but sound different: we tie a “bow” or take a “bow”, we pronounce the acronym of Value Added Tax as “VAT” and “vat.”
But any good screen reader should be customisable enough to work in most effective way for the individual user. Some include dictionaries where you can change the way a word is pronounced, or add pronunciations for new words.
As Gov.uk points out though, the more you make your content accessible for people with visual impairments, the less accessible you may be making it for other people. You can add spaces between letters like “V A T” to make it more screen reader friendly but it will make things difficult for sighted people to read, especially if they have low literacy or find reading difficult due to dyslexia.
Here’s the major takeaway from Gov.uk’s advice on the subject:
“Don’t write content that works specifically for screen readers, write content that works well for everyone. Use correct punctuation, spelling and grammar, use standard conventions for acronyms and abbreviations, and use words that are appropriate for your audience.”
SEO and its role in improving accessibility
When asking the UX community about this subject, I encountered a couple of interesting points regarding SEO and its role in making websites accessible.
Want to know what has made the most difference to accessible content for the less able? SEO.
Capitalism made sites machine readable.
— Manley (@LordManley) July 25, 2017
It’s only in the last couple of years that certain black-hat practices of manipulating search engines into artificially ranking a website higher have been somewhat successfully stamped out.
Now that Google has included the concept of usability as a ranking factor in its algorithm, and is rewarding sites with logical navigation, clear hierarchies and multi-device responsiveness, the twin concerns of making a website accessible AND more visible in search have somewhat more aligned.
I talked to Andrew Martin, SEO manager about his thoughts on the subject of SEO and accessibility…
Do you think that SEO has played a role in improving accessibility?
Andrew: I think SEO has aided accessibility in a few ways, although maybe that’s by serendipity in some cases, as I’ve not seen the likes of Google talk at length or specifically about accessibility as a ranking factor, as they do for mobile-friendly, link building, speed, meta tags etc.
These serendipitous improvements may have occurred because website owners enter the mind-set of wanting to optimise their websites, by re-designing sites to adopt a responsive device-agnostic design, or to improve UX, and therefore that opens an opportunity to also tackle some accessibility issues in the process.
What are the practical ways that SEO aids accessibility?
Andrew: SEO may have led site owners to improve (or just simply add) descriptive alt tags and captions to images – which for screen reader users, would improve their experience by accurately describing the image.
I also think that SEOs focusing on getting their h-tags optimised boosts accessibility in three ways:
- SEOs actually just making a point that content producers should put content into header tags, rather than just making paragraph text bold because they don’t like the style of one of the h-tags
- Optimising a heading so that it is descriptive of what’s about to follow it on the page
- Applying a header tag hierarchy so that screen readers, would also help users with assistive technology, and help them understand article sections and their relationship to each other.
The focus on href title tags for SEO has no doubt encouraged content producers to describe what they’re linking to for the benefits of SEO, and in the process, they’ve given assistive tech a great piece of information to share with users.
In addition, with the increase in featured snippets, SEOs are thinking of ways to gain these coveted spots. ‘Lists’ is one method that has been working well, and has encouraged site owners to increase the number of lists in their content. For accessibility, using ordered lists <ol> tags helps screenreaders inform users about the number of items in the list.
Should I use automated tools to check accessibility?
Gov.uk decided to test the efficiency of 10 free automated testing tools earlier this year by building the “world’s least accessible webpage” complete with 143 accessibility failures grouped into 19 categories.
Here it is in all its glory:
According to Gov.uk the page contains such common failures as images without alt-text, blank link text, flashing content that doesn’t carry a warning and overly complicated language.
Here are the results:
- 29% of the barriers created weren’t picked up by any of the tools (42 barriers out of 143)
- Tenon counted the most error messages and warnings – 37% of barriers found.
- If you include manual inspection prompts, Asqatasun was the most effective – 41% of barriers found.
- Google Developer Tools only picked up 17% of the barriers.
For the most effective accessibility testing, Gov.uk advises you to, “Think of a testing tool as like using a spellchecker. It can certainly help you pick up issues, but it should never be used in isolation.”
The only way you can be sure that you’re picking up every accessibility issue is by combining automated tools with manual checking and user testing.
Photo credit: davehalb via Visualhunt.com
The post How to design websites for blind and partially sighted people appeared first on UserZoom.
