See the top five accessibility mistakes that are commonly made when designing or developing websites.
When designing a website, accessibility is often overlooked, yet it is crucial for ensuring that all users, including those with disabilities, can navigate and interact with content effectively. Making a website more accessible benefits everyone, not just those with impairments. If you have a user who can’t access the website, that could be a potential client or customer lost.
Here are the top five accessibility mistakes that are commonly made when designing or developing websites.
1. Missing or poor alt text for images
Alt text (alternative text) is essential for users who rely on screen readers to understand images. Many websites either leave it blank or use vague descriptions like “image” or “photo.” Proper alt text should clearly describe the image’s purpose, ensuring that visually impaired users can engage with the content just as sighted users do.
Fix: always provide meaningful alt text for images. If an image is decorative and does not add value to the content, use an empty alt attribute (alt=””) to prevent screen readers from reading it aloud.
2. Low contrast between text and background
Poor colour contrast can make text difficult to read, especially for users with visual impairments or colour blindness. Light grey text on a white background, for example, can be unreadable for many people.
Fix: use a contrast ratio of at least 4.5:1 for normal text and 3:1 for larger text, as recommended by the Web Content Accessibility Guidelines (WCAG). Online tools like the WebAIM Contrast Checker can help ensure compliance.
3. Lack of keyboard navigability
Many users rely on a keyboard rather than a mouse to navigate websites. If your site does not allow full keyboard functionality, such as tabbing through links and interactive elements, it becomes inaccessible.
Fix: ensure all interactive elements (links, buttons, forms) are accessible via keyboard navigation. Test your website by navigating it using only the Tab, Enter, and Arrow keys to identify any barriers.
4. Inaccessible forms
Forms that lack proper labels, error messages, or focus states can be frustrating for users with disabilities. Screen readers need to announce what each field requires, and users should be able to navigate forms without a mouse.
Fix: label form fields clearly and associate labels with their input fields using the element. Provide helpful error messages that specify the issue rather than just saying “invalid input.”
5. Using only visual indicators for information
Relying solely on colour or visual cues (such as “click the red button”) excludes users who are colour blind or visually impaired. Important instructions should not depend only on visual elements. Furthermore, sometimes images contain text but there is no way for someone to be able to read this text if they are visually impaired.
Fix: use text alongside colour indicators. For example, instead of “click the green button to continue,” use “click the green button labelled ‘Next’ to continue.” This ensures that all users, regardless of their ability to perceive colour, understand the instructions. Any images should have no text in them but instead have text in the alt text.
Final thoughts
Accessibility should not be an afterthought, it should be a fundamental part of website design. By addressing these common mistakes, you can make your website more inclusive and improve the user experience for everyone. Small changes can make a significant difference in ensuring your site is accessible to all users, regardless of ability.
