HTML Accessibility
Build web pages that everyone can use, including people with disabilities
Why Accessibility Matters
Definition:
Web accessibility means designing and coding your website so that people with disabilities (for example, those using screen readers or keyboard navigation) can perceive, understand, navigate and interact with your content.
Headings & Page Structure
Use a clear heading hierarchy with exactly one <h1> per page and then nested <h2>, <h3>, etc. Screen readers rely on headings to help users navigate.
Good vs Poor Heading Structure
- Good:
h1 → h2 → h3in order, no skipped levels. - Poor: jumping from
h1straight toh4just for visual styling.
Use CSS to change visual size instead of misusing heading levels.
Alternative Text for Images
Always provide meaningful alt attributes on <img> elements to describe the image content for users who cannot see it.
Alt Text Examples
<img src="team-photo.jpg"
alt="The WebDev team standing together in the office">
<!-- Decorative image -->
<img src="divider.png" alt="">ARIA Landmarks & Roles
ARIA landmarks (for example, role="main", role="navigation") and HTML5 semantic elements help assistive technologies understand the layout of your page.
Example: Landmarks with Semantic Elements
<header>
<nav>...</nav>
</header>
<main>
<article>...</article>
</main>
<footer>...</footer>In most cases, native HTML5 elements already provide appropriate landmark roles, so you don’t need to add ARIA roles manually.