News Article
13th April 2022
The Importance of Web Accessibility
Web accessibility is key to creating a more inclusive web for all, breaking barriers that restrict users from using the web. A few small changes to your site can have an impact, not just on how visitors access your information, but ultimately, on how they experience your brand.
The services of businesses and brands are woven into the fabric of our day-to-day lives at almost every level. They’re inescapable. All of them, bar none, can be tweaked or adjusted just slightly, to make that service easier to use. For people with disabilities these small changes can be the difference between them using or not using them entirely. The web is no exception to this, with the guidelines set out by the W3C (the World Wide Web Consortium – an international community working to develop web standards) ever growing, constantly moving the web towards a more accessible place.
Accessibility can be defined simply as “the quality of being easily reached, understood or appreciated”.
So when we are talking about web accessibility we are simply talking about how easy it is for users to navigate and access the content on a website. This could be through mouse or keyboard navigation, text to speech voice readers etc. Making sure the experience and the outcome for every user is exactly the same, no matter how they get there.
Why is this important?
The web is an ever growing resource of information about all aspects of our lives. Whether you’re trying to find the best chocolate cake recipe, your nearest vaccine centre or you just want to stalk your ex. The web does it. An accessible web provides all that use it with the same equal opportunity to the information and knowledge that it holds. Allowing every user to participate equally in society.
In addition, an accessible website is a most effective way to do business with people with disabilities, if your site is the easiest site to use, you can grow an audience that keeps coming back. Many accessibility practices also overlap into mobile and desktop web design best practices, as well as search engine optimisation. With Google now adding CLS (Cumulative Layout Shift) as a ranking factor, sites are effectively being rewarded for making them more accessible and easier to use.
How to implement?
Now, if you are an experienced web developer reading this, you will likely know most of it already, but for those of you that aren’t, here are some standard practices that we use to improve our site accessibility.
Alt Tags
When a screen reader is going through a web page and it meets an image, it has no way of looking at that image and determining what it represents. Alt text is a small code snippet that you can add onto an image, that then describes what the image depicts. When read by a screen reader,the alt text of the image will be read aloud, describing it to the user. This is also great for SEO, as web crawlers like Googles’s will use this information to get a better understanding of a web page and index the images for search.
Correct HTML Structure
Similar to alt tags, using the correct HTML tag structure when building a site is vital for enabling screen readers to read the content on your site correctly. Making sure that content on the page is tagged correctly with H tag hierarchy, CTA’s are built using buttons and have the correct link tagging applied. There’s honestly a lot of them, so I won’t list them all. This again also helps with SEO, as site crawlers look at the code on your site deciphering what the content is about.
Keyboard Navigation
A bit more complicated than the last two points, keyboard navigation is vital for some users to navigate the web, using purely TAB and Enter to go through the content on a site. When doing so, the user needs the ability to interact with menus, forms, buttons and other controls the same way a mouse would, and when navigating down a page the content is then read in a logical order.
With this in mind, it is also important to style the focus on elements to highlight to the user what element they are currently tabbed over. It may also be essential to use tabindex to make sure your content is keyboard navigated in the correct order.
Colour Contrast
Colour Contrast is simply the difference between the fore and background colour. If the contrast between the two colours isn’t high enough, colour blind users will find it hard to read the content. There is a simple but very useful tool for testing which can be found here, giving you either a WCAG AA or AAA compliance pass/fail. This tool is here.
Conclusion
These are just some of the ways to improve a site’s web accessibility, all of which are standard practice and there are a plethora of other changes you can make to a site that can further enhance it’s accessibility. To find out more, visit the W3C website, they have a lot of documentation you can follow and additional information on the vision and design principles that underpin the organisation.
