Why accessibility matters in HTML - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to add a descriptive label for the image for screen readers.

HTML

<img src="logo.png" alt="[1]">

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

Aimage

Blogo.png

CCompany logo

Dpicture

Attempts:

3 left

💡 Hint

Common Mistakes

Using the image file name as alt text.

Leaving the alt attribute empty or missing.

Using vague words like 'image' or 'picture'.

The alt attribute provides a text description of the image for screen readers. Using a clear description like "Company logo" helps users who cannot see the image understand its purpose.

2fill in blank

medium

Complete the code to make the button accessible by adding an ARIA label.

HTML

<button aria-label="[1]">🔍</button>

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

Aclick here

Bicon

Cbutton

Dsearch

Attempts:

3 left

💡 Hint

Common Mistakes

Using unclear labels that don't describe the action.

Not adding any label for icon-only buttons.

The aria-label attribute gives a clear description of the button's purpose to screen readers. Using "search" tells users what the button does.

3fill in blank

hard

Fix the error in the heading to improve accessibility by using the correct semantic tag.

HTML

<[1]>Welcome to our website</[1]>

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

Ah1

Bp

Cspan

Ddiv

Attempts:

3 left

💡 Hint

Common Mistakes

Using div or span instead of heading tags.

Not using any heading tag for titles.

Using a heading tag like <h1> helps screen readers and search engines understand the page structure. Avoid using generic tags like div or span for headings.

4fill in blank

hard

Fill both blanks to create a navigation menu with accessible links.

HTML

<nav aria-label="[1]">
  <ul>
    <li><a href="home.html" [2]>Home</a></li>
  </ul>
</nav>

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

AMain navigation

Btabindex="0"

Caria-hidden="true"

Drole="button"

Attempts:

3 left

💡 Hint

Common Mistakes

Using aria-hidden which hides content from screen readers.

Using role="button" on links which confuses assistive tech.

The aria-label describes the navigation region for screen readers. Adding tabindex="0" to the link ensures it is keyboard accessible.

5fill in blank

hard

Fill all three blanks to create a form input with a label and accessible error message.

HTML

<label for="email">[1]</label>
<input type="email" id="email" name="email" aria-describedby="[2]">
<span id="[3]" role="alert">Please enter a valid email.</span>

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

AEmail address

Bemail-error

Demail-label

Attempts:

3 left

💡 Hint

Common Mistakes

Mismatching IDs between aria-describedby and error message.

Not using a label for the input.

Missing role="alert" on error messages.

The label clearly describes the input. The aria-describedby links the input to the error message by ID. The error message uses role="alert" to notify screen readers immediately.