Accessibility testing in Testing Fundamentals - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to add an ARIA label to the button for screen readers.

Testing Fundamentals

<button [1]>Click me</button>

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

Aalt="Submit form"

Baria-label="Submit form"

Ctitle="Submit form"

Drole="button"

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'alt' attribute on a button, which is only for images.

Using 'title' which is not always read by screen readers.

The aria-label attribute provides an accessible name for screen readers, describing the button's purpose.

2fill in blank

medium

Complete the code to make the image accessible by adding alternative text.

Testing Fundamentals

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

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

Aalt="Company logo"

Btitle="Company logo"

Crole="img"

Daria-hidden="true"

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'aria-hidden' hides the image from screen readers.

Using 'title' does not replace alt text for accessibility.

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

3fill in blank

hard

Fix the error in the form input to ensure it is properly labeled for accessibility.

Testing Fundamentals

<label for="email">Email:</label>
<input type="email" [1]>

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

Aaria-label="Email address"

Bname="email"

Cid="email"

Dplaceholder="Enter email"

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'aria-label' instead of matching id and for attributes.

Using 'placeholder' which is not a label substitute.

The id attribute on the input must match the for attribute on the label to link them properly for screen readers.

4fill in blank

hard

Fill both blanks to create a keyboard-accessible link that opens in a new tab with proper accessibility.

Testing Fundamentals

<a href="https://example.com" [1] [2]>Visit site</a>

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

Atarget="_blank"

Brel="noopener noreferrer"

Caria-hidden="true"

Dtabindex="-1"

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'aria-hidden' hides the link from screen readers.

Using 'tabindex="-1"' removes keyboard focus.

Use target="_blank" to open the link in a new tab, and rel="noopener noreferrer" for security and accessibility.

5fill in blank

hard

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

Testing Fundamentals

<label for="username">[1]</label>
<input type="text" id="username" aria-describedby="error-msg" [2]>
<span id="error-msg" [3]>Username is required</span>

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

AUsername

Baria-invalid="true"

Crole="alert"

Dplaceholder="Enter username"

Attempts:

3 left

💡 Hint

Common Mistakes

Not linking the label and input with matching 'for' and 'id'.

Missing 'aria-invalid' on the input when there is an error.

Not using 'role="alert"' on the error message.

The label text is 'Username'. The input uses aria-invalid="true" to indicate an error. The error message uses role="alert" to notify screen readers immediately.