Web Accessibility Best Practices
There are numerous strategies you can employ to enhance the inclusivity of your website. However, the following top ten tips stand out as easily actionable changes that can make a substantial impact, especially for organisations just beginning their journey toward improved web accessibility.
1. Use Accessible Colour Contrasts
Low colour contrast between your web copy and the background makes it difficult for readers with vision impairments and neurodivergent traits like dyslexia to distinguish letters and words on each page. When planning your website colour palette, you should:
- Aim for a contrast ratio of 4.5:1 for normal text (14 point) and 3:1 for large text (18 point +), as per current WCAG recommendations.
- Utilise online tools like the WebAim Contrast Checker to check colour contrast compliance.
- Avoid grey scaling, even if it’s for a just cause.
2. Avoid Using Colour to Convey Information
Relying on colour alone to indicate meaning excludes users with colour blindness and other vision impairments. Best practices for improved inclusivity include:
- Making links, buttons, and placeholder text easy to identify without relying on colour or having to hover over them with a cursor.
- Using patterns rather than single blocks of colour to denote different sections on visual displays like graphs and colour swatches.
- For images if no suitable alternative can be provided, ensure the image alt text properly describes the differences in colour with context to convey the missing information.
3. Ensure Keyboard Accessibility
Keyboard navigation is vital for users with temporary or long-term motor disabilities who may not be able to use a standard computer mouse or laptop trackpad. To optimise your website for keyboard navigation, you should:
- Ensure all interactive elements are reachable and usable through keyboard input.
- Implement keyboard shortcuts for essential functions like submitting forms and accessing the search bar and settings features.
- Test your website using only a keyboard to identify and resolve any remaining navigation issues.
4. Ensure Form Fields are Accessible
Website visitors using screen readers and other assistive technologies often encounter difficulties with poorly designed web forms. To ensure everyone can understand and submit your online forms, you should:
- Use text or symbols like asterisks to denote required fields.
- Provide clear instructions and error messages to help people correct errors.
- Provide text input alternatives to inaccessible content, such as date pickers.
- Provide options to extend time limits for form completion.
5. Provide Descriptive Anchor Text
Descriptive anchor text is essential as it provides context and aids comprehension for users relying on screen readers and those navigating without visuals. Consider these critical criteria for writing more inclusive descriptive text:
- Use descriptive and concise anchor text that clearly indicates the link’s destination.
- Replace generic phrases like “click here” or “read more” with action-oriented anchor descriptions that describe the user’s next steps, such as “explore our services” or “download the guide.
- Ensure anchor text is unique across your website to avoid confusion that may result from duplication.
6. Provide Alt Text on Images
Images should contain descriptive alt text that provides accurate context for people who cannot see the image clearly – whether due to visual impairments or poor internet connectivity, etc. To improve the calibre of the information that accompanies images, you should:
- Use text that is specific and accurately conveys the content and purpose of each image.
- Avoid ‘stuffing’ alt text with keywords if they do not apply to the image.
- Increase the opacity of images where text is overlaid to make it readable.
7. Use Interactive Elements that are Easy to Identify
Clear and distinguishable interactive elements enhance usability for all users, and particularly those with cognitive or visual impairments. To make your website usable by everyone, you should:
- Ensure status indicators and interactive elements like toggles or checkboxes have clear visual cues aside from colour – like shape or size adjustments.
- Test all interactive elements with keyboard navigation to confirm accessibility.
- Ensure touch-targets are large enough so that they can be easily clicked on all device types.
8. Ensure All Text is Readable
Ensuring readable text is a fundamental aspect of web accessibility. Font size, typeface, and spacing can significantly impact user comprehension. To optimise text readability, you must:
- Use a font size of at least 16px and ensure that text can be zoomed to 200%, as per WCAG recommendations.
- Use dyslexia-friendly fonts like Lexend that reduce visual stress for readers.
- Avoid double spacing that can cause ‘rivers’ of white between words that impact readability for those with neurodivergent brains.
9. Provide Audio Alternatives
Individuals with hearing difficulties and people who visit your website in noisy environments often can’t hear audio elements sufficiently. Plus, many mobile users watch videos on silent mode during their breaks and commutes. So, ensuring alternative formatting on multimedia content is essential for good video accessibility. Make your audio online content accessible by:
- Providing closed captions and transcripts on all videos.
- Ensuring all accompanying text is accurate and well-timed.
- Ensuring sound is easy to turn on and off in-video.
10. Utilise Hierarchal Headings
When webpages are not formatted using proper headings to denote structure, it’s hard for site visitors – especially those using screen readers – to skim/scan each page to gain an overview of the key information. For this reason, and to abide by established SEO best practices, it’s recommended you:
- Use only one H1 per page, usually for the page title.
- Break the rest of the copy up with H2-H6 tags with subheaders that reflect the structure and hierarchical sequence of the content.
- Avoid using headings for formatting purposes. Use appropriate markup instead.