Accessibility in HTML (A11y) — Interview Questions & Answers

Introduction to Accessibility (A11y)

Ques: What is Accessibility (A11y) in Web Development?

Ans: Accessibility (shortened as A11y) means designing websites so that everyone — including people with disabilities — can use, navigate, and understand your content.

It ensures access for users with:

• Visual impairments (blindness, color blindness)
• Hearing impairments
• Motor disabilities (difficulty using mouse)
• Cognitive disabilities

Ques: Why is Accessibility important in HTML?

• Improves user experience for all users
• Ensures legal compliance (WCAG, ADA, Section 508)
• Enhances SEO (screen readers and search bots read semantic HTML)
• Builds inclusive web applications

Ques: What does “A11y” mean?

Ans: “A11y” is a numeronym for “Accessibility” — there are 11 letters between “A” and “Y”.

Semantic HTML for Accessibility

Ques: What is Semantic HTML and why is it essential for accessibility?

Ans: Semantic HTML uses meaningful tags like <header>, <article>, <main>, <nav>, <footer>, <section> etc.

Screen readers rely on these to understand the structure of a page.

Example:

<main>
  <article>
    <h1>Accessibility in HTML</h1>
    <p>Semantic HTML improves screen reader experience.</p>
  </article>
</main>

ARIA (Accessible Rich Internet Applications)

Ques: What is ARIA in HTML?

Ans: ARIA (Accessible Rich Internet Applications) is a set of attributes that make dynamic or interactive web content accessible to screen readers.

Example:

<button aria-label="Open navigation menu">☰</button>

Ques: What are some common ARIA attributes?

Ques: When should you use ARIA?

Ans: When native HTML elements can’t provide accessibility.

Don’t overuse ARIA — use semantic HTML first!

Example:

Use <button> instead of <div role="button">.

Roles in ARIA

Ques: What is the role attribute used for?

Ans: role defines the purpose of an element to assistive technologies.

Example:

<div role="alert">Your form has been submitted!</div>

Common roles:

• role="button"
• role="navigation"
• role="dialog"
• role="banner"
• role="alert"

Alt Text for Images

Ques: What is alt text and why is it important?

Ans: The alt attribute provides alternative text for images.

It’s read aloud by screen readers and shown if the image fails to load.

Example:

<img src="logo.png" alt="Company Logo">

Keyboard Accessibility

Ques: What is Keyboard Accessibility?

Ans: Every interactive element on a website must be usable with a keyboard (no mouse).

Users navigate using keys like Tab, Enter, Space, Arrow, and Esc.

Ques: How to ensure proper keyboard navigation in HTML?

Ans: Use native elements like:

• <button> instead of <div>
• <a href="#"> instead of clickable <span>

Manage focus with:

• tabindex="0" — adds to tab order
• tabindex="-1" — allows focus via script only
• autofocus — automatically focuses on page load

Example:

<button tabindex="0">Submit</button>

Forms Accessibility

Ques: How can you make forms accessible?

Ans: Always associate labels properly:

<label for="email">Email:</label>
<input type="email" id="email" name="email">

• Add placeholders with caution — use labels instead.
• Use aria-describedby to give extra instructions.

Mark required fields:

<input type="text" aria-required="true">

Media Accessibility

Ques: How do you make audio/video content accessible?

Ans: Provide captions, subtitles, and transcripts.

Use <track> for subtitles:

<video controls>
  <source src="video.mp4" type="video/mp4">
  <track src="subtitles.vtt" kind="subtitles" srclang="en" label="English">
</video>

Color & Contrast

Ques: Why is color contrast important for accessibility?

Ans: Users with color blindness or low vision need sufficient contrast.

According to WCAG guidelines:

• Minimum contrast ratio: 4.5:1 for normal text
• 3:1 for large text

Accessibility Testing & Tools

Ques: What are some tools to test web accessibility?

Accessibility Laws & Standards

Ques: What are the key accessibility standards?