Your organisation may be looking at building a new website or looking at ways that you can make your current site more accessible. Whichever way you are beginning your A11y journey, our blog will talk you through the importance of accessible web development and best practices for developers.
As a web developer, you most likely understand the importance of implementing clean code, but do you know why accessibility in web development is crucial to society?
To start with, it’s important to understand the basics of accessibility:
- Who is affected by poor digital accessibility
- How do those with disabilities access a website
- How can inclusive web development benefit your organisation as whole
How Web Content Accessibility Guidelines (WCAG) can help you to develop a site for everyone
Web Content Accessibility Guidelines (WCAG) provide a framework that developers should work towards in order to make content more accessible to users with disabilities. Though it’s a technical document, it is written in simple language. The guidelines lay out certain requirements, known as success criteria, that you can implement in most types of digital content.
WCAG has three levels of conformance. To meet the UK government accessibility requirements services must achieve WCAG 2.1 Level AA standard.
The four principles of accessible design
WCAG 2.1 is based on four design principles, known by the acronym POUR. This is something to keep in mind with any web project – question has it been developed to be:
- Perceivable: Have you presented information and content in a way that nothing can go undetected or be invisible to the user?
- Operable: Can users operate your site with the controls they would normally use?
- Understandable: Is your site and content easy to understand, with consistent and user-friendly layouts?
- Robust: Is your content robust across a wide variety of technologies and platforms? This includes being accessible on varying assistive technologies, on multiple browsers, and a range of devices.
What’s the most common mistake made with digital accessibility?
I asked two of HeX’s expert developers what the number one mistake is that organisations make when it comes to accessibility in web development:
People saying that their website is accessible when they clearly aren’t. Apart from that, people not testing their sites. They can use a range of methods, but without testing this with automated AND manual testing they will never know the true impact. Using real users is the best way forward.
James Hall: HeX Creative Director
The most annoying thing for me is organisations not planning in accessibility from the start of a website build. It’s a lot more tricky to retrofit accessibility into a project that has already been built.
Tom Miller: HeX Front-end Developer
Avoid using accessibility overlays on your website
If you’re thinking about building an accessible website, or you’re looking for best accessibility practices, there’s a strong likelihood that you’ve come across the use of accessibility toolbars. These are also known as ‘accessibility overlays’.
We’ve put an in-depth overlays guide together that talks you through why these are actually bad for your site’s accessibility and how you can achieve better through web development.
10 accessibility website tips for developers
Assistive technology conveys semantic information that would normally be expressed to a sighted user through visual cues, such as formatting styles or positioning. To add this information, components can be customised using invisible labels, known as ARIA.
To enable accessibility on your site, check that your websites has:
- Clear focus states, indicating items such as links, buttons and controls.
- Unique descriptive page titles on each web page.
- Sufficient colour contrasts.
- Skip-to-content links, allowing users to skip large blocks of content.
- Buttons and links that are descriptive, e.g. don’t write ‘click here’.
- Alternative text is added to all imagery, explaining what is in the picture or diagram.
- No page timeouts. These should be removed as they can induce anxiety with some people.
- No elements or features that autoplay. Pop-up adverts should also be removed.
- Heading structures, making sure there is only one <h1> and no skipped heading levels.
- No moving or flashing elements on pages.
Testing your website’s accessibility
Testing your website is a complete necessity when it comes to digital accessibility. As digital platforms are ever-changing, this is something that should be done on a routine basis.
Simple tests that web developers can perform
As a bare minimum, you can perform simple tests, such as:
- Zooming into your website by 200% and checking that all features are in the same order and visible, with no overlapping text.
- Navigating through your website using only a keyboard. Check that you can tab in the same order, operate all features, complete actions such as filling in forms, and there is a visible reference as to whereabouts you are on the screen at all times.
- There are a range of free tools out there available to check your websites, which can be handy for quick tests on items such as colour contrasts and heading structures. However, sadly, they do not give you the full picture of how accessible your website actually is.
How to ensure that your site can be accessed by everyone
The only way to be sure that your website is accessible is by performing:
- Automated software scans
- Manual user reviews. HeX performs these reviews working in partnership with a team of pan-disabled user-testers from Shaw Trust Accessibility Services.
- Expert technical reviews of the site’s coding from accessibility expert developers.
Who better to test a website’s accessibility than people that rely on using assistive technology on a daily basis?
To get you started, we offer a free website accessibility health check that will assess the quality of your code. Alternatively, we can provide a full audit of your website with the above methods, where we can guide you through the changes needed, and give live demonstrations on how these site errors are impacting assistive technology users.
It’s time to make your website accessible
Accessible web development doesn’t need to be hard or time-consuming. Most of the time, it’s just a case of getting into good habits, and over time it will become part of your everyday routine.
By following the Web Content Accessibility Guidelines, the rewards of an accessible website are well worth the effort. Catering for different people’s needs will give your website a great reach and be more user-friendly for everyone that interacts with your site. Your Search Engine Optimisation (SEO) will more than likely improve, and you will protect yourself from any legal risk or liability that could happen from having an inaccessible site.
