Semantic elements and screen readers in HTML - Cheat Sheet & Quick Revision

Recall & Review

beginner

What are semantic elements in HTML?

Semantic elements clearly describe their meaning to both the browser and the developer. Examples include <header>, <nav>, <main>, <article>, and <footer>. They help organize content meaningfully.

beginner

Why do screen readers rely on semantic elements?

Screen readers use semantic elements to understand the structure and purpose of content. This helps users who cannot see the screen navigate and comprehend the page easily.

beginner

Which semantic element is best for the main content of a page?

The <main> element is used to wrap the main content unique to the page. It helps screen readers jump directly to the main information.

intermediate

How does using <nav> help accessibility?

The <nav> element groups navigation links. Screen readers can identify this section and allow users to quickly find and use the site’s navigation.

intermediate

What role do ARIA labels play alongside semantic elements?

ARIA labels provide extra information to screen readers when semantic elements alone are not enough. They improve clarity and accessibility for complex or custom components.

Which HTML element is used to define the footer of a page or section?

A <footer>

B <section>

C <aside>

D <header>

The

element defines the footer area, usually containing copyright or contact info.

Why should you use semantic elements instead of generic <div> tags?

A They improve page loading speed

B They make the page colorful

C They help screen readers understand page structure

D They reduce file size

Semantic elements give meaning to content, helping screen readers and improving accessibility.

Which element should wrap the main navigation links on a website?

A <header>

B <main>

C <article>

D <nav>

is specifically for navigation links, helping users and screen readers find menus.

What does a screen reader do when it encounters a <main> element?

A Highlights the main content for the user

B Skips the content inside

C Reads only the first paragraph

D Ignores it

Screen readers use

to identify and focus on the main content area.

If a custom button needs extra description for screen readers, what should you use?

A Add a <div> around it

B Use ARIA labels

C Change its color

D Use <span> tags

ARIA labels provide additional accessible descriptions for custom elements.

Explain how semantic HTML elements improve accessibility for screen reader users.

Think about how a screen reader 'reads' the page structure.

Describe the role of ARIA labels when semantic elements are not enough.

ARIA stands for Accessible Rich Internet Applications.

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