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 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.

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 red circle indicates 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 to open a small window. 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

  •  Text and typography issues , including 
  • 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.