(Accessibility) (Level AA) Announce dynamic country selection change while typing
Hello, my team has found several accessibility issues while working with this component. These are legal risks that prevent full rollout of this component. I've highlighted the issue and ways to resolve this below.
- Country code change indicator changes "silently" for screen reader users.
- Assertion: Country code change indicator changes 'silently' for screen reader users
- Rule: Status messages
- WCAG Rule: 4.1.3 Status Messages AA
- Tested in: Chrome - Desktop, Firefox and NVDA, Safari and VoiceOver, Chrome and JAWS
- Description: Country code change indicator changes 'silently' for screen reader users.
When typing out a telephone number, once a complete number has been entered—including a country code—the previous country code selector updates to reflect the number that has been entered. For example, if the telephone number begins with 44, once the remaining number has been entered it is recognized as a UK telephone number. The telephone number is then prefixed with a US symbol (+44), and the selector symbol changes to a Union Flag. This is confirmation for sighted users that they have entered the correct details, but for assistive technology users there is no indication that this change has occurred.
Furthermore, the element that is changed is prior (in the DOM) to the that the user is interacting with. As such, it would only be possible for a non-sighted user to realize that this has changed if they made a proactive effort to backtrack through the page, which he would have no reason to do.
- Recommendation: Ensure that the visual confirmation provided is also indicated to assistive technology users with an equivalent visually hidden status.
Containers for status messages / notifications must have an appropriate ARIA role="…" (such as role="status" or role="alert") or relevant aria-live="…" attribute (such as aria-live="polite"). Dynamic content changes in those containers will then be explicitly announced by assistive technologies. Using a live region to indicate the country code has changed
- Resources ARIA live regions Accessibility Support: aria-live (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions)
- SVG image (country code) is missing
role='img'
and is not hidden to assistive technology
- WCAG Rule: 4.1.2 Name, Role, Value A
- Tested in: Chrome - Desktop, Firefox and NVDA, Safari and VoiceOver, Chrome and JAWS
Description:
SVG image (country code) is missing role="img"
and is not hidden to assistive technology.
The SVG image used for country code menu lacks a role="img" attribute/value. As such, its purpose will not be clear to assistive technology users.
This image is positioned over the list and clicking it causes the list to open. The has an accessible name provided by an aria-label attribute ("Phone number country"). The SVG image is therefore decorative as it does not currently contribute to the control's accessible name. Recommendation
Normally we would recommend adding role="img"
to an inline SVG, but in this case it should instead be properly hidden to assistive technology by adding aria-hidden="true"
, thus negating the need to provide a role.
Code Snippet:
-
International
Options