For us it doesn’t matter if we’re crafting small informational sites or expansive e-commerce platforms, one goal remains constant: to optimise our code for maximum visibility and traffic. By extension, this means making our websites as inclusive as we can.
How to approach web accessibility
It sometimes seems like web accessibility is treated as if it’s separate to the main job of designing and building a website. While there’s no doubt it can be viewed like this, doing so makes the whole job of meeting the relevant standards more time consuming.
To achieve high standards of accessibility it must be factored into the design stage as well as the development and testing stages. Far easier to consider as a key factor at every stage rather than reverse engineer in at the end.
The process of achieving accessibility
One of the most basic steps comes during the very early stages of design when developing colour schemes where it’s important colours are checked to guarantee sufficient contrast. To prevent issues later on we therefore run every colour palette developed as part of the mood board stage through a contrast checker.
Our next steps involve refining our web page designs to maximise accessibility.
What this means in practice is that you need to have obvious controls for animated sliders, you need to streamline complex layouts, and ensure content follows a clear and intuitive flow down the page.
By prioritising these elements, it’s possible to enhance the user experience for all making our platforms as inclusive and user-friendly as we can.
Useful accessibility tools
As you might expect, when it comes to website accessibility the majority of work occurs during the development stage when we’re writing code for a website. At this stage we use a number of industry-standard tools to streamline our process when it comes to accessibility checking.
Through these tools we can evaluate individual pages, or an entire site against W3C and ADA accessibility requirements. They can highlight faults, errors, and areas for improvement, whilst also providing recommendations on how to optimise code for better accessibility.
Adapting for accessibility
We mentioned above and have spoken in our article on ‘How to make colours work for you‘ how important it is to ensure all colours adhere to contrast requirements, particularly with text and icons.
Once you’ve confirmed your colours work, or adapted them if you need to, the next crucial step is considering how visitors interact, navigate, and use your website.
Besides using a mouse or touch for navigation, another popular method is using the keyboard or additional software. These alternatives rely on websites being coded to clearly indicate in the code what buttons and links do and where they will take users. So when we develop a website we check that all our code, whether it’s our bespoke code or third-party code, is clearly labelled. If not, we write custom JavaScript to inject the correct tags and labels on page load, feeding that information directly into the browser or software managing the navigation.
In line with prevailing trends, we are keen on incorporating animation and movement into our websites to aid engagement. Although animation undoubtedly adds excitement and appeal to a website, it’s crucial to recognise that it can present obstacles for visitors with accessibility requirements if not considered thoughtfully.
This is where accessibility tools can again be handy. They can help you identify animations that don’t meet accessibility standards, so we can then review and adapt accordingly through updating the code to ensure they can be controlled by the end user.
These are just a very few of the considerations that need to be taken into account when it comes to website accessibility. But doing so doesn’t need to be expensive or mean you can’t have everything you want, all it needs is some planning.
