What Is Accessibility in HTML and Why Does It Matter?
Learn what accessibility in HTML means, why semantic elements, alt text, labels, and heading order matter, and how ARIA supplements native markup.
Expected Interview Answer
Accessibility in HTML means writing markup so that everyone, including people using screen readers, keyboard-only navigation, or other assistive technology, can perceive, understand, and interact with a page, primarily achieved through semantic elements, meaningful alt text, proper labels, and correct heading structure.
Semantic elements like <nav>, <button>, <header>, and <main> carry built-in meaning and behavior (keyboard focus, screen reader landmarks) that a generic <div> does not, so using them correctly is the first and biggest accessibility win. Images need descriptive alt attributes, form inputs need associated <label> elements, headings must follow a logical h1-h6 order without skipping levels, and interactive elements must be reachable and operable via keyboard alone. ARIA attributes (role, aria-label, aria-expanded) can patch gaps when semantic HTML alone is insufficient, but the first rule of ARIA is not to use it where a native HTML element would already do the job correctly.
- Makes the site usable for people relying on screen readers or keyboard navigation
- Semantic HTML also improves SEO since search engines parse meaning from it
- Reduces legal risk under accessibility regulations like WCAG/ADA
- Improves usability for everyone, not just users with disabilities
- Native semantic elements need less custom ARIA and JavaScript to behave correctly
AI Mentor Explanation
Accessibility in HTML is like ensuring a stadium's scoreboard, announcements, and gates work for every kind of spectator, not just those with perfect eyesight and hearing. Semantic markup is the properly labeled gate signage guiding wheelchair users to the right entrance instead of a blank wall with no signs.
Step-by-Step Explanation
Step 1
Use semantic elements first
Prefer <nav>, <button>, <header>, <main>, <label> over generic <div>/<span> so browsers and assistive tech get built-in meaning and behavior.
Step 2
Write meaningful alt text
Every informative <img> needs an alt attribute describing its content or purpose; decorative images use alt="".
Step 3
Maintain logical heading order
Headings go h1 through h6 in order without skipping levels, so screen reader users can navigate the page's outline correctly.
Step 4
Label every form control
Each input needs an associated <label> (via for/id or wrapping) so screen readers announce what the field is for.
Step 5
Ensure full keyboard operability
All interactive elements must be reachable via Tab and operable via Enter/Space, with a visible focus indicator at every step.
What Interviewer Expects
- Names concrete semantic elements and their accessibility benefit
- Explains alt text, labels, and heading order specifically
- Mentions keyboard navigation and focus visibility
- Knows ARIA supplements, but doesn't replace, semantic HTML
- Connects accessibility to both ethical and business/legal reasons (WCAG)
Common Mistakes
- Using <div onclick> instead of a real <button> for interactive elements
- Leaving alt attributes empty or filled with unhelpful text like 'image'
- Skipping heading levels (e.g., h1 straight to h4)
- Adding ARIA roles on top of elements that already have correct native semantics
Best Answer (HR Friendly)
“Accessibility in HTML means writing pages so that people using screen readers, keyboard navigation, or other assistive tools can use them just as effectively as anyone else. Practically, that means using proper semantic tags, meaningful image descriptions, labeled form fields, and a logical heading structure.”
Code Example
<label for="email">Email address</label>
<input id="email" type="email" required />
<img src="chart.png" alt="Quarterly revenue rising 18% year over year" />
<button type="button" aria-expanded="false">Show details</button>
<!-- Prefer <button> over <div onclick> so keyboard users get built-in focus and activation -->Follow-up Questions
- What is the difference between semantic HTML and ARIA attributes?
- How would you make a custom dropdown component keyboard accessible?
- What does WCAG stand for and what are its conformance levels?
- Why should decorative images use alt="" instead of omitting alt entirely?
- How does accessible HTML also benefit SEO?
MCQ Practice
1. Why is <button> preferred over a clickable <div> for interactive controls?
Native <button> elements are automatically focusable and operable via keyboard, and are announced correctly by screen readers, unlike a generic div.
2. What should alt text on a purely decorative image be?
An empty alt="" tells screen readers to skip the image since it carries no informational content, while omitting alt entirely can cause the filename to be read aloud instead.
3. What is the first rule of using ARIA attributes?
The WAI-ARIA authoring practices state that no ARIA is better than bad ARIA — use native semantic HTML first, and only add ARIA to fill genuine gaps.
Flash Cards
What is the first accessibility rule about ARIA? — Don't use ARIA where a native semantic HTML element already provides correct behavior.
What should informative images always have? — A descriptive alt attribute explaining the image's content or purpose.
What does correct heading order provide? — A logical page outline (h1-h6, no skipped levels) that screen readers can navigate directly.
Why use <button> instead of a clickable <div>? — It gets built-in keyboard focus, activation, and screen reader announcement for free.