Contributors can use the Editoria11y module to identify web accessibility issues with their content. The module overlay appears when viewing nodes while logged into edit the website, even when the node is unpublished. In addition to locating issues on a page, the module provides guidance to assist editors in resolving the potential accessibility issues it flags.
Note: Editoria11y is not a substitute for more comprehensive tools like Pope Tech or manual accessibility testing, but provides content editors with immediate feedback directly in the Drupal site interface.
Locating accessibility issues on a webpage
- Login to your website.
- View a content page that you have access to edit. The Editoria11y overlay is displayed in the lower-right corner.
- If Editoria11y does not detect any accessibility issues with your content on the page, the overlay will display "No issues detected. ✔️"
- If Editoria11y detects any accessibility issues with your content, the overlay will indicate how many issues it has found on the page - i.e. 3 issues detected.
- Click on the overlay stating the number of issues detected on the page.
- The overlay in the lower right corner will change into a navigable pop-up window with tabs.
- The locations of the issues will have icons overlaid on top of the content.
- A red exclamation mark inside of a white circle with a red border indicates an accessibility issue that you should fix.
- A yellow circle with a question mark indicates a manual check is needed to confirm if an accessibility issue is present.
- The overlay in the lower right corner will change into a navigable pop-up window with tabs.
Accessing information about an accessibility issue
- Click next in the Editoria11y pop-up window in the lower right corner to view information about the first issue on the page. A new pop-up window will appear over the piece of content stating what issue was detected and how you can fix the issue.
- Alternatively, you can click the exclamation mark or question mark icon on top of a piece of content to view information about the issue detected with that content.
- Alternatively, you can click the exclamation mark or question mark icon on top of a piece of content to view information about the issue detected with that content.
Dismissing an alert
Alerts are potential issues that require a human to review to determine if an accessibility issue is present in this case. Depending on your role and site permissions, you may be able to hide alerts for yourself and/or for all users.
Hide alert for me
When you are viewing the issue detail pop-up for an alert, select the Hide alert for me button if you determine the alert does not present an accessibility issue in this instance. This will dismiss the alert for you, but other users will still see this specific alert unless they also dismiss it.
Note: In Drupal Lite, Contributors have the option to use the Hide alert for me button. Permissions vary on Drupal Enterprise sites as configured by your website administrator(s).
Unhiding an alert
When you view a page where you have hidden one or more alerts, the Issues tab in the Editoria11y pop-up window in the lower right corner will include a link at the bottom to show any hidden alerts on the page - i.e. Show 1 hidden alert.
When you click this link, a blue circle with a check mark will appear over the content with the dismissed alert. Clicking the check mark will open the alert detail pop-up window. You can click the Restore this hidden alert button to reset the dismissal.
Mark OK for all users
The Mark OK for all users button allows you to dismiss the specific instance of this alert for all users on the site. The dismissed alert will no longer appear for you or anyone else.
Note: In Drupal Lite, Advanced Site Builders have the option to use the Mark OK for all users button. Permissions vary on Drupal Enterprise sites as configured by your website administrator(s).
Resetting a dismissal
You can view and reset alerts that have been dismissed for all users in two different ways, depending on your permissions. This section describes how to reset a dismissal from the Content page. The Drupal: Use the Content Accessibility Issues Report article covers the other method.
- When you view a page where you have marked one or more alerts as OK, the Issues tab in the Editoria11y pop-up window in the lower right corner includes a link at the bottom to show any hidden alerts on the page - i.e. Show 1 hidden alert.
- When you click the hidden alert link, a blue circle with a dash appears over the content with the dismissed alert.
- Clicking the blue circle will open the alert detail pop-up window. You can click the Restore this alert marked as OK button to reset the dismissal.
Using the Outline tab
The Outline tab shows the outline of the page. This hierarchy is established by the use of the heading tags. This is useful for seeing skipped level headings. Having a clear structure is important for assistive devices to navigate content on the page. Review the Headings page on the Accessible U website for additional information on accessible headings.
Using the Alt Text tab
The Alt Text tab gives a quick overview of all the images with their alternative text. This is very useful for reviewing the quality of alternative text across the entire page. Review the Alternative Text page on the Accessible U website for more information about Alt Text.
