Editora11y: Helping Ensure Accessibility on your Website
The next time you log into your website, you may notice a color-coded bubble in the lower right corner of your page. This bubble will have one of three appearances, as shown below: a blue circle with a check mark, a yellow circle with a number, or a white circle with red outline and a number. Note: only site editors see those bubbles; people viewing your website do not.
This bubble is part of our new Editoria11y module, which is designed to aid you in ensuring your content meets the University’s digital accessibility standards. The module is named Editoria11y, which is a nod to editing - as all warnings and errors point to content changes that site editors can make - and to accessibility which is often abbreviated as a11y.
Jump to:
What the color-coded bubbles indicate
The blue circle with the check mark indicates that there are no automatically detected issues on that page.
On the other hand, if your page has a yellow or red bubble with a number, this means your page likely has issues that are problematic for users with disabilities, as follows:
A solid yellow circle indicates a warning that items might be problematic and should be manually checked. The potential problem areas include images, videos, and documents.
A circle with a red outline indicates that there are errors that definitely cause barriers to accessing content, and must be corrected right away.
The number in the middle of a yellow or red circle indicates the quantity of issues or potential issues present on the page.
For each area of concern noted in a yellow or red circle, helpful tips are provided for remediation.
Accessing the information provided by Editoria11y
Click the bubble and a small window will appear. The “Issues” tab will be selected and highlighted. The box below will tell you how many issues have been detected, and provide a button to start looking through them one by one.
Click “First »” to go to the first warning or issue detected on the page. A tooltip window will open at the location of the issue explaining it and giving details on how to verify or address it. Click “Next »” to go to subsequent alerts on the page.
What Editoria11y checks for
Here are some of the things Editoria11y might flag on your pages. The majority of these can be found in the The Top 10 Most Common Accessibility Missteps .
Headings
Skipped heading levels
Empty headings
Very long headings
Text that looks like it should be a heading (e.g. text that is in bold to indicate a new section, when a heading should have been used to make this distinction)
Alternative Text for images
Images missing alternative text
Images with a filename as alt text
Images with very long alt text
Audio and video issues
Missing transcript for audio files such as podcasts
Missing captions on videos
Meaningful link text
Links with generic text such as “click here” or “read more”
Links with no text
Links titled with a filename
Linked empty spaces
Tables
Tables without headers
Empty table cells
Tables used for formatting text
Miscellaneous
Paragraphs of italicized text
Text in all caps
Lists made manually with asterisks or numbers rather than list elements
Addressing the issues flagged by Editoria11y
Many issues will refer to images missing alternative text, or “Alt Text.” Here are some best practices when writing Alt text for images.
To add Alternative Text to an image
Hover over the image
Click the pencil icon
Select “Edit Media Item”
Untoggle “Decorative image”
Add a description of the image in the Alternative text textbox
Click Save
To redress all other issues
Review the Editoria11y comments and follow the steps. To make this easier:
Open the page for editing in a separate tab (Control-click or Command-click), so that you can see the Editoria11y alerts in one tab, and do the editing in another.
Identify the page component that is causing the alert and click Edit on that component.
Modify the content as needed and save.
Editoria11y will not show the alerts bubble while you are editing but will update its status and numbers once the page is saved. This allows you to see your progress in real time once you’ve made and saved a change on your page.