-
Hajipur, Bihar, 844101
HTML Accessibility
HTML accessibility refers to designing web pages so that all users, including people with disabilities, can access content easily. Accessibility ensures that websites are usable by people with visual, auditory, motor, or cognitive impairments. By following accessibility guidelines, you make your website more inclusive, improve user experience, and comply with legal standards. In this chapter, you will learn the principles of HTML accessibility, techniques to implement it, and practical examples.
Why HTML Accessibility Is Important
Accessibility is not just a legal requirement; it enhances usability for everyone. Some reasons to implement accessibility:
-
People with disabilities can navigate and understand content.
-
Screen readers can interpret your page correctly.
-
Keyboard-only users can access all features.
-
Improves SEO and website reach.
-
Reduces bounce rates and improves engagement.
In countries like India, the Accessible India Campaign emphasizes making digital content usable for all, including visually or hearing-impaired users.
Key Principles of HTML Accessibility
Accessibility is based on four core principles known as POUR:
-
Perceivable – Information must be presented in ways users can perceive.
-
Use alt text for images.
-
Provide captions for videos.
-
Ensure contrast between text and background.
-
-
Operable – Users must be able to navigate and interact.
-
Keyboard navigation should be supported.
-
Buttons and links should be accessible.
-
Avoid content that flashes excessively.
-
-
Understandable – Content and interface must be clear.
-
Use clear headings and labels.
-
Maintain consistent navigation.
-
Use simple language for instructions.
-
-
Robust – Content must work across different browsers and assistive technologies.
-
Use semantic HTML tags.
-
Follow web standards.
-
Test with screen readers and other tools.
-
Using Semantic HTML for Accessibility
Semantic HTML tags give meaning to the content and help assistive technologies understand your page. Examples include:
-
<header>– for page or section headers -
<nav>– for navigation menus -
<main>– for main content -
<section>– for grouped content -
<article>– for independent content -
<footer>– for page footers
Example
<header>
<h1>Website Title</h1>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
</ul>
</nav>
</header>
<main>
<section>
<h2>Introduction</h2>
<p>This is the main content of the page.</p>
</section>
</main>
<footer>
<p>© 2025 Example Website</p>
</footer>
Semantic tags provide clear structure for screen readers and improve navigation.
Using Alt Text for Images
Alt text describes images to visually impaired users. Every <img> tag should have a meaningful alt attribute.
Example
<img src="teacher.jpg" alt="Female teacher explaining a lesson to students">
Avoid generic alt text like image1 or leaving it blank unless decorative.
Keyboard Accessibility
Ensure all interactive elements are accessible using the keyboard:
-
Links and buttons should receive focus.
-
Forms should have proper
labelelements. -
Skip links allow users to jump to main content.
Example
<a href="#maincontent" class="skip-link">Skip to main content</a>
<main id="maincontent">
<h2>Lesson Section</h2>
<p>Content goes here.</p>
</main>
ARIA (Accessible Rich Internet Applications) Attributes
ARIA attributes provide additional information for assistive technologies. Some common ARIA roles:
-
role="button"– identifies an element as a button -
aria-label="Close"– provides a label for screen readers -
aria-hidden="true"– hides non-essential elements
Example
<div role="button" aria-label="Close menu" tabindex="0">
×
</div>
The element now behaves like a button and is accessible via keyboard and screen readers.
Accessible Forms
Forms must be accessible to all users:
-
Each input should have a corresponding
<label> -
Use fieldsets and legends for grouped controls
-
Provide error messages and instructions
Example
<form>
<label for="name">Full Name:</label>
<input type="text" id="name" name="fullname" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<input type="submit" value="Submit">
</form>
This structure ensures that screen readers can associate labels with inputs.
Color Contrast and Text Readability
Ensure enough contrast between text and background. Tools like the WAVE Accessibility Tool can test contrast. Good contrast improves readability for visually impaired users.
Example
<style>
body {
background-color: #ffffff;
color: #222222; /* dark text on light background */
}
</style>
Avoid light grey on white or red on green combinations that are hard to read.
Accessible Multimedia
-
Videos should have captions or transcripts.
-
Audio content should provide text alternatives.
-
Avoid flashing content that can trigger seizures.
Example
<video controls>
<source src="lesson.mp4" type="video/mp4">
<track src="captions.vtt" kind="captions" srclang="en" label="English">
Your browser does not support the video tag.
</video>
Captions make the video accessible for deaf or hard-of-hearing users.
Testing HTML Accessibility
-
Use screen readers like NVDA or VoiceOver.
-
Test keyboard navigation by using
TabandShift + Tab. -
Validate pages with online tools like WAVE or Lighthouse.
-
Check semantic HTML usage and ARIA attributes.
Summary of HTML Accessibility
HTML accessibility ensures websites are usable by everyone, including people with disabilities. Using semantic HTML, alt text, proper labels, ARIA attributes, keyboard navigation, high-contrast text, and accessible multimedia helps create inclusive websites. Accessibility improves usability, SEO, and legal compliance. By following these guidelines, your webpages can reach a wider audience and provide a better user experience for all.
Practice Questions
Q1. Create a form with properly labeled input fields.
Q2. Add an image with descriptive alt text.
Q3. Convert a non-semantic layout into semantic HTML5 structure.
Q4. Use ARIA attributes to make a custom button accessible.
Q5. Create a table with captions and scope attributes.
Q6. Demonstrate keyboard navigation using tabindex.
Q7. Write an alert message using role="alert".
Q8. Build a navigation bar that is accessible for screen readers.
Q9. Write an accessible modal dialog example.
Q10. Fix accessibility issues in a sample form (missing labels, improper inputs).
