Why accessibility matters in HTML - Challenge Your Understanding

Challenge - 5 Problems

🧠 Conceptual

intermediate

Why use semantic HTML for accessibility?

Which of the following best explains why semantic HTML elements improve accessibility?

A They provide meaning to content, helping screen readers understand the page structure.

B They make the page load faster by reducing file size.

C They allow the use of more colors and fonts on the page.

D They automatically translate the page into multiple languages.

💡 Hint

Think about how screen readers interpret web pages.

Semantic HTML tags like <header>, <nav>, and <main> give meaning to the content. This helps assistive technologies like screen readers to navigate and understand the page better.

📝 Syntax

intermediate

Identify the correct ARIA attribute usage

Which option correctly uses an ARIA attribute to label a navigation landmark for screen readers?

HTML

<nav aria-label="Main navigation">
  <ul>
    <li><a href="#home">Home</a></li>
    <li><a href="#about">About</a></li>
  </ul>
</nav>

A <nav aria-role="navigation">...</nav>

B <nav aria-labelledby="Main navigation">...</nav>

C <nav aria-label="Main navigation">...</nav>

D <nav role="aria-label">...</nav>

💡 Hint

ARIA labels describe landmarks with a clear text string.

The aria-label attribute provides an accessible name for landmarks like <nav>. The value should be a string describing the landmark.

❓ rendering

advanced

What is the visual result of this accessible button?

Given the code below, what will the user see in the browser?

HTML

<button aria-pressed="true" style="font-size:1.2rem; padding:0.5rem 1rem;">
  <strong>Toggle</strong> Mode
</button>

A A button with bold text 'Toggle' followed by normal text 'Mode', sized slightly larger than default.

B A plain text 'Toggle Mode' with no bold or size changes.

C A button with italic text 'Toggle Mode' and default size.

D An invisible button because aria-pressed hides it.

💡 Hint

Look at the HTML tags and CSS styles applied.

The <strong> tag makes 'Toggle' bold. The inline style increases font size and adds padding, so the button text is larger and spaced nicely.

❓ selector

advanced

Which CSS selector targets only focused links for keyboard users?

To improve accessibility, which CSS selector applies styles only when a user navigates links using the keyboard (focus state)?

A a:active { outline: 2px solid blue; }

B a:focus { outline: 2px solid blue; }

C a:hover { outline: 2px solid blue; }

D a:visited { outline: 2px solid blue; }

💡 Hint

Focus styles help keyboard users see where they are on the page.

The :focus pseudo-class applies styles when an element receives keyboard focus. This is essential for accessibility to show which link is selected.

❓ layout

expert

How does Flexbox improve accessibility in responsive design?

Which statement best describes how using Flexbox helps accessibility on different screen sizes?

A Flexbox forces all content into a single column regardless of screen size.

B Flexbox hides content automatically on small screens to reduce clutter.

C Flexbox disables keyboard navigation to simplify layouts.

D Flexbox allows content to reorder and resize smoothly, making it easier for all users to read on any device.

💡 Hint

Think about how flexible layouts adapt to screen changes.

Flexbox lets elements grow, shrink, and reorder based on screen size. This helps users with different devices and needs by keeping content readable and accessible.