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.

Practice

1. Why is accessibility important for websites?

easy

A. It reduces the website's file size significantly.

B. It makes the website load faster on all devices.

C. It allows websites to use more colors and fonts.

D. It helps people with disabilities use the website easily.

Solution

1. Step 1: Understand the meaning of accessibility

   Accessibility means making websites usable by everyone, including people with disabilities.

2. Step 2: Identify the main benefit of accessibility

   Helping people with disabilities use the website easily is the core reason for accessibility.

3. Final Answer:

   It helps people with disabilities use the website easily. -> Option D

4. Quick Check:

   Accessibility = Helping all users [OK]

Hint: Accessibility means helping everyone use the site [OK]

Common Mistakes:

• Confusing accessibility with website speed
• Thinking accessibility is about design colors only
• Believing accessibility reduces file size

2. Which HTML element helps improve accessibility by giving meaning to text?

easy

A. <strong>

B. <span>

C.

D. <div>

Solution

1. Step 1: Identify semantic HTML elements

   Elements like <strong> give meaning to text, indicating importance or emphasis.

2. Step 2: Compare with non-semantic elements

   <div> and <span> are generic containers without meaning; <br> is for line breaks only.

3. Final Answer:

   <strong> -> Option A

4. Quick Check:

   Semantic tags improve meaning = <strong> [OK]

Hint: Semantic tags add meaning, not just style [OK]

Common Mistakes:

• Using <div> or <span> for meaning
• Confusing
  with semantic tags
• Ignoring importance of semantic HTML

3. What will screen readers announce for this HTML snippet?

<button aria-label="Close menu"></button>

medium

A. Announces 'Close menu' because of aria-label

B. Announces 'button' only

C. No text announced because button is empty

D. Announces 'menu' only

Solution

1. Step 1: Understand aria-label usage

   The aria-label attribute provides a text label for assistive technologies when visible text is missing.

2. Step 2: Predict screen reader behavior

   Since the button has no visible text but has aria-label="Close menu", screen readers announce 'Close menu'.

3. Final Answer:

   Announces 'Close menu' because of aria-label -> Option A

4. Quick Check:

   aria-label text is read aloud [OK]

Hint: aria-label gives hidden text for screen readers [OK]

Common Mistakes:

• Assuming empty button has no announcement
• Thinking aria-label is ignored
• Confusing aria-label with visible text

4. Identify the accessibility issue in this code:

<img src="logo.png">

medium

A. Image tag should be closed with </img>

B. Image source file is incorrect

C. Missing alt attribute for image description

D. Image size is too large

Solution

1. Step 1: Check for alt attribute in img tag

   Images must have alt text to describe them for screen readers and accessibility.

2. Step 2: Identify missing alt attribute

   The img tag lacks alt="...", so screen readers get no description.

3. Final Answer:

   Missing alt attribute for image description -> Option C

4. Quick Check:

   Images need alt text [OK]

Hint: Always add alt text to images [OK]

Common Mistakes:

• Thinking <img> needs closing tag
• Ignoring alt attribute importance
• Assuming file path errors are accessibility issues

5. You want to make a navigation menu accessible. Which combination is best?

<nav>
  <ul>
    <li><a href="#home">Home</a></li>
    <li><a href="#about">About</a></li>
  </ul>
</nav>

hard

A. Add role="button" to <nav> and remove <ul> list

B. Add aria-label="Main menu" to <nav> and ensure links have clear text

C. Use only <div> tags with onclick handlers for links

D. Add tabindex="-1" to all links to skip them

Solution

1. Step 1: Use semantic <nav> and list structure

   The code uses <nav> and <ul> with <li> and <a>, which is correct semantic structure for navigation.

2. Step 2: Improve accessibility with aria-label and clear link text

   Adding aria-label="Main menu" to <nav> helps screen readers identify the menu. Clear link text ensures users understand each link.

3. Final Answer:

   Add aria-label="Main menu" to <nav> and ensure links have clear text -> Option B

4. Quick Check:

   Semantic nav + aria-label = accessible menu [OK]

Hint: Use semantic nav + aria-label for menus [OK]

Common Mistakes:

• Misusing role="button" on nav
• Replacing semantic tags with divs
• Removing links from keyboard navigation