• Hajipur, Bihar, 844101

☰
❮
❯

HTML

HTML5 Basics

HTML Styling and Design

HTML Links and Media

HTML Layout and Structure

HTML Forms

HTML Graphics

HTML APIs

HTML Advanced Topics

HTML Accessibility

← Previous

HTML Accessibility means designing and coding web pages so that all users, including those with disabilities (like visual, auditory, motor, or cognitive impairments), can easily access, understand, and interact with content.

Accessibility follows WCAG (Web Content Accessibility Guidelines) and promotes the idea of an inclusive web.

🔹 Why Accessibility Matters

  • Legal compliance (e.g., ADA, Section 508)

  • Better user experience for everyone

  • Improves SEO and usability

  • Makes web content available to screen readers, keyboard-only users, and others with assistive technologies

🔹 Key Accessibility Features in HTML

1. Semantic HTML

Use meaningful elements like <header>, <nav>, <main>, <section>, <footer>, etc.

<header>
  <h1>Welcome to My Site</h1>
</header>
2. Alt Text for Images
<img src="logo.png" alt="Company Logo" />

Avoid empty alt="" unless the image is decorative.

3. Form Labeling
<label for="email">Email Address:</label>
<input type="email" id="email" name="email" />
4. Keyboard Navigation

Use tabindex, avoid onclick without a fallback, and ensure all interactive elements are reachable via keyboard.

5. ARIA (Accessible Rich Internet Applications) Attributes

Use role, aria-label, aria-hidden, etc., where needed:

<div role="alert">Form submission failed</div>
6. Using Headings Properly

Structure content with headings (<h1> to <h6>) in a logical order.

7. Accessible Tables

Include caption, thead, tbody, and scope:

<table>
  <caption>Employee Data</caption>
  <thead>
    <tr><th scope="col">Name</th><th scope="col">Role</th></tr>
  </thead>
  <tbody>
    <tr><td>Alice</td><td>Developer</td></tr>
  </tbody>
</table>

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).

HTML Accessibility Quiz

Q1: What does alt attribute in <img> tag do?

A. Sets background
B. Shows image size
C. Describes the image for screen readers
D. Makes image clickable

Q2: What HTML element is used to describe a table?

A. <head>
B. <title>
C. <caption>
D. <tablehead>

Q3: Which attribute improves screen reader understanding of custom components?

A. src
B. aria-label
C. style
D. onclick

Q4: What does role="alert" do?

A. Displays a popup
B. Triggers an alert box
C. Informs screen readers to announce it immediately
D. Highlights an element in red

Q5: Which HTML tag is not semantic?

A. <section>
B. <div>
C. <header>
D. <article>

Q6: What should you use to make a custom button keyboard-accessible?

A. <div> with no attributes
B. onclick only
C. role="button" and tabindex="0"
D. <style> tag

Q7: How can users without a mouse access web pages?

A. JavaScript
B. Voice command only
C. Keyboard navigation
D. Only via CSS

Q8: What does tabindex="0" mean?

A. Element is not focusable
B. Element is focusable in the tab order
C. Element gets ignored by browsers
D. Disables keyboard access

Q9: ARIA stands for:

A. Advanced Responsive Internet Application
B. Accessible Rich Internet Applications
C. Accessible Resource Input Area
D. Application for Reliable Interface Access

Q10: What is the first step toward making a site accessible?

A. Add animations
B. Use CSS Grid
C. Use semantic HTML
D. Add jQuery
← Previous
Login
Go Back Top