Checklist for Accessible Website – AA Level
In the last article, we looked at the tests you can easily perform to see if your website conforms to the WCAG 2.0 accessibility guideline A Level. Just to recap, for public organizations and organizations with more than 50 employees, Ontario requires a public-facing website to conform to A and AA level accessibility.
Here, we'll look at tests you can perform to see if your website conforms to AA level criteria.
Does your texts have a readable color contrast?
Texts should be easily distinguishable from the background. This largely depends on the size of the text, color of the text (called "foreground color") and the color of the background ("background color").
For example, this text fails the contrast test (It reads, this text fails the contrast test). Between the foreground color and background color, it has a contrast ratio of 3.23 : 1. For this text size, you'll want to have at least 4.5 : 1 ratio. (By the way, the contrast of body text to background is 9:25 : 1 in this blog.)
For larger texts that are bolded, the minimum ratio can be smaller. For example, this text would be a pass (It reads, this text is a pass).
You can use this contrast checker to easily test your for your content.
Does your website have a text size changer?
Many older people as well as people with partial vision impairment have a hard time seeing small text. Not everyone has assistive technology to help them. To pass this requirement, your website should have a text size changer that can change the size of the texts up to 200% larger without making your website unreadable. Logos and captions are an exception to this rule. An example of this is shown, below, for one of the websites we've created for a healthcare centre.
If you are using WordPress, One Click Accessibility is a useful plugin that lets you change size of text and other things without any coding.
(You can see that the size of the text changes when you click on the size changer.)
Avoid images of text.
An image of text is an image that has text inside. For example, if you use MS Paint, Photoshop, etc and type in some texts in your picture and save the picture as .jpg or .png, then you have an image of text. This practice is to be avoided because screen readers cannot read texts if they are a part of an image file. In general (but not always), if you can select a text, it's not an image of text. The same rule applies to buttons as well - avoid using an image with text as a button. An exception to this rule is logos and situations where images of text are essential to the functionality of a web application.
Are there other ways to reach web pages other than from your navigation bar?
People with visual impairment who use a screen reader may find it easier to locate web pages by using a search bar or a site map. A large website may have dozens of link items in the navigation bar, making it difficult for visually impaired people to locate the right page.
Does your content have clear headings and labels?
If you have a blog or pages that describe your services, are their contents divided into paragraphs with headings? Headings make it easier for people with learning disability or people with decreased cognitive functions to look for information faster. Use a descriptive heading before a paragraph. Wrap the heading in a heading tag such as <h1></h1> or <h2></h2>.
If you have a form that lets people enter their information, make sure each input field has a clear label (E.g. "Email" label above an email field).
Is the focus visible?
When you focus onto an element, the focus should be visible. This can take in the form of outline or change in color. Showing which element is focused helps people using only a keyboard to navigate a web page because they would know where they are on a web page.
Are foreign languages that appear in an English language web page marked as such?
If a foreign phrase appears in an English language website where <html> tag is marked as "lang=en", that foreign phrase should be marked as the language. For example, let's say you have a sentence: "My Japanese teacher gave me a birthday gift, and said what Japanese people often say, 'つまらないものですが', a sign of being humble." You should identify the Japanese text as follows:
My Japanese teacher gave me a birthday gift, and said what Japanese people often say, '<span lang="ja">つまらないものですが</span>', a sign of being humble.Is the navigation and search consistent across the website?
Your website navigation should be the same, at a specific location (usually at the top of a website), across your website. The navigation should interact with the users in a consistent manner. For example, hovering or clicking on a menu item may reveal a submenu for all menu items in all pages, and the menu items are presented in the same order. Also, the search bar, the site map, and the skip navigation link should be placed at a consistent place as well.
This consistency helps people using a screen reader and people with intellectual disability to locate information quickly.
Do the website elements have consistent functionalities?
Similar to the above requirement, various elements within your website should have consistent functionalities. For example, a printer icon may appear in different pages, and is labelled as "Print this page". It opens a print dialogue whenever a user clicks it to print the page. You should not use different icons for this task, and you should not label one printer icon as "Print this page" while another printer icon as "Open print dialog".
You can use the same icon for similar functions. For example, you can use the printer icon labelled as "Print Invoice" to let a user print an invoice and the same icon labelled as "Print Receipt" to let a user print a receipt.
Does your forms indicate errors and provide input assistance?
If a user submits a wrong value on a form, a message should be given to the user, saying that an error has occurred. Also, a suggestion of how to correct the error should be given to the user.
Does your legal form or form that sends financial data have a checking and confirmation system before final submission?
For forms that submit sensitive information such as legal and financial data, there should be a mechanism to check user's form submission as well as a mechanism to let users see what they submitted before they can confirm and finalize the submission. If they made a mistake, there should be a way for them to correct the mistake before finalizing the submission.
