Boost website accessibility and build traffic – 12 tips for web managers
By Nick Butler in Development on June 25, 2017
Want your website to reach more people? Why not make it more accessible. This post is a non-technical introduction to website accessibility, its benefits and how to achieve it.
Earlier this month we hosted a sold-out accessibility workshop here at Boost. Run by Jason Kiss, Senior Advisor in Digital Engagement at the Department of Internal Affairs, the workshop was for developers from companies working on websites for government departments.
Hosting the session was a great chance to expand our knowledge base around accessibility so we jumped at the opportunity.
“It was really interesting,” said Boost developer Oliver Stigley. “You really do need to integrate accessibility into your workflow, into every sprint, every story.”
Accessibility isn’t just an issue for developers though. If you own or manage a website you can make a big difference by getting your developers to prioritise accessibility. Of course, you have to know what you’re asking for. With that in mind, this post gives a brief summary of what website accessibility means and the benefits it can bring. You’ll also get some high-level tips on how to do it, along with some more technical resources for developers.
A website is accessible if people with disabilities can use it. These disabilities might be visual, hearing, motor or cognitive. In New Zealand 1.1 million kiwis have some kind of impairment—that’s almost a quarter of the population.
There are plenty of websites that are hard enough to use if you’re able-bodied. Think how hard it would be if you couldn’t use a mouse, or perhaps even a keyboard. Imagine you couldn’t see well enough to read the text or hear well enough to understand what’s said in videos.
How disabled people experience websites
This video shows some of the issues disabled people can experience, and some of the tools they use to help them access websites. It also shows how resolving those issues can help people who aren’t disabled as well.
Jason Kiss also looked at the tools some people with disabilities use to help them access websites. These “assistive technologies” might be physical devices such as headwands and mouthsticks that let people use a keyboard without hands. They also might be technological solutions like screen readers that read out web pages for those who can’t read the pages themselves.
The idea of the workshop, Jason said, was to give developers a better idea of how browsers expose content to people using assistive technologies.
“This means that people with disabilities will be better able to access and use that web content,” he said.
What are the benefits of website accessibility?
It can earn you money and save you some serious grief.
It’s obvious in a way. If more people are able to use your site, they will. If you’ve got an ecommerce site or you’re wanting to attract customers to a bricks and mortar business, this can translate to big bickies. Tesco certainly found that out. When the UK supermarket giant built an accessible website, it generated £13 million per year in revenue.
“Not only do we get the satisfaction of doing the right thing, but it’s a great market opportunity in its own right,” said John Browett, the Tesco Chief Executive at the time.
Improving website traffic by improving accessibility
There are other less obvious ways you’ll get more business. One thing you can do to make your site more accessible is give descriptions of images or videos and transcripts of audio on your site. These text equivalents mean that people who can’t see or hear the pictures and videos on your site can still find out what they show. At the same time, they also tell search engines what’s on your website. This helps build the traffic you get from the likes of Google. When finance and insurance firm Legal & General improved the accessibility of their site, their search engine traffic jumped 25% within 24 hours, eventually growing by 50%.
Reducing reputation risk
If someone with a disability comes to your site and they can’t use it because it’s not accessible, the odds are they’re not going to be very happy with you. This risks damaging your brand and your reputation.
Worst case scenario, they might lawyer up as well. Big companies like Netflix, Target and Disney have all been sued for not providing accessible websites (as have hundreds of smaller institutions).
Treating all your customers fairly
Of course the benefits we’ve looked at so far ignore the biggest reason for making your site accessible to all people. It’s only fair.
Few organisations would ever think of greeting a disabled customer at the counter by saying, “hey, you’re not welcome here”. However, they effectively say just that on their websites. It’s usually not deliberate, it’s just that they’ve never checked if their site is accessible. There’s nothing like seeing how a disabled person experiences your site, as our developers can attest.
12 tips for building accessible websites
This isn’t a comprehensive list but it’s a good start. If you own a website, this is what you can ask your developers to do.
Text for website accessibility
You want the text on your website to be easy to read (and not just for people with disabilities). Make sure:
- there’s a good colour contrast between text and its background
- people can resize the text
- you use plain language
- the content is logically structured (for example, give the page a title and use a hierarchy of heading levels)
- people needn’t rely on images or visual styles to understand the text.
Navigation for website accessibility
Many disabled people can’t use a mouse. Others can’t read the navigation so a screen reader does it for them. So, ensure you:
- let people use your site with a keyboard only (so they can use the tab key to move through a page’s navigation and other interactions such as forms)
- make the focus visible (visually highlight the link or form field they’ve tabbed to)
- label links clearly (for example, avoid links like “click here” that don’t describe the link destination)
- label form fields and give clear form error messages.
Images, video and audio for website accessibility
If you want to let people with visual or hearing issues get the benefit of all your content even if they can’t see or hear it you’ll need to:
- give text alternatives that explain what’s in images (photos, infographics, charts etc)
- provide transcripts and captions describing what you hear in video and audio
- avoid moving, flashing or blinking content which is distracting and drowns out screen readers (this includes videos, carousels and ads that autoplay or can’t be controlled).
The international web standards organisation W3C set up the Web Accessibility Initiative (WAI) to help people make their sites accessible.
To learn more more about how you can check, and improve, your site’s accessibility, take a look at the WAI’s Easy web accessibility checks.
Website accessibility for developers
Because it was for developers, Jason’s talk looked at the technical side of things.
He looked at the W3C Web Content Accessibility Guidelines (WCAG) 2.0, which New Zealand government websites have to meet.
He focussed particularly on the Web Accessibility Initiative’s ARIA (Accessible Rich Internet Applications) specification. This shows developers how they can increase the accessibility of web pages and user interfaces (the parts of web pages people use to control and communicate with the web page).
Jason also suggested the following best practice rules of thumb:
- Use progressive enhancement (build a core website that works for basic browsers and assistive technologies then enhance that with more complex user interfaces).
- Use responsive web design (build your pages so the layout can respond to the size or type of device displaying the pages).
- Develop for small screens first.
Website accessibility resources for developers
Jason provided a number of resources for developers. Here are some of them, along with others I found useful in writing this post:
- How to Meet WCAG 2.0
- The A11y project (Why A11y? It’s an abbreviation based on the fact Accessibility is spelt A + 11 letters + Y)
- Guidance on the NZ government web accessibility standard (The standards are mandatory for government sites but the resources are also useful for people working on non-government sites.)
- Dos and don’ts when designing for accessibility – on the Gov.UK blog
- ARIA 1.1 specifications
- WAI guidance on ARIA Authoring Practices 1.1
- Rules for using ARIA in HTML on GitHub
- Developers’ practical guide on using ARIA in HTML
- AccDC Bootstrap (an HTML parser that creates advanced, accessible interactive controls)
Find out about the accessibility workshops coming up in July in Wellington and Auckland.
The last word on website accessibility
Let’s give the last word to the inventor of the internet:
“The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.”