Web Accessibility Standards
Understanding WCAG 2.2 guidelines and how they help create an inclusive web experience for everyone.
BS 8878: British Standard for Web Accessibility
BS 8878 focuses on the process of embedding accessibility into digital projects — from procurement to delivery. It emphasizes inclusion from the very beginning.
- Planning-based: Encourages decisions before development starts.
- Not a tech spec: Complements WCAG but does not replace it.
- Adopted by: Public services, councils, NHS platforms.
"Accessibility must be part of the digital strategy, not a feature added at the end."
GOV.UK Example
The GOV.UK Design System sets a gold standard. Every component supports keyboard navigation, screen readers, and visible focus.
<button class="govuk-button" data-module="govuk-button"> Start now </button>
✓ GOV.UK components are keyboard accessible, screen reader friendly, and highly visible.
✓ Semantic, visible focus, hover state, and contrast compliant.
Equality Act 2010
This act makes it unlawful to offer inaccessible digital services that disadvantage disabled users.
- Public bodies must meet WCAG 2.1 AA by law.
- Failure to comply can result in discrimination lawsuits or fines.
- Includes internal systems, PDFs, and websites.
Forms & Labels
Every form field must have a visible <label>. Placeholders are not labels.
<label for="email">Email</label>
<input id="email" type="email" aria-describedby="emailHelp" />
<p id="emailHelp">We'll never share your email.</p>We'll never share your email.
Screen Reader Support
Structure, ARIA roles, and labels must help screen reader users understand the interface.
- Use
role="alert"andaria-live="polite"for announcements. - Test with NVDA, JAWS, or VoiceOver.
- Don't overload with
aria-*— use semantics first.
<div role="alert" aria-live="assertive">
Your session has expired.
</div>✓ Alerts screen reader users of timeouts or errors without mouse interaction.
Focus Management
Interactive elements must receive keyboard focus in a logical order. Focus should never get "lost".
✓ Try using Tab key to see focus ring and test interaction.
Keyboard Navigation
All users — including those with no mouse — must be able to use Tab, Enter, and Esc.
- Do not trap focus inside modals.
- Pressing Esc should close modals or menus.
- Arrow keys should move between list items or radio buttons.
Visual Design & Contrast
Make sure text and buttons have sufficient contrast. Users shouldn't need perfect vision to read.
❌ Poor contrast
✅ Good contrast
Tool: WebAIM Contrast Checker
WCAG 2.2 Conformance Levels
Level A - Essential
The most basic level of accessibility. These are the minimum requirements that must be met to ensure basic accessibility.
Examples:
- Text alternatives for non-text content
- Keyboard accessibility
- No keyboard traps
- Basic color contrast
Level AA - Recommended
Addresses major, common barriers for users with disabilities. This is the level that most organizations aim to achieve.
Examples:
- Sufficient color contrast (4.5:1)
- Resizable text up to 200%
- Multiple ways to find content
- Consistent navigation
Level AAA - Optimal
The highest level of accessibility. These are enhancements that provide the best possible experience for users with disabilities.
Examples:
- Enhanced color contrast (7:1)
- Sign language interpretation
- Extended audio descriptions
- No timing constraints
The POUR Principles
Perceivable
Information and user interface components must be presentable to users in ways they can perceive.
Key Guidelines:
- Provide text alternatives for non-text content
- Provide captions and other alternatives for multimedia
- Create content that can be presented in different ways
- Make it easier for users to see and hear content
Operable
User interface components and navigation must be operable.
Key Guidelines:
- Make all functionality available from a keyboard
- Give users enough time to read and use content
- Do not use content that causes seizures
- Help users navigate and find content
Understandable
Information and the operation of user interface must be understandable.
Key Guidelines:
- Make text readable and understandable
- Make content appear and operate in predictable ways
- Help users avoid and correct mistakes
Robust
Content must be robust enough to be interpreted reliably by a wide variety of user agents, including assistive technologies.
Key Guidelines:
- Maximize compatibility with current and future tools
- Ensure content is accessible to assistive technologies
Ready to make your website accessible?
Our team of experts can help you achieve WCAG 2.2 compliance and create an inclusive digital experience.
Let's connect
Have questions about accessibility? Want to learn more about our services? We're here to help. Get in touch and let's start a conversation.