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.

Practice

1. What is the main goal of accessibility testing on a website?

easy

A. To improve the website's loading speed

B. To add more images and videos

C. To ensure the website is usable by people with disabilities

D. To increase the number of advertisements

Solution

1. Step 1: Understand the purpose of accessibility testing

   Accessibility testing focuses on making websites usable for everyone, including people with disabilities.

2. Step 2: Compare options to the goal

   Only To ensure the website is usable by people with disabilities matches this goal, while others focus on unrelated aspects like speed or content.

3. Final Answer:

   To ensure the website is usable by people with disabilities -> Option C

4. Quick Check:

   Accessibility testing = usability for all [OK]

Hint: Focus on users with disabilities for accessibility testing [OK]

Common Mistakes:

• Confusing accessibility with performance optimization
• Thinking accessibility means adding more content
• Ignoring users with disabilities

2. Which HTML attribute is important for accessibility to describe images?

easy

A. alt

B. title

C. src

D. href

Solution

1. Step 1: Identify attribute for image description

   The alt attribute provides text descriptions for images, helping screen readers.

2. Step 2: Check other attributes

   title shows tooltips, src is image source, href is for links, none describe images for accessibility.

3. Final Answer:

   alt -> Option A

4. Quick Check:

   Image description attribute = alt [OK]

Hint: Use alt for image descriptions to help screen readers [OK]

Common Mistakes:

• Using title instead of alt for image description
• Confusing src with description
• Missing alt attribute entirely

3. Consider this HTML snippet:

<button>Click me</button>

Which accessibility improvement is best?

medium

A. Remove the button element

B. Add aria-label="Submit button" to the button

C. Change button text to "" (empty string)

D. Add style="color: white;" only

Solution

1. Step 1: Understand button accessibility

   Buttons need clear labels for screen readers; adding aria-label clarifies purpose.

2. Step 2: Evaluate other options

   Empty text or removing button removes meaning; styling alone doesn't improve accessibility.

3. Final Answer:

   Add aria-label="Submit button" to the button -> Option B

4. Quick Check:

   Use aria-label for clear button description [OK]

Hint: Use aria-label to describe buttons clearly [OK]

Common Mistakes:

• Leaving buttons unlabeled
• Removing interactive elements
• Relying only on visual styles

4. You test a form and find keyboard users cannot reach the submit button. What is the likely cause?

medium

A. The button has tabindex="-1"

B. The button has a visible label

C. The button uses type="submit"

D. The button has a high contrast color

Solution

1. Step 1: Understand tabindex effect on keyboard navigation

   A tabindex="-1" removes the element from keyboard focus order, so users can't tab to it.

2. Step 2: Check other options

   Visible label, submit type, and color contrast do not block keyboard focus.

3. Final Answer:

   The button has tabindex="-1" -> Option A

4. Quick Check:

   tabindex="-1" blocks keyboard focus [OK]

Hint: Check tabindex for keyboard focus issues [OK]

Common Mistakes:

• Confusing label visibility with focusability
• Ignoring tabindex attribute effects
• Assuming color affects keyboard navigation

5. You want to test if a website's color choices meet accessibility standards for contrast. Which approach is best?

hard

A. Use random colors to test visually

B. Only rely on automated tools without manual checks

C. Ignore color contrast if text is large

D. Use an automated color contrast checker and manually verify with users

Solution

1. Step 1: Understand color contrast testing methods

   Automated tools quickly check contrast ratios, but manual testing ensures real user experience.

2. Step 2: Evaluate other options

   Relying only on tools misses context; ignoring contrast or random colors do not ensure accessibility.

3. Final Answer:

   Use an automated color contrast checker and manually verify with users -> Option D

4. Quick Check:

   Combine automated and manual checks for best results [OK]

Hint: Combine tools and manual checks for color contrast [OK]

Common Mistakes:

• Trusting only automated tools
• Ignoring contrast for large text
• Testing colors without standards