• Home
• Digital
• Web Accessibility
• Checklist (WCAG)

Comprehensive Reference / Checklist (WCAG)

To bring your website to Level A compliance, consider making changes based on the following guidelines:

Guideline 1. Perceivable - web content is made available to the senses – sight, hearing, and/or touch.

1.1 Text alternatives: provide text alternatives for any non-text content.

1.1.1 Non-text content Provide appropriate, equivalent alternative text for non-text elements. All images (including form image buttons and image maps) must have appropriate alt text.

What you can do: If your links are buttons, do not use tags that begin: "A link to..." When determining the right alt tags to use, think, "What would I put here if I could not use this image?" In general, images that get alt tags are those that provide context to content, inform about an action, or are the subject of the content itself. Some examples of good alt tag implementation are: A photo of Dr. Chakma: alt="Dr. Chakma" An image with Dr. Chakma's name captioned below it can use a null attribute to avoid redundancy: alt="" An image of Dr. Chakma that links to his homepage: alt="Dr. Chakma" Images that do not contain content and are decorative can have null alt tags: alt="" If the image is functional (like a banner or navigation button): alt="United Way fundraiser" If the image is decorative and serves no function rather than as a design element (ie: a graphical line break): alt="" If the image supplements a block of text but adds nothing to the content (ie: a tulip on campus in an article about mental health): alt="" If you've replaced standard form input buttons with custom graphics, the alt tag should inform what the button will do when clicked, for example: alt="Submit search" If using image maps, the main image itself must have an alt tag. The tag doesn't have to convey all of the regions of the image, just the idea that it's a container of content, like so: alt="An aerial map of Western" When using a logo on your page, providing text that signifies your name is sufficient: alt="Western University" Write alt tags and long descriptions for complex images on a separate linked page Add descriptive labels to form elements: <label for="name">Name</label> Add text labels to form inputs: <input id="name" type="text" name="textfield"> Identify embedded multimedia with accessible text Title any frames and iframes you use appropriately: <frames src="x.html" title="Navigation menu">

1.2 Time-based media: provide alternatives for time-based media.

Note: per the AODA legislation, this is not a requirement now but eventually will be. It is a good idea to get into the habit of doing this now.

1.2.1 Pre-recorded audio-only and video only Descriptive text transcripts are provided for live, web-based audio (podcasts, MP3 files, etc.) and for non-live, web-based video.	What you can do: Provide a detailed description of the content the user is about watch or listen to. Include speaker info, discussion topics, and start and end times How to set this up for YouTube: https://support.google.com/youtube/answer/2734796?hl=en
1.2.2 Captions (prerecorded) Synchronized captions are provided for non-live, web-based video (YouTube videos, etc.).	What you can do: Once recorded, spend some time captioning your video. Provide a detailed description of the video and post it along with the file in an easy-to-find and read place
1.2.3 Audio description or media alternative (pre-recorded) A descriptive text transcript OR audio description audio track is provided for non-live, web-based video.	What you can do: Provide a detailed description of the video and post it along with the file in an easy-to-find place.

1.3 Adaptable: create content that can be presented in different ways without losing information and structure.

1.3.1 Information and relationships Semantic markup is properly used to designate headings, special text. Tables should be used for tabular data only, not for design or layout. Lastly, form-input elements should have text labels associated with them.
What you can do: Structure page content using proper tags <h1> followed by <h2> and paragraphs surrounded by <p> tags; Use Cascade’s built-in editor tools when marking bolded or italicized text. If text is copied from Word, view source and change any <b> tags to <strong> and <i> to <em> to make it more accessible; Add captions to your data tables to explain what they are: <table> <caption>2016 Department Expenses</caption>; Use table headers to structure tables: <table> <caption>2016 Expense Reports</caption> <tr> <th>Faculty Member</th> </tr> Include summaries in all of your tables: <table summary="A table that details expenses paid for by the purchasing group over the past 12 months."> <caption>2016 Expense Reports</caption> <tr> <th>Faculty Member</th> </tr> Avoid complex tables with cells that span different rows and columns. Some screen readers still have difficulty parsing them.
1.3.2 Meaningful sequence The reading and navigation order (determined by code order) is logical and intuitive.	What you can do: Spend time to organize the content of your page into a logical flow and design
1.3.3 Sensory characteristics Instructions cannot rely on colour, shape, size or visual location or sound to illustrate concepts to the user.	What you can do: Do not use instructions similar to the following: Click the red button See the link above Click the button at the right (AUDIO) "Click the next button when you’re finished reading"

1.4 Distinguishable: make it easier for users to see and hear content. Separate foreground from background.

1.4.1 Use of colour Colour cannot be used to convey content or distinguishing visual elements. Similarly, do not use it to distinguish links from surrounding text unless the contrast between the link colour and the text colour is at differentiated by at least 3:1.	What you can do: Use tools like this Contrast Checker to ensure your colours are suitable: http://webaim.org/resources/contrastchecker/ Avoid using links that are the same colour as your text to illustrate their function Use alternative methods of function indication on images rather than colour like strong visual metaphors or consider using text instead
1.4.2 Audio control Make sure a mechanism is in place to stop, pause, and play music or adjust volume for audio that automatically plays for more than three seconds.	What you can do: Do not embed audio or video that auto plays in your page If you must have auto playing content, only use players that have easy to identify controls to stop, pause, and play video (like YouTube or Quicktime).

Guideline 2. Operable - Interface forms, controls, and navigation are operable.

2.1 Keyboard accessible: make all functionality available from a keyboard.

2.1.1 Keyboard All of the page’s functionality is available using a keyboard (unless functionality does not exist on a keyboard).	What you can do: Do not create keyboard shortcuts that interfere with browser and screen reader commands.
2.1.2 No Keyboard Trap Keyboard focus is not locked on any one element; the user can skip between all elements on the page using their keyboard.

2.2 Enough time: provide users with enough time to read and use content/instructions.

2.2.1 Timing Adjustable If a page or application has a time limit, the user is given options to turn off or alter that time limit.	What you can do: If you have a redirect page in place with content on the page, adjust the script to allow users to read the content before the page changes.
2.2.2 Pause, Stop, Hide Content that automatically blinks, scrolls, or moves for more than five seconds must be pauseable, stopped or hidden by the user, including news tickers, notification alerts and pages that automatically update and refresh (a live blog, for example).	What you can do: Before you put automatically-updating tools on your website, first ensure there are Play, Stop and Pause controls attached to it or omit them.

2.3 Seizures: do not design content that could cause seizures.

2.3.1 Three flashes or below No page content flashes for more than three times per second unless that element contains no red or the flashes are small or of low contrast.

What you can do: Do not use blinking content on your site. Instead, rely on well-written and well-designed content to draw attention to things.

2.4 Navigable: provide ways to help users navigate, find content and determine where they are.

2.4.1 Bypass Blocks A link to skip navigation and other page elements are repeated across web pages.	What you can do: Use breadcrumbs to provide links through a page Provide anchor links to pages with lengthy content
2.4.2 Page Titles All pages should have a descriptive and informative page title.	What you can do: Consider the content that will be on the page when writing your page title Your title should describe the topic or purpose of the page
2.4.3 Focus Order The navigation order of links, form elements, etc. is logical and intuitive.	What you can do: Plan your website, content, and links before committing them to the page; Organize links alphabetically or break long long lists into shorter, easier to consume lists.
2.4.4 Link Purpose The purpose of the link can be determined from the link alone and if links are close to one another their target is identifiable from within the text.	What you can do: Do not use words like “click here” to indicate action; If you have a bunch of links on the page, test the language you use in your links by putting them next to each other and see if you can tell the difference between the links via your indicator text.

Guideline 3. Understandable - content and interface are understandable.

3.1 Readable: make text content readable and understandable.

3.1.1 Page Language The page's language is identified using the HTML lang attribute.

What you can do: Use html declaration <html lang="en">

3.2 Predictable: make web pages appear and operate in predictable ways.

3.2.1 On Focus When a page element receives focus, it does not initiate a change of context (e.g. rolling over a link should not open a new window or load new page)	What you can do: Activate things in ways that are predictable for users. For example, Page pops up a new window only when the user clicks on a button rather than using hover state to pop up a new window A “submit” button is used to move on to the next screen rather than having the next screen appear automatically
3.2.1 On Input User-initiated changes do not automatically cause a change of context unless the user has been advised of the behaviour before using the component (e.g. entering information in a form does not load a new form field or submits a form)	What you can do: Ensure that data or a form control has predictable effects. For example, Provide “submit” button for all forms (.html, .pdf, flash, etc) Describe what will happen when a change to a form control causes a change of context

3.3 Recovery from errors: help users avoid and correct mistakes.

3.3.1 Error Identification If an input error is detected, the item that is in error is identified and the error is described to the user in text. Users are allowed to easily fix the error and resubmit the form.	What you can do: For forms with mandatory fields Indicate required fields (in all types of documents) Provide text descriptions to identify required fields that were not completed
3.3.2 Labels or Instructions Labels or instructions are provided when content requires user input.	What you can do: Provide expected data format and example Provide text instructions at the beginning of a form or set of fields that describes the necessary input Provide text descriptions to identify required fields that were not completed

Guideline 4. Robust- content can be used reliably by a wide variety of user agents, including assistive technologies.