Why accessibility matters in HTML

Introduction

Accessibility means making websites easy for everyone to use, including people with disabilities. It helps more people enjoy and understand your content.

When building a website that anyone can visit, including people with vision or hearing difficulties.

When you want your website to work well with screen readers or keyboard navigation.

When you want to follow laws or guidelines that require websites to be accessible.

When you want to improve your website's usability for all users, not just those with disabilities.

When you want to reach a wider audience and show you care about all visitors.

Syntax

HTML

No specific code syntax applies here, but accessibility involves using semantic HTML elements and ARIA attributes properly.

Use semantic HTML tags like

,

,

,

to help screen readers understand the page structure.

Add ARIA labels and roles to describe elements when needed for assistive technologies.

Examples

This button has an ARIA label to describe its purpose to screen readers.

HTML

<button aria-label="Close menu">x</button>

Using the <nav> element helps users and assistive devices know this is the main navigation.

HTML

<nav>
  <ul>
    <li><a href="#home">Home</a></li>
    <li><a href="#about">About</a></li>
  </ul>
</nav>

Sample Program

This simple webpage uses semantic HTML and an ARIA label on the navigation to help screen readers understand the page structure.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Accessible Example</title>
</head>
<body>
  <header>
    <h1>Welcome to Our Website</h1>
  </header>
  <nav aria-label="Main navigation">
    <ul>
      <li><a href="#home">Home</a></li>
      <li><a href="#services">Services</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
  </nav>
  <main>
    <section>
      <h2>About Us</h2>
      <p>We make websites that everyone can use.</p>
    </section>
  </main>
  <footer>
    <p>Contact us at <a href="mailto:[e-mail]">[e-mail]</a></p>
  </footer>
</body>
</html>

Important Notes

Accessibility improves the experience for all users, not just those with disabilities.

Testing with keyboard only and screen readers helps find accessibility issues.

Good color contrast and readable fonts also help accessibility.

Summary

Accessibility means making websites usable by everyone.

Use semantic HTML and ARIA labels to help assistive technologies.

Accessible websites reach more people and follow good practices.

Practice

1. Why is accessibility important for websites?

easy

A. It reduces the website's file size significantly.

B. It makes the website load faster on all devices.

C. It allows websites to use more colors and fonts.

D. It helps people with disabilities use the website easily.

Solution

1. Step 1: Understand the meaning of accessibility

   Accessibility means making websites usable by everyone, including people with disabilities.

2. Step 2: Identify the main benefit of accessibility

   Helping people with disabilities use the website easily is the core reason for accessibility.

3. Final Answer:

   It helps people with disabilities use the website easily. -> Option D

4. Quick Check:

   Accessibility = Helping all users [OK]

Hint: Accessibility means helping everyone use the site [OK]

Common Mistakes:

• Confusing accessibility with website speed
• Thinking accessibility is about design colors only
• Believing accessibility reduces file size

2. Which HTML element helps improve accessibility by giving meaning to text?

easy

A. <strong>

B. <span>

C.

D. <div>

Solution

1. Step 1: Identify semantic HTML elements

   Elements like <strong> give meaning to text, indicating importance or emphasis.

2. Step 2: Compare with non-semantic elements

   <div> and <span> are generic containers without meaning; <br> is for line breaks only.

3. Final Answer:

   <strong> -> Option A

4. Quick Check:

   Semantic tags improve meaning = <strong> [OK]

Hint: Semantic tags add meaning, not just style [OK]

Common Mistakes:

• Using <div> or <span> for meaning
• Confusing
  with semantic tags
• Ignoring importance of semantic HTML

3. What will screen readers announce for this HTML snippet?

<button aria-label="Close menu"></button>

medium

A. Announces 'Close menu' because of aria-label

B. Announces 'button' only

C. No text announced because button is empty

D. Announces 'menu' only

Solution

1. Step 1: Understand aria-label usage

   The aria-label attribute provides a text label for assistive technologies when visible text is missing.

2. Step 2: Predict screen reader behavior

   Since the button has no visible text but has aria-label="Close menu", screen readers announce 'Close menu'.

3. Final Answer:

   Announces 'Close menu' because of aria-label -> Option A

4. Quick Check:

   aria-label text is read aloud [OK]

Hint: aria-label gives hidden text for screen readers [OK]

Common Mistakes:

• Assuming empty button has no announcement
• Thinking aria-label is ignored
• Confusing aria-label with visible text

4. Identify the accessibility issue in this code:

<img src="logo.png">

medium

A. Image tag should be closed with </img>

B. Image source file is incorrect

C. Missing alt attribute for image description

D. Image size is too large

Solution

1. Step 1: Check for alt attribute in img tag

   Images must have alt text to describe them for screen readers and accessibility.

2. Step 2: Identify missing alt attribute

   The img tag lacks alt="...", so screen readers get no description.

3. Final Answer:

   Missing alt attribute for image description -> Option C

4. Quick Check:

   Images need alt text [OK]

Hint: Always add alt text to images [OK]

Common Mistakes:

• Thinking <img> needs closing tag
• Ignoring alt attribute importance
• Assuming file path errors are accessibility issues

5. You want to make a navigation menu accessible. Which combination is best?

<nav>
  <ul>
    <li><a href="#home">Home</a></li>
    <li><a href="#about">About</a></li>
  </ul>
</nav>

hard

A. Add role="button" to <nav> and remove <ul> list

B. Add aria-label="Main menu" to <nav> and ensure links have clear text

C. Use only <div> tags with onclick handlers for links

D. Add tabindex="-1" to all links to skip them

Solution

1. Step 1: Use semantic <nav> and list structure

   The code uses <nav> and <ul> with <li> and <a>, which is correct semantic structure for navigation.

2. Step 2: Improve accessibility with aria-label and clear link text

   Adding aria-label="Main menu" to <nav> helps screen readers identify the menu. Clear link text ensures users understand each link.

3. Final Answer:

   Add aria-label="Main menu" to <nav> and ensure links have clear text -> Option B

4. Quick Check:

   Semantic nav + aria-label = accessible menu [OK]

Hint: Use semantic nav + aria-label for menus [OK]

Common Mistakes:

• Misusing role="button" on nav
• Replacing semantic tags with divs
• Removing links from keyboard navigation