Accessibility testing in Testing Fundamentals - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

Why use ARIA roles in web pages?

What is the main purpose of adding ARIA roles to HTML elements?

A To make elements load faster in the browser

B To improve the visual style of elements using CSS

C To help assistive technologies understand the purpose of elements

D To add animations and transitions to elements

💡 Hint

Think about users who rely on screen readers.

ARIA roles provide extra information to assistive technologies like screen readers. This helps users with disabilities understand the purpose of elements on the page.

📝 Syntax

intermediate

Identify the correct ARIA attribute syntax

Which option shows the correct way to add an ARIA label to a button in HTML?

A <button ariaLabel='Close menu'>X</button>

B <button aria_label='Close menu'>X</button>

C <button aria label='Close menu'>X</button>

D <button aria-label='Close menu'>X</button>

💡 Hint

ARIA attributes use hyphens and lowercase letters.

ARIA attributes use hyphenated lowercase names like aria-label. Other forms are invalid and won't be recognized by assistive tools.

❓ rendering

advanced

Screen reader behavior with missing alt text

What will a screen reader announce for this image?

<img src='logo.png'>

Testing Fundamentals

<img src='logo.png'>

A It will read the file name 'logo.png' aloud

B It will skip the image and say nothing

C It will announce 'image' without description

D It will cause an error and stop reading

💡 Hint

Screen readers fall back to the filename when alt is missing.

Without an alt attribute, most screen readers will either skip the image or announce it as 'image' without description. They do not typically read the filename aloud.

❓ selector

advanced

CSS selector for keyboard focus style

Which CSS selector correctly targets elements when they receive keyboard focus for accessibility styling?

A :focus-visible

B :hover

C :active

D :visited

💡 Hint

This selector only shows focus styles when keyboard is used.

The :focus-visible selector applies styles only when an element is focused via keyboard, improving accessibility by not showing focus styles on mouse clicks.

❓ layout

expert

Ensuring logical tab order in complex layouts

You have a complex page with multiple sections and interactive elements. Which practice ensures the tab order is logical and accessible?

A Use tabindex='0' for natural order and avoid positive tabindex values

B Use tabindex='0' to include elements in natural DOM order and tabindex='positive' to reorder

C Remove all tabindex attributes to disable keyboard navigation

D Use tabindex='-1' on all interactive elements

💡 Hint

Positive tabindex values can confuse users.

Using tabindex='0' keeps elements in the natural DOM order, which is best for accessibility. Positive tabindex values change tab order and can confuse keyboard users.