WCAG
WCAG 2.0
References
https://www.ontario.ca/page/how-make-websites-accessible
Guideline 1.1: Provide text alternatives for non-text content
aria-label https://www.w3.org/TR/2016/NOTE-WCAG20-TECHS-20161007/ARIA6
aria-labelledby https://www.w3.org/TR/2016/NOTE-WCAG20-TECHS-20161007/ARIA10
aria-describedby https://www.w3.org/TR/2016/NOTE-WCAG20-TECHS-20161007/ARIA15
Using alt
attributes on img elements
<img
src="welcome.gif" usemap="#map1" alt="Areas in the
library. Select an area for more information on that area." />
Providing text
alternatives for the area elements of image maps
<map
id="map1" name="map1">
<area shape="rect"
coords="0,0,30,30"
href="reference.html"
alt="Reference" />
<area shape="rect"
coords="34,34,100,100"
href="media.html" alt="Audio
visual lab" />
</map>
Using label
elements to associate text labels with form controls
<label
for="firstname">First name:</label>
<input
type="text" name="firstname" id="firstname" />
Using the title
attribute to identify form controls when the label element cannot be used
<fieldset><legend>Phone
number</legend>
<input
id="areaCode" name="areaCode" title="Area Code"
type="text"
size="3" value="" >
<input
id="exchange" name="exchange" title="First three
digits of phone number"
type="text"
size="3" value="" >
<input
id="lastDigits" name="lastDigits" title="Last four
digits of phone number"
type="text"
size="4" value="" >
</fieldset>
Describing the
purpose of a link in HTML in the text content of the a element.
<a
href="routes.html">
Current routes at Boulders Climbing Gym
</a>
Guideline 1.2: Provide alternatives for time-based media
Guideline 1.3: Adaptable content
Success Criterion 1.3.1 Info and relationships
Information,
structure, and relationships conveyed through presentation can be
programmatically determined or are available in text.
Aria Landmarks are inserted into the page using the role
attribute on an element that marks the section. The value of the attribute
is the name of the landmark. These role values are listed below:... The
following example shows how landmarks might be added to an HTML4 or XHTML 1.0
document:
<div
id="header" role="banner">A banner image and
introductory title</div>
<div
id="sitelookup" role="search">....</div>
<div id="nav"
role="navigation">...a list of links here ... </div>
<div
id="content" role="main"> ... Ottawa is the capital of
Canada ...</div>
<div
id="rightsideadvert" role="complementary">....an
advertisement here...</div>
<div
id="footer" role="contentinfo">(c)The Freedom Company,
123 Freedom Way, Helpville, USA</div>
ARIA17: Using
grouping roles to identify related form controls:
<div
role="group" aria-labelledby="ssn1">
<span id="ssn1">Social
Security#</span>
<span style="color:
#D90D0D;"> * </span>
<input size="3"
type="text" aria-required="true" title="First 3
digits" />-
<input size="2"
type="text" aria-required="true" title="Next 2
digits" />-
<input size="4"
type="text" aria-required="true" title="Last 4
digits" />
</div>
ARIA20: Using
the region role to identify a region of the page
A section on the
home page of a news website that contains a poll that changes every week is
marked up with role="region". The h3 text above the form is
referenced as the region's name using aria-labelledby.
<div
role="region" aria-labelledby="pollhead">
<h3 id="pollhead">This
week's Poll</h3>
<form
method="post" action="#">
<fieldset>
<legend>Do you believe the tax code
needs to be overhauled?</legend>
<input type="radio"
id="r1" name="poll" />
<label for="r1">No, it's
fine the way it is</label>
<input type="radio"
id="r2" name="poll" />
<label for="r2">Yes, the
wealthy need to pay more</label>
<input type="radio"
id="r3" name="poll" />
<label for="r3">Yes, we
need to close corporate loopholes</label>
<input type="radio"
id="r4" name="poll" />
<label for="r4">Changes
should be made across the board</label>
</fieldset>
</form>
<a
href="results.php">See Poll Results</a>
</div>
G115: Using
semantic elements to mark up structure
A page about the
history of marriage uses a quotation from Jane Austen's novel, Pride and
Prejudice, as an example. The reference to the book is marked up using the cite
element and the quotation itself is marked up using the blockquote element.
Example Code:
<p>Marriage was considered
a logical step for a bachelor,
as can be seen in the first
chapter of the novel
<cite>Pride and
Prejudice</cite>:</p>
<blockquote>
<p>It is a truth
universally acknowledged, that a single man in
possession of a good fortune,
must be in want of a wife.</p>
<p>However little known
the feelings or views of such a man may
be on his first entering a neighbourhood,
this truth is so well
fixed in the minds of the
surrounding families, that he is considered
the rightful property of some
one or other of their daughters.</p>
</blockquote>
Success Criterion 1.3.2 Meaningful sequence
Example 1: In a
multi-column document, the linear presentation of the content flows from the
top of a column to the bottom of the column, then to the top of the next
column.
Example 2: CSS is
used to position a navigation bar, the main story on a page, and a side story.
Success Criterion 1.3.3 Sensory characteristics
Example 1: A
schedule of competitive events uses color and shape to distinguish the time of
each event
A table
presents a list of times across the top row and a list of events in the first
vertical column. The cell corresponding to the time of a particular event has a
specific background color and diamond shaped glyph so it can be identified by
color and shape.
Example 2:
An on-line multi-page survey
An on-line
multi-page survey uses a link implemented as a green arrow icon placed in the
lower right hand corner of the content to move from one survey page to the
next. The arrow is clearly labeled with "Next" and the instructions
state, "To move to the next section of the survey, select the green arrow
icon labeled 'Next' in the lower right corner below the last survey
question." This example uses both positioning, color and labeling to help
identify the icon.
Guideline 1.4: Make it easier for users to see and hear content
including separating foreground from background.
1.4.1 Use of
Color: Color is not used as the only visual means of conveying information,
indicating an action, prompting a response, or distinguishing a visual element.
(Level A)
1.4.2 Audio
Control: If any audio on a Web page plays automatically for more than 3
seconds, either a mechanism is available to pause or stop the audio, or a
mechanism is available to control audio volume independently from the overall
system volume level. (Level A)
1.4.3
Contrast (Minimum): The visual presentation of text and images of text has a
contrast ratio of at least 4.5:1, except for the following: (Level AA)
1.4.4 Resize
text: Except for captions and images of text, text can be resized without
assistive technology up to 200 percent without loss of content or
functionality. (Level AA)
1.4.5 Images
of Text: If the technologies being used can achieve the visual presentation,
text is used to convey information rather than images of text except for the
following: (Level AA)
Guideline 2.1: Make all functionality available from a keyboard.
SCR20: Using
both keyboard and other device-specific functions (Scripting)
SCR35:
Making actions keyboard accessible by using the onclick event of anchors and
buttons (Scripting)
SCR2: Using
redundant keyboard and mouse event handlers (Scripting)
Guideline 2.4: Provide ways to help users navigate, find content, and
determine where they are.
2.4.1 Bypass Blocks: A mechanism is available to bypass blocks of content
that are repeated on multiple Web pages. (Level A)
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
ARIA11:
Using ARIA landmarks to identify regions of a page
H69:
Providing heading elements at the beginning of each section of content
2.4.2 Page Titled: Web pages have titles that describe topic or purpose.
(Level A)
2.4.3 Focus Order: If a Web page can be navigated sequentially and the
navigation sequences affect meaning or operation, focusable components receive
focus in an order that preserves meaning and operability. (Level A)
For example,
if the order in the table content is row by row but the author feels it is more
logical to navigate the form column by column. In this case, you can use the
tabindex attributes of the input fields to specify a tab order that navigates
column by column.
<tr>
<th>First name</th>
<td><input type="text"
size="30" value="" name="groomfirst"
title="First name of the groom"
tabindex="1"></td>
<td><input type="text"
size="30" value="" name="bridefirst"
title="First name of the bride"
tabindex="4"></td>
</tr>
SCR27:
Reordering page sections using the Document Object Model (Scripting)
Use
JavaScript to manipulate the DOM to re-order the page sections based on your
need
2.4.4 Link Purpose (In Context): The purpose of each link can be determined
from the link text alone or from the link text together with its
programmatically determined link context. (Level A)
Examples of
Success Criterion 2.4.4
A link
contains text that gives a description of the information at that URI
A link is preceded
by a text description of the information at that URI
Both an icon
and text are included in the same link
Guideline 3.1: Readable text content
3.1.2
Language of Parts: The human language of each passage or phrase in the content
can be programmatically determined except for proper names, technical terms,
words of indeterminate language, and words or phrases that have become part of
the vernacular of the immediately surrounding text. (Level AA)
H58: Using
language attributes to identify changes in the human language (HTML)
Guideline 3.2: Predictable web pages
3.2.1 On Focus: When any component receives focus, it does not initiate a
change of context. (Level A)
G200:
Opening new windows and tabs from a link only when necessary
G201: Giving
users advanced warning when opening a new window
F52: Failure
of Success Criterion 3.2.1 and 3.2.5 due to opening a new window as soon as a
new page is loaded
F55: Failure
of Success Criteria 2.1.1, 2.4.7, and 3.2.1 due to using script to remove focus
when focus is received
3.2.2 On Input: Changing the setting of any user interface component does
not automatically cause a change of context unless the user has been advised of
the behavior before using the component. (Level A)
G13:
Describing what will happen before a change to a form control that causes a
change of context to occur is made
G201: Giving
users advanced warning when opening a new window
F36: Failure
of Success Criterion 3.2.2 due to automatically submitting a form and
presenting new content without prior warning when the last field in the form is
given a value
F37: Failure
of Success Criterion 3.2.2 due to launching a new window without prior warning
when the selection of a radio button, check box or select list is changed
Guideline 3.3: Input assistance
3.3.1 Error Identification: If an input error is automatically detected,
the item that is in error is identified and the error is described to the user
in text. (Level A)
G83:
Providing text descriptions to identify required fields that were not completed
ARIA21:
Using Aria-Invalid to Indicate An Error Field (ARIA)
SCR18:
Providing client-side validation and alert (Scripting)
ARIA18:
Using aria-alertdialog to Identify Errors (ARIA)
ARIA19:
Using ARIA role=alert or Live Regions to Identify Errors (ARIA)
ARIA21:
Using Aria-Invalid to Indicate An Error Field (ARIA)
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
SCR18:
Providing client-side validation and alert (Scripting)
SCR32:
Providing client-side validation and adding error text via the DOM (Scripting)
G139:
Creating a mechanism that allows users to jump to errors
G199:
Providing success feedback when data is submitted successfully
3.3.2 Labels or Instructions: Labels or instructions are provided when
content requires user input. (Level A)
3.3.3 Error Suggestion: If an input error is automatically detected and
suggestions for correction are known, then the suggestions are provided to the
user, unless it would jeopardize the security or purpose of the content. (Level
AA)
3.3.4 Error Prevention (Legal, Financial, Data): For Web pages that cause
legal commitments or financial transactions for the user to occur, that modify
or delete user-controllable data in data storage systems, or that submit user
test responses, at least one of the following is true: (Level AA)
Reversible:
Submissions are reversible.
Checked:
Data entered by the user is checked for input errors and the user is provided
an opportunity to correct them.
Confirmed: A
mechanism is available for reviewing, confirming, and correcting information
before finalizing the submission.