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@ryerson.ca
416-979-5000, ext. 553284

Report a bug

Or leave feedback to help improve the tool!

New! The accessibility checker has a new look and features. Check the readability score to give you an idea on how easy it will be for someone to read your page.

  

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.

Screenshot of the accessibility checker flagging two errors.

Getting started

The accessibility checker button is located in the bottom right corner of the browser window.

  1. Press the button to scan the page.
    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.
  2. If you make any corrections while the checker is enabled: toggle the button off and then back on again to re-check the page.
Screenshot of Accessibility Checker button visually located in bottom right corner.

States

The accessibility checker has three states.

Screenshot of the accessibility checker error panel.

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.

Screenshot of the accessibility checker warning panel.

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.
Screenshot of the accessibility checker no errors found panel.

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.

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!

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

The Show Outline feature visually shows errors with the heading hierarchy.
Screenshot of the Show Outline panel when there are no errors.

Readability score 

The accessibility checker calculates the readability score from all paragraph 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 your writing is understandable and easy to digest. Not only is it great for accessibility, it can greatly increase your site's search engine optimization (SEO). Good readability benefits everyone.

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

Screenshot of the readability score feature on a sample page. It says very difficult, although is not considered an error.

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.
  • Bulleted or numbered lists are excluded from the readability score.
    • List content often lacks consistent punctuation. For example, some people do not add periods at the end of a list item, which would make the readability scanner think it's a very long sentence. 
    • The readability score calculates the score of all paragraph or <p> tags in the main content region.

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 web page 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 your PDF is important, there are many resources available online on creating accessible PDFs.

How to use the Accessibility Checker in Acrobat

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 RyersonU

Limitations

  • Available in the responsive template only.
  • 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 Level AA compliant.