Let’s begin with some very important numbers.
- 16 million people in the UK have some form of disability (that’s nearly a quarter of the population)
- Over 2 million people are living with some form of sight loss
- 3 million people are colour blind
- There are around 11 million people in the UK who suffer with hearing loss
But why does this matter to you? Well, if you’re a business owner with a website, it means an awful lot. Businesses that prioritise digital accessibility experience an average 20% increase in market value, and 75% of users with access needs said accessibility is more important than price. So it pays to be accessible, as well as it just being the right thing to do.
But let’s start from the start…
So, what is web accessibility?
Web accessibility, sometimes abbreviated as “a11y” (a-eleven-y), is all about making sure websites are designed and built in a way that makes them usable, and accessible to everyone, regardless of any potential impairments and disabilities. It’s an essential element of the web development process, allowing for a diverse group of users, and is inclusive of those who may have visual, auditory, motor and cognitive disabilities.
Not only is it a case of social responsibility, but it’s also a legal requirement here in the UK for local authorities, government agencies, schools and universities and other public sector organisations. The UK implemented the Web Content Accessibility Guidelines (WCAG) under the Equality Act 2010, which requires that public sector websites and mobile applications must be accessible.
What are the Web Accessibility Standards?
If you’re worrying about how you’re meant to know what rules to know, then don’t worry! WCAG is a comprehensive and internationally recognised set of guidelines created to make web accessibility simpler for all. It’s organised into four main principles, each of which has associated guidelines and success criteria. These principles are: Perceivable, Operable, Understandable, and Robust.
Perceivable
Perceivable accessibility focuses on the way information and components are presented; users must be able to perceive content on the page, regardless of their sensory abilities. This can look like providing text alternatives for images (e.g. adding Alt descriptions to your images to describe what’s in it) or allowing users the ability to adjust the size and colour of text.
Other examples of perceivable accessibility include making sure your text, icons and elements (like buttons and links) have sufficient contrast ratio with the background, and, if including videos, providing additional audio tracks that describe visual information for people with vision impairments.
Operable
The operable guideline is all about making sure everyone is able to interact and use the website, regardless of their ‘input methods’. Input methods refer to things like a keyboard and mouse, voice commands, and eye tracking. To align with the guidelines outlined for operable accessibility, web developers should make sure that the website has clear and consistent navigation, and ensure that all functionality and interactive elements on a website can be operated using a keyboard alone.
Other ways websites can adhere to operable accessibility is to make sure any session timeouts or auto-logout features can be extended/adjusted, and allow users the option to pause, stop or hide moving or blinking elements for those with visual sensitivities.
Understandable
When considering understandable accessibility guidelines, it’s all about making sure that content and navigation on the website is clear to use, and simple to follow. This means the language used should be straightforward and easy to understand by a broad audience, user interactions should be consistent and predictable (e.g. Yes buttons in green and No buttons in red) and the fonts chosen should be legible, appropriately sized, and spaced well.
Headings should also be used to structure content, and clear instructions and error messages should be used on forms to help users complete forms or other actions.
Robust
Robust accessibility, the final principle of the Web Content Accessibility Guidelines (WCAG), focuses on making sure that web content and web applications are usable with a variety of current and future technologies, including assistive technologies. This means the design should be responsive for different screen sizes, support keyboard navigation, and can be accessed from a range of browsers.
This also involves making sure your website’s code is valid and follows industry standards to avoid errors, and that scripted content is robust by providing fallback content for users who may have JavaScript disabled or use older web browsers.
Why is web accessibility so important?
Web accessibility is crucial because it means that people with disabilities can access and interact with websites and other online content in a way that is equivalent to those without disabilities. Web accessibility promotes inclusivity by making digital content available to a diverse range of users, regardless of their abilities or disabilities. It means that everyone, including people with visual, auditory, motor, and cognitive impairments, can use and benefit from online resources.
Web accessibility improvements also tend to lead to a better overall user experience for all users, not just those with disabilities. For example, captions for videos benefit not only users with hearing impairments but also users in noisy environments or those who prefer to watch videos without sound. Search engines, like Google, will also consider accessibility factors when ranking websites. Websites with better accessibility often have improved SEO, leading to better visibility in search engine results.
There’s also the legal responsibilities. Many countries, like the UK, have laws and regulations in place that require websites to be accessible to people with disabilities. Failure to comply with these regulations could result in legal consequences and financial penalties.
How to make your website accessible
Making your website accessible involves incorporating design and development practices that ensure all users, including those with disabilities, can perceive, understand, navigate, and interact with your website. Here are some key steps to make your website more accessible:
Adhere to Web Content Accessibility Guidelines (WCAG):
Familiarise yourself with the WCAG. The guidelines are organised into three levels of conformance: A, AA, and AAA. Aim for at least Level AA compliance.
Provide text alternatives:
Use descriptive alt text for images so that users with visual impairments can understand the content. Ensure that non-text content, like images, charts, and graphs, has text alternatives.
Create semantic HTML:
Use semantic HTML elements to convey the structure and meaning of content. Properly structure headings, lists, and other elements to enhance screen reader navigation and understanding.
Ensure keyboard accessibility:
Make sure all functionality is accessible using a keyboard. Users with motor disabilities or those who cannot use a mouse rely on keyboard navigation.
Implement focus styles:
Ensure that users can easily identify which element has keyboard focus. This is important for users who navigate using a keyboard or other assistive technologies.
Provide captions and transcripts for multimedia:
Include captions for videos and provide transcripts for audio content. This benefits users with hearing impairments and also provides a text alternative for search engines.
Use ARIA (Accessible Rich Internet Applications) roles and attributes:
ARIA can enhance the accessibility of dynamic content and web applications. Use ARIA roles and attributes to provide additional information to assistive technologies.
Design for readability:
Use readable fonts, provide sufficient colour contrast, and allow users to resize text without loss of content or functionality. Consider the needs of users with low vision.
Conduct user testing:
Include people with disabilities in your user testing process. Their feedback can be invaluable in identifying real-world challenges and ensuring that your website is truly accessible.
Provide contact information for accessibility issues:
Include contact information for users to report accessibility issues. Demonstrating a commitment to addressing accessibility concerns reinforces a user-centric approach.
Testing your website’s accessibility (web accessibility tools)
Testing your website’s accessibility is a critical step in ensuring that it meets the needs of all users, including those with disabilities. There are various web accessibility testing tools available that can help you identify and address potential issues. Here are just a few of the most widely used tools:
Lighthouse
Lighthouse is an open-source, automated tool for improving the quality of web pages. It has audits for performance, accessibility, progressive web apps, SEO, and more.
How to use? You can run Lighthouse in Chrome DevTools, from the command line, or as a Node module. It provides detailed reports with actionable recommendations.
WAVE (Web Accessibility Evaluation Tool)
WAVE is a suite of evaluation tools that help authors make their web content more accessible to individuals with disabilities.
How to use? You can use the WAVE browser extension or the online WAVE tool to evaluate the accessibility of your web pages. It highlights potential issues and provides suggestions for improvement.
Axe Accessibility Checker
Axe is an accessibility testing toolkit developed by Deque Systems. It can be used as a browser extension, a command-line tool, or integrated into your development workflow.
How to Use: Install the Axe browser extension or use it through the developer tools in your browser. Run the tool on your web pages, and it will identify accessibility issues and offer guidance.
Pa11y
Pa11y is an open-source command-line tool designed to be run in CI/CD pipelines. It allows you to automate accessibility testing.
How to use? Install Pa11y globally or use it in your project. You can integrate it into your build process or run it manually, and it will output accessibility reports.
Web accessibility isn’t just a checkbox; it’s a fundamental commitment to inclusivity, equal access, and a positive user experience for everyone. By embracing the principles outlined in this guide and adhering to the Web Content Accessibility Guidelines (WCAG), you’re not only meeting legal requirements but also fostering an environment that empowers people of all abilities.
Make a difference today. Conduct an accessibility audit to identify areas for improvement. Engage with users who have diverse abilities to gather valuable insights. Prioritise accessibility in your design and development processes, ensuring that every digital experience is seamless and enriching for all. And if you’re not sure where to start, talk to us. It’s what we do.
