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.