A Practical Guide to Web Accessibility

Approximately 1 in 6 people globally live with some form of disability. In the UK, the Equality Act 2010 legally requires digital services to be accessible to disabled users. Despite this, WebAIM's annual survey of the top million websites consistently finds that over 96% have detectable WCAG failures on their homepages alone. Accessibility is simultaneously the most impactful and most neglected dimension of web quality.

The Four WCAG Principles

• Perceivable: Information must be presentable in ways users can perceive. Text alternatives for images, captions for video, sufficient colour contrast.
• Operable: All functionality must be accessible via keyboard. No keyboard traps. Users with motor impairments cannot use a mouse.
• Understandable: Content and UI must be understandable. Clear language, predictable navigation, helpful error messages.
• Robust: Content must be interpretable by assistive technologies. Valid HTML, proper ARIA roles, tested with actual screen readers.

The Quick Wins That Cover 80% of Issues

Most accessibility failures fall into a small number of categories. Fix these and you'll resolve the vast majority of real-world barriers: every image needs an alt attribute (empty string for decorative images), form inputs must have associated labels, interactive elements must be keyboard-reachable and have visible focus styles, colour contrast must meet 4.5:1 for normal text, and the page must have a logical heading hierarchy starting with a single <h1>.

ARIA: Use It Carefully

ARIA (Accessible Rich Internet Applications) attributes extend HTML semantics for dynamic content. The first rule of ARIA is: don't use ARIA if native HTML achieves the same result. <button> is better than <div role="button">. <nav> is better than <div role="navigation">. Incorrectly applied ARIA actively harms screen reader users by overriding correct browser behaviour. When building custom components — date pickers, carousels, comboboxes — use the ARIA Authoring Practices Guide as your implementation reference.

Testing: Beyond Automated Tools

Automated scanners (axe, Lighthouse, WAVE) catch roughly 30–40% of WCAG issues. The other 60% require human judgment. Add two manual test workflows: keyboard-only navigation (Tab, Shift+Tab, Enter, Space, arrow keys — can you complete every user journey?) and screen reader testing with NVDA on Windows or VoiceOver on Mac. Nothing replaces testing with actual disabled users, which most teams never do and should.