HTML — Lesson 22
HTML Accessibility (a11y)
Making your pages usable by everyone with ARIA and best practices.
HTML Accessibility (a11y)
Web accessibility ensures that everyone, including people with disabilities, can use your website. HTML has many built-in accessibility features.
ARIA Roles
ARIA (Accessible Rich Internet Applications) attributes communicate role and state information to assistive technologies.
<!-- Landmark roles -->
<header role="banner">...</header>
<nav role="navigation">...</nav>
<main role="main">...</main>
<footer role="contentinfo">...</footer>
<!-- Note: semantic elements already have implicit roles,
so <nav> is the same as role="navigation" -->
ARIA Labels
<!-- Label for elements without visible text -->
<button aria-label="Close dialog">×</button>
<!-- Label for form groups -->
<fieldset aria-labelledby="legend1">
<legend id="legend1">Personal Info</legend>
<input type="text" aria-describedby="name-help">
<span id="name-help">Enter your full name.</span>
</fieldset>
Keyboard Navigation
All interactive elements must be reachable and usable with keyboard only.
<!-- Make custom elements focusable -->
<div role="button" tabindex="0"
onkeydown="if(event.key==='Enter') activate()">
Click or press Enter
</div>
<!-- Skip navigation link -->
<a href="#main-content" class="skip-link">Skip to main content</a>
Alt Text for Images
- Informative images: Describe what the image shows
- Decorative images: Use
alt=""(empty alt) - Complex images: Provide long description nearby
<!-- Good alt text -->
<img src="chart.png" alt="Bar chart showing 40% sales increase in Q4">
<!-- Decorative image -->
<img src="divider.png" alt="">
Color Contrast
Text should have a contrast ratio of at least 4.5:1 against its background for normal text, and 3:1 for large text.
Tip: Test your pages with a screen reader (like NVDA on Windows or VoiceOver on Mac) and navigate using only the Tab key. If you can't use your site without a mouse, neither can many of your users.
Practice what you learned in the Deoit Editor — a free, browser-based code editor.
Open Editor →