Why is Web Accessibility So Important?

Web accessibility has been around for years. In fact, the first web accessibility standards were published over 19 years ago – that’s a long time, especially on the internet. Despite being so established, there are millions of websites that simply aren’t accessible and it isn’t just users who are losing out.

So, What is Web Accessibility?

To put it simply, web accessibility standards mean that people with disabilities are also able to use the web.

If a website is usable by everyone, regardless of ability or disability, it’s accessible. Unfortunately, a large percentage of the web is impossible or difficult to use for people with a non-standard setup. It’s time to change that.

There are around 13.3 million disabled people in the UK and with an ever-increasing elderly population, the number of people with a diminished ability to use the web is only going to rise. Web accessibility standards are going to be needed more than ever.

In fact, it’s a legal obligation.

“Your service must be accessible to everyone who needs it. If it isn’t, you may be in breach of the Equality Act 2010“ – Gov UK

The current Web Content Accessibility Guidelines focuses on four principles:

1. Perceivable: This refers to simply being able to process the information, the user should be able to receive the content either by sight, hearing or touch.
2. Operable: Can, well, use the site. Consider someone that can only use a keyboard, can they navigate with ease? Can a user that takes slightly longer than the average person complete a form without it timing out?
3. Understandable: Understandable might seem like a rehash of perceivable, however, just because your website can be perceived doesn’t mean it’s understandable. Is your website full of technical jargon? If so, a screen reader might help the user to perceive it but they probably won’t understand it.
4. Robust: Robust sites allow users to access the site with their own technologies, they aren’t forced to use a certain web browser or assistive software. Accessible sites are usable across a range of browsers and devices, they’re responsive to zoom and work well with assistive technology.

Who is Affected By a Lack of Web Accessibility Standards?

Disabled people may be at the forefront of your mind when thinking about improving web accessibility standards, but it benefits everyone.

Improving web accessibility standards for users with permanent disabilities will also make it easier for someone with a more temporary condition, such as a broken arm. Even faulty equipment, such as a broken mouse, can be a barrier to use. Properly setting up tab navigation means that all users with the ability to tap their keyboard will be able to use your site with ease.

There are many disabilities that make the web harder to use, many of which can be put into the following categories: auditory, cognitive and neurological, physical, speech and visual.

It’s important to consider all of these categories and the potential barriers that come with them when creating a website.

“The power of the web is in its universality. Access by everyone regardless of disability is an essential aspect.” – Tim Burners-Lee, W3C Director and inventor of the World Wide Web

Why Should I Care About Web Accessibility Standards?

It’s An Expensive Issue To Ignore

It can be easy to think ‘do that many disabled people really use my site? Is it worth the cost of development?’ Sound familiar? If so, here’s your answer: yes.

Non-accessible websites are at risk of legal action should a user with accessibility needs struggle with your site:

“A person (a “service-provider”) concerned with the provision of a service to the public or a section of the public (for payment or not) must not discriminate against a person requiring the service by not providing the person with the service” – Equality Act 2010

Budget airline Bmibaby was hit with a lawsuit in early 2012 over their inaccessible site which was settled outside of court. They should have taken web accessibility standards more seriously. 

It Allows You To Reach a Larger Audience

As mentioned earlier, there are just over 13 million people with disabilities in the UK. Inaccessible sites will prevent many of these people from using their services – that’s a potentially huge amount of revenue lost each year because basic principles of accessibility haven’t been followed.

Data released by the government in 2015 states that ‘disabled people and their families in the UK had an aggregate annual household income of £249 billion’.

There’s An SEO Overlap

Improving web accessibility standards has a carryover to SEO. Ensuring the basics are covered such as alt tags on images for blind users, a clear link structure, correct usage of headers for screen readers and responsive design all benefit the website in more ways than one.

Following basic on-page, SEO practices will make Google, and your disabled users, happy.

What Can I Do To Make My Website Accessible?

The frontend team here at iWeb recently travelled to Manchester for the UpFront Conference 2018. Amongst the great speakers was Laura Carvajal, the former accessibility lead at FT.com, who delivered a talk on accessibility and clued us in on the best practices. Here’s what we learnt:

The first thing to ask yourself is, ‘does my site work’? No, that doesn’t just mean it looks nice and works for you. Does it really work?

Can you access everything you need without a mouse? How about without sound? Without a monitor?

If the answer to any of the above is no, it’s time to employ some of these techniques to make your website accessible.

Use Headers Appropriately

This might be an obvious one but it isn’t uncommon for websites to use headers in the wrong context. The cause of this header confusion is usually down to WYSIWYG editors and other CMS functionality where non-developer users are free to post content.

Content writers will often use different headers simply because of their styling and not consider the implications of using a H2 instead of a H3. It’s an easy mistake to make.

The problem with the inaccurate use of headers is glaringly obvious when using screen reader software. Most software works like this: user presses H, a list of headers are presented when the user selects one to navigate to that section of the page.

Now imagine trying to navigate a page where there are primary headers nested in the content which is nested under a secondary header. Confusing and frustrating, right?

Use a H1 tag for your main title, H2 for section titles then the other headers as their importance decreases.

Caption Your Videos

Imagine watching someone tell you how to use your headers properly, their lips are moving but nothing’s coming out. The video is useless.

Captions should be used on every video and audio transcripts should be provided when there’s a sound clip, if you don’t, you may be excluding up to 11 million people with hearing impairments – in the UK alone.

The quality of your captions also matter. Auto-generated captions have come a long way, however, they’re not quite there yet…

Properly written and reviewed captions are essential. It comes back to POUR, yes the above caption can be perceived visually but it can’t really be understood. Review the auto-generated captions on your videos or dedicate resources to writing them.

“Captions are not optional” – Laura Carvajal

Ensure You Can Navigate With Tabs

You probably know by now, but a lot of people use their keyboard to navigate the web. If they can’t use a mouse and your website doesn’t support tab navigation – they can’t use your website. You have a legal obligation to provide your service to anyone regardless of their disability under discrimination laws.

There are a few reasons for not being able to navigate with tabs and it really comes down to not being semantic with your HTML.

For example, if you have an element used to navigate – it should be a link with a href. Browsers won’t focus on an element unless they think it’s appropriate to focus on it. Why would Chrome take the user to a link if it doesn’t have a destination? That’d be a waste of time for the user.

Sometimes it isn’t possible to use links, such as when you’re using AngularJS, but there’s a workaround. You can use tabindex=“0” to add elements to the tab flow.

The 0 tells the browser to add it to the tab flow in a logical order. The user can now tab through the navigation bar and will then land on the button, even though it has href set.

Use Focus

Try using your tab key to navigate this page, you’ll notice your ‘focus’ travels through the page with a clear blue box indicating which element you have selected.

By default, you don’t actually have to do much – most web browsers come with focus by default with accessibility in mind. However, it is possible that the theme you are working with has disabled the focus styling or applies focus inconsistently.

In that case, be sure to set up the style with CSS. The :focus pseudo-class comes in handy here.

There’s a problem, though. The focus shows even when the element is selected using a mouse, that’s not so useful in terms of accessibility and it doesn’t look great – a lot of developers would be tempted to outline:none everything but that removes it for keyboard users too…

Behold, :focus-visible.

This new CSS4 pseudo-selector allows you to only display the focus when the user is navigating with a keyboard. Amazing.

It isn’t supported by most browsers yet but fortunately, there’s a polyfill available.

Effective Use of Contrast

Contrast is extremely important for visual users, captions are brilliant but not if you can’t see them. The same applies to focus, each browser has a different focus colour by default, but if you’re using custom styles to set the focus then you need to make sure that it contrasts well with the background on your website.

As you can (or can’t) see above, the poor contrast makes it extremely difficult to track where the user has tabbed to. Imagine if your mouse pointer blended in with the background of a page.

Contrast is important for any content that the user needs to perceive, it may sound obvious but make sure your plain text contrasts well with the background. Light-grey text on white backgrounds is a popular trend at the moment as it’s nicer to read, particularly when it comes to lengthy content.

It can be easy to miss contrast issues, especially for those with good eyesight, luckily there’s a useful chrome extension to help you out. aXe is an accessibility extension that carries out a quick audit of your page and flags potential issues, contrast being one of them.

Be Understandable

As someone in tech, it can be easy to use acronyms and language that most people aren’t familiar with. If the user doesn’t understand what you’re talking about, your website fails at POUR and it fails to meet proper web accessibility standards. 

Consider who your target audience is and ask yourself ‘do they know what this means?’.

If they don’t, it’s your responsibility to provide an explanation of the term or acronym. It can be hard for a potential customer to make a purchase if they don’t understand content on your site.

Just say water?

When it comes to web accessibility standards, overly complicated terms are a barrier to use for many people including those with visual impairments, learning disabilities and those with poor language skills.

It isn’t just overly complicated language though, formatting plays a large role in how easy content is to understand. Large, dense paragraphs with short line heights are difficult to read for everyone – avoid writing in large blocks of text, break up your content into small paragraphs and make everyone happy.

Headings are very useful when it comes to understanding which part of the page in which, in fact, it’s essential for those with screen readers as we explored earlier. Additionally, clear navigation should be present at all times and orientation cues should be available, so the user knows exactly where they are, what they’re reading and how to progress to what they need next.

Want to improve your own web accessibility? Get in touch, we’d love to talk.