Principles Browse Exercises Browse Courses Settings

Exercise 1.3 - Info and Relationships part 2

A developer created a webpage for answering quizzes. As an input, they decided to use a clickable list. By doing so, they failed to address the accessibility issues of not having a standard <input> tag.

Try to correct the code by adding a hidden <input type="radio"> or by using ARIA attributes.

Note: Solving this exercise with ARIA requires editing the JavaScript provided. Other considerations, such as proper input handling, will be taught in a later exercise!

Requirements

Pending requirement:

Make sure that a screen reader can understand that there are two grouped radio inputs that are labelled as Answer A and Answer B.

Pending requirement:

Make sure to either remove the list or change its meaning through ARIA. Do not use a list of radio buttons as that creates unnecessary confusion.

Pending requirement:

Only one radio input must be selected at a time. Check that the underlying radio input gets selected properly.

If using ARIA you must make sure that only one element receives the attribute aria-selected=true. In this case, JavaScript modifications are required.

Pending requirement:

Do not change the appearance of the list.

If you are using an underlying <input type="radio">, hide it from the screen by using the following css:

.visuallyHidden {
    position: absolute;
    clip: rect(0, 0, 0, 0);
}

Need help?

Show me the solution

Learning Material

WCAG:
- https://www.w3.org/WAI/WCAG21/Understanding/info-and-relationships
- https://www.w3.org/WAI/WCAG21/Understanding/name-role-value
Related Techniques:
Custom controls: https://www.w3.org/WAI/tutorials/forms/custom-controls/
Labeling controls: https://www.w3.org/WAI/tutorials/forms/labels/
Hiding elements: https://www.w3.org/WAI/tutorials/forms/labels/#note-on-hiding-elements

Accessibility Academy

Principles Browse Exercises Browse Courses Settings

Exercise 1.3 - Info and Relationships part 2

Try to correct the code by adding a hidden <input type="radio"> or by using ARIA attributes.

Note: Solving this exercise with ARIA requires editing the JavaScript provided. Other considerations, such as proper input handling, will be taught in a later exercise!

Requirements

Pending requirement:

Make sure that a screen reader can understand that there are two grouped radio inputs that are labelled as Answer A and Answer B.

Pending requirement:

Make sure to either remove the list or change its meaning through ARIA. Do not use a list of radio buttons as that creates unnecessary confusion.

Pending requirement:

Only one radio input must be selected at a time. Check that the underlying radio input gets selected properly.

If using ARIA you must make sure that only one element receives the attribute aria-selected=true. In this case, JavaScript modifications are required.

Pending requirement:

Do not change the appearance of the list.

If you are using an underlying <input type="radio">, hide it from the screen by using the following css:

.visuallyHidden {
    position: absolute;
    clip: rect(0, 0, 0, 0);
}

Need help?

Show me the solution

Learning Material

WCAG:
- https://www.w3.org/WAI/WCAG21/Understanding/info-and-relationships
- https://www.w3.org/WAI/WCAG21/Understanding/name-role-value
Related Techniques:
Custom controls: https://www.w3.org/WAI/tutorials/forms/custom-controls/
Labeling controls: https://www.w3.org/WAI/tutorials/forms/labels/
Hiding elements: https://www.w3.org/WAI/tutorials/forms/labels/#note-on-hiding-elements

Exercise 1.3 - Info and Relationships part 2

Requirements

Need help?

Learning Material

Editor

Preview Page

Exercise 1.3 - Info and Relationships part 2

Requirements

Need help?

Learning Material

Editor

Preview Page