If you are experiencing any issues with the accessibility checker, or need assistance improving the accessibility of your website. Please contact:
IT Accessibility Specialist, Digital Media Projects, CCS
416-979-5000, ext. 553284
Or leave feedback to help improve the tool!
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.
The Show Outline button displays the page's heading structure and the readability score of the page.
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.
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.
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.
- Usability: Should links open in new windows?, external link (Source: Smashing Magazine)
- Usability: Beware of opening links in a new window., external link (Source: webcredible)
- Accessibility: Opening new windows and tabs from a link only when necessary., external link (Source: W3/WCAG 2.1)
- Accessibility: Giving users advanced warning when opening a new window., external link (Source: W3/WCAG 2.1)
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!
- PDF: Unfit for Human Consumption, external link by Nielsen Norman Group
- Avoid PDF for On-Screen Reading, external link by Nielsen Norman Group
- Why GOV.UK content should be published in HTML and not PDF, external link by UK's Government Digital Service
How to remediate PDFs for accessibility
However, if sharing your PDF is important, there are many resources available online on creating accessible PDFs.
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.
Limits the display to one tweet. It’s recommended to only use between 2 and 3 tweets.
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:
- 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.