Semantic elements and screen readers in HTML - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define the main content area using a semantic element.

HTML

<[1]>
  <p>This is the main content of the page.</p>
</[1]>

Drag options to blanks, or click blank then click option'

Amain

Bdiv

Csection

Darticle

Attempts:

3 left

💡 Hint

Common Mistakes

Using a

instead of a semantic element.

Using

or

which are for different purposes.

The <main> element defines the main content area of a page, which helps screen readers understand the primary content.

2fill in blank

medium

Complete the code to add an accessible label to the navigation using ARIA.

HTML

<nav aria-[1]="Primary navigation">
  <ul>
    <li><a href="#home">Home</a></li>
    <li><a href="#about">About</a></li>
  </ul>
</nav>

Drag options to blanks, or click blank then click option'

Alabel

Bhidden

Clabelledby

Drole

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'aria-hidden' which hides content from screen readers.

Using 'aria-labelledby' without referencing an element.

The aria-label attribute provides an accessible name for the navigation landmark, helping screen readers announce it properly.

3fill in blank

hard

Fix the error in the heading structure to improve screen reader navigation.

HTML

<h1>Welcome</h1>
<[1]>Subheading</[1]>

Drag options to blanks, or click blank then click option'

Ah3

Bh2

Cdiv

Dsection

Attempts:

3 left

💡 Hint

Common Mistakes

Skipping from h1 to h3 breaks the heading hierarchy.

Using a heading text instead of the correct heading level tag.

Headings should follow a logical order. After <h1>, the next level should be <h2> for proper screen reader navigation.

4fill in blank

hard

Fill both blanks to create a section with a heading and an accessible description.

HTML

<section aria-[1]="section1-title">
  <h2 id="section1-title">Features</h2>
  <p id="section1-desc">[2]</p>
</section>

Drag options to blanks, or click blank then click option'

Alabelledby

Blabel

CThis section describes the main features of our product.

DThis is a hidden description.

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'aria-label' instead of 'aria-labelledby' when referencing an ID.

Using a vague or hidden description.

The aria-labelledby attribute links the section to a description or title by ID, improving screen reader context. The paragraph provides a clear description.

5fill in blank

hard

Fill all three blanks to create a footer with proper semantic element, role, and accessible label.

HTML

<[1] role="[2]" aria-[3]="Site footer">
  <p>© 2024 My Website</p>
</[1]>

Drag options to blanks, or click blank then click option'

Afooter

Bcontentinfo

Clabel

Dheader

Attempts:

3 left

💡 Hint

Common Mistakes

Using

instead of

.

Omitting the role or aria-label attributes.

The <footer> element defines the page footer. The role="contentinfo" helps screen readers identify it as footer content. The aria-label gives it a clear accessible name.

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