The internet is the perfect medium for people with disabilities. It breaks down barriers, brings people together, and allows them access to information that, in turn, empowers them.
Australia’s recent postal survey raised the issue of how inaccessible it was for people with disabilities or for whom English is not their first language. These people were unable to vote without assistance. Had this survey been conducted on the internet, everyone could vote, regardless of where they live, and whatever their disability or native language.
In this article, we are going to go over the five W’s of accessibility: what, who, why, when, and how. The ‘how’ will focus more from a developer point of view, involving very straightforward HTML and CSS. If you prefer, you can watch my youtube presentation instead.
The Web Content Accessibility Guidelines are divided into three conformance levels:
- A. This is the minimum level required for a website to be considered accessible.
- AA. This is an excellent compromise between providing a high level of accessibility and maintaining a reasonable level of flexibility in design choices.
- AAA. This is the ultimate of accessibility. However, it comes at a price as there is not much wriggle room for designers to showcase their skills.
Most companies aim for AA, including all the government websites. AA is an excellent standard.
What?
Accessibility is about ensuring that everything on the web is accessible to everybody, regardless of disability.
“The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.”
- TIM BERNERS-LEE, Creator of World Wide Web
Who?
When you make websites, it is very important to make it accessible for as many different disabilities as possible. Accessibility is for everybody, but is mostly focused on the following:
- hearing impairment
- vision impairment
- motor control difficulties
- intellectual disability
- speech impediment
Almost one-third of Australians have a disability of some type, including around 350,000 Australians with a visual impairment.
The term ‘disability’ also includes temporary disabilities such as a temporary hearing loss or a broken arm where the user has to access the mouse and keyboard with a single arm. I have first hand experience of being one-armed, having recently had a baby. :-)
Why?
More Customers, More Potential Employees
Focusing on accessibility means that people can access your awesome website and buy your awesome product. The bottom line is: if people can’t use your website, you will lose out on potential customers.
Another thing that is often overlooked is that they can also do their work. A lot of companies have online tools that they require their staff to use. If they are not accessible for people with disabilities, it makes it difficult - if not impossible - for them to do their job. This means companies are less likely to hire people with disabilities, which is discriminatory.
A great example is from a train platform in Geelong. It has two buttons with the text: “Press the red button in an emergency, press the green button for the next train details”. The choice of red and green automatically excludes the 8% of the male population that have red-green colour blindness. And in Braille, the same sentence is repeated: “Press the red button in an emergency, press the green button for the next train details”!
Legal Liability
There have been a couple of famous lawsuits recently against companies whose websites were not accessible where frustrated customers have pursued legal actions.
One of the more famous ones was the Sydney Olympics back in 2000. They were successfully sued by a visually-impaired man who couldn’t buy tickets through their website, and consequently missed out on being able to attend popular (sold out) events. This was one of the catalysts that has driven all government internal and external websites to improve their accessibility.
Another more recent example is the Coles supermarket chain. The ability to shop for groceries online and organise delivery is wonderful way for people with disabilities to maintain their independence. After an update on their website, customers were no longer able to complete their transaction using a screen reader. They could still fill their cart but, when they got to the checkout, they were unable to select a time for delivery and therefore complete the transaction. One of their customers tried to work with them to reinstate this feature and in frustration felt the need to take legal action. Needless to say, the website has since been fixed and all Coles customers are able to shop online.
Google!
A side benefit of making your website accessible is that it makes it easier for search engines such as Google to index. When Google can more easily determine what your site is about, you will turn up on more searches so more people can find out about you or your product.
Not only do you reap the organic benefits of Google being able to read your site, Google themselves are prioritising sites that are accessible. Previously Google prioritised sites that were mobile responsive for mobile and tablets, now they prioritise accessibility.
“The most important blind visitor to your website is Google! In the same way that creating accessible web pages helps disabled person access your content, it also helps Google index your pages so that the right people can find your service or product.” - JIM BYRNE, Founder of Guild of Accessible Web Designers
When?
Ideally you would address the issue of accessibility in every phase of development.
- Design: This is where you are selecting colours and content. When choosing colours, keep in mind red-green colour blindness, and appropriate colour contrast for people with limited vision.
- Development: There are many things that front end developers can add to assist both screen readers and real people to use your website. These will be detailed below.
- User testing: This involves getting your product in the hands of users, particularly people with disabilities, and making sure that these users represent a diverse range of disabilities.
How?
The easiest advice is to simply follow the web best practice. The people who develop HTML and other parts of the web have accessibility as a primary focus and are adding more and more accessibility features to their spec every day. If you follow best practices and make use of the new features that get added, chances are your site is going to be more accessible without you even trying.
Secondly, allow extra time and training for staff on what needs to be done, and how it can be done. Nobody is intentionally excluding anybody, it is often simply a matter of not knowing. And when your staff do know what needs to be done, allow them the time to implement these additional features.
Here are a few suggestions to get started:
- Make your website responsive: This is a quick, easy win. No matter what you build, ensuring it works on any device: desktop, laptops, tablets and phones.
- Make it work on different operating systems
- Make sure it works on different browsers: Warning: Surveys have shown that a large percentage of people who use screen readers use older versions of internet explorer. :-(
- Make your pages small enough so they can load quickly: If your customers live somewhere with slow internet (such as Australia!), make sure your site won’t take too long to download.
Hearing Difficulty
If there is no sound (alerts, chimes) or video on your site, no need for you to worry.
Otherwise, here are some points you will need to consider:
- If you do have a video on your site, make sure it has closed captions.
- If it’s a video you have made - and it’s made through youtube - youtube can add closed captions for you. However, you will need to be responsible for double checking the accuracy.
- Make sure video doesn’t autoplay (this is helpful for all your visitors, not just those with a hearing impairment!)
- If there are any alerts, make sure there is a visual alert as well as an audio alert. For example, if an alert pops up in the corner with a chime, make sure there is a visual component as well.
Motor Control Difficulty
There are a couple of ways having a motor impairment can affect how a user accesses your site. If they are using it on a desktop they may choose to use a keyboard instead of a mouse. So ensuring everything that can be done with a mouse can also be done with a keyboard is important. Otherwise if they are using a touch device ensuring that any touch areas, such as links and buttons, are sufficiently large for people to use without error.
Intellectual Disability
When putting together your website it’s important to consider how easy it is to understand and use. If you need to have complicated content consider having a glossary to define the words being used. Adding help text and FAQ sections can also help. If you have a form or survey making sure everything is explained well and if errors occur making them easy to read and recover from.
Speech Impediment
This is something to keep in mind if you are developing tools like Siri or Amazon Alexa) which respond to voice controls.
Visual Impairment
Many people with a visual impairment use screen readers. These are tools that people use if they have difficulty seeing. They take everything that is on the screen and read it out to you, turning the visual medium of a website into text.
There are several different types of screenreader:
- VoiceOver (free with mac)
- NVDA (Windows only, made in conjunction with Firefox)
- JAWS (windows but less popular ‘cos it’s really expensive)
During Design
Make sure any colours you choose have high contrast, make sure you don’t have reds on greens. Make sure if you have any changes on your website, it is not 100% colour-based. As in the previous example (press the red button, press the green button) this would also not work on a website. Make sure you include text.
When it comes to hover styling and focus styling - make sure this is not just colour-based, have an underline or have the text get bigger as well.
During Development
As I said above, one of the ways we can program with accessibility in mind is to follow HTML5, which has accessibility built-in. Screen readers know what they are looking for and they can gather a little bit of extra information from some of the features of HTML5.
Including header tags, nav tags, and footer tags, and making sure that labels and inputs are married up with their ids goes a long way to meeting accessibility standards.
W3C have made additional attributes that you can put into your HTML that link up to the screen readers and give them extra information to help them navigate through your site.
Previously attributes such as headers and footers had to be added in manually but now they have been added as HTML tags in their own right. However, there are still some that are a little bit ambiguous that we have to add in.
For example, if you have an alert on your site, adding in the role of alert (role="alert") when your popup appears, the screen reader will read it out immediately rather than continuing on with what it was doing. Otherwise if the reader is halfway down the page and an alert appears at the top of the page, it will miss it.
Also tooltips. They do not have a dedicated element so, again, you will need to add a role of tooltip. Similarly with math.
Finally, aria tags can be used to give the person more information. A particularly useful one is adding aria-required="true" to an input element. This will alert the user that this field must be filled in while they are on that field, instead of at the end when they are trying to submit.
Another thing to keep in mind are images on a site. Because they are obviously very visual, they represent a particular type of challenge to a screen reader.
There are two types of images to consider on your website:
- Essential: Any image that has information or writing on it. For example, a company logo. In this case, add an alt tag with the company name for the screen reader
- Non-essential:
This covers background or decorative images. To help the screen reader go through your page a bit quicker, add in
alt = ''. This way, it will know that this is an image that can be ignored for screen reading purposes.
When it comes to links on your website, they work a lot better if they are unique. One of the ways you can use a screen reader navigate a site is to skip from link to link to link, or you can get a list of all the links up front.
A common occurrence is a blog site full of links with the text ‘read more’. These links make no sense if you are listening to a screen reader. The solution here is to put in hidden text to give them a bit more context. e.g. <span class="sr-only">of blog post 1</span>
During Testing
Having real people test your website gives you invaluable information on how it will be used. Either internally or externally, getting people with a wide range of abilities to use the site will make sure that it is accessible to everyone (or back to the drawing board).
For example recently, the University of Melbourne were making their student portal accessible. They got students with disabilities to test it and then they updated it accordingly. In particular, they discovered that students with motor difficulties found it difficult to use their mobile site so they made their touch targets bigger.
Putting it All Together
Making your website is accessible is good for everyone, employees, customers and Google. While there is a lot to think about, most changes to a website will be fairly quick to implement and there is a lot you are likely doing already without realising it. There are also companies set up that can help you implement accessibility on your website such as Vision Australia, Intopia and AccessibilityOz
Tools
Here are some tools that I regularly use:
- Screenreaders
- Colour checker Allows you to put in two different colours that you are considering for your site and it will report back if the contrast is high enough.
Resources
- A11y Demo code Code example of a website that lacks accessibility
- Disability Statistics A summary of the various disabilities that you need to account for
- A11y Checklist This has checklists for the Web Content Accessibility Guidelines conformance levels detailed above.
- Aria Cheatsheet This gives you all the roles and the aria labels.
- VoiceOver shortcuts Keyboard shortcuts for VoiceOver
