Why accessibility matters in HTML - Quick Recap

Recall & Review

beginner

What is web accessibility?

Web accessibility means designing websites so everyone, including people with disabilities, can use them easily.

beginner

Name one reason why accessibility is important.

Accessibility helps people with disabilities access information and services online, making the web fair and inclusive.

intermediate

How does accessibility benefit all users, not just those with disabilities?

Accessible websites are easier to use for everyone, like people using phones in bright sunlight or with slow internet.

intermediate

What role do semantic HTML elements play in accessibility?

Semantic HTML helps screen readers understand the page structure, making navigation easier for users with visual impairments.

beginner

Give an example of an accessibility feature in web design.

Using alt text on images so screen readers can describe the image to users who cannot see it.

Why should websites be accessible?

A To add more colors and animations

B To make websites load faster

C To increase website traffic only

D To make sure everyone can use them, including people with disabilities

Accessibility ensures that all users, regardless of ability, can access and use websites.

Which HTML attribute helps describe images for screen readers?

A title

B alt

C src

D href

The alt attribute provides alternative text for images, which screen readers read aloud.

What is a benefit of using semantic HTML for accessibility?

A It makes the website colorful

B It reduces website size

C It helps screen readers understand page structure

D It hides content from users

Semantic HTML tags give meaning to content, helping assistive technologies navigate the page.

Who benefits from accessible websites?

A Everyone, including people with disabilities and those using different devices

B Only developers

C Only people with disabilities

D Only people using desktop computers

Accessible websites improve usability for all users, including those with disabilities and different devices.

Which of these is NOT an accessibility consideration?

A Adding flashing animations without control

B Using high contrast colors

C Providing keyboard navigation

D Using clear and simple language

Flashing animations can cause seizures or discomfort and should be used carefully or avoided.

Explain why accessibility matters when building websites.

Think about who uses the web and why everyone should have equal access.

List some simple ways to make a website more accessible.

Focus on small changes that help screen readers and users with different needs.

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