- Perceivable content means that information should be available through various senses, such as sight and sound, allowing visitors to understand and be aware of your website’s content. For instance, providing text alternatives for non-text content ensures that all users can perceive the information.
- Operable interfaces refer to functionality that is accessible via different input methods, including keyboard or assistive devices. This makes it easier for users with motor impairments to interact with your site, without disruption.
- Understandable information is crucial for helping users comprehend content and navigate seamlessly. This means using clear and concise language and providing intuitive navigation structures.
- Robust content ensures compatibility with a wide array of current and future devices and assistive technologies. This robustness guarantees that your web content remains accessible as technology evolves.
- Level A represents the minimum level of accessibility. It focuses on basic usability, ensuring that essential features are accessible.
- Level AA, the most commonly targeted level, and a must for any public body or publicly funded site, provides a significant degree of accessibility. It addresses a broader range of barriers, ensuring a better user experience for most individuals with disabilities.
- Level AAA offers the highest standard, aiming for full accessibility. This level is often challenging to achieve consistently across all content, but it sets an exemplary benchmark.
Choosing the right level of compliance for your organisation depends on the nature of your website and the needs of your audience. While Level AA is a practical goal for many, striving for Level AAA can further enhance your site’s accessibility.
It is important to mention that the law mandates that all public sector organisations comply with Level AA standards. This covers local councils, healthcare facilities, and public schools and colleges.
Alt text
Alternate text (alt text) is an essential component of web accessibility. It provides a textual description of images, which is crucial for visually impaired users who rely on screen readers. But it also benefits SEO, helping search engines understand your content better.
Effective alt text should be clear and descriptive, offering meaningful context without keyword stuffing. Avoid adding redundant information such as ‘Photo of’ or ‘Graphic of’ – keep it concise and informative. And this should apply to every image on your site.
Audio alternatives
Transcripts and closed captions (CC) are critical for making audio content accessible. Transcripts ensure that users who are deaf or hard of hearing can access the information. Captions on videos serve a similar purpose, benefiting not only those who struggle with hearing but also users in noisy environments or those who prefer reading.
Ensure sound can be easily turned on and off in videos, and all accompanying text must be accurate and well-timed. If you’re an avid social media user, you’ve probably noticed platforms like TikTok and Instagram catching on to these accessibility needs with auto-captioning features. This saves you the hassle of typing out the dialogue every single time. And good news for web developers too, YouTube and Vimeo offer the same features for those embedding videos into their sites.
Colour contrast
High colour contrast between text and backgrounds is vital for readability, especially for users with visual impairments. Testing your contrast ratios against WCAG standards can help identify areas for improvement. WCAG recommend a contrast ratio of at least 4.5:1 for foreground colours and 3:1 for background colours. You can use contrast checkers, such as WebAIM, to see if your colours meet Level AA standards.
Your colour choices should also account for users with colour blindness. Avoid over-relying on colour to convey information and instead use clear visual indicators to guide users.
If you’re unsure how users with colour blindness may view your web content, you can check the visibility here.
We’d recommend steering clear of these colour combinations altogether:
- Red & Green
- Blue & Purple
- Blue & Grey
- Green & Brown
- Green & Blue
Font legibility
Readable fonts are crucial to accessibility. Opt for fonts with adequate size and spacing to make your text easier to digest. Avoid elaborate decorative fonts in body text, as they can hinder readability. Instead, try using san-serif fonts, keeping sentence lengths to 15-20 words.
Allowing users to adjust text size and ensuring consistency in fonts across your site further supports accessibility. WCAG recommends using a font size of at least 16px, and ensuring that text can be zoomed up to 200% without a loss of content.
Keyboard navigation
Designing a keyboard-friendly site is essential for users with motor impairments who may not use a mouse. Incorporate focus indicators to show users where they are on the page, and ensure that menus and buttons are easily operable with a keyboard.
Users should be able to use the tab key to jump between selectable elements on the page, moving from left to right and top to bottom, similar to how you would read.
Thoroughly testing your site to confirm full keyboard accessibility can uncover issues that need addressing. This process is vital for aligning with accessibility standards and ensuring a seamless user experience.
Links & forms
Descriptive link text is essential for informing all users about the destination of a link. This is especially critical for screen reader users.
Many websites have links that take you to other content, but imagine you’re using a screen reader and all the links just say ‘click here’ or ‘read more.’ How would you know what those links are actually for? Instead, try phrases such as ‘explore our services’ or ‘download our guide’.
Clearly labelled forms assist users in understanding what input is required, making the completion of tasks more efficient. Error messages should be clear and guide users on how to correct issues. We’d recommend using text or symbols to show the required fields.
Heading hierarchy & content structure
A proper heading hierarchy is essential for both users and screen readers to navigate content logically. Using headers, lists, and other formatting consistently improves readability and comprehension.
A clear structure with a logical flow of content makes it easier for users to follow the information presented. Employing semantic HTML not only supports accessibility but also boosts your website’s SEO.
Start by using just one H1 per page, followed by H2-H6 tags to break up the rest of the copy that accurately reflects the structure of your content.
Interaction & animation
For users with vestibular disorders, too much motion can be problematic. By minimising motion or providing user control over animations, such as pause, stop or hide buttons, you make your site more inclusive. Simple, subtle interactions can enhance the user experience without overwhelming or distracting users.
As a general rule, WCAG suggests that no animation flashes more than 3 times per second as it can trigger epilepsy in some individuals.
