Creating inclusive web pages
Making sure your pages work for people with a wide range of abilities and disabilities. It is not just about ticking boxes on a checklist. It is about building sites that are genuinely usable for everyone.
Understanding web accessibility
Web accessibility means designing and building websites, tools, and technologies so people with disabilities can use them. That covers auditory, cognitive, neurological, physical, speech, and visual impairments – and plenty of situational barriers too (bright sunlight, a broken mouse, and so on).
Why accessibility matters
- Inclusivity: Everyone deserves equal access to information and functionality on the web.
- Legal compliance: Many regions require web accessibility by law.
- Broader reach: Accessible websites can reach a wider audience.
- SEO benefits: Many accessibility practices align with SEO best practices.
Key principles of web accessibility
The Web Content Accessibility Guidelines (WCAG) summarise their principles as POUR:
- Perceivable: Information and user interface components must be presentable in ways users can perceive.
- Operable: Components and navigation must be operable.
- Understandable: Information and operation of the user interface must be understandable.
- Robust: Content must be robust enough to be reliably interpreted by a wide variety of user agents, including assistive technologies.
Implementing accessibility in HTML
Here are some practical ways to build accessibility into your pages from the start.
Using semantic HTML
Semantic HTML elements like <header>, <nav>, <main>, <footer>, <article>, and <section> give screen readers useful context about what each part of the page is for.
<main role="main">
<article>
<header>
<h1>Understanding Web Accessibility</h1>
</header>
<!-- Article content -->
</article>
</main>Alt text for images
Always provide descriptive alt text for images so screen readers can describe them to visually impaired users.
<img src="accessible-web.jpg" alt="Illustration of accessible web practices">Keyboard navigation
Make sure all interactive elements work via keyboard. Use <button>, <input>, <a>, and other focusable elements appropriately – not everything needs to be a clickable <div>.
<a href="#" tabindex="0">Read more</a>ARIA (Accessible Rich Internet Applications) roles
ARIA roles add extra context for assistive technologies. For example, role="banner" for the header or role="navigation" for the navigation menu.
<nav role="navigation">
<!-- Navigation links -->
</nav>Form accessibility
Label all form elements clearly using the <label> tag. Where a visible label is not practical, use aria-label.
<label for="name">Name:</label>
<input type="text" id="name" name="name" aria-label="Name">Colour contrast and text size
Text needs enough contrast against its background to be readable. WCAG specifies minimum contrast ratios. Tools like WebAIM’s Contrast Checker can help you test colour combinations.
Example of good contrast
<p style="color: #000; background-color: #FFF;">This is a text with good contrast.</p>Responsive and adaptive design
Responsive design is part of accessibility. Your site should be usable on any device, regardless of screen size or resolution.
Testing for accessibility
Test regularly. Try a screen reader, navigate with the keyboard only, and use tools like WAVE or Lighthouse in Chrome DevTools.
Accessibility and SEO
Good accessibility practices often overlap with SEO. Clean semantic HTML, descriptive alt text, and a sensible document structure help both.
The role of developers and designers
Accessibility is a shared job. Developers and designers need to work together so it is built in from the start – not bolted on at the end when someone notices a problem.
Accessibility is not a one-off task you can forget about once the page is live. It is part of how you build the web. Get the basics right in your HTML and you are most of the way there.