Description
Description
Results from a11y review of the language toggle.
Details
- Some related issues that may be able to be solved with some updated HTML:
- Context for users of assistive tech:
- It's hard to immediately tell that these links are related and what they do.
- Assistive tech users won't know what language is currently selected.
- Proposed HTML
<div role="group" aria-label="Language selection"> <button aria-pressed="true">English</button> <button aria-pressed="false">Español</button> <button aria-pressed="false">Tagalog</button> <div>
- Context for users of assistive tech:
- Since this is a user control and not an inline link, I believe we should make the touch target at least 24x24, but we'd prefer even larger at 48x48. Currently, the links are only 20px in height.
- Only having bold text as the visual indicator may not be enough for visually impaired users.
- This may require some input from design. I initially reviewed the design but didn't catch this. Edit: See the results of the design ticket Update language toggle component - Design #3605
- Some ideas:
- A background on the selected language.
- An icon on the selected language.
- A background on the selected language.
Tasks
- Implement accessibility changes.
- Make updates based on the revised design
- Add a link to Storybook (https://design.va.gov/storybook/?path=/docs/components-va-language-toggle--docs) on the guidance page (https://design.va.gov/components/language-toggle)
Acceptance Criteria
- Accessibility issues addressed.
- Design has been updated and reviewed by designer
- Guidance page has a link to Storybook
Estimating
Provide your estimate of 1, 2, 3, 5, 8 or 13
@Andrew565 - 3
@ataker -
@harshil1793 - 3
@it-harrison - 3
@jamigibbs - 3
@micahchiang -
@powellkerry - 3
@rmessina1010 - 3
@rsmithadhoc -
Activity