By: What is Web Accessibility?
Web accessibility (also sometimes referred to as ‘Inclusive Design’) is an approach taken to designing and building websites (or web apps or services) to cater for the widest possible range of requirements. W3C’s Web Accessibility guidelines say that accessible sites allow people with disabilities to perceive, understand, navigate and interact with the Web and to contribute to the Web.
There is a vast range of disabilities that affect users’ experience online, including sensory (e.g. visual, auditory), cognitive (e.g. thinking, communication) and motor (e.g. locomotion, fatigue and dexterity). Disability charity Scope estimates that disabilities effect almost 14 million people in the UK – that’s about 20% of the population! According to the Clickaway Pound report, 71% of users with disabilities felt their disability impacted their experience online, and of those, 69% used assistive technologies to help them use the internet.
Designing websites to be accessible to people with disabilities varies depending on the types of requirement. Some users are able to navigate websites without the use of assistive technologies, but may find websites difficult to use if the writing style isn’t clear or is overly complex, if text is too small, or if text or buttons don’t have enough colour contrast against the background, for example. Others may find it more difficult to use a mouse and may use their keyboard to interact with different elements on a site.
Assistive technologies are often employed by users with disabilities to help them interact with websites. Generally, assistive technologies are a piece of software that interacts with both the user and the website to help them perform functions that they may find difficult on their own. For example, users with visual impairments may use screen readers, which users control with their keyboard (or a braille display). Screen readers read website content aloud or display it in braille. This content can include identifying certain strings of text, subheadings, links and menus as well as body copy.
Often, assistive technologies rely on a site’s markup to identify different elements on a page. Imagine trying to fill out a form you can’t see fully, if the form elements aren’t correctly labelled, or trying to navigate to right section of a page if it hasn’t used proper headings structure (H1 as a title, H2s as subtitles etc.).
Building websites to be accessible means that we must consider visual appearance, writing style and compatibility with assistive technologies and keyboard navigation. The most widely used accessibility standard is the WCAG2.1, which also became an ISO standard in 2012.
Why Should We Build Accessible Sites?
I am writing this in the height of the Coronavirus pandemic in April 2020. In the UK, we’ve been instructed not to leave our homes unless absolutely necessary, especially if we have an existing health condition that may increase our vulnerability to the disease. Social distancing has seen the meteoric rise of services like Zoom and Houseparty (video conferencing apps), both for work and social use, as well as enormous increases in demand for online delivery services, be it for food or other goods, as we attempt to find some normalcy by replacing our usual lives and behaviours with online substitutes. Even the NHS has launched an app to help match vulnerable people with volunteers in their local to help deliver crucial medicines, food and supplies, take them to urgent appointments and more.
Imagine social distancing if you were not being able to join family on a video call or you struggled to place online orders for food or prescriptions, because these services were inaccessible to you. That’s a pretty shocking thought, but it’s not as far from the truth as we might hope – just last year, a blind man in the US sued Domino’s because he couldn’t place an order on their website using his screen reader. And cases like this seem to be on the rise. Law firm UsableNet found that over 2,200 similar lawsuits were filed in 2018, which is up from around 800 the year before! Web accessibility (or lack of) is a real problem, and it’s impacting people everywhere.
Why is Web Accessibility Important to My Website?
Outside of pandemic viruses, ensuring our products and services are accessible to everyone should be a primary concern for all businesses. Nobody (I hope) disputes the fact that everyone, regardless of capabilities, should be able to access and participate on the internet unimpeded. We know that disabilities affect around 20% of the UK’s population, and that about 71% of people with disabilities would leave a site if it was difficult for them to use. And yet, fully accessible websites are not nearly widespread enough. A study of over a million popular site homepages just last year found that 97.8% had accessibility failures. 97.8%!!
Aside from the ethical argument, let’s examine some of the other reasons that accessibility should be a priority.
Legal
We’ve already discussed the enormous number of lawsuits being failed against businesses for not making their websites sufficiently accessible. But what does the law actually say about accessibility?
2019 saw the introduction of the European Accessibility Act, which enforces accessibility criteria for ticketing machines, computers and operating systems, smartphones, banking services and ecommerce among others. In terms of ecommerce, the Act states that ‘the information content shall be available in text EN 16 EN formats that can be used to generate alternative assistive formats to be presented in different ways by the users and via more than one sensory channel’, and that ‘alternatives to non-text content shall be provided’. Finally, the Act states that site owners should be ‘making websites accessible in a consistent and adequate way for users’ perception, operation and understanding, including the adaptability of content presentation and interaction, when necessary providing an accessible electronic alternative; and in a way which facilitates interoperability with a variety of user agents and assistive technologies available at Union and international level’.
Of course, there’s quite a lot to unpack here, but the key points suggest that:
- All site content should be available in formats that don’t rely on just one sensory channel (e.g. colour coding alone is not enough to highlight or identify certain elements. You should also provide a text-based description that could be read as part of an audio description).
- This means that all informational content on a site should be text-based, or where it cannot be text-based, it should have a text-based alternative.
- It should be compatible with assistive technologies so that it can be presented in an appropriate format for all users.
- Users need to be provided with information about the site’s accessibility features.
And that’s just the EU. In the UK, Web Accessibility is covered by the Equality Act 2010, which states that site owners must make ‘reasonable adjustments’ to make their site accessible, requiring site owners to anticipate the needs of disabled customers. As of yet, this hasn’t been tested in court, but the Royal Institute for the Blind has brought about legal action against a number of companies who have failed to do so, all of which have been settled out of court.
In the US, Web Accessibility is covered under the Americans Disability Act Title III. While there is no specific regulation surrounding websites, there is strong precedent for legal action against owners of inaccessible sites.
Read more about international legislations surrounding Web Accessibility.
Brand Favour
This is common sense. If you make the necessary effort to be fully inclusive and ensure your site is fully accessible to everyone, you are likely to garner favour among your customers. Similarly, if your site is inaccessible and difficult to use, you’re likely to drive potential customers away, and straight to your more accessible competitors. When you consider that 73% of people with accessibility requirements report that they had experienced barriers on more than a quarter of websites that they visited for the first time, it’s easy to see why users with accessibility needs may prefer to stick with the brands that cater to their needs rather than shop around and encounter new issues.
Further to that, a survey by Accenture found that when a brand doesn’t take the right stance on social issues like accessibility, 47% of customers are likely to walk away, with 17% never to return!
Enhanced User Experience Overall
Many accessibility features don’t just benefit users with disabilities. Often, accessibility features are just good user experience. Plain and Simple. For example, close captioning video content isn’t just useful for users with auditory impairments – it’s useful for everyone (most people view video content with their sound turned down). Using great heading structure and breaking content down with bullet points and well-described (alt tagged) imagery isn’t just useful for users of screen-readers – it’s useful for anyone scanning a page to find the information they want quickly.
Growing Need for Accessibility
In a 2018/19 report by the Department of Work & Pensions, 44% of state-pension aged adults in the UK reported having a disability. The UK has an ageing population (the ONS predict the UK will have an additional 8.6million people over the age of 65 in the next 50 years) so it’s reasonable to assume that as the population ages, the demand for accessible websites will also grow.
There is also an increasingly huge number of services available online; banking, online shopping, dating, grocery shopping, basic services like paying gas and electricity bills to name a few. It’s reasonable to suggest that as demand for online services like these increases, demand for these services to be accessible will also increase.
Financial
Finally, how is improved web accessibility likely to impact upon our bottom lines? Back in 2015, a study by the ‘Extra Costs Commission’ found that failing to meet accessibility requirements could mean losing out on your share of £420 million each week.
We’ve already discussed the fact that 71% of users with disabilities will click away from a site if they find it difficult to use. These customers were found to have an annual spending power of just under £12 billion in the UK, and 82% of users with accessibility requirements would spend more if websites we more accessible. People with access needs were found to be less likely to shop for items like clothing online, commonly citing poor product descriptions as the reason.
Web Accessibility Tips
The WCAG guidelines have around 400 accessibility criteria, which can be quite an undertaking when looking to retrofit accessibility features on an existing site! However, there are a number of simple fixes you can use to quickly improve your site’s accessibility, with relatively little, or even no development resource required!
Ensure Your Pages Have Correct Heading Structure
H1s for page titles, H2s for subtitles etc. For users scanning a page with a screen reader, making subheadings bold may not be enough to differentiate them as subheadings, Marking them up correctly ensures everyone can scan content effectively. Avoid using H2s and H3s in the navigation.
Mark Up Content Using HTML5
Semantic mark up like <header> and <nav>, or correctly structing tables with <th> and <tr> makes it much easier to navigate and understand pages using AT.
Review Your Alt Tags
Review your image alt tags from the perspective of a visually impaired user. Did the description enhance your experience on the page? Or was it likely just an unnecessary delay?
Review Colour Palettes
Ensure your text and backgrounds have enough colour contrast to be easily readable for people with visual impairments. Bear in mind, however, that very bright, bold colours can be difficult for people with autism spectrum or dyslexia to read.
Review Readability
Is your content easily readable? Large, heavy blocks of text can be difficult for some users. You should also avoid idioms or figures of speech if possible.
Ensure Buttons and Forms are Correctly Labelled
Making sure every form element and button has a descriptive label makes it easier for users of screen readers to identify what it is for.
Ensure Animated or Video Content Can Be Paused
These can detract from a user’s understanding and can be distracting.
Provide Transcripts for Audio or Video Content
Provide transcripts and descriptions below video or audio content so that users with auditory or visual impairments can also access it.
Don’t Embed Text in Imagery
Especially where the text is important to the flow of the page, do not embed the text in the image itself. This is because screen readers cannot detect text if it is a part of an image. This includes embedding titles in banner images or navigation elements. Overlay images with HTML text to ensure screen readers can access it.
Use Images and Diagrams to Reinforce Text
Particularly for users with dyslexia, images to reinforce or add a visual aid to text-based content can make text easier to digest. Add useful, descriptive alt text for visually impaired users.
Left Align Text
Improves readability, particularly for users with dyslexia.
Make Sure You Use More than One Sensory Channel to Convey Meaning
For example, use text-based labelling in conjunction with colour-coding. Or if you include hyperlinks, making them a different colour may be difficult for some users to see, so also format in bold.
Use Readable Font Sizes
Font size of 16px is generally considered readable.
Ensure CTAs Are Large Enough, Particularly on Mobile
Small CTAs or interactive elements may be particularly difficult for users with motor disabilities. Make sure they have plenty of whitespace around them so that users don’t accidentally press the wrong thing.
Include Shortcuts or Anchor Links
If you have pages containing a lot of content, including a table of contents at the top of the page with descriptive jump links can be useful for users who don’t want to read the entire page to get to the piece of information they want.
If you’d like us to audit your site for Web Accessibility, feel free to reach out and chat to us about your needs!
