WCAG GES Checklist

Table of Contents
All Pages....................................................... 2
Page Title .................................................. 2
WCAG Check List

Form ........................................................... 17 Video & Audio ............................................... 24
Button .......................................................... 17
Exclusions ......................................................24
Headings................................................... 2
Field ............................................................. 17
Pre-recorded audio-only or video-only ..........24
Lists .......................................................... 3
New window ................................................ 18
Pre-recorded synchronized audio-video .......25
Markup ..................................................... 3
Label............................................................. 18
Captioning tools..............................................27
Content order without CSS ...................... 4
Warning instruction (change on context).... 18 Create an Accessible Pdf ...................................29
Colour Contrast ........................................ 5
Error warning ............................................... 18
With Word .....................................................29
Zoom 200% .............................................. 5
Label instruction .......................................... 19
With PDF X PRO .............................................26
Parsing ...................................................... 6
Suggestion correction .................................. 20
Online tutorial ................................................33
Links ......................................................... 6
Financial data ............................................... 20
Online Tools
Visionnez
des
tutoriels
vido sur la cration de
Time limit ..................................................... 21
documents Word, Excel, PDF, PowerPoint et de
Image ......................................................... 10 Slideshow and Special Form ........................... 21
formulaires accessibles ......................................33
Alt text .................................................... 10
Adjusted/ turned off Time limit .................. 21 Bonne pratique soumission dun document Word
Long description..................................... 12
Pause, Stop and Hide blinking content ........ 22 Accessible lquipe Web .............................. 34
Another language..................................... 8
Image text .............................................. 12
Tree Flashes threshold ................................ 22 Download the Web Experience Toolkit (WET)
Table .......................................................... 14 Non-Html Document....................................... 23 Collaborative open source project led by the
Government of Canada ......................................35
Scope attribute....................................... 14
With an html as the primary format............ 23
uottawa online resources & tools ....................36
Empty space ........................................... 15
With a non- html as the primary format ..... 23
Layout VS complex table ........................ 15
With multiple non- html as primary format 23
Caption element..................................... 15
WCAG Check List
Return to Table of Content
All Pages
Before you start make sure that:
The page you want to check is opened in Firefox

You have downloaded the WAVE and the Addons tools on Firefox
You selected Open Errors, Features and Alerts in the menu bar
Elements
Page Title
0B
Related WAVE icons

<title> is missing or not informative
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
Rules
The page title (at the top of the browser window )is unique
and identifies the contents or purpose of the Web page
Helpful links
Possible heading
Headings
1B
Missing heading structure

-
Heading element is present
2|Page
H42: Using h1-h6 to identify headings
Helpful links
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)
YES
NO
WCAG Check List

Use the
correct lists
Ordered list (1-2-3 or a,b,c)(<ol>)
Unordered list (no use of numbers or

letters)(<ul>)
2B
Definition list (to define terms (a glossary for

example)(<dl>)
H48: Using ol, ul and dl for lists
Helpful links
Emphasized text (<em>)
Correct
markup
3B
Strongly emphasized text (<strong>)
Quote or Blockquote (<q> or <blockquote>)

Cite (<cite>)
Italic - Use <em> for content that should be
emphasized
Bold - Use <strong> for content that should be
strongly emphasized
Possible blockquote - If the text in question is
actually a quotation, use the <blockquote> or <q>
element.
3|Page
H49: Using semantic markup to mark emphasized or special text
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 a
numbered list is marked as an ordered list.
The content is marked as a definition list when terms
and matching definitions are presented in the list.
Helpful links
<em> is used when you want to emphasize text

<strong> is used when you want to strongly
emphasize text
<cite> is used for citations
<blockquote> is used for a block quotation
<q> is used for an inline quotation
<sub> is used for subscript
<sup> is used for superscript
WCAG Check List

The order of
content must
make sense
without CSS
4B
1.
2.
3.
4.
Go on WAVE Firefox toolbar

Click the Disable Styles button
Check that the order of the content on the page still makes sense.
Clicking the Enable styles button 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).
G57: Ordering the content in a meaningful sequence
Do not rely on
position, size or
shape to
provide
information
Helpful links
No Click the small square icon to go to the next section, or Find additional information in the left
column.
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
4|Page
WCAG Check List

Colour
contrast
Info Value
Ensure 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 following Exceptions1.
Links:
- Links on the page is underlined or otherwise visually identifiable (i.e., bolded, italicized) as a link without
relying on color (hue). See example Non-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.
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)).
Style Sheet colors (foregrounds and backgrounds)

-
With background images, it is still necessary to specify a background color, because users may have images turned off
in their browser. The background image and the background color both need to be checked for colour contrast.
Helpful links
Contrast Analyser Only 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
Zoom at
200% without
distortion
7B
Zoom techniques
5|Page
N/A
NB: Enlarging text may introduce a horizontal scroll.
It is acceptable provided that the page content is
readable and usable. See more Zoom techniques
Helpful links
Using Firefox: From the View menu, select Zoom and

verify that Zoom Text Only is selected. Then, press
Ctrl++ three times to increase the font size to 200%
its default.
WCAG Check List
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 Size 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
N/A
Elements
have complete start and end tags
are nested according to their specifications
do not contain duplicate attributes
ID attributes have unique values
Parsing
8B
Use a tool for validating HTML http://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) AND H94: 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)
6|Page
WCAG Check List

Links
Links can be selected in order

Event handler - If the onmouseover/out effect How to check
exposes new content, this content will likely not be
1. Go on WAVE Firefox toolbar: Click the Disable Styles
accessible to most assistive technologies. Provide a
button.
redundant, alternative way to access the same
2. Click in the address bar of the browser.
content with a keyboard or remove the mouse-over
3. Press the Tab key and test that you can:
effect.
- See where you are as you tab through the
If you see that icon^, remove the mouse-over effect
page.
or provide another path (even if redundant)
- Move to all elements in order
Tabindex - Remove tabindex if the natural tab
order is logical or restructure page content to
ensure that the tab/reading order is logical.
Broken skip navigation link
Hidden skip link. Make sure skip links are
visible at least when they receive keyboard focus.
The user must

be warned of
any pop-up
windows and
links that
7|Page
Example of a warning of a pop-up window in the

text:
<a href="knitting.html"
target="_blank">All about
Knitting(opens in new window)</a>
Use any forms in order.

Press Enter to activate the elements.
When a page element receives focus, it must
not 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 the
content.
5. Click the Enable styles button to turn the styles back
on.
Name your link texts correctly: Repeated link texts (e.g.,
"Read more" Contact Us). When repeated link texts are
being used, content is needed to understand how link text
describes the purpose of the link. Check whether the content
is contained in the same sentence, paragraph, list item, or
table cell, or in the preceding heading. See Examples of Good
link texts 3
Example of a warning to a link that leads to an external site
(without pop-up window):
WCAG Check List

bring to an
external site.
Example of a warning of a pop-up window in CSS:

(this example uses an accessible mouse hover
warning that a link ``Opens in a new window``
Check example 2 on this link:
http://www.w3.org/TR/2014/NOTE-WCAG20TECHS-20140311/G201
<a class="uilink" href="http://www.forces.gc.ca/en/index.page?" rel="ext

ernal">National Defence and the Canadian Forces</a>
http://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 structure 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 following techniques:
G1: Adding a link at the top of each page that goes directly to the main content area
G123: Adding a link at the beginning of a block of repeated content to go to the end of the block
G124: Adding links at the top of the page to each area of the content
8|Page
WCAG Check List
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) AND H64: 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
More than
one language
10B
Check that content on a page that is in a different language than the language of the page, is identified by using the
lang or xml:lang attribute, as appropriate for the HTML or XHTML version that is used. (e.g., <blockquote
xml:lang="en" lang="en"></blockquote>, <span xml:lang="fr" lang="fr"></span>.
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)
GLOSSARY
Exceptions
Large Text: Large-scale text has a contrast ratio of at least 3:1. Large text is at least 18 points if not bold 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 that
contains 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.

Non-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 up
with a <strong> element for extra emphasis.
A table is used for a Project Status report. 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; visited links are magenta and underlined, active links are red, underlined with a highlighted light yellow background.
9|Page
WCAG Check List

3
Good link texts:
Blocks of information on hotels. The information for each hotel consists of the hotel name as the <h2> heading, a description and a series of links to a map, photos, directions, guest
reviews and a booking form that are in an unordered <ul> list.
A link contains text that gives a description of the information provided by that URL. A page contains the sentence There was much bloodshed during the Medieval period of
history. (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 <h2> heading IM Gp, the
other is on the Alumni Space on the supplemental menu on the right with a <h2> heading uOttawa Links. When checked, the text of the link combined with the text of that heading
describes 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 needing
additional context. So the better way would be two have one link text About Alumni and the other About uOttawa.
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 navigate
through 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 | Table 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, as
the 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 Chapter 3
are used this would pass, but is not the best way.
Image (including logos, mini images, maps and tables in a jpeg format)
Elements
Related WAVE icons
Rules
11B
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 make
sure the alt text is descriptive enough.
Redundant alternative text - Change the alt
text or the adjacent text to eliminate redundancy.
A nearby image has the same alternative
text - Change the alt text of one of the images to
10 | P a g e
Every image must have an alt attribute (alt=""). whether it

contains content or is null alt=""
Alternative text may be provided in the alt attribute or in
the surrounding context of the image. It should represent
the 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 of
or graphic of
See Examples of alternate texts4.
YES
NO
WCAG Check List
eliminate redundancy.
Alternative text - Ensure the alternative text
conveys equivalent content, is accurate, and is
succinct.
Null or empty alternative text - Ensure all
graphics have alt text unless the graphic is a spacer
or if it is used for decorative purposes.
Null or empty alternative text on spacer Ensure that this graphic is a spacer and does not
convey any important information.
Linked image with alternative text - Ensure
the alternative text conveys the equivalent content
of the image and/or the function of the link.
Image button alternative text - Ensure the
alternative text describes the function of the image
input element.
Image map alternative text - Ensure the
alternative text for the image map image is
appropriate. The alternative text is typically empty
(alt=""), unless the image conveys content not
conveyed in its hotspots.
Hotspot alternative text - Ensure the
alternative text describes the function of the image
map hotspot.
Helpful links
C9: Using CSS to include decorative images 14.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
11 | P a g e
WCAG Check List
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
Long
Description5
for complex
images or
graphics
12B
The longdesc attribute does not contain a

URL of another web page containing the long
description.
Long description - Ensure that the long
description is accurate, adequate, and contains a
URL of another web page containing the long
description.
For complex images such as charts and graphs, check that

a short text alternative exists on the <img> element, as
always, but also check that a long description of the
information represented in the chart or graph is also
presented in text format.
See Long 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 the 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
If Image of
Texts cannot
be avoided.
13B
Text in logos is permitted, as are marketing and branding images but should have good, descriptive ALT
attributes.
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
See Examples of images of text6
Helpful links
C30: Using CSS to replace text with images of text and providing user interface controls to switch
Examples of alternate texts
Glossary
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, <input type=image name=submit src=button.gif alt=Submit />. The alt attribute
12 | P a g e
WCAG Check List
indicates the buttons function.
A picture shows how a knot is tied and it includes arrows indicating the direction of the ropes. The Alt text 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 shelf contains interactive areas that link to a Web page about the particular book. The Alt text is The books available to buy in this section. Select a
book for more details about that book. Thereby, 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 the link is read
twice. The preferred method to address this is to put the text and image together in one link, and provide null alternative text on the image to eliminate duplication of text. E.g. <a
href=products.html><img src=icon.gif alt= />Products page</a>
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 attribute
should 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
5
14B
Long 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 met
because 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 text 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 <img> tag.
Example: <a href="chart_description.htm"><img src="chart.jpg" longdesc="chart_description.htm" alt="Chart showing revenue increases over the last five years with link to
description of the data"></a>
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
13 | P a g e
WCAG Check List
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 than
provide 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 conjunction
with 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: <a class="padding-small"
href="http://actionplan.gc.ca/betterjobs/"><img src="/images/mp-pp/ctnpln-eng.jpg" alt="" />Better jobs - Next phase of Canada's Economic Action Plan</a>
A right menu contains what looks like an image with text in it. The image is a background image and the text is overlaid using CSS over the background image.
Table
Elements
Proper
Scope7
attribute is
used
15B
Related WAVE icons

Empty table header
Table header cell - Ensure that the cell is actually a header
cell for tabular data. If it is not, change the <th> to <td>.
Row header cell - Ensure that the cell is actually a header
cell for tabular data and that it is a row header.
Column header cell - Ensure that the cell is actually a
header cell for tabular data and that it is a column header.
Helpful links
H51: Using table markup to present tabular information
H43: Using id and headers attributes to associate data cells with header cells in data tables
H63: Using the scope attribute to associate header cells and data cells in data tables
14 | P a g e
Rules
All tables must have:
- Tabular8 information.
- 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)
- Need scope attribute
- When data cells are associated with more than
one row and/or one column header.
YES
NO
WCAG Check List

No empty
spaces
16B
Layout Table
or Data
Table?
The content which has the appearance of a table column is not using white space characters such as space, tab, line
break, 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.
1. The content has a relationship with other
Layout table - Ensure that the table is indeed a layout
content?
table and that it does not contain tabular data. If it is a layout
2. The column and row content are related?
table, eliminate all header cells (e.g., change <th> to <td>).
Data table
For Layout
Tables only
If the answer is no": the table is a layout table

If the answer is yes" :the table is a data table
The content is in linear order that matches meaningful sequence

How to check:
- Present the content in source code order or Remove the table markup from around the content.
CSS-based layouts are recommended in order to retain the defined semantic meaning of the HTML table elements and to
conform to the coding practice of separating presentation from content.
However, if a layout table is used, then the summary attribute11 is not used or is null. The purpose of a layout table is
simply to control the placement of content; the table itself is transparent" to the user. A summary would break" this
transparency by calling attention to the table. A null summary ( summary="") on layout tables is acceptable.
- The table must not include a caption element12
- The summary attribute11 must 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
15 | P a g e
The caption12 and summary elements11 are both optional.
Using a heading before the table and some paragraph text to

describe the tables organization and purpose is sufficient and
If a caption element12 is present, check that the

caption identifies the table.
If both a summary attribute11 and a caption
element are present, check that the summary
WCAG Check List
preferred.
Long
Description5
for complex
tables10
does not duplicate the caption.
Complex tables10 and graphs must have a long description5 of the information represented.
Select Structure/Order in the WAVE tool.
Caption
element12
A <table> element is present.
12
If a caption element is present, check that the

caption identifies the table.
If both a summary attribute and a caption

12
element are present, check that the summary does
not duplicate the caption.
11
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.
Glossary
Scope: The scope attribute may be used to clarify the scope 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 columns. The values
row, col, rowgroup, and colgroup identify these possible scopes respectively.
7
Tabular: 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.
9
Simple 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.
10
Complex 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.
11
Summary 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 a
summary 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 there
are 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 tables 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 are
both optional. Using a heading before the table and some paragraph text to describe the tables organization and purpose is sufficient and preferred.
16 | P a g e
WCAG Check List
12
Caption 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 reading
software 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 the
table whereas the summary attribute gives an overview of the purpose or explains how to navigate the table. If both are used, the caption should not duplicate information in the summary. The
caption 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
Elements
Buttons
17B
Related WAVE icons
Rules
Missing fieldset - A group of check boxes or radio buttons

is 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 new
content is presented, without prior warning
when 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 context using 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 content are not also changes of context.
17 | P a g e
YES
NO
WCAG Check List

Fields
18B
Fieldset - Ensure that the fieldset encloses the proper

form elements and that the legend is accurate, adequately
descriptive, and succinct.
Fieldset without a legend This is optional, but should be
provided for accessibility reasons.
New
windows
You can enter data in all fields on the page

starting at the top.
You can enter data in the last field and exit from
it (tab out of it).
Leaving the last field does not causes change of
context
For each form control that is a radio button, check box or an item in a select list, check if changing the status of
the 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)
Labels
Tooltips13 must open via the keyboard.
20B
Helpful links
H71: Providing a description for groups of form controls using fieldset and legend elements
PDF3: Ensuring correct tab and reading order in PDF documents
19B
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
Warning
18 | P a g e
Instructions cannot be bypass by the user.
WCAG Check List

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 presses
the "Do it" button.
all event handlers triggered by non-keyboard UI events are also associated with a keyboard-based event, or provide
redundant keyboard-based mechanisms to accomplish the functionality provided by other device-specific functions.
G80: Providing a submit button to initiate a change of context

G90: Providing keyboard-triggered event handlers
Error
Warnings
Helpful links
Where an error has occurred when submitting a form, a

textual error message describing the specific error is
provided. It is not enough merely to indicate what form fields
were in error.
Enter incorrect information into the form and

submit it. An error message that adequately
describes 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 text
description 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 in
fields
Form label - Ensure that the label is accurate,

adequately descriptive, succinct, and that it is associated with
the correct <input>, <textarea>, or <select> element.
Multiple form labels A form element has two labels
associated with it.
Unlabeled form element with title - Ensure that the title
value adequately describes the functionality of the form
element.
19 | P a g e
Each form control is accompanied by a clear and

descriptive label or instruction.
The label or instruction is located close to the
input field.
When Form fields that need specific values in
particular formats (e.g., date fields), instructions
should preferably be included as part of the
relevant <label> element.
WCAG Check List
Orphaned form label - A form label is present, but it is

not associated with any form <input>, <select>, or <textarea>
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/A
Example:
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., "Please
provide the name of the month."
How to check for this:

Enter and submit incorrect information into the form. An
error message(s) must provide suggestions on how to
correct 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,
20 | P a g e
For Web pages that cause legal commitments or financial

transactions for the user to occur, that modify or delete usercontrollable data in data storage systems, or that submit user
test 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 to
correct them.
WCAG Check List
Data)
A mechanism is available for reviewing,

confirming, and correcting information before
finalizing the submission.
Users can correct input errors identified upon
submission, 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 button
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 button
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
Time limit
See: Slideshow and Special Form
21B
Slideshow and Special Form

Elements
Time limit can
be adjusted
or turned off.
Related WAVE icons
Rules
The user can turn off, adjust, or extend a time limit.
Page refreshes or redirects. Give the user

control over time-sensitive content changes.
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 it
automatically redirects to another page after some
period 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
21 | P a g e
YES
NO
WCAG Check List
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) AND SCR1: 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 <marquee> element is present

The <blink> element is present
Automatically moving, blinking, or scrolling content that lasts

longer than 5 seconds can be paused, stopped, or hidden by the
user.
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 flashes
are of low contrast and do not contain too much red. (See general flash and red flash thresholds.) It is best to avoid
using 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
22 | P a g e
WCAG Check List
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
Glossary
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 as
tooltips 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 control receives focus
13
Non-html Document
Elements
The size of
the nonhtml.
Document
is written
next to the
document
The
primary
format is in
html.
The
primary
format is
not in html.
Related WAVE icons

The size of an attached document must
be mentioned next to the link.
Rules
Example of proper size identification.
An html format of the non-html

document is available on the Webpage
If you have an html format of the non-html document available on the

Webpage, the non-html format is treated as an alternate format and does not
have to meet accessibility compliance.
No html format of the non-html

document 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 accessible
and a check of all 38 criterions must be done.
Check How to make pdf documents accessible.
23 | P a g e
YES
NO
WCAG Check List

The
primary
format is
not in html
and more
than one
non-html
formats are
provided.
24 | P a g e
No html format of the non-html

document is available on the Webpage
and more than one non-html document
formats are provided.

At least one of the formats must meet accessibility compliance and all
secondary formats are treated as alternate formats, and indicated as alternate
formats, and do not need to be made accessible.
WCAG Check List
Video & Audio

Elements
Exclusions
Related WAVE icons
Rules
Check if your video is part of the List of Exclusions14
22B
Pre-recorded
A Flash object is present - If the Flash object does not
audio-only
present
content, hide it from screen readers. If content is
or videopresented,
provide an HTML alternative and/or make the
only media
Flash object natively accessible, including providing captions
for any embedded video-type content and ensuring that the
Flash object is keyboard-accessible.
Note: Refer to WebAim Creating Accessible Flash Content for
additional information and examples.
A Quicktime movie is present - Provide captions and a text
transcript. Provide audio descriptions, only if the video provides
information related to health and safety of Canadians.
Note: Refer to WebAim Captioning for Quicktime
A RealPlayer media object is present - Provide captions and a

text transcript. Provide audio descriptions, only if the video
provides information related to health and safety of Canadians.
Note: Refer to WebAim Captioning for RealPlayer
A Windows Media Player object is present - Provide captions
and a text transcript. Provide audio descriptions, only if the video
provides information related to health and safety of Canadians.
Note: Refer to WebAim Captioning for Windows Media
25 | P a g e
All Pre-recorded media

must have:
- An alternative (e.g., text transcript, audio
description) either on the same page or on a
separate page as the audio-only file or videoonly file.
Transcript
- On the same page: Must have a link on the
page to the audio-only or video-only file and
the link text advises that the text transcript
follows and ensure the text transcript
immediately follows.
-
Links
-
On a separate page: Must have two links on the

page, one link to the audio-only file or videoonly file and immediately following a link to the
text transcript of the audio-only or video-only
file.
Text: Is not a filename or placeholder text.
Transcript: The page that contains the text
transcript also provides a link back to where the
audio-only or video-only file is located. (See
Examples of transcripts Links15)
YES
NO
WCAG Check List

Audio-only:
The dialogue in the transcript matches the dialogue and
information 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-recorded
Link to media - Ensure that captioning and a transcript is
synchronized
provided
for video content and ensure that a transcript is
audio-video
provided for audio content.
media
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 content
C29: Using a style switcher to provide a conforming alternate version:
Captions
G93: Providing open (always visible) captions

G87: Providing closed captions using any readily available media format that has a video player that supports closed captioning
G87: Providing closed captions using 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)
26 | P a g e
WCAG Check List

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 descriptions AND SL1: Accessing Alternate Audio Tracks in Silverlight Media (Silverlight)
G173: Providing a version of a movie with audio descriptions using 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 descriptions using 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
Prerecorded audio-only:
27B
G158: Providing an alternative for time-based media for audio-only content

SL17: Providing Static Alternative Content for Silverlight Media Playing in a MediaElement (Silverlight)
Prerecorded video-only:
28B
G159: Providing an alternative for time-based media for video-only content

G166: Providing audio that describes the important video content and describing it as such
G203: Using a static text alternative to describe a talking head video
Prerecorded synchronized media:
29B
G69: Providing an alternative for time based media using one of the following techniques
o
G58: Placing a link to the alternative for time-based media immediately next to the non-text content
o
FLASH9: Applying captions to prerecorded synchronized media
Linking to the alternative for time-based media using one of the following techniques
o
H53: Using the body of the object element (HTML)
Media Access Generator (MAGpie)
27 | P a g e
WCAG Check List

TOOLS
Guides to Captioning
23B
Captioning Key: Guidelines and Preferred Techniques

Best Practices in Online Captioning
SMIL Resources
24B
Synchronized Multimedia Integration Language (SMIL) 1.0

Synchronized Multimedia Integration Language (SMIL 2.0)
Accessibility Features of SMIL
NCAM Rich Media Accessibility, Accessible SMIL Templates
Other Captioning Resources
25B
National Center for Accessible Media

Quicktime Captioning Tutorial
RealPlayer Captioning Tutorial
WebAIM: Captioning Resource List
Windows Media Player Captioning Tutorial
Captioning Tools
26B
Media Access Generator (MAGpie)

14
List of Exclusions
Glossary
WCAG 2.0 Success Criterion 1.2.4 Captions (Live): Live Video Captions (closed captions); Live Video Captions exclusions refer to closed captioning and transcription of live video.
WCAG 2.0 Success Criterion 1.2.5 Audio Description: Audio Description (pre-recorded Videos) are only required for videos that relate to health and safety of Canadians; for remaining
pre-recorded videos, audio description is not required.
Exclusions for a 10 business day grace period:

Pre-recorded videos have a 10 business day grace period from time of publication to when closed captions and transcription of videos must be provided.
15
Examples of transcripts Links
28 | P a g e
A link to an audio-only of a presentation reads, "DGEAS Directors Town Hall presentation to staff 14 October 2011 (text transcript follows)." The text transcript is provided
immediately after the link to the audio file. The transcript includes a verbatim record of everything the director says. It identifies who is speaking as well as other significant sounds
WCAG Check List
that are part of the recording, such as applause, laugher, and questions from the audience, etc.
A podcast includes a description of new features in a recent software release. It involves two speakers informally discussing the new and updated features and describing how they
are used. A text transcript is created and made available on the speakers Web site along with the audio-only file. The text alternative that identifies the audio-only content reads,
"Episode 42: Zap Version 12 (text transcript follows)" and the link to the transcript, which reads, "Text transcript of Episode 42: Zap Version 12", is provided immediately following the
audio-only content.
A video-only file with an audio track as the alternate. A silent movie includes an audio track which includes a description of the action in the video.
29 | P a g e
WCAG Check List
Create an Accessible pdf

With Word
Actions
Create Word Document
Save the document as .docx. If word is saved as .doc, you need to convert it to .docx.
For fields will need to be left empty so they can be inserted later in Acrobat X pro.
rr-pr-eng.Reserves is a document that created for the library. Notice the blank spaces that are reserved for form fields. If you have made
a mistake, it would be possible to make changes with PDF, but sometimes it would be much simpler to make corrections in Word and
start over.
5. Once you have completed the Word document to your satisfaction, save it as PDF: File -> Save & Send -> Create Adobe PDF. It is a good
idea to save a copy of the Word document for backup.
6. This is the PDF after it has been converted.
1.
2.
3.
4.
With PDF X PRO

Steps
Set
document
properties
Add form
Field
Actions
1. Go to file -> Properties
2. Under description tab fill out all fields
3. Under advanced tab set language accordingly
4. Click ok
1. Go to Tools on the top right menu
2. Click on edit
3. Select your option
4. Place the field in the document and select All
Properties in the yellow box
30 | P a g e
Visual Help
(e.g. text field)
WCAG Check List
5. The Name is the ID in the form. Make sure that you do not have duplicated names; otherwise they will have the same
input.
6. In the Tooltip box enter the description of the box.
This will pop up when you hover over the text area.
7. If the field has to be filled out, check the Required

box. Changing field to Required would turn the field
red.
8. If you are not done adding fields but want to have a

peek at the end result, click on Preview on the top bar
Styling fields
Formatting
fields
9.
1.
2.
3.
4.
5.
6.
1.
Click ok
A field can be extended by pulling the boxes on its edges
Under the appearance tab you can change the border and fill colour
Go to text under the appearance tab. You can set the font size to any size OR set to auto. The advantage of it is if user
enters too much text, when auto is set the text would shrink to fit the box. BUT if too much information is entered it
would be very small, so you need to limit the characters
To limit characters, go to options tab -> check Limit characters and set a number of characters to limit.
If the text area is too large or too small, scale it properly.
If you want to set a text field with more than one line, under options select multi- line
Click on the Format tab
2. Select format category: number, percentage, date, time, special(to set phone number format)
3. When choosing the options, the example of formatting will show. See image below.
31 | P a g e
WCAG Check List

Formatting a number
Formatting a Phone number
This is how it would look in the form

Number formatting
Add a button
(Print, Save)
32 | P a g e
1. To add a print button go to add new field

2. Select button -> click on All Properties
3. Fill out name (id) and tooltip
Phone number
WCAG Check List

4. In the Actions tab click on Add (leave mouse up and
Execute a menu item options selected)
5. Select File> Print option and click ok to close the

dialog box
33 | P a g e
WCAG Check List
6. To create a Save button, go through 1-4 and at the

menu item select File>Save As>PDF option
Tutoriels de luOttawa (transcription et vido) sur la cration de documents Word, Excel, PowerPoint, PDF et de
formulaires accessibles
Pour plus dinformation sur la cration de document Word accessible, visitez la section Crer des documents accessibles sur le site Internet de
lUniversit dOttawa. (Tutoriel vido disponible en version anglaise seulement).
34 | P a g e
WCAG Check List
Bonne pratique avant de soumettre un document Word Accessible lquipe Web
(h1)Titre de la page Web

(h2)Exemple dun document Microsoft Word accessible
(h3)Saut de page web skip links laide dune table des matires automatise ou de bookmarks mme la
page web
Exemple dun document Microsoft Word accessible ............................................................................. 35
Tableau accessible .............................................................................................................................. 35
Texte mis en vidence......................................................................................................................... 36
Listes numrotes ............................................................................................................................... 36
Hyperliens ........................................................................................................................................... 36
(h3)Tableau (tableaux simples seulement)

Titre 1
Titre 2
Sous-titre
Contenu
Sous-titre 1
Contenu
Sous-titre2
Contenu
N.B. : Les captions fonctionnent galement.
35 | P a g e
Titre3
Contenu
Contenu
Contenu
WCAG Check List
(h3)Texte mis en vidence
Ceci est un texte en caractre gras

Ceci est un texte en italique
Ceci est un texte soulign
(h3)Listes numrotes et non numrotes complexes et simples

1. crivez-votre texte
a. Complex
2. Assurez-vous dutiliser une liste numrote ou non selon le besoin de la page.
Pour plus dinformations voir Ce qui ne vaut pas la peine dtre fait sur Word avant un formatage dans Dreamweaver.
(h3)Hyperliens
Ceci est un texte en hyperlien qui dirige le lecteur vers le site Internet de lUniversit dOttawa.
Ceci est une adresse courriel qui dirige vers Microsoft Outlook
(h3)Ce qui ne vaut pas la peine dtre fait sur Word avant un formatage dans Dreamweaver
Mettre une page titre

Les tableaux complexes (et insrer les header rows)
Insrer des images avec des alt text (ne mettre que le nom de limage insrer et le alt text souhait au bon endroit sur la page).
Les styles et grosseurs de fontes
Download the Web Experience Toolkit (WET)

Open source project led by the Government of Canada with code library for building websites that are accessible, usable and interoperable,
mobile friendly, multilingual, flexible and themeable templates and reusable components.
36 | P a g e
WCAG Check List
uOttawa online resources & tools on Guidelines, Common Look-and-Feel and Accessibly for uOttawa Web pages
Tools
Subversion
How to setup Tortoise SVN and putty on Windows XP?
Getting Started with uOttawa Drupal RC1
Access the Toolkit for the old 960
Image Bank -- images bank and tools
Campus map generator generates a map to a specific uOttawa
campus or building
Google Analytics
Testing Checklist -- Testing checklist used when developing
University sites
Browser Testing Grid -- List of browsers used when testing new
sites or web apps
Website Workflow and Time Frames (PDF)
Template for Content Inventory (Excel) is a spreadsheet with the
columns required for a Content Inventory. Each cel on the first
row has a comment that describes content and purpose for each
column. Note that a Content Inventory is not a deliverable: it is an
ongoing process!
Website Snapshot Checklist (PDF) is an adaptation of the "25point Website Usability Checklist"
Re-designing your site
uOttawa Common Look and Feel Guidelines
Coding conventions -- initial discussion on coding best practices

uOttawa Brand
uOttawa Visual Identity Standard Manual
37 | P a g e
uOttawa Website Content Layout Style Guide

Design Patterns -- Where to find page elements, code samples
and photoshop files, and also where to document your design
decisions and share them with the community
Work in progress: Websites currently using the 960 templates
Web Content Standards
Accessibility
Language quality
Sub-domain guidelines
Metatag Standards
Web Content Standards and Guidelines
Promoting Content on the Home and Gateway pages
CD Workflow for new websites (PDF)
Web Content Managers Workshops
Content Strategy Workshops
Web Professionals Community
Web Meetings
Templates Project
Web Professionals Directory
List of Developers - Personal Bios of our developers and contact
info
Web Steering Committee - Members and sub-working groups
Inter-Faculty Group - Faculty Members
uoWeb - Web Professionals Community Blog

WCAG GES Checklist

Hochgeladen von

Dokumentinformationen

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

WCAG GES Checklist

Hochgeladen von

Copyright:

Verfügbare Formate

Table of Contents

WCAG Check List

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

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

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

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

Warning instruction (change on context).... 18 Create an Accessible Pdf ...................................29

Colour Contrast ........................................ 5

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

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

Zoom 200% .............................................. 5

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

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

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

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

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

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

WCAG Check List

Return to Table of Content

The page you want to check is opened in Firefox

Related WAVE icons

G88: Providing descriptive titles for Web pages

Missing heading structure

Heading element is present

H42: Using h1-h6 to identify headings

H? tags are used for, and only for, headings

WCAG Check List

Return to Table of Content

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

Unordered list (no use of numbers or

Definition list (to define terms (a glossary for

H48: Using ol, ul and dl for lists

Emphasized text (<em>)

Strongly emphasized text (<strong>)

Quote or Blockquote (<q> or <blockquote>)

H49: Using semantic markup to mark emphasized or special text

The content that has the visual appearance of a list

<em> is used when you want to emphasize text

WCAG Check List

Return to Table of Content

Go on WAVE Firefox toolbar

G57: Ordering the content in a meaningful sequence

WCAG Check List

Return to Table of Content

Style Sheet colors (foregrounds and backgrounds)

Contrast Analyser Only Level A and AA need to pass.

Using Firefox: From the View menu, select Zoom and

WCAG Check List

Return to Table of Content

Use a tool for validating HTML http://validator.w3.org

WCAG Check List

Links can be selected in order

The user must

Return to Table of Content

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

Use any forms in order.

WCAG Check List

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

Return to Table of Content

<a class="uilink" href="http://www.forces.gc.ca/en/index.page?" rel="ext

WCAG Check List

Return to Table of Content

C6: Positioning content based on structural markup

Examine the code of the Web page.