03. Accessibility
Introduction
Section titled “Introduction”Web accessibility ensures that websites are usable by people with disabilities, including those using screen readers, keyboard navigation, and other assistive technologies. HTML provides semantic elements and attributes that improve accessibility. Creating accessible HTML benefits all users and is often required by law.
Semantic HTML
Section titled “Semantic HTML”Proper Structure
Section titled “Proper Structure”<nav aria-label="Main navigation"> <ul> <li><a href="/">Home</a></li> </ul></nav><main> <article> <h1>Article Title</h1> <p>Content...</p> </article></main>ARIA Attributes
Section titled “ARIA Attributes”aria-label
Section titled “aria-label”<button aria-label="Close dialog">×</button>aria-describedby
Section titled “aria-describedby”<input type="text" aria-describedby="help-text"><p id="help-text">Helpful instructions</p>aria-hidden
Section titled “aria-hidden”<span aria-hidden="true">Decorative icon</span>Form Accessibility
Section titled “Form Accessibility”Labels
Section titled “Labels”<label for="email">Email:</label><input type="email" id="email" name="email">Error Messages
Section titled “Error Messages”<input type="email" aria-invalid="true" aria-describedby="error"><span id="error" role="alert">Invalid email</span>Image Accessibility
Section titled “Image Accessibility”Alt Text
Section titled “Alt Text”<img src="photo.jpg" alt="Description of the image">Decorative Images
Section titled “Decorative Images”<img src="decoration.jpg" alt="" role="presentation">Best Practices
Section titled “Best Practices”Use Semantic Elements
Section titled “Use Semantic Elements”<!-- Good: Semantic --><nav>Navigation</nav><main>Content</main>
<!-- Avoid: Non-semantic --><div class="nav">Navigation</div>Provide Text Alternatives
Section titled “Provide Text Alternatives”<img src="chart.jpg" alt="Sales increased 20% in Q4">