You are now in the main content area

Accessibility checker

Need help?

If you are experiencing any issues with the accessibility checker, or need assistance improving the accessibility of your website. Please contact:

Adam Chaboryk
IT Accessibility Specialist, Digital Media Projects, CCS
adam.chaboryk@torontomu.ca

About

The in-page accessibility checker will instantly check your page for accessibility and usability issues when enabled. The tool checks for content issues such as images missing alternative text, non-descriptive hyperlinks, poor heading structure, incorrect use of components and much more.

Errors or warnings will be indicated exactly before or after where the issue is detected. The error message will be displayed in a convenient tooltip on how to fix.

Accessibility checker flagging heading hierarchy issues and non-descriptive link text.

Getting started

The accessibility checker toggle is located in the top right corner and only works in Preview mode.

  1. Press Preview.
  2. Toggle the accessibility checker on.
    1. Correct any highlighted issues (if any).
    2. Once enabled, click the "Show Outline" button to get a visual idea of how the page is structured. Adjust heading structure if necessary. Learn more about the "Show Outline" feature below.
  3. Toggle the accessibility checker off and on if you make any page edits.
Accessibility checker is the first navigable element within Preview mode.

States

The accessibility checker has three states.

Accessibility checker showing 6 accessibility errors and 1 warning.

Errors

Critical accessibility and usability issues are detected on your page. The checker highlights common WCAG 2.0 Level A and AA accessibility issues.

Anything flagged as an error must be fixed.

Accessibility checker showing 2 warnings.

Warnings

Potential accessibility and usability issues detected. Warning messages may:

  • Prompt you to manually review the element.
  • Provide suggestions to improve the usability/accessibility.
  • Warn you of accessibility issues that cannot be programmatically detected.
Accessibility checker showing no errors found.

Pass

No accessibility or usability issues were detected.

Please note: Accessibility barriers may still exist, however it is not possible to detect all barriers with an automated tool. Even the best automated accessibility tools can only detect up to 40% of all issues! Accessibility is about human experience.

Show outline

The Show Outline button displays the page's heading structure and the readability score of the page.

Page outline

The page outline, similar to the table of contents for a book, gives a visual idea of how each part is interconnected. Headings should always be structured in a way that conveys hierarchy. Headings should never skip levels.

Learn more about heading structure.

Readability score

Readability can be enabled within the Settings tab. The accessibility checker calculates the readability score from all paragraph and list content within the main content area. The readability score gives you an idea on how easy it will be for someone to read your page. It is based on the average length of sentences and words on your page, using a formula known as the Flesch reading-ease test (Wikipedia). (external link) 

A good readability score is an indication that the writing is understandable and easy to digest. Not only is it great for accessibility, it can greatly increase the site's search engine optimization (SEO). Good readability benefits everyone.

Learn more about link text & writing practices for the web.

Accessibility checker showing heading hierarchy issues in Show outline panel and readability score.

Notes about the readability score 

  • A "good" or recommended reading score is between 60 and 100. 
  • Sometimes it may be difficult to achieve a good readability score. Most of your pages may say "difficult". The readability score is for reference only! 
  • Sentences that are too long negatively impact the readability score. 
  • Words with many syllables are considered a complex word.
  • A "good" reading score is not required for AODA compliance. A low score does not affect the pass or fail state of the accessibility checker.
  • The readability score calculates the score of all paragraph (or <p>) and list (or <li>) items in the main content region.

Quality assurance 

The accessibility checker also functions as a quality assurance tool to help you manually review elements. For example, ensuring that images have good alternative text descriptions and that components are used correctly and effectively.  

Screenshot showing off the accessibility checker's quality assurance features for ensuring good alt text on images.

Alternative text quality

Pass () buttons will appear on images that are marked as decorative or have alternative text. The popup will include the alt text defined to help you ensure it is descriptive, concise and makes sense based on the surrounding content. Pass messages will also appear on:

  • Images that are marked as decorative.
  • Components that are setup in a way that facilitate good accessibility.
Screenshot showing a warning for using the announcement component more than once on a page or ineffectively.

Page usability

Warning () or Error () buttons may appear on components that are being used ineffectively and will recommend you to improve for accessibility/usability. Buttons may appear on:

  • Interactive components nested within other components.
  • Component settings that may cause usability issues.
  • ...and more!

Common issues and warnings

Detailed explanations of some of the common issues and warnings encountered with the accessibility checker. We recommend that you read the other pages within the Accessibility & SEO section before creating content or using the accessibility checker. 

People who use screen readers are not warned when a page opens in a new window. This may cause confusion if they try to go back a page. Secondly, it's not good practice to control a user's experience or make decisions for them. 

When is Open in new window okay? The only times where it might be necessary are pages containing context-sensitive information such as a form for example. If there are some help instructions on another page, than opening that link in a new tab might be good as it would not reset the page while someone is filling it out. Otherwise warn users by including the words (Opens in New Tab) within the hyperlink.

Relevant articles

Under the WCAG 2.0, PDF files are considered web content and become an extension of your website. If the PDF file is a form, consider using the Adobe AEM Forms component or Google Forms as an accessible alternative. If the PDF file is a document, consider converting it into a webpage instead. 

As a friendly reminder, this warning will appear on every page containing a PDF. We strongly encourage you to use a medium that facilitates better accessibility, usability and readability. Using a website as opposed to a PDF is much more accessible, customizable, responsive (good for mobile - no need to pinch and zoom), more readable, and easy to update!

How to remediate PDFs for accessibility

However, if sharing a PDF is important, there are many resources available online on creating accessible PDFs.

All pages that contain a video will get a warning message. If your video or podcast does have closed captioning or a transcript - simply ignore the warning message.

All videos on your website must have closed captions. All audio content such as podcasts must have an accompanying transcript. This is a WCAG 2.0 Level A requirement.

Note: The automatically generated captions on YouTube are rarely accurate and do not meet minimum acceptable standards in most cases - however, they can be easily edited/corrected!

For guidance, please go to Captioning & Description.

The default embedded Twitter timelines can be problematic for accessibility and usability reasons.

A typical timeline can have more than fifty focusable links or actions. For someone who navigates with only a keyboard, it is not a very pleasant experience tabbing through a really long timeline. 

Secondly, inline scrolling can cause many usability issues, (external link)  especially for people who have limited dexterity or motor disabilities. Inline scrolling is especially problematic on mobile since the widget takes up almost the full width of the screen, sometimes causing a person to get ‘trapped’ in the scroll area.

How to fix

Using Twitter’s data attributes, add the following settings to the embed code.

data-tweet-limit="1"

Limits the display to one tweet. It’s recommended to only use between 2 and 3 tweets. 

data-chrome="noheader nofooter"

Removes “Tweets by” header and redundant links. Ensure to replace "Tweets by" with a semantic header based on overall page structure.

<a data-tweet-limit="1" data-chrome="noheader nofooter" 
class="twitter-timeline" href="#">Tweets by Twitter</a>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

If done correctly, it should look like this:

Tweets by TorontoMet

Limitations

  • Does not automatically fix issues for you.
  • Does not check for broken links or spelling.
  • Does not crawl your entire website. The tool only checks for errors on a page-by-page basis.
  • Does not instantly re-check when you make a change. You must toggle the button to re-check the page again.
  • Does not guarantee your site is accessible or WCAG 2.0 Level AA compliant.