Page:
Lesson 1: Overview of electronic Passport Next Generation
Lesson 2: Domestic Print
Lesson 4: Manual QA
Description:
Using keyboard only or/and screen reader.
Radio buttons are not properly designed in terms of accessibility:
• the proper keyboard support is not provided (users can navigate with Tab key only)
• the screen reader (NVDA) doesn't read the "checked" state when the user marks the button pressing the Space (the state where a radio is not checked only occurs on page load)
The correct behavior for radio buttons:
Tab
• Moves focus to the checked radio button in the radiogroup.
• If a radio button is not checked, focus moves to the first radio button in the group.
Down arrow/Right arrow
• Moves focus to and checks the next radio button in the group.
• If focus is on the last radio button, moves focus to the first radio button.
• The state of the previously checked radio button is changed to unchecked.
Up arrow/Left arrow
• Moves focus to and checks the previous radio button in the group.
• If focus is on the first radio button, moves focus to and checks the last radio button.
• The state of the previously checked radio button is changed to unchecked.
COURSE: https://esdc-edsc-adapt.canadacentral.cloudapp.azure.com/preview/5dc446fd27f08836496b6b9e/63a32079b75e454dafed1e1d/
Page: Lesson 1: Overview of electronic Passport Next Generation Lesson 2: Domestic Print Lesson 4: Manual QA
Description: Using keyboard only or/and screen reader. Radio buttons are not properly designed in terms of accessibility: • the proper keyboard support is not provided (users can navigate with Tab key only) • the screen reader (NVDA) doesn't read the "checked" state when the user marks the button pressing the Space (the state where a radio is not checked only occurs on page load)
The correct behavior for radio buttons: Tab • Moves focus to the checked radio button in the radiogroup. • If a radio button is not checked, focus moves to the first radio button in the group. Down arrow/Right arrow
• Moves focus to and checks the next radio button in the group. • If focus is on the last radio button, moves focus to the first radio button. • The state of the previously checked radio button is changed to unchecked. Up arrow/Left arrow
• Moves focus to and checks the previous radio button in the group. • If focus is on the first radio button, moves focus to and checks the last radio button. • The state of the previously checked radio button is changed to unchecked.