A user interface component's role conveys to assistive technologies the purpose of the component. This, in turn, allows assistive technologies to give more accurate information to users about the nature of the content they are navigating.
Throughout the samples, the various types of modal dialogs/drawers/panels (conceptually all acting as modal dialogs) do not programmatically convey the fact that they are dialogs
User impact
When the role of a user interface component, such as a modal dialog, is not announced, assistive technology users won't be given important information about the component. In this case, while visually it may be fairly apparent that a component is a dialog (due to the semi-transparent overlay behind it, covering the underlying page), this information is not conveyed to assistive technology users.
Required solution
User interface components must expose a role that matches their actual purpose and functionality, so that assistive technologies can understand it and convey it appropriately to users.
This solution must be applied to all instances of the issue identified within the test sample, then applied to all other instances of the same issue identified throughout the rest of the website.
Implementation guidance
The "Share" modal dialog currently has a role="alert". This will result in the content of the dialog being announced, but no indication will be given that this is in fact a modal dialog.
The "bookend" drawer (when viewing small-screen/smartphone views of a story) and the "Swipe up" drawer/panel used in Page attachment all lack any kind of role.
In all these cases, add an explicit role="dialog" to the interface component (and, in the case of the "Share" modal, remove the incorrect role="alert"). Additionally, we recommend adding aria-modal="true" to further clarify the nature of the dialog.
Conceptually the "Expand Tweet" view in Tooltip also acts as a modal dialog.
However, in this case, the overall structure is slightly more complex to remediate, as it seems to rely on only visually giving the impression of a self-contained overlay, when in fact the embedded tweet is still part of the underlying page and is "shining through"/sitting on top of the actual "modal". We'd recommend dynamically restructuring the DOM in these cases to make the embedded tweet actually part of the container that appears as a modal, and then applying the role="dialog" aria-modal="true" to the container.
Test procedure(s)
Use these steps to confirm that the solution has been correctly applied to issues identified within the test sample, and to test the rest of the website for instances of the same issue:
Turn on your screen reader.
Trigger any modal dialog/drawer/panel
Verify that the control is announced as a "dialog" by the screen reader.
Definition of done
Complete all of these tasks before closing this issue or indicating it is ready for retest:
All issues identified within the test sample have been resolved.
The rest of the website has been tested for the same issue.
All issues identified throughout the website have been resolved or filed as new issues.
This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 7 days if no further activity occurs. Thank you for your contributions.
Controls/widgets with an incorrect/missing role
WCAG Level
Level A
Priority
Low
Pages/screens/components affected
Description
A user interface component's role conveys to assistive technologies the purpose of the component. This, in turn, allows assistive technologies to give more accurate information to users about the nature of the content they are navigating.
Throughout the samples, the various types of modal dialogs/drawers/panels (conceptually all acting as modal dialogs) do not programmatically convey the fact that they are dialogs
User impact
When the role of a user interface component, such as a modal dialog, is not announced, assistive technology users won't be given important information about the component. In this case, while visually it may be fairly apparent that a component is a dialog (due to the semi-transparent overlay behind it, covering the underlying page), this information is not conveyed to assistive technology users.
Required solution
User interface components must expose a role that matches their actual purpose and functionality, so that assistive technologies can understand it and convey it appropriately to users.
This solution must be applied to all instances of the issue identified within the test sample, then applied to all other instances of the same issue identified throughout the rest of the website.
Implementation guidance
The "Share" modal dialog currently has a
role="alert"
. This will result in the content of the dialog being announced, but no indication will be given that this is in fact a modal dialog.The "bookend" drawer (when viewing small-screen/smartphone views of a story) and the "Swipe up" drawer/panel used in Page attachment all lack any kind of role.
The web-based/non-native consent dialog in Consent lacks any kind of role.
In all these cases, add an explicit
role="dialog"
to the interface component (and, in the case of the "Share" modal, remove the incorrectrole="alert"
). Additionally, we recommend addingaria-modal="true"
to further clarify the nature of the dialog.Conceptually the "Expand Tweet" view in Tooltip also acts as a modal dialog.
However, in this case, the overall structure is slightly more complex to remediate, as it seems to rely on only visually giving the impression of a self-contained overlay, when in fact the embedded tweet is still part of the underlying page and is "shining through"/sitting on top of the actual "modal". We'd recommend dynamically restructuring the DOM in these cases to make the embedded tweet actually part of the container that appears as a modal, and then applying the
role="dialog" aria-modal="true"
to the container.Test procedure(s)
Use these steps to confirm that the solution has been correctly applied to issues identified within the test sample, and to test the rest of the website for instances of the same issue:
Definition of done
Complete all of these tasks before closing this issue or indicating it is ready for retest:
Related standards
More information
Test data
Test date: January 2021