Why accessibility matters in HTML - See It in Action

Why Accessibility Matters

📖 Scenario: You are creating a simple web page to explain why accessibility is important for everyone. This page will have a heading, a paragraph, and a list of reasons. You want to make sure the page is easy to read and accessible for all users, including those using screen readers or keyboard navigation.

🎯 Goal: Build a basic accessible HTML page with a clear heading, a descriptive paragraph, and a list of reasons why accessibility matters. Use semantic HTML elements and add an aria-label to the main content area for screen readers.

📋 What You'll Learn

Use semantic HTML5 elements like <header>, <main>, and <section>.

Add a heading with the text 'Why Accessibility Matters'.

Include a paragraph explaining accessibility in simple words.

Create an unordered list with exactly three reasons why accessibility is important.

Add an aria-label attribute to the <main> element describing the content as 'Accessibility information'.

Ensure the HTML includes lang, charset, and viewport meta tags for proper accessibility and responsiveness.

💡 Why This Matters

🌍 Real World

Creating accessible websites ensures that all users, including those with disabilities, can access information and services online easily.

💼 Career

Web developers must build accessible sites to meet legal standards and provide inclusive user experiences.

1

Create the basic HTML structure

Write the basic HTML5 skeleton with lang="en" in the <html> tag. Inside the <head>, add the <meta charset="UTF-8"> and <meta name="viewport" content="width=device-width, initial-scale=1.0"> tags. Then add a <title> with the text 'Why Accessibility Matters'.

HTML

Hint

Remember to add lang="en" to the <html> tag and include the charset and viewport meta tags inside <head>.

2

Add header and main sections

Inside the <body>, add a <header> element containing an <h1> with the text 'Why Accessibility Matters'. Then add a <main> element with an aria-label="Accessibility information" attribute.

HTML

  
  
  Why Accessibility Matters


  

Hint

Use semantic tags: <header> for the heading and <main> for the main content. Add the aria-label to <main>.

3

Add paragraph and list inside main

Inside the <main> element, add a <section>. Inside this section, add a paragraph <p> with the text 'Accessibility helps everyone use the web easily and fairly.'. Then add an unordered list <ul> with these three list items <li>: 'Supports people with disabilities', 'Improves user experience for all', and 'Follows legal requirements'.

HTML

  
  
  Why Accessibility Matters


  
    Why Accessibility Matters
  
  
    
  

Hint

Wrap the paragraph and list inside a <section> inside <main>. Use an unordered list <ul> with three <li> items.

4

Add footer with contact info

After the <main> element, add a <footer> element containing a paragraph <p> with the text 'Contact us at [e-mail]'.

HTML

  
  
  Why Accessibility Matters


  
    Why Accessibility Matters
  
  
    
      Accessibility helps everyone use the web easily and fairly.
      
        Supports people with disabilities
        Improves user experience for all
        Follows legal requirements
      
    
  
  

Hint

Add a <footer> after <main> with a paragraph containing the contact email.

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