Semantic elements and screen readers in HTML - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

Why use semantic elements for screen readers?

Which of the following best explains why semantic HTML elements help screen readers?

A They prevent users from copying text on the page.

B They make the page load faster by reducing file size.

C They automatically add colors and fonts to improve readability.

D They provide meaningful structure that screen readers use to navigate content easily.

💡 Hint

Think about how screen readers understand page layout and content.

Semantic elements like <nav>, <main>, and <header> give screen readers clues about the page structure. This helps users navigate and understand the content better.

📝 Syntax

intermediate

Identify the semantic element for main content

Which HTML element is best to wrap the main content of a page for screen readers?

A <main>

B <section>

C <div>

D <article>

💡 Hint

This element is specifically designed to hold the main content unique to the page.

The <main> element is used to wrap the main content of a page. Screen readers can jump directly to this section, improving navigation.

❓ rendering

advanced

Screen reader behavior with landmarks

Given this HTML snippet, what will a screen reader announce when focusing on the <nav> element?

HTML

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

A No announcement because <nav> is not recognized

B List with 2 items, Home, About

C Navigation region, Primary navigation, list with 2 items

D Link Home, Link About

💡 Hint

Screen readers announce landmarks and their labels to help users understand page sections.

The <nav> element is a landmark region. The aria-label gives it a name. Screen readers announce both the landmark type and label, plus the list details.

❓ selector

advanced

CSS selector for focus style on semantic landmarks

Which CSS selector correctly applies a visible focus outline to all semantic landmark elements when they receive keyboard focus?

A nav:focus, main:focus, aside:focus, footer:focus { outline: 3px solid blue; }

B nav.focus, main.focus, aside.focus, footer.focus { outline: 3px solid blue; }

C nav:active, main:active, aside:active, footer:active { outline: 3px solid blue; }

D nav:hover, main:hover, aside:hover, footer:hover { outline: 3px solid blue; }

💡 Hint

Focus styles appear when elements receive keyboard focus, not on hover or active states.

The :focus pseudo-class targets elements when they receive keyboard focus. This helps keyboard users see which element is active.

❓ accessibility

expert

Screen reader announcement with incorrect semantic use

What error will a screen reader encounter when a page uses multiple <main> elements?

A It will ignore all <code>&lt;main&gt;</code> elements except the first one.

B It will announce each <code>&lt;main&gt;</code> as a separate main region causing confusion.

C It will crash and stop reading the page.

D It will treat all <code>&lt;main&gt;</code> elements as <code>&lt;div&gt;</code> with no special meaning.

💡 Hint

The <main> element should be unique per page for clear navigation.

Using multiple <main> elements creates multiple main landmarks. Screen readers announce each, which can confuse users about the page's primary content.