Please note that this article does not constitute legal advice. It only seeks to inform of the growing importance of accessibility in web design.
Web accessibility is important for all website owners, regardless of your target audience. Besides the obvious benefit that comes with creating a website that a larger audience can effectively use, building your website to be easily accessible comes with some added other benefits:
Improved Search Engine Optimization
There is an overlap between creating well-structured, machine-readable websites and optimising your on-page content for Search Engine Optimisation- search engines are, after all, machines! Over time, Google has also aligned its engine ranking factors to align closer to accessibility than in previous years. They even provide an accessibility performance metric so you can evaluate your site.
Overall User Experience
Accessible websites encourage the production of structured, semantic markup, resulting in a more user-friendly experience for everyone.
It’s the law
To comply with UK law and the Equality Act, website owners must make ‘reasonable adjustments’ to ensure that people with disabilities can access services- in other words, you must proactively consider the requirements of those with disabilities.
How to make your website accessible
It can be useful to approach web accessibility as an ongoing design practice built into your web design workflow rather than a singular pass/fail audit. Websites can change as you add content and usability improvements can always be made along the way.
Here are a few things to consider when improving your website for accessibility and some of the tools we have at our disposal-
Content– Write content in a way that is clear to understand and visually scan.
Layouts and Markup– Consistency in presentation and layout is key to creating an easily comprehensible site. Your website’s HTML must use logical markup for the given content using data structures such as hierarchical headings, lists, etc. where appropriate.
Colour Contrast– Foreground elements such as buttons and text should have sufficient contrast against background colours and images. Check your colour contrasts here
Legibility– Clear fonts should be used in appropriate sizes
Descriptive text for visual content– Images which contain visual context to the content being shown on screen should be tagged with alt text/captions which allow screen readers to describe the picture.
Appropriate hyperlink use– Links should accurately describe their target or intent for screen reader technologies. Aria labels can also provide an accessible link name where no accessible title is present (e.g. an icon link).
Simple Navigation– Menus should be clearly labelled with navigation markup and follow a semantic structure. Skip links allow keyboard navigators to skip over the menu on each page and jump straight into the page content. The use of a sitemap is also strongly advised.
Focusable components– Cards, buttons and other components should use a focus indicator for keyboard navigators to provide visual reference for the current selection so your users know where they are on the page.
How to evaluate your website’s accessibility
Now that you understand the importance of accessibility and what goes into implementing it correctly, you might be wondering how to test your own website.
Several third-party tools exist to analyse your site and provide you with an overall score and potential areas for improvement. The first tool people normally start with is Google’s Pagespeed insights, which has its own Accessibility metric out of a possible 100 points. This audit will inform you of any obvious issues, such as poor colour contrast, missing link labels, and poor tap target sizes. However, it won’t grant you insight into the day-to-day operations of those using your website with greater accessibility needs.
There are more comprehensive tools available, but the simplest and most natural way to get started evaluating your website is to pretend as if you need these accessibility requirements- low vision, no vision, and those who navigate with keyboard controls.
Is your website legible? Does the text stand out from any background colours and images in a clear and definable way?
Try turning on your device’s text-to-speech screen reader and look away from the screen. Do you get a clear idea of what is being presented on screen without looking? Are the link targets clear? Do the contextual images on the page use descriptive text?
Try navigating your website only using your keyboard (tab, shift-tab, arrow keys, enter). Can you navigate the menus and submenus without issue? Are the components focused appropriately?
Planning proactively for web accessibility can result in more performant websites and may save you from costly rebuilds further down the road. If you are in the market for a new website, please read the Web Design page for more info or get in touch to arrange a chat.