Menu Search Me

WCAG

Created by jimmyxu101 on 2019-01-15

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.

Guideline 4.1: Maximize compatibility with current and future user agents, including assistive technologies.