Semantic elements and screen readers in HTML - Mini Project: Build & Apply

Using Semantic Elements for Screen Reader Accessibility

📖 Scenario: You are creating a simple webpage for a local community center. The page should be easy to navigate for everyone, including people who use screen readers. Using semantic HTML elements helps screen readers understand the page structure better.

🎯 Goal: Build a basic webpage layout using semantic HTML elements like , , , , and so that screen readers can easily identify the page parts.

📋 What You'll Learn

Use semantic HTML5 elements to structure the page

Include a header with a page title

Add a navigation menu with links

Create a main content area with two sections

Add a footer with contact information

Ensure the HTML is valid and accessible

💡 Why This Matters

🌍 Real World

Many websites need to be accessible to people with disabilities. Using semantic HTML elements is a simple way to improve accessibility and usability for screen readers.

💼 Career

Web developers must create accessible websites. Understanding semantic HTML and screen reader support is essential for front-end development jobs.

1

Create the basic HTML skeleton with semantic elements

Write the basic HTML5 structure including <!DOCTYPE html>, <html lang="en">, <head> with <meta charset="UTF-8"> and <title> 'Community Center'. Then add the main semantic elements inside <body>: <header>, <nav>, <main>, and <footer>.

HTML

    
    Community Center


    

Hint

Start by typing the HTML5 document structure and add the main semantic elements inside the body.

2

Add content inside header and navigation

Inside the <header>, add an <h1> with the text 'Welcome to the Community Center'. Inside the <nav>, add an unordered list <ul> with three links: <a href="#home">Home</a>, <a href="#events">Events</a>, and <a href="#contact">Contact</a>.

HTML

    
    Community Center


    
        
    
    
        
    
    
    

Hint

Put the page title inside the header as an h1. Then create a list of links inside nav.

3

Add two sections inside the main content

Inside the <main> element, add two <section> elements. The first section should have an <h2> with text 'Upcoming Events' and a paragraph <p> with 'Check out our latest events and activities.'. The second section should have an <h2> with text 'About Us' and a paragraph <p> with 'Learn more about our community center and services.'.

HTML

    
    Community Center


    
        Welcome to the Community Center
    
    
        
            Home
            Events
            Contact
        
    
    
        
    
    

Hint

Add two section elements inside main, each with an h2 and a paragraph describing the content.

4

Add contact info inside the footer

Inside the <footer>, add a paragraph <p> with the text 'Contact us at [e-mail] or call 123-456-7890.'.

HTML

    
    Community Center


    
        Welcome to the Community Center
    
    
        
            Home
            Events
            Contact
        
    
    
        
            Upcoming Events
            Check out our latest events and activities.
        
        
            About Us
            Learn more about our community center and services.
        
    
    
        
    

Hint

Add a paragraph inside the footer with the contact email and phone number.

Practice

1. Which HTML element is most semantic for marking the main content of a webpage that screen readers should focus on?

easy

A. <main>

B. <div>

C. <span>

D. <section>

Solution

1. Step 1: Understand the purpose of semantic elements

   Semantic elements describe the role of content, helping screen readers know what is important.

2. Step 2: Identify the element for main content

   The <main> element specifically marks the main content unique to the page, guiding screen readers effectively.

3. Final Answer:

   <main> -> Option A

4. Quick Check:

   Main content uses <main> tag for screen readers [OK]

Hint: Main content uses <main> tag for screen readers [OK]

Common Mistakes:

• Using <div> which has no semantic meaning
• Confusing <section> with main content
• Using <span> which is inline and non-semantic

2. Which of the following is the correct syntax to define a navigation section that screen readers recognize as a menu?

easy

A. <nav> ... </nav>

B. <navigation> ... </navigation>

C. <menu> ... </menu>

D. <section role='navigation'> ... </section>

Solution

1. Step 1: Recall the semantic tag for navigation

   The <nav> element is the standard semantic tag for navigation menus.

2. Step 2: Check syntax correctness

   <nav> ... </nav> is valid HTML5 syntax recognized by screen readers.

3. Final Answer:

   <nav> ... </nav> -> Option A

4. Quick Check:

   Navigation uses <nav> tag [OK]

Hint: Use <nav> for navigation menus [OK]

Common Mistakes:

• Using non-existent <navigation> tag
• Confusing <menu> with <nav> (menu is different)
• Using <section> without role attribute

3. What will a screen reader announce first when reading this HTML snippet?

<header>
  <h1>Welcome</h1>
</header>
<main>
  <p>Hello world!</p>
</main>

medium

A. It will read the entire page as one block

B. "Hello world!" from the paragraph

C. It will skip the header and read main only

D. "Welcome" from the header's h1

Solution

1. Step 1: Understand screen reader reading order

   Screen readers read semantic elements in document order, starting with header content.

2. Step 2: Identify first readable text

   The <header> contains an <h1> with "Welcome", so it reads this first.

3. Final Answer:

   "Welcome" from the header's h1 -> Option D

4. Quick Check:

   Header content is read before main content [OK]

Hint: Screen readers read header before main content [OK]

Common Mistakes:

• Assuming main content reads first
• Thinking header is skipped
• Believing screen reader reads all at once

4. Identify the error in this HTML snippet that affects screen reader accessibility:

<div role='main'>
  <h2>Content</h2>
</div>

medium

A. Missing aria-label on the div

B. Using role='main' on a div instead of <main>

C. h2 should be h1 inside main

D. The div should have tabindex='0' for focus

Solution

1. Step 1: Check semantic correctness

   While role='main' can be used, the semantic <main> element is preferred for accessibility.

2. Step 2: Understand best practice for screen readers

   Using <main> provides built-in semantic meaning and better support than a div with role.

3. Final Answer:

   Using role='main' on a div instead of <main> -> Option B

4. Quick Check:

   Use <main> tag, not div with role [OK]

Hint: Prefer <main> over div with role='main' [OK]

Common Mistakes:

• Thinking role='main' on div is equal to <main>
• Ignoring heading level importance
• Adding tabindex unnecessarily

5. You want to create a webpage section that screen readers identify as a complementary sidebar. Which semantic element and ARIA attribute combination is best?

hard

A. <nav aria-label='Sidebar'>

B. <section role='complementary'>

C. <aside> without extra ARIA attributes

D. <div role='complementary'>

Solution

1. Step 1: Identify semantic element for complementary content

   The <aside> element is designed for complementary content like sidebars.

2. Step 2: Check ARIA attribute necessity

   <aside> already implies complementary role, so extra ARIA roles are unnecessary and may confuse screen readers.

3. Final Answer:

   <aside> without extra ARIA attributes -> Option C

4. Quick Check:

   Use <aside> for complementary content [OK]

Hint: Use <aside> for sidebars, no extra ARIA needed [OK]

Common Mistakes:

• Adding redundant ARIA roles to <aside>
• Using <section> or <div> without semantic meaning
• Confusing <nav> with sidebar role