Editoria11y Accessibility Checker FAQ's

As a content editor, there are accessibility issues that you may need to review. The Editoria11y accessibility checker tool installed on ³ÉÈËBÕ¾ sites, will identify most issues if they appear on your web pages. Below are common issues you might come across and offer solutions on how to address them. 


Issues you may encounter

When screen readers encounter an image with no alt attribute at all, they dictate the url of the image file instead, often one letter at a time.

To fix: either add an empty alt (alt="") to indicate this image should be ignored by screen readers, or add descriptive alt text.

Note that a good alt describes the image's message, not simply what it contains. Depending on the context, the alt for the picture of a child kicking a ball might emphasize the setting, the child, the kick or the ball:

  • The sunny spring day brought kids to the park for some soccer.
  • A.J. wearing the new team uniform.
  • The game-winning kick curved in from the left sideline!
  • The size 4 ball is the right size for this 9-year-old child.

What happened?

When the image was uploaded to the site, the alternative text field was left blank.

How to fix

Determine how the image is displayed:

If the image is placed within a card, carousel, or hero

Add the alternative text to an image

Step 1: Identify the image 

  1. Click on the Layout tab.
  2. Edit the component by clicking on the Edit tab.
  3. Find the filename of the image that is causing the error. 

Step 2: Find the image

  1. In a new window, open the Media view (click on Content -> Media)
  2. Search for the file name by using the Name filter.
  3. Once the file is found, click on the Edit link.
  4. Fill out the Alternative text field and click on the Save button.

If the image is placed within the Edit page

  1. Click on the Edit tab.
  2. In the editor, click on the image.
  3. Click on the Override media image alternative text button.
  4. Enter the alternative text and click on the check to save.
  5. Save your edits by clicking on the Save button.

 

Many mobile and assistive device users struggle to read content in PDFs. PDFs generally do not allow for changing font sizes, and often contain features that are incompatible with screen readers.

Ideally make the content of this linked PDF available on a Web page or in an editable document, and only link to this PDF as a "printable" alternative. If this PDF is the only way you are providing to access this content, you will need to manually check that the PDF is well-structured, with headings, lists and table headers, and provides alt text for its images.

What happened?

Your link goes to a downloadable file that may not be accessible.

How to fix

For now, this is a manual check asking you to review the document you are linking to. For more information, please review the Web Content Guidelines for Accessible Guidelines page. 

Headings and subheadings create a navigable table of contents for assistive devices. The numbers indicate indents in a nesting relationship:

  • Heading level 1
    • Heading level 2: a topic
      • Heading level 3: a subtopic
    • Heading level 2: a new topic

Empty headings create confusing gaps in this outline: they could mean the following content is still part of the previous section, or that the text was unpronounceable for some reason.

To fix: add text to this heading, or delete this empty line.

What happened?

If this appears in the group block, it means that the Group Block Title is blank. Fill out the Group Block with Contact Information to fix.

How to fix

  1. Go to your Department's subsite home page.
  2. Click on the Edit tab.
  3. Click on Edit in the Group Block to display the Group Block settings.
  4. Fill out the Title field.
  5. Save your edits by clicking on the Save button.

If this table contains data that is meaningfully organized by row and column, edit the table's properties and specify whether headers have been placed in the first row, column or both. This lets screen reader users hear the headers repeated while navigating the content.

If this table does not contain rows and columns of data, but is instead being used for visual layout, remove it. Tables overflow the page rather than reflowing on mobile devices, and should only be used when the horizontal relationships are necessary to understand the content.

What happened?

The table does not have header cells (<th></th> tags).

How to fix

Solution 1: Add a header to the table.

  1. In the text editor, click on the table.
  2. Select the row button.
  3. If the top row is the header, click on the Header row slide.
  4. If there is no header row, click on 'Insert row above'.
  5. Click on the newly created row.
  6. Click on the Header row slide.
  7. Enter text for the header row.
  8. Save your edits by clicking on the Save button. 

Solution 2: If the table is being used for visual layout, remove the table altogether and use the layout builder. 

Readers can always choose to open a link a new window. When a link forces open a new window, it can be confusing and annoying, especially for assistive device users who may wonder why their browser's "back" button is suddenly disabled.

There are two general exceptions:

  • When the user is filling out a form, and opening a link in the same window would cause them to lose their work.
  • When the user is clearly warned a link will open a new window.

To fix: set this link back to its default target, or add a screen-reader accessible warning (text or an icon with alt text).

What happened?

A link opens in a new window. Is this expected behavior?

How to address this issue?

All external links by default open in a new window by design and now has a mark placed next to the linked text. If this behavior is acceptable, click the link 'Mark as checked and OK.' Otherwise, edit the link and disable Open in a new window. This can be done by

  1. Click on Edit to edit the page or the Layout Builder.
  2. Clicking on the link.
    1. If the link is in the Layout Builder, click on the block and Edit to edit the block.
  3. Click on the link properties button.
  4. Disable the ‘Open in a new window’ slide.