WCAG GES Checklist

7/23/2019 WCAG GES Checklist

1/37

WCAG Check List

Table of Contents

All Pages .......................................................2

Page Title .................................................. 2

Headings ................................................... 2

Lists .......................................................... 3

Markup ..................................................... 3

Content order without CSS ...................... 4

Colour Contrast ........................................ 5Zoom 200% .............................................. 5

Parsing ...................................................... 6

Links ......................................................... 6

Another language ..................................... 8

Image ......................................................... 10

Alt text .................................................... 10

Long description ..................................... 12

Image text .............................................. 12

Table .......................................................... 14

Scope attribute....................................... 14

Empty space ........................................... 15

Layout VS complex table ........................ 15

Caption element..................................... 15

Form ...........................................................17

Button .......................................................... 17

Field ............................................................. 17

New window ................................................ 18

Label............................................................. 18

Warning instruction (change on context) .... 18

Error warning ............................................... 18

Label instruction .......................................... 19

Suggestion correction .................................. 20

Financial data ............................................... 20

Time limit ..................................................... 21

Slideshow and Special Form ...........................21

Adjusted/ turned off Time limit .................. 21

Pause, Stop and Hide blinking content ........ 22

Tree Flashes threshold ................................ 22

Non-Html Document .......................................23

With an html as the primary format ............ 23

With a non- html as the primary format ..... 23

With multiple non- html as primary format 23

Video & Audio ...............................................24

Exclusions ...................................................... 24

Pre-recorded audio-only or video-only .......... 24

Pre-recorded synchronized audio-video ....... 25

Captioning tools.............................................. 27

Create an Accessible Pdf ...................................29

With Word ..................................................... 29

With PDF X PRO ............................................. 26

Online tutorial ................................................ 33

Online Tools

Visionnez des tutoriels vido sur la cration dedocuments Word, Excel, PDF, PowerPoint et deformulaires accessibles ......................................33

Bonne pratique soumission dun document WordAccessible lquipe Web ..............................34

Download the Web Experience Toolkit (WET)Collaborative open source project led by theGovernment of Canada ......................................35

uottawa online resources & tools .. ......... ........ .36


2/37

WCAG Check List

Return to Table of Content

2 | P a g e

All Pages

Before you start make sure that:

The page you want to check is opened in Firefox

You have downloaded theWAVEand theAddonstools on Firefox

You selected Open Errors, Features and Alertsin the menu bar

Elements Related WAVE icons Rules YES

NO

0BPage Title is missing or not informativeThe page title (at the top of the browser window )is uniqueand identifies the contents or purpose of the Web page

Helpful links G88: Providing descriptive titles for Web pages H25: Providing a title using the title element G127: Identifying a Web page's relationship to a larger collection of Web pages

1BHeadings Possible heading

Missing heading structure

- Heading element is present

- H? tags are used for, and only for, headings- Only one h1 at the top of the page- Descriptive headings (they are titles and nothing else)-

Headings where needed (if its a title, there is an h- headings do not skip a level (i.e., you cant jump from

H1 to H3)- There are no empty headings (h as a text that

follows)

Helpful links H42: Using h1-h6 to identify headings
http://wave.webaim.org/toolbarhttp://wave.webaim.org/toolbarhttp://wave.webaim.org/toolbarhttps://addons.mozilla.org/en-US/firefox/addon/web-developer/developershttps://addons.mozilla.org/en-US/firefox/addon/web-developer/developershttps://addons.mozilla.org/en-US/firefox/addon/web-developer/developershttp://www.w3.org/WAI/GL/WCAG20/WD-WCAG20-TECHS/G88.htmlhttp://www.w3.org/WAI/GL/WCAG20/WD-WCAG20-TECHS/G88.htmlhttp://www.w3.org/TR/WCAG20-TECHS/H25http://www.w3.org/TR/WCAG20-TECHS/H25http://www.w3.org/TR/WCAG20-TECHS/G127.htmlhttp://www.w3.org/TR/WCAG20-TECHS/H42http://www.w3.org/TR/WCAG20-TECHS/H42http://www.w3.org/TR/WCAG20-TECHS/G127.htmlhttp://www.w3.org/TR/WCAG20-TECHS/H25http://www.w3.org/WAI/GL/WCAG20/WD-WCAG20-TECHS/G88.htmlhttps://addons.mozilla.org/en-US/firefox/addon/web-developer/developershttp://wave.webaim.org/toolbar


3/37

WCAG Check List


3 | P a g e

2BUse the

correct lists

Ordered list (1-2-3 or a,b,c)()

Unordered list (no use of numbers orletters)()

Definition list (to define terms (a glossary forexample)()

- The content that has the visual appearance of a list(with or without bullets) is marked as an unordered

list.- The content that has the visual appearance of anumbered list is marked as an ordered list.

- The content is marked as a definition list when termsand matching definitions are presented in the list.

Helpful links H48: Using ol, ul and dl for lists

3BCorrect

markup

Emphasized text ()

Strongly emphasized text ()

Quote or Blockquote ( or )

Cite ()

Italic - Use for content that should beemphasized

Bold - Use for content that should bestrongly emphasized

Possible blockquote - If the text in question isactually a quotation, use the or element.

- is used when you want to emphasize text- is used when you want to strongly

emphasize text- is used for citations- is used for a block quotation- is used for an inline quotation- is used for subscript- is used for superscript

Helpful links H49: Using semantic markup to mark emphasized or special text
http://www.w3.org/WAI/GL/WCAG20/WD-WCAG20-TECHS/H48.htmlhttp://www.w3.org/WAI/GL/WCAG20/WD-WCAG20-TECHS/H48.htmlhttp://www.w3.org/TR/WCAG20-TECHS/H49http://www.w3.org/TR/WCAG20-TECHS/H49http://www.w3.org/TR/WCAG20-TECHS/H49http://www.w3.org/WAI/GL/WCAG20/WD-WCAG20-TECHS/H48.html


4/37

WCAG Check List


4 | P a g e

4BThe order of

content must

make sense

without CSS

1. Go on WAVE Firefox toolbar2. Click the Disable Stylesbutton3. Check that the order of the content on the page still makes sense.4. Clicking the Enablestylesbutton to turn the style back on.N.B.: White space characters are not used within words. (e.g., W E L C O M E ).

Helpful links G57: Ordering the content in a meaningful sequence

Do not rely on

position, size or

shape to

provide

information

- No Click the small square icon to go to the next section, or Find additional information in the leftcolumn.

-

No use of a non-text, graphical symbol alone to convey information (unless no other way).

Helpful links C8: Using CSS letter-spacing to control spacing within a word F26: Failure of Success Criterion 1.3.3 due to using a graphical symbol alone to convey information
http://www.w3.org/TR/WCAG20-TECHS/G57.htmlhttp://www.w3.org/TR/WCAG20-GENERAL/C8.htmlhttp://www.w3.org/TR/WCAG20-GENERAL/C8.htmlhttp://www.w3.org/TR/WCAG20-TECHS/F26http://www.w3.org/TR/WCAG20-TECHS/F26http://www.w3.org/TR/WCAG20-GENERAL/C8.htmlhttp://www.w3.org/TR/WCAG20-TECHS/G57.html


5/37

WCAG Check List


5 | P a g e

Colour

contrast

Info ValueEnsure colour is not used as the only visual means of conveying information

Font- If there is only text in the content area and it is black text on a white background, you can pass this criterion- Text and text in images less than 18 points (if not bold) and less than 14 points (if bold) have a contrast ratio

of at least 4.5:1. With the followingExceptions1.Links:

- Links on the page is underlined or otherwise visually identifiable (i.e., bolded, italicized) as a link withoutrelying on color (hue). See exampleNon-color cues2

- N.B1: If the non-color cue only happens when the mouse hovers over the link or when the link receives focus, it fails.

- N.B2: If the link is in a different color and bolded, it would not fail because the boldness is not color dependent.

Style Sheet colors (foregrounds and backgrounds)- The background color is defined on the body element; however the foreground color is not defined. This would be a

fail.- Background color may also be specified in the CSS by using 'background-image' or 'background' (with the URI of the

image, e.g., background: #efefef url (images/bg.gif)).

-

With background images, it is still necessary to specify a background color, because users may have images turned offin their browser. The background image and the background color both need to be checked for colour contrast.

Helpful links

Contrast AnalyserOnly Level A and AA need to pass. G183: Using a contrast ratio of 3: 1 with surrounding text and providing additional visual cues on focus for links or controls where color alone is used to identify them C9: Using CSS to include decorative images

14.2.1 Background properties: 'background-color', 'background-image', 'background-repeat', 'background-attachment', 'background-position', and 'background

7BZoom at

200% without

distortion

N/ANB: Enlarging text may introduce a horizontal scroll.It is acceptable provided that the page content isreadable and usable. See moreZoom techniques

- Using Firefox: From the Viewmenu, select Zoomandverify that Zoom Text Onlyis selected. Then, pressCtrl++three times to increase the font size to 200%its default.

-

Helpful linksZoom techniques
http://www.paciellogroup.com/resources/contrastAnalyserhttp://www.paciellogroup.com/resources/contrastAnalyserhttp://www.w3.org/TR/WCAG20-TECHS/G183http://www.w3.org/TR/WCAG20-TECHS/C9http://www.w3.org/TR/CSS2/colors.html#background-propertieshttp://www.w3.org/TR/CSS2/colors.html#background-propertieshttp://www.w3.org/TR/CSS2/colors.html#background-propertieshttp://www.w3.org/TR/WCAG20-TECHS/C9http://www.w3.org/TR/WCAG20-TECHS/G183http://www.paciellogroup.com/resources/contrastAnalyser


6/37

WCAG Check List


6 | P a g e

G142: Using a technology that has commonly-available user agents that support zoom SL22: Supporting Browser Zoom in Silverlight (Silverlight) SL23: Using A Style Switcher to Increase Font S ize of Silverlight Text Elements (Silverlight)

Ensuring that text containers resize when the text resizes AND using measurements that are relative to other measurements in the content by using one or more of the following techniques:

C28: Specifying the size of text containers using em units(CSS)

Techniques for relative measurements C12: Using percent for font sizes(CSS)

C13: Using named font sizes(CSS) C14: Using em units for font sizes (CSS)

Techniques for text container resizing SCR34: Calculating size and position in a way that scales with text size(Scripting) G146: Using liquid layout G178: Providing controls on the Web page that allow users to incrementally change the size of all text on the page up to 200 percent

G179: Ensuring that there is no loss of content or functionality when the text resizes and text containers do not change their width

8BParsingN/AElements

have complete start and end tagsare nested according to their specificationsdo not contain duplicate attributesID attributes have unique values

Use a tool for validating HTMLhttp://validator.w3.org

Helpful links G134: Validating Web pages G192: Fully conforming to specifications H88: Using HTML according to spec (HTML) H74: Ensuring that opening and closing tags are used according to specification (HTML)AND H93:Ensuring that id attributes are unique on a Web page (HTML) ANDH94: Ensuring

that elements do not contain duplicate attributes (HTML)

H75: Ensuring that Web pages are well-formed (HTML)

SL33: Using Well-Formed XAML to Define a Silverlight User Interface (Silverlight)
http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G142http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G142http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/SL22http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/SL22http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/SL23http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/SL23http://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.htmlhttp://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.htmlhttp://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/C12http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/C12http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/C13http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/C13http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/C14http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/C14http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/SCR34http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/SCR34http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G146http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G146http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G178http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G178http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G179http://validator.w3.org/http://validator.w3.org/http://validator.w3.org/http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G134http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G134http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G192http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G192http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/H88http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/H88http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/H74http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/H74http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/H93http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/H93http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/H93http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/H94http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/H94http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/H94http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/H94http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/H75http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/H75http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/SL33http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/SL33http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/SL33http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/H75http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/H94http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/H94http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/H93http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/H74http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/H88http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G192http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G134http://validator.w3.org/http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G179http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G178http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G146http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/SCR34http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/C14http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/C13http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/C12http://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.htmlhttp://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/SL23http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/SL22http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G142


7/37

WCAG Check List


7 | P a g e

9Links Event handler - If the onmouseover/out effectexposes new content, this content will likely not be

accessible to most assistive technologies. Provide aredundant, alternative way to access the samecontent with a keyboard or remove the mouse-overeffect.If you see that icon^, remove the mouse-over effector provide another path (even if redundant)

Tabindex - Remove tabindex if the natural taborder is logical or restructure page content toensure that the tab/reading order is logical.

Broken skip navigation link

Hidden skip link. Make sure skip links arevisible at least when they receive keyboard focus.

Links can be selected in order

How to check1. Go on WAVE Firefox toolbar: Click the Disable Styles

button.2. Click in the address bar of the browser.3. Press the Tab key and test that you can:

- See where you are as you tab through thepage.

- Move to all elements in order- Use any forms in order.- Press Enter to activate the elements.

When a page element receives focus, it mustnot result in a substantial change to the page

(pop-up window or change of focus).4. If tabindex is used, check that the tab order specified

by the tabindex attributes follows relationships in thecontent.

5. Click the Enable styles button to turn the styles backon.

Name your link texts correctly: Repeated link texts(e.g.,"Read more" Contact Us). When repeated link texts arebeing used, content is needed to understand how link textdescribes the purpose of the link. Check whether the content

is contained in the same sentence, paragraph, list item, ortable cell, or in the preceding heading. See Examples ofGoodlink texts 3

The user mustbe warned ofany pop-upwindows andlinks that

Example of a warning of a pop-up window in the

text:

Al l aboutKni t t i ng( opens i n new wi ndow)

Example of a warning to a link that leads to an external site

(without pop-up window):


8/37

WCAG Check List


8 | P a g e

bring to anexternal site.

Example of a warning of a pop-up window in CSS:

(this example uses an accessible mouse hoverwarning that a link ``Opens in a new window``Check example 2 on this link:http://www.w3.org/TR/2014/NOTE-WCAG20-TECHS-20140311/G201

National Defence and the Canadian Forceshttp://www.rmc.ca/index-eng.php

Helpful links H4: Creating a logical tab order through links, form controls, and objects

G59: Placing the interactive elements in an order that follows sequences and relationships within the content G90: Providing keyboard-triggered event handlers G91: Providing link text that describes the purpose of a link H30: Providing link text that describes the purpose of a link for anchor elements (HTML) H24: Providing text alternatives for the area elements of image maps (HTML) FLASH27: Providing button labels that describe the purpose of a button (Flash)

Allowing the user to choose short or long link text using one of the techniques below: G189: Providing a control near the beginning of the Web page that changes the link text SCR30: Using scripts to change the link text (Scripting) FLASH7: Using scripting to change control labels (Flash)

Providing a supplemental description of the purpose of a link using one of the following techniques: C7: Using CSS to hide a portion of the link text (CSS)

Semantically indicating links using one of the following techniques: PDF11: Providing links and link text using the Link annotation and the /Link struct ure element in PDF documents (PDF) PDF13: Providing replacement text using the /Alt entry for links in PDF documents (PDF) SL18: Providing Text Equivalent for Nontext Silverlight Controls With AutomationProperties.Name (Silverlight)

Creating links to skip blocks of repeated material using one of the follo wing techniques:

G1: Adding a link at the top of ea ch page that goes directly to the main content area

G123: Adding a link at the beginning of a block of r epeated content to go to the end of the block

G124: Adding links at the top of the page to each area of the content
http://www.w3.org/TR/2014/NOTE-WCAG20-TECHS-20140311/G201http://www.w3.org/TR/2014/NOTE-WCAG20-TECHS-20140311/G201http://www.w3.org/TR/2014/NOTE-WCAG20-TECHS-20140311/G201http://www.rmc.ca/index-eng.phphttp://www.rmc.ca/index-eng.phphttp://www.w3.org/TR/WCAG20-TECHS/H4.htmlhttp://www.w3.org/TR/WCAG20-TECHS/H4.htmlhttp://www.w3.org/TR/WCAG20-TECHS/G59.htmlhttp://www.w3.org/TR/WCAG20-TECHS/G59.htmlhttp://www.w3.org/TR/WCAG20-TECHS/G90.htmlhttp://www.w3.org/TR/WCAG20-TECHS/G90.htmlhttp://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G91http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G91http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/H30http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/H30http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/H24http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/H24http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/FLASH27http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/FLASH27http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G189http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G189http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/SCR30http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/SCR30http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/FLASH7http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/FLASH7http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/C7http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/C7http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/C7http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/C7http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/PDF13http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/PDF13http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/SL18http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/SL18http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G189http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G189http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G123http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G123http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G124http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G124http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G124http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G123http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G189http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/SL18http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/PDF13http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/C7http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/C7http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/FLASH7http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/SCR30http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G189http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/FLASH27http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/H24http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/H30http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G91http://www.w3.org/TR/WCAG20-TECHS/G90.htmlhttp://www.w3.org/TR/WCAG20-TECHS/G59.htmlhttp://www.w3.org/TR/WCAG20-TECHS/H4.htmlhttp://www.rmc.ca/index-eng.phphttp://www.w3.org/TR/2014/NOTE-WCAG20-TECHS-20140311/G201http://www.w3.org/TR/2014/NOTE-WCAG20-TECHS-20140311/G201


9/37

WCAG Check List


9 | P a g e

SL25: Using Controls and Programmatic Focus to Bypass Blocks of Content in Silverlight (Silverlight)

Grouping blocks of repeated material in a way that can be skipped, using one of the following techniques:

H69: Providing heading elements at the beginning of each section of content (HTML)

PDF9: Providing headings by marking content with heading tags in PDF documents (PDF)

H70: Using frame elements to group blocks of repeated material (HTML)ANDH64: Using the title attribute of the frame and iframe elements (HTML)

SCR28: Using an expandable and collapsible menu to bypass block of content (Scripting)

SL29: Using Silverlight "List" Controls to Define Blocks that can be Bypassed (Silverlight)

C6: Positioning content based on structural markup

10BMore than

one language

Check that content on a page that is in a different language than the language of the page, is identified by using thelang or xml:lang attribute, as appropriate for the HTML or XHTML version that is used. (e.g., , .

Helpful links H57: Using language attributes on the html element (HTML) FLASH13: Using HTML language attributes to specify language in Flash content (Flash) PDF16: Setting the default language using the /Lang entry in the document catalog of a PDF document (PDF)

PDF19: Specifying the language for a passage or phrase with the Lang entry in PDF documents (PDF)

GLOSSARY1

Exceptions

Large Text: Large-scale text has a contrast ratio o f at least 3:1. Large text is at least 18 points if not bo ld and at least 14 points if bold.

Incidental: There is no minimum contrast requirement for text that is part of an inactive user interface component, pure decoration, not visible to anyone, or part of a picture thatcontains significant other visual content.

Logotypes: There is no minimum contrast requirement for text that is part of a logo or brand name.

Examine the code of the Web page.

Check to see if an author-specified foreground colour is present.

Check to see if an author-specified background colour is present.

2Non-color cues:

Required fields in a form are visually indicated with red and are also prefaced with an asterisk.

The instructions for completing a form indicate that all required fields are displayed in red and are emphasized. For each required field the text of the label is red and marked upwith a element for extra emphasis.

A table is used for a Project Status r eport. A Task column lists each task and a Status Column uses colour and text to indicate the status of each task. In-progress is in yellow,Completed is in green, and Delayed is in red.

Links are blue and underlined; v isited links are magenta and underlined, ac tive links are red, underlined with a highlighted light yellow background.
http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/SL25http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/SL25http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/PDF9http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/PDF9http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/H70http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/H70http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/H64http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/H64http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/H64http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/SCR28http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/SCR28http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/SL29http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/SL29http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/C6http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/C6http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/H57http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/H57http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/FLASH13http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/FLASH13http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/PDF16http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/PDF16http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/PDF19http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/PDF19http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/PDF19http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/PDF16http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/FLASH13http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/H57http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/C6http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/SL29http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/SCR28http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/H64http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/H70http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/PDF9http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/SL25


10/37

WCAG Check List


10 | P a g e

3Good link texts:

Blocks of information on hotels. The information for each hotel consists of the hotel name as the heading, a description and a series of links to a map, photos, directions, guestreviews and a booking form that are in an unordered list.

A link contains text that gives a description of the information provided by that URL. A page contains the sentence T here was much bloodshed during the Medieval period ofhistory. (Medieval period of history is a link.)

There are two links with the same link text About Us on a page. They both go to different Web pages. One is on the institutional menu on the left with a heading IM Gp, theother is on the Alumni Space on the s upplemental menu on the right with a heading uOttawa Links. When checked, the text of the link combined with the text of that headingdescribes the purpose of the link and distinguishes the two links. This would pass. Whenever possible, provide link text that identifies the purpose of the link without needingadditional context. So the better way would be two have one link text About Alumni and the other About uOtta wa.

A large document spans many Web pages; the first page is a table of contents with links to a different Web page for each Chapter. There are navigation links on each page to navigatethrough the document to previous page, table of contents and next page. Ensure that the links are consistently identified on each page. In this example Chapter numbers are used,but you could use the Subject or topic of the chapter, the key is to provide link text that identifies the purpose of the link and be consistent:.e.g., Chapter 1 | T able of Contents |Chapter 3. Table of Contents is not called Index on some pages. Chapter subject or topic is not used on some pages and Chapter numbers on others. Do not use previous and next, asthe purpose of the link cannot be determined from this link text alone. This would be a fail. If previous with a title attribute of Chapter 1 and next with a title attribute of C hapter 3are used this would pass, but is not the best way.

Image (including logos, mini images, maps and tables in a jpeg format)

11BElementsRelated WAVE icons Rules YES

NO

All images

needs an

alternative

Text

Linked image missing alternative text

Spacer image missing null alternative text

Image button missing alternative text

Image map missing alternative text

Suspicious alternative text - Check to makesure the alt text is descriptive enough.

Redundant alternative text - Change the alttext or the adjacent text to eliminate redundancy.

A nearby image has the same alternativetext - Change the alt text of one of the images to

- Every image must have an alt attribute (alt=""). whether itcontains content or is null alt=""

- Alternative text may be provided in the alt attribute or inthe surrounding context of the image. It shouldrepresentthe CONTENT and FUNCTION of the image.

- Alternative text should not be redundant (i.e., be the same

as adjacent or body text); or use the phrases image ofor graphic of

- SeeExamples of alternate texts4.


11/37

WCAG Check List


11 | P a g e

eliminate redundancy.

Alternative text - Ensure the alternative text

conveys equivalent content, is accurate, and issuccinct.

Null or empty alternative text - Ensure allgraphics have alt text unless the graphic is a spaceror if it is used for decorative purposes.

Null or empty alternative text on spacer -Ensure that this graphic is a spacer and does notconvey any important information.

Linked image with alternative text - Ensurethe alternative text conveys the equivalent contentof the image and/or the function of the link.

Image button alternative text - Ensure thealternative text describes the function of the imageinput element.

Image map alternative text - Ensure thealternative text for the image map image isappropriate. The alternative text is typically empty

(alt=""), unless the image conveys content notconveyed in its hotspots.

Hotspot alternative text - Ensure thealternative text describes the function of the imagemap hotspot.

Helpful links C9: Using CSS to include decorative images14.2.1 Background properties: 'background-color', 'background-image', 'background-repeat', 'background-attachment', 'background-position',

and 'background G82: Providing a text alternative that identifies the purpose of the non-text content
http://www.w3.org/TR/WCAG20-TECHS/C9http://www.w3.org/TR/CSS2/colors.html#background-propertieshttp://www.w3.org/TR/CSS2/colors.html#background-propertieshttp://www.w3.org/TR/CSS2/colors.html#background-propertieshttp://www.w3.org/TR/WCAG20-TECHS/G82.htmlhttp://www.w3.org/TR/WCAG20-TECHS/G82.htmlhttp://www.w3.org/TR/WCAG20-TECHS/G82.htmlhttp://www.w3.org/TR/CSS2/colors.html#background-propertieshttp://www.w3.org/TR/CSS2/colors.html#background-propertieshttp://www.w3.org/TR/WCAG20-TECHS/C9


12/37

WCAG Check List


12 | P a g e

H2: Combining adjacent image and text links for the same resource H24: Providing text alternatives for the area elements of image maps H30: Providing link text that describes the purpose of a link for anchor elements

12BLong

Description5

for complex

images or

graphics

The longdesc attribute does not contain aURL of another web page containing the longdescription.

Long description - Ensure that the longdescription is accurate, adequate, and contains aURL of another web page containing the longdescription.

-

For complex images such as charts and graphs, check thata short text alternative exists on the element, asalways, but also check that a long description of theinformation represented in the chart or graph is alsopresented in text format.

- SeeLong Descriptions5

Helpful links

H45: Using longdesc G73: Providing a long description in another location with a link to it that is immediately adjacent to the non-text content G74: Providing a long description in text near the non-text content, with a reference to the location of th e long description in the short description G92: Providing long description for non-text content that serves the same purpose and presents the same information G94: Providing short text alternative for non-text content that serves the same purpose and presents the same information as the non-text content

13BIf Image of

Texts cannot

be avoided.

- Text in logos is permitted, as are marketing and branding images but should have good, descriptive ALTattributes.

- If the same visual presentation can be made using text alone, an image is not used to present that text.- Use CSS to visually present the text.- Use a background image with text overlay using CSS to get the same effect

-

SeeExamples of images of text6

Helpful links C30: Using CSS to replace text with images of text and providing user interface controls to switch

Glossary4Examples of alternate texts

A search button uses an image of a magnifying glass. The Alt text is search and not magnifying glass.

An image of a submit button in a form, the input element has an alt attribute Submit, . The alt attribute
http://www.w3.org/TR/WCAG20-TECHS/H2.htmlhttp://www.w3.org/TR/WCAG20-TECHS/H2.htmlhttp://www.w3.org/TR/WCAG20-TECHS/H24.htmlhttp://www.w3.org/TR/WCAG20-TECHS/H24.htmlhttp://www.w3.org/TR/WCAG20-TECHS/H30.htmlhttp://www.w3.org/TR/WCAG20-TECHS/H30.htmlhttp://www.w3.org/TR/WCAG20-TECHS/G73.htmlhttp://www.w3.org/TR/WCAG20-TECHS/G73.htmlhttp://www.w3.org/TR/WCAG20-TECHS/G74.htmlhttp://www.w3.org/TR/WCAG20-TECHS/G74.htmlhttp://www.w3.org/TR/WCAG20-TECHS/G92.htmlhttp://www.w3.org/TR/WCAG20-TECHS/G92.htmlhttp://www.w3.org/TR/WCAG20-TECHS/G94.htmlhttp://www.w3.org/TR/WCAG20-TECHS/G94.htmlhttp://www.w3.org/TR/WCAG20-TECHS/C30.htmlhttp://www.w3.org/TR/WCAG20-TECHS/C30.htmlhttp://www.w3.org/TR/WCAG20-TECHS/G94.htmlhttp://www.w3.org/TR/WCAG20-TECHS/G92.htmlhttp://www.w3.org/TR/WCAG20-TECHS/G74.htmlhttp://www.w3.org/TR/WCAG20-TECHS/G73.htmlhttp://www.w3.org/TR/WCAG20-TECHS/H30.htmlhttp://www.w3.org/TR/WCAG20-TECHS/H24.htmlhttp://www.w3.org/TR/WCAG20-TECHS/H2.html


13/37

WCAG Check List


13 | P a g e

indicates the buttons function.

A picture shows how a knot is tied an d it includes arrows indicating the direction of the ropes. The Alt t ext describes how to tie the knot, not what the picture looks like.

A picture shows what a toy looks like from the front. The Alt text is front view of the toy. A logo of the TechTron company appears beside each item in the product list. The Alt text is TechTron.

A heading contains a picture of the words, The History of War in stylized text. The Alt text is The History of War.

An image of a series of books on a sh elf contains interactive areas that link to a Web page about the particular book. The Alt text is T he books available to buy in this section. Select abook for more details about that book. T hereby, it describes the interactive nature of the picture.

Redundant text alternative. An icon and text link are side by side. The text alternative for the image is the same as the text link beside it, leading to a stutter effect as th e link is readtwice. The preferred method to address this is to put the text and image together in one link, and pr ovide null alternative text on the image to eliminate duplication of text. E.g. Products page

A portrait image of John Smith is on his biography page. The caption reads John Smith. The alt attribute should be null alt=. If the image did not have a caption, the alt at tributeshould be alt=John Smith.

An image of a Field Unit badge is located on the page describing the Field Unit. The alternative text in the image would be alt=Field Unit Name Badge

14B

5Long Descriptions

Methods that can be used for providing long descriptions:

Method 1: Check that the long description is in the context of the page itself.

Example: A line graph shows average winter temperatures from the past 10 years. Alt text is Average winter temperatures 1996-2006. The requirement for a long description is metbecause the data table that was used to generate the line graph is present on the page.

Example: A chart showing sales for October. Alt text is October sales chart. A long description is provided by introductory t ext on the page This Bar Chart shows sales for October.There are 6 salespersons. Maria is highest with 349 units. Frances is next with 301. Next comes Juan with 256, Sue with 250, Li with 200 and Max with 195.

Method 2:Check that a link to a long description is provided via a normal text link.

Example: Below an image of a graph is a sentence that includes a text link.

See the text description of this graph that is available on a separate page.

Method 3: Check that link to a long description is provided via the longdesc attribute in the tag.

Example:

Notes:

The longdesc value must be the URL of the long description page. It should NOT contain the long description text itself.

The usual Alt text is present, but it should include the fact that a link to the long description is provided.

A problem arises when exclusively using a longdesc: Browsers do not currently provide any visual indication that the image references a long description page. Many browsers do


14/37

WCAG Check List


14 | P a g e

provide this information in the image details or context menu, but this is not readily apparent. The link is typically not visible to sighted readers. The longdesc does nothing more thanprovide access to the separate page where a long description is available. Because the long description page is useful to all users, if longdesc is used, it should be used in conjunctionwith a standard link to the long description page as in Method 2.

6

Examples of images of text:

A right menu contains a linked image of one of the Government of Canada programs. The text embedded in the image reads "Better Jobs Next phase of Canada's Economic Action Plan".There is a text link immediately below that reads "Better jobs - Next phase of Canada's Economic Action Plan". The code would be: Better jobs - Next phase of Canada's E conomic Action Plan

A right menu contains what looks like an image with text in it. T he image is a background image and the text is o verlaid using CSS over the background image.

Table

Elements Related WAVE icons Rules YESNO

15BProper

Scope7

attribute is

used

Empty table header

Table header cell - Ensure that the cell is actually a headercell for tabulardata. If it is not, change the to .

Row header cell - Ensure that the cell is actually a headercell for tabular data and that it is a row header.

Column header cell - Ensure that the cell is actually aheader cell for tabular data and that it is a column header.

All tables must have:- Tabular8information.- Table markup(tr, th, and td).

Simple Tables9:(ex: Headers on rows OR columns)

- Usually do not need to use scope attribute

Complex tables10:(ex: Headers on rows AND columns)

- Needscope attribute- When data cells are associated with more than

one row and/or one column header.

Helpful links H51: Using table markup to present tabular information H43: Using id and headers attributes to associate data ce lls with header cells in data tables H63: Using the scope attribute to associate header cells and data cells in data tables
http://www.w3.org/TR/WCAG20-TECHS/H51http://www.w3.org/TR/WCAG20-TECHS/H51http://www.w3.org/TR/2010/NOTE-WCAG20-TECHS-20101014/H63.htmlhttp://www.w3.org/TR/2010/NOTE-WCAG20-TECHS-20101014/H63.htmlhttp://www.w3.org/TR/2010/NOTE-WCAG20-TECHS-20101014/H63.htmlhttp://www.w3.org/TR/WCAG20-TECHS/H51http://www.w3.org/TR/WCAG20-TECHS/H51http://www.w3.org/TR/2010/NOTE-WCAG20-TECHS-20101014/H43.htmlhttp://www.w3.org/TR/2010/NOTE-WCAG20-TECHS-20101014/H43.htmlhttp://www.w3.org/TR/WCAG20-TECHS/H63.htmlhttp://www.w3.org/TR/WCAG20-TECHS/H63.htmlhttp://www.w3.org/TR/WCAG20-TECHS/H63.htmlhttp://www.w3.org/TR/2010/NOTE-WCAG20-TECHS-20101014/H43.htmlhttp://www.w3.org/TR/WCAG20-TECHS/H51http://www.w3.org/TR/2010/NOTE-WCAG20-TECHS-20101014/H63.htmlhttp://www.w3.org/TR/WCAG20-TECHS/H51


15/37

WCAG Check List


15 | P a g e

16BNo empty

spaces

The content which has the appearance of a table column is not using white space characters such as space, tab, linebreak, or carriage return to format the table and lay out the information.Use empty-cell class: table { empty-cells: show }http://www.w3.org/TR/CSS21/tables.html#propdef-empty-cells

-

Text should either be in a table or written as plain text content.-

Layout Table

or Data

Table?

Layout table - Ensure that the table is indeed a layouttable and that it does not contain tabular data. If it is a layouttable, eliminate all header cells (e.g., change to ).

Data table

1. The content has a relationship with othercontent?

2. The column and row content are related?

- If the answer is no": the table is a layout table- If the answer is yes":the table is a data table

For LayoutTables only

The content is in linear order that matches meaningful sequence How to check:

- Present the content in source code order orRemove the table markup from around the content.

CSS-based layouts are recommended in order to retain the defined semantic meaning of the HTML tableelements and toconform to the coding practice of separating presentation from content.

However, if a layout table is used, then thesummaryattribute11is not used or is null. The purpose of a layout table issimply to control the placement of content; the table itself is transparent" to the user. A summarywould break" thistransparency by calling attention to the table. A null summary(summary="") on layout tables is acceptable.

- The table must not include acaption element12

-

The summary attribute11must not be present or taged as null.

Helpful links F46: Failure of Success Criterion 1.3.1 due to using th elements, caption elements, or non-empty summary attributes in layout tables

For Data

Tables only

Thecaption12andsummary elements11are both optional.

Using a heading before the table and some paragraph text todescribe the tables organization and purpose is sufficient and

- If acaption element12is present, check that thecaption identifies the table.

- If both asummary attribute11and a captionelement are present, check that the summary
http://www.w3.org/TR/CSS21/tables.html#propdef-empty-cellshttp://www.w3.org/TR/CSS21/tables.html#propdef-empty-cellshttp://www.w3.org/TR/CSS21/tables.html#propdef-empty-cellshttp://www.w3.org/TR/WCAG20-TECHS/F46http://www.w3.org/TR/WCAG20-TECHS/F46http://www.w3.org/TR/WCAG20-TECHS/F46http://www.w3.org/TR/CSS21/tables.html#propdef-empty-cells


16/37

WCAG Check List


16 | P a g e

preferred. does not duplicate the caption.

Long

Description5

forcomplex

tables10

Complex tables10and graphs must have a long description5of the information represented.

Captionelement

12

A element is present.

Select Structure/Orderin the WAVE tool.- If acaption element12is present, check that the

caption identifies the table.

- If both asummary attribute11

and acaption

element

12

are present, check that the summary doesnot duplicate the caption.

Helpful links H39: Using caption elements to associate data table captions with data tables H73: Use the summary attribute of the table element to give an overview of data tables.

Glossary7Scope: The scope attribute may be used to clarify the sc ope of any cell used as a header. The scope identifies whether the cell is a header for a row, column, or group of rows or c olumns. The values

row, col, rowgroup, and colgroup identify these possible scopes respectively.

8Tabular: Information is considered tabular when logical relationships among text, numbers, images, or other data exist in two dimensions (vertical and horizontal). These relationships are

represented in columns and rows, and the columns and rows must be recognizable in order for the logical relationships to be perceived.

9Simple Table: A simple table have headers in the first column or row, WCAG 2.0 recommends the use of the th and td elements (no need to use the scope attribute), as stated in WCAG 2.0.

10Complex Table: This technique is used when data cells are associated with more than one row and/or one column header. This allows screen readers to speak the headers associated with each data

cell when the relationships are too complex to be identified using the th element alone or the th element with the scope attribute.

11Summary attribute: The summary attribute of the table element provides a brief overview of how data has been organized in the table or a brief explanation of how to navigate the table, and is only

available to people who use screen readers. The information is not displayed visually. Therefore, to make the information available to all, it is best to provide it in a paragraph before the table. If asummary attribute is present, check that it describes the table's organization or explains how to use the table. The summary is useful when the table has a complex structure (for example, when thereare several sets of row or column headers, or when there are multiple groups of columns or rows). The summary may also be helpful for simple data t ables that contain many columns or rows of data.The summary attribute may be used whether or not the table includes a caption element. If both are used, the summary should not duplicate the caption. .The caption and summary elements areboth optional. Using a heading before the table and some paragraph text to describe the tables organization and purpose is sufficient and preferred.
http://www.w3.org/TR/WCAG20-TECHS/H39.htmlhttp://www.w3.org/TR/WCAG20-TECHS/H39.htmlhttp://www.w3.org/TR/2010/NOTE-WCAG20-TECHS-20101014/H73http://www.w3.org/TR/2010/NOTE-WCAG20-TECHS-20101014/H73http://www.w3.org/TR/2010/NOTE-WCAG20-TECHS-20101014/H73http://www.w3.org/TR/WCAG20-TECHS/H39.html


17/37

WCAG Check List


17 | P a g e

12Caption element: The caption for a table is a table identifier and acts like a title or heading for the table, in most cases a heading is already used before a table.The caption element is the

appropriate markup for such text and it ensures that the table identifier remains associated with the table, including visually (by default). In addition, using the caption element allows screen readingsoftware to navigate directly to the caption for a table if one is present.The caption element may be used whether or not the table includes a summary attribute. The caption element identifies thetable whereas the summary attribute gives an overview of the purpose or explains how to navigate the tab le. If both are used, the caption should not duplicate information in the summary.Thecaption and summary elements are both optional. Using a heading before the table and some paragraph text to describe the tables organization and purpose is sufficient and preferred.

Form


17BButtons Missing fieldset - A group of check boxes or radio buttonsis not enclosed in a fieldset.

(Also see 1.1.1 where an input type="image" an alt attribute

is required.)

- Each form has a submit button- (input type="submit", input type="image", or

button type="submit")- Selecting the button performs the action

associated with the current select value.

-

The form is not automatically submitted and newcontent is presented, without prior warningwhen the last field in the form is given a value.

Helpful links PDF12: Providing name, role, value information for form fields in PDF documents PDF15: Providing submit buttons with the submit-form action in PDF forms

G80: Providing a submit button to initiate a change of c ontextusing a technology-specific technique listed below:H32: Providing submit buttons(HTML)H84: Using a button with a select element to perform an action(HTML)FLASH4: Providing submit buttons in Flash(Flash)PDF15: Providing submit buttons with the submit-form action in PDF forms(PDF)

SL10: Implementing a Submit-Form Pattern in Silverlight(Silverlight)

G13: Describing what will happen before a change to a form control that causes a change of context to occur is made SCR19: Using an onchange event on a select element without causing a change of context(Scripting)

Note: A change of content is not always a change of context.This success criterion is automatically met if changes in c ontent are not also changes of context.
http://www.w3.org/TR/WCAG20-TECHS/PDF12http://www.w3.org/TR/WCAG20-TECHS/PDF12http://www.w3.org/TR/WCAG20-TECHS/PDF15.htmlhttp://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G80http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G80http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/H32http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/H32http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/H84http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/H84http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/FLASH4http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/FLASH4http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/PDF15http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/PDF15http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/SL10http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/SL10http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G13http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G13http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/SCR19http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/SCR19http://www.w3.org/TR/2008/REC-WCAG20-20081211/#context-changedefhttp://www.w3.org/TR/2008/REC-WCAG20-20081211/#context-changedefhttp://www.w3.org/TR/2008/REC-WCAG20-20081211/#context-changedefhttp://www.w3.org/TR/2008/REC-WCAG20-20081211/#context-changedefhttp://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/SCR19http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G13http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/SL10http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/PDF15http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/FLASH4http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/H84http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/H32http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G80http://www.w3.org/TR/WCAG20-TECHS/PDF15.htmlhttp://www.w3.org/TR/WCAG20-TECHS/PDF12


18/37

WCAG Check List


18 | P a g e

18BFields Fieldset - Ensure that the fieldset encloses the properform elements and that the legend is accurate, adequately

descriptive, and succinct.

Fieldset without a legend This is optional, but should beprovided for accessibility reasons.

- You can enter data in all fields on the pagestarting at the top.

- You can enter data in the last field and exit fromit (tab out of it).

- Leaving the last field does not causes change ofcontext

Helpful links PDF12: Providing name, role, value information for form fields in PDF documents H71: Providing a description for groups of form controls using fieldset and legend elements PDF3: Ensuring correct tab and reading order in PDF documents

19BNew

windows

- For each form control that is a radio button, check box or an item in a select list, check if changing the status ofthe control launches a new window.

-

For each instance where a new window is launched, check if the user is warned in advance.

Helpful links G200: Opening new windows and tabs from a link only when necessary H83: Using the target attribute to open a new window on user request and indicating this in link text SCR24: Using progressive enhancement to open new windows on user request G201: Giving users advanced warning when opening a new window(not A or AA required)

20BLabels- Tooltips13must open via the keyboard.

Helpful links

G202: Ensuring keyboard control for all functionality HTML 4.01 form labels PDF10: Providing labels for interactive form controls in PDF documents H44: Using label elements to associate text labels with form controls H65: Using the title attribute to identify form controls when the label element cannot be used G131: Providing descriptive labels G162: Positioning labels to maximize predictability of relationships PDF23: Providing interactive form controls in PDF documents PDF12: Providing name, role, value information for form fields in PDF documents

Warning - Instructions cannot be bypass by the user.
http://www.w3.org/TR/WCAG20-TECHS/PDF12.htmlhttp://www.w3.org/TR/WCAG20-TECHS/PDF12.htmlhttp://www.w3.org/TR/WCAG20-TECHS/H71.htmlhttp://www.w3.org/TR/WCAG20-TECHS/H71.htmlhttp://www.w3.org/WAI/GL/WCAG20-TECHS/G200.htmlhttp://www.w3.org/WAI/GL/WCAG20-TECHS/G200.htmlhttp://www.w3.org/WAI/GL/WCAG20-TECHS/H83.htmlhttp://www.w3.org/WAI/GL/WCAG20-TECHS/H83.htmlhttp://www.w3.org/WAI/GL/WCAG20-TECHS/SCR24.htmlhttp://www.w3.org/WAI/GL/WCAG20-TECHS/SCR24.htmlhttp://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G201http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G201http://www.w3.org/TR/WCAG20-TECHS/G202.htmlhttp://www.w3.org/TR/WCAG20-TECHS/G202.htmlhttp://www.w3.org/TR/html401/interact/forms.html#h-17.9http://www.w3.org/TR/html401/interact/forms.html#h-17.9http://www.w3.org/TR/WCAG20-TECHS/PDF10.htmlhttp://www.w3.org/TR/WCAG20-TECHS/PDF10.htmlhttp://www.w3.org/TR/WCAG20-TECHS/H44.htmlhttp://www.w3.org/TR/WCAG20-TECHS/H44.htmlhttp://www.w3.org/TR/WCAG20-TECHS/H65.htmlhttp://www.w3.org/TR/WCAG20-TECHS/H65.htmlhttp://www.w3.org/TR/WCAG20-TECHS/G131.htmlhttp://www.w3.org/TR/WCAG20-TECHS/G131.htmlhttp://www.w3.org/TR/WCAG20-TECHS/G162.htmlhttp://www.w3.org/TR/WCAG20-TECHS/G162.htmlhttp://www.w3.org/TR/WCAG20-TECHS/PDF23.htmlhttp://www.w3.org/TR/WCAG20-TECHS/PDF23.htmlhttp://www.w3.org/TR/WCAG20-TECHS/PDF12http://www.w3.org/TR/WCAG20-TECHS/PDF12http://www.w3.org/TR/WCAG20-TECHS/PDF12http://www.w3.org/TR/WCAG20-TECHS/PDF23.htmlhttp://www.w3.org/TR/WCAG20-TECHS/G162.htmlhttp://www.w3.org/TR/WCAG20-TECHS/G131.htmlhttp://www.w3.org/TR/WCAG20-TECHS/H65.htmlhttp://www.w3.org/TR/WCAG20-TECHS/H44.htmlhttp://www.w3.org/TR/WCAG20-TECHS/PDF10.htmlhttp://www.w3.org/TR/html401/interact/forms.html#h-17.9http://www.w3.org/TR/WCAG20-TECHS/G202.htmlhttp://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G201http://www.w3.org/WAI/GL/WCAG20-TECHS/SCR24.htmlhttp://www.w3.org/WAI/GL/WCAG20-TECHS/H83.htmlhttp://www.w3.org/WAI/GL/WCAG20-TECHS/G200.htmlhttp://www.w3.org/TR/WCAG20-TECHS/H71.htmlhttp://www.w3.org/TR/WCAG20-TECHS/PDF12.html


19/37

WCAG Check List


19 | P a g e

Instructions

for a change

of context

Once an element that contains a list of possible actions has been selected, no action is performed until the user pressesthe "Do it" button.

all event handlers triggered by non-keyboard UI events are also associated with a keyboard-based event, or provideredundant keyboard-based mechanisms to accomplish the functionality provided by other device-specific functions.

Helpful links G80: Providing a submit button to initiate a change of context G90: Providing keyboard-triggered event handlers

Error

Warnings

Where an error has occurred when submitting a form, atextual error message describing the specific error isprovided. It is not enough merely to indicate what form fieldswere in error.

- Enter incorrect information into the form andsubmit it. An error message that adequatelydescribes each error must be provided.

- Check for mandatory fields. Fill out a form,deliberately leaving one or more required

(mandatory) fields blank, and submit it. A textdescription identifying the mandatory field(s)that was not completed must be provided.

Helpful links G83: Providing text descriptions to identify required fields that were not completed SCR18: Providing client-side validation and alert SL35: Using the Validation and ValidationSummary APIs to Implement Client Side Forms Validation in Silverlight(Silverlight)

Labels or

Instructions

On how to

enter info infields

Form label - Ensure that the label is accurate,adequately descriptive, succinct, and that it is associated withthe correct , , or element.

Multiple form labels A form element has two labelsassociated with it.

Unlabeled form element with title - Ensure that the titlevalue adequately describes the functionality of the formelement.

- Each form control is accompanied by a clear anddescriptive label or instruction.

- The label or instruction is located close to the

input field.- When Form fields that need specific values inparticular formats (e.g., date fields), instructionsshould preferably be included as part of therelevant element.
http://www.w3.org/TR/WCAG20-TECHS/G80.htmlhttp://www.w3.org/TR/WCAG20-TECHS/G80.htmlhttp://www.w3.org/TR/2014/NOTE-WCAG20-TECHS-20140311/G90http://www.w3.org/TR/2014/NOTE-WCAG20-TECHS-20140311/G90http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G83http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G83http://www.w3.org/TR/WCAG20-TECHS/SCR18.htmlhttp://www.w3.org/TR/WCAG20-TECHS/SCR18.htmlhttp://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/SL35http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/SL35http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/SL35http://www.w3.org/TR/WCAG20-TECHS/SCR18.htmlhttp://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G83http://www.w3.org/TR/2014/NOTE-WCAG20-TECHS-20140311/G90http://www.w3.org/TR/WCAG20-TECHS/G80.html


20/37

WCAG Check List


20 | P a g e

Orphaned form label - A form label is present, but it isnot associated with any form , , or

Helpful links H90: Indicating required form controls using label or legend PDF5: Indicating required form controls in PDF forms PDF22: Indicating when user input falls outside the required format or values in PDF forms G89: Providing expected data format and example G84: Providing a text description when the user provides information that is not in the list of allowed values G85: Providing a text description when user input falls outside the required format or values SCR32: Providing client-side validation and adding error text via the DOM(Scripting) FLASH12: Providing client-side validation and adding error text via the accessible description(Flash) PDF22: Indicating when user input falls outside the required format or values in PDF forms(PDF) G139: Creating a mechanism that allows users to jump to errors SCR18: Providing client-side validation and alert(Scripting) ARIA2: Identifying required fields with the aria-required property(ARIA) uOttawa online video tutorial on How to create accessible Forms.

If an input

error is

detected,

provide

suggestions

for fixing the

input.

N/AExample:

An input field requires that the name of a month be entered.If the user enters "5," suggestions for correction may include:

- A list of the acceptable values, e.g., "Choose one of:January, February, March, April, May, June, July,August, September, October, November, December."

- A description of the set of values, e.g., "Pleaseprovide the name of the month."

How to check for this:

Enter and submit incorrect information into the form. Anerror message(s) must provide suggestions on how tocorrect the errors.

Helpful links G83: Providing text descriptions to identify required fields that were not completed G199: Providing success feedback when data is submitted successfully G177: Providing suggested correction text ARIA3: Identifying valid range information with the aria-valuemin and aria-valuemax properties(ARIA)

Error

Prevention

for (Legal,

Financial,

For Web pages that cause legal commitments or financialtransactions for the user to occur, that modify or delete user-controllable data in data storage systems, or that submit usertest responses, at least one of the following is true.

- Submissions must be reversible.- Data entered by the user is checked for input

errors and the user is provided an opportunity tocorrect them.
http://www.w3.org/TR/WCAG20-TECHS/H90.htmlhttp://www.w3.org/TR/WCAG20-TECHS/H90.htmlhttp://www.w3.org/TR/WCAG20-TECHS/PDF5.htmlhttp://www.w3.org/TR/WCAG20-TECHS/PDF5.htmlhttp://www.w3.org/TR/WCAG20-TECHS/PDF22.htmlhttp://www.w3.org/TR/WCAG20-TECHS/PDF22.htmlhttp://www.w3.org/TR/WCAG20-TECHS/G89.htmlhttp://www.w3.org/TR/WCAG20-TECHS/G89.htmlhttp://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G84http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G84http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G85http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G85http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/SCR32http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/SCR32http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/FLASH12http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/FLASH12http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/PDF22http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/PDF22http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G139http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G139http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/SCR18http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/SCR18http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/ARIA2http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/ARIA2http://www.uottawa.ca/accessibility/toolkit/toolkit.phphttp://www.uottawa.ca/accessibility/toolkit/toolkit.phphttp://www.w3.org/TR/WCAG20-TECHS/G83.htmlhttp://www.w3.org/TR/WCAG20-TECHS/G83.htmlhttp://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G199http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G199http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G177http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G177http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/ARIA3http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/ARIA3http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/ARIA3http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G177http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G199http://www.w3.org/TR/WCAG20-TECHS/G83.htmlhttp://www.uottawa.ca/accessibility/toolkit/toolkit.phphttp://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/ARIA2http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/SCR18http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G139http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/PDF22http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/FLASH12http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/SCR32http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G85http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G84http://www.w3.org/TR/WCAG20-TECHS/G89.htmlhttp://www.w3.org/TR/WCAG20-TECHS/PDF22.htmlhttp://www.w3.org/TR/WCAG20-TECHS/PDF5.htmlhttp://www.w3.org/TR/WCAG20-TECHS/H90.html


21/37

WCAG Check List


21 | P a g e

Data) - A mechanism is available for reviewing,confirming, and correcting information beforefinalizing the submission.

-

Users can correct input errors identified uponsubmission, or to reverse the submission.

Helpful links G164: Providing a stated time within which an online request (or transaction) may be amended or canceled by the user after making the request G98: Providing the ability for the user to review and correct answers before submitting G155: Providing a checkbox in addition to a submit butt on G99: Providing the ability to recover deleted information G168: Requesting confirmation to continue with selected action G155: Providing a checkbox in addition to a submit butt on G98: Providing the ability for the user to review and correct answers before submitting Error Prevention (Legal, Financial, Data) G168: Requesting confirmation to continue with selected action

21BTime limitSee:Slideshow and Special Form

Slideshow and Special Form


NO

Time limit can

be adjusted

or turned off. Page refreshes or redirects. Give the usercontrol over time-sensitive content changes.

The user can turn off, adjust, or extend a time limit.N.B.: This is not a requirement for real-time events (e.g., an auction), where the time limit

is absolutely required, or if the time limit is longer than 20 hours.

How to check

- When a Web page is rendered, check to see if itautomatically redirects to another page after someperiod of time without the need for user action.

Helpful links

G133: Providing a checkbox on the first page of a multipart form that allows users to ask for longer session time limit or no session time limit G198: Providing a way for the user to turn the time limit off
http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G164http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G164http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G98http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G98http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G155http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G155http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G99http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G99http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G168http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G168http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G155http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G155http://www.w3.org/TR/UNDERSTANDING-WCAG20/minimize-error-reversible.htmlhttp://www.w3.org/TR/UNDERSTANDING-WCAG20/minimize-error-reversible.htmlhttp://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G168http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G133http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G133http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G198http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G198http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G198http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G133http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G168http://www.w3.org/TR/UNDERSTANDING-WCAG20/minimize-error-reversible.htmlhttp://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G155http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G168http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G99http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G155http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G98http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G164


22/37

WCAG Check List


22 | P a g e

G180: Providing the user with a means to set the time limit to 10 times the default time limit SCR16: Providing a script that warns the user a time limit is about to expire(Scripting) ANDSCR1: Allowing the user to extend the default time limit (Scripting) FLASH19: Providing a script that warns the user a time limit is about to expire and provides a way to extend it (Flash) FLASH24: Allowing the user to extend the default time limit(Flash)

SL21: Replacing A Silverlight Timed Animation With a Nonanimated Element(Silverlight) : G4: Allowing the content to be paused and restarted from where it was paused SCR33: Using script to scroll content, and providing a mechanism to pause it(Scripting) SCR36: Providing a mechanism to allow users to display moving, scrolling, or auto-updating text in a static window or area(Scripting)

Pause, Stop

and Hide

(For moving,

blinking or

scrolling

content)

A element is present

The element is present

Automatically moving, blinking, or scrolling content that lastslonger than 5 seconds can be paused, stopped, or hidden by theuser.

N.B.: Blink elements are a fail because users cannot control the blink.

Helpful links

Pause, stop, hide G4: Allowing the content to be paused and restarted from where it was paused SL11: Pausing or Stopping A Decorative Silverlight Animation(Silverlight) SL12: Pausing, Stopping, or Playing Media in Silverlight MediaElements(Silverlight) SCR33: Using script to scroll content, and providing a mechanism to pause it(Scripting) FLASH35: Using script to scroll Flash content, and providing a mechanism to pause it(Flash) G11: Creating content that blinks for less than 5 seconds G187: Using a technology to include blinking content that can be turned off via the user agent G152: Setting animated gif images to stop blinking after n cycles (within 5 seconds) SCR22: Using scripts to control blinking and stop it in five seconds or less(Scripting) FLASH36: Using scripts to control blinking and stop it in five seconds or less(Flash)

G186: Using a control in the Web page that stops moving, blinking, or auto-updating content G191: Providing a link, button, or other mechanism that reloads the page without any blinking content SL24: Using AutoPlay to Keep Silverlight Media from Playing Automatically(Silverlight)

Tree Flashes

or below

threshold

No page content flashes more than 3 times per second unless that flashing content is sufficiently small and the flashesare of low contrast and do not contain too much red. (See general flash and red flash thresholds.) It is best to avoidusing any flashing content as some people with seizure disorders can have a seizure triggered by flashing content.

Helpful links Three Flashes or Below Threshold G19: Ensuring that no component of the content flashes more than three times in any 1 -second period
http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G180http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G180http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/SCR16http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/SCR16http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/SCR1http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/SCR1http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/SCR1http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/FLASH19http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/FLASH19http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/FLASH24http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/FLASH24http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/SL21http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/SL21http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G4http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G4http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/SCR33http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/SCR33http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/SCR36http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/SCR36http://www.w3.org/TR/UNDERSTANDING-WCAG20/time-limits-pause.htmlhttp://www.w3.org/TR/UNDERSTANDING-WCAG20/time-limits-pause.htmlhttp://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G4http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G4http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/SL11http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/SL11http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/SL12http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/SL12http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/SCR33http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/SCR33http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/FLASH35http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/FLASH35http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G11http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G11http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G187http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G187http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G152http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G152http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/SCR22http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/SCR22http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/FLASH36http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/FLASH36http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G186http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G186http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G191http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G191http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/SL24http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/SL24http://www.w3.org/TR/UNDERSTANDING-WCAG20/seizure-does-not-violate.htmlhttp://www.w3.org/TR/UNDERSTANDING-WCAG20/seizure-does-not-violate.htmlhttp://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G19http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G19http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G19http://www.w3.org/TR/UNDERSTANDING-WCAG20/seizure-does-not-violate.htmlhttp://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/SL24http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G191http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G186http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/FLASH36http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/SCR22http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G152http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G187http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G11http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/FLASH35http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/SCR33http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/SL12http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/SL11http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G4http://www.w3.org/TR/UNDERSTANDING-WCAG20/time-limits-pause.htmlhttp://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/SCR36http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/SCR33http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G4http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/SL21http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/FLASH24http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/FLASH19http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/SCR1http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/SCR16http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G180


23/37

WCAG Check List


23 | P a g e

G176: Keeping the flashing area small enough G15: Using a tool to ensure that content does not violate the general flash threshold or red flash threshold

Glossary13

Tooltips:User agents will display a tool tip when the mouse hovers above an input element containing a title attribute. Title attributes are exposed to assistive technology and are displayed astooltips in many graphical browsers. Tooltips can't be opened via the keyboard, so this information may not be available to sighted keyboard users.Note: If no label is available, JAWS and Window-Eyes speak the title attribute when the form contro l receives focus

Non-html Document


The size of

the non-

html.

Document

is written

next to the

document

The size of an attached document mustbe mentioned next to the link.

Example of proper size identification.

The

primary

format is in

html.

An html format of the non-htmldocument is available on the Webpage

If you have an html format of the non-html document available on theWebpage, the non-html format is treated as an alternate format and does nothave to meet accessibility compliance.

The

primary

format isnot in html.

No html format of the non-htmldocument is available on the Webpage.

If there is no html version on the page, the non-html document (e.g. .doc, .pdf,.ppt, etc) is considered the primary format. It is the responsibility of the

document owner to ensure that the non-html document is made accessibleand a check of all 38 criterions must be done.

Check How to make pdf documents accessible.
http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G176http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G176http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G15http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G15http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G15http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G176


24/37

WCAG Check List


24 | P a g e

The

primary

format is

not in html

and more

than one

non-html

formats are

provided.

No html format of the non-htmldocument is available on the Webpageand more than one non-html document

formats are provided.

At least one of the formats must meet accessibility compliance and allsecondary formats are treated as alternate formats, and indicated as alternateformats, and do not need to be made accessible.


25/37

WCAG Check List


25 | P a g e

Video & Audio


NO

22BExclusionsCheck if your video is part of theList of Exclusions14

Pre-recorded

audio-only

or video-

only media

A Flash object is present - If the Flash object does notpresent content, hide it from screen readers. If content ispresented, provide an HTML alternative and/or make theFlash object natively accessible, including providing captionsfor any embedded video-type content and ensuring that theFlash object is keyboard-accessible.

Note: Refer toWebAim Creating Accessible Flash Contentforadditional information and examples.

A Quicktime movie is present - Provide captions and a texttranscript. Provide audio descriptions, only if the video providesinformation related to health and safety of Canadians.

Note:Refer toWebAim Captioning for Quicktime

A RealPlayer media object is present - Provide captions and a

text transcript. Provide audio descriptions, only if the videoprovides information related to health and safety of Canadians.

Note:Refer toWebAim Captioning for RealPlayer

A Windows Media Player object is present - Provide captionsand a text transcript. Provide audio descriptions, only if the videoprovides information related to health and safety of Canadians.

Note:Refer toWebAim Captioning for Windows Media

All Pre-recorded media

must have:

- An alternative (e.g., text transcript, audiodescription) either on the same pageor on aseparate pageas the audio-only file or video-only file.

Transcript

-

On the same page: Must have a link on thepage to the audio-only or video-only file andthe link text advises that the text transcriptfollows and ensure the text transcriptimmediately follows.

- On a separate page: Must have twolinks on thepage, one link to theaudio-only file or video-only fileand immediately following a link to thetext transcript of the audio-only or video-only

file.

Links- Text: Is not a filename or placeholder text.- Transcript: The page that contains the text

transcript also provides a link back to where theaudio-only or video-only file is located. (SeeExamples of transcripts Links15)
http://webaim.org/techniques/flash/http://webaim.org/techniques/flash/http://webaim.org/techniques/flash/http://www.webaim.org/techniques/captions/quicktime/http://www.webaim.org/techniques/captions/quicktime/http://www.webaim.org/techniques/captions/quicktime/http://www.webaim.org/techniques/captions/real/http://www.webaim.org/techniques/captions/real/http://www.webaim.org/techniques/captions/real/http://webaim.org/techniques/captions/windows/http://webaim.org/techniques/captions/windows/http://webaim.org/techniques/captions/windows/http://webaim.org/techniques/captions/windows/http://www.webaim.org/techniques/captions/real/http://www.webaim.org/techniques/captions/quicktime/http://webaim.org/techniques/flash/


26/37

WCAG Check List


26 | P a g e

Audio-only:The dialogue in the transcript matches the dialogue andinformation presented.

Multiple voices:- The transcript must identify who is speaking for

all dialogue.

Video-only

Multiple people:- The transcript must identify which person is

associated with each action described.

Pre-recordedsynchronized

audio-video

media

Link to media - Ensure that captioning and a transcript isprovided for video content and ensure that a transcript isprovided for audio content.

All Pre-recorded synchronized Must have:- Captions AND,- Descriptive text transcript, or alternatively for

video a voice-over track (e.g. audio description).

Helpful links

Alternative text

G69: Providing an alternative for time based media G58: Placing a link to the alternative for time-based media immediately next to the non-text con tent

C29: Using a style switcher to provide a conforming alternate version:

Captions

G93: Providing open (always visible) captions G87: Providing closed captionsusing any readily available media format that has a video player that supports closed captioning G87: Providing closed captionsusing any of the technology-specific techniques below

o SM11: Providing captions through synchronized text streams in SMIL 1.0(SMIL)o SM12: Providing captions through synchronized text streams in SMIL 2.0(SMIL)o FLASH9: Applying captions to prerecorded synchronized media(Flash)o SL16: Providing Script-Embedded Text Captions for MediaElement Content(Silverlight)
http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G69.htmlhttp://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G69.htmlhttp://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G58.htmlhttp://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G58.htmlhttp://www.w3.org/TR/WCAG20-TECHS/C29.htmlhttp://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G93http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G93http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G87http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G87http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G87http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G87http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/SM11http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/SM11http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/SM12http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/SM12http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/FLASH9http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/FLASH9http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/SL16http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/SL16http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/SL16http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/FLASH9http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/SM12http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/SM11http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G87http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G87http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G93http://www.w3.org/TR/WCAG20-TECHS/C29.htmlhttp://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G58.htmlhttp://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G69.html


27/37

WCAG Check List


27 | P a g e

o SL28: Using Separate Text-Format Text Captions for MediaElement Content(Silverlight)

Audio descriptions

G78: Providing a second, user-selectable, audio track that includes audio descriptions G78: Providing a second, user-selectable, audio track that includes audio descriptionsANDSL1: Accessing Alternate Audio Tracks in Silverlight Media(Silverlight) G173: Providing a version of a movie with audio descriptionsusing one of the following:

o SM6: Providing audio description in SMIL 1.0(SMIL)o SM7: Providing audio description in SMIL 2.0(SMIL)o FLASH26: Applying audio descriptions to Flash video(Flash)o Using any player that supports audio and video

G8: Providing a movie with extended audio descriptionsusing one of the following:o SM1: Adding extended audio description in SMIL 1.0(SMIL)o SM2: Adding extended audio description in SMIL 2.0(SMIL)o

FLASH26: Applying audio descriptions to Flash video(Flash)o Using any player that supports audio and video

27BPrerecorde

WCAG GES Checklist

Documents

Transcript of WCAG GES Checklist