WCAG 2.0 - Web Content Accessibility Guidelines
(Re-generate the TOC after modifications to the document)
Icons used in this document – Types of Disability
Guideline 1 - Provide ALT text for all simple images
Guideline 2 - Provide a full description for complex images
Guideline 3 - Provide alt text for active areas of client side image maps
Guideline 4 – Explicitly associate form fields with labels
Guideline 5 – Ensure form fields are grouped properly
Guideline 6 – Ensure users have enough time to fill out a form
Guideline 7 – Ensure error messages are properly formatted
Guideline 8 – Ensure data tables are accessible
Guideline 9 – Make hypertext links meaningful
Guideline 10 – Provide a method for skipping repetitive navigation structure
Guideline 11 – Ensure user control over opening new windows
Guideline 12 – Ensure proper header usage
Guideline 13 – Pages must provide titles
Guideline 14 – Ensure keyboard accessibility
Guideline 15 – Ensure frames contain appropriate title
Guideline 16 – Color will not be used as a sole means of communicating information
Guideline 17 – For all non-HTML elements consult with the Accessibility team
Icons used in this document – Types of Disability
This icon represents Blindness. Blindness involves a substantial loss of vision in both eyes. Individuals who are blind cannot see your web page and must receive content through either auditory (i.e.: a screen reader) or tactile methods (i.e.: Braille).
This icon represents Low Vision. There are many types of low vision (also known as "partially sighted" in parts of
This icon represents Motor Disability. Motor disabilities can include weakness, limitations of muscular control (such as involuntary movements, lack of coordination, or paralysis) limitations of sensation, joint problems, or missing limbs. Some physical disabilities can include pain that impedes movement. To use the Web, people with motor disabilities affecting the hands or arms may use a specialized mouse; a keyboard with a layout of keys that matches their range of hand motion; a pointing device such as a head-mouse, head-pointer or mouth-stick; voice-recognition software; an eye-gaze system; or other assertive technologies to access and interact with the information on Web sites.
This icon represents Cognitive Disability. An individual with a cognitive disability or learning disability may learn more slowly, or have difficulty understanding complex concepts. Many people with Attention Deficit Disorder/Attention Deficit Hyperactivity Disorder (ADD/ADHD), which affects their ability to stay focused, also experience learning disabilities. To use the Web, an individual with an attention deficit disorder may need to turn off animations on a site in order to be able to focus on the site's content. To use the Web, people with impairments of intelligence may take more time on a Web site, may rely more on graphics to enhance understanding of a site, and may benefit from the level of language on a site not being unnecessarily complex for the site's intended purpose.
This icon represents Deafness. Deafness involves a substantial impairment of hearing in both ears. To use the Web, many individuals who are deaf rely on captions or transcripts for audio and/or video content.
This icon represents Color Blindness. Color blindness is a lack of sensitivity to certain colors. Common forms of color blindness include difficulty distinguishing between red and green, or between yellow and blue. Sometimes color blindness results in the inability to perceive any color.
Note: All definitions for each of the types of disabilities on this page are referenced from W3C’s article on “How people with disabilities use the web”
All of the following Guidelines 1 to 17 MUST be met
Guideline 1 - Provide ALT text for all simple images
What does this mean?
The Alt attribute provides a brief description that serves as an alternative to an image. Alt attributes communicate the meaning of images to users of assistive technologies such as screen readers and text-only browsers.
Why is this important?
Some individuals with visual impairments and learning disabilities use text-to-speech screen readers that read aloud text appearing on the screen. However, screen readers cannot read content presented in an image or graphic format without an appropriate Alt text. Further, individuals with older computers or text-only browser or slow internet connections may browse the website with images turned off and will miss the information presented visually.
What type(s) of disability does this Guideline address?
Which international standard source(s) is this Guideline based on?
WCAG1.0 Priority 1 – 1.1 - Provide a text equivalent for every non-text element
Section 508 - § 1194.22 - (a) Text equivalents for non-text items
What is the solution?
All simple images that are used in web documents require appropriate Alt attributes. Developers should provide appropriate Alt attributes for all images contained within a document including images (JPEG, GIF, PNG), image links, decorative images, spacer images, graphical buttons, and text based images. For each of these images that convey meaning, the Alt text should serve as a functional replacement for the image or describe the meaning and content of the image.
Development Techniques for Guideline 1
Developers and authors must ensure that an Alt attribute is provided for all images within a document. An Alt attribute should be a concise and meaningful description of the image. The Alt attribute for an image depends on the context in which the image is used.
Images that convey meaning
Figure 1: A sample simple image of the Pearson logo.
The appropriate ALT text equivalent for the image above is ALT = “Pearson logo”
Compliant Example:
alt="Pearson logo">
Non-Compliant Example:
alt="image">
Images that do NOT convey meaning
Images that do not convey meaning include spacer images, decorative images, arrow images for lists, horizontal or vertical line images, or 1x1 transparent images.
These types of images require a null or empty Alt attribute (ie: alt = “”)
Compliance Example:
alt="">
Non-Compliant Example:
alt="spacer">
Text-based images
Images that contain text, or are used primarily to format a piece of text, the Alt attribute should be the value of the text.
Figure 2: A sample text-based image.
Compliance Example:
alt="Enterprise Directory">
Non-Compliant Example:
alt="Image of a blue text">
Button Images
All button images used within forms must contain appropriate Alt attributes. In general, most image buttons simply contain text, hence the appropriate Alt text equal to the text contained within the image.
Figure 4: A sample button image.
Compliance Example :
Non-compliant Example :
alt="Button">
Note
If HTML contains non-textual elements ('IMG','APPLET','OBJECT' etc)provide textual equivalents
Guideline 2 - Provide a full description for complex images
What does this mean?
Images that are complex in nature or contain a large amount of information, such as charts, graphs, diagrams, workflows, and schematics, etc… requires special attributes for text equivalents. For complex images that cannot be summarized within 150 characters, a LONGDESC attribute is required. The LONGDESC attribute provides a screen reader user with a link to the long description of the complex image on a separate page.
Why is this important?
Some individuals with visual impairments and learning disabilities use text-to-speech technology that reads aloud text appearing on the screen. Without this LONGDESC attribute, the adaptive technology user may not fully understand all of the information represented in a complex image. Further, it will also assist individuals with a cognitive impairment (or learning disability) who has trouble processing complex graphical information might find the long text description useful.
What type(s) of disability does this Guideline address?
Which international standard source(s) is this Guideline based on?
WCAG1.0 Priority 1 – 1.1 - Provide a text equivalent for every non-text element
Section 508 - § 1194.22 - (a) Text equivalents for non-text items
What is the solution?
In the case of complex images such as charts, graphs, diagrams, workflows, and schematics content developers must ensure all the information provided in the image is also provided in an alternative format by using the LONGDESC attribute.
Development Techniques for Guideline 2
Figure 5: A sample complex image of a bar graph showing the total number of cases handled by the Ombudsman Office from 1998 to 2003
Development Technique for the sample complex image in figure 5
ALT="This bar graph shows the total number of cases, that were handled by the Ombudsman Office ”LONGDESC="full_description.html">
In the above example, the Alt attribute provides a brief description of what the image is.
However, if an adaptive technology user wants to learn in detail what are the total numbers of cases handled by the Ombudsman office for each year, he/she should follow the page that is referenced by the LONGDESC attribute to the full_description.html page that contains all the detail information about this bar graph image.
In this case, the full_description.html file would contain the full description of this complex image (figure 5) as follows:
“This is an image of a bar graph showing the total cases, new and carried over that were handled by our office from 1998 to 2003. In 1998, there were 350 new cases and 25 carried over. In 1999, there were 360 new cases and 20 carried over. In 2000, there were almost 225 new cases and 15 carried over. In 2001, there were 180 new cases and 20 carried over. In 2002, there where 218 new cases and 20 carried over and finally in 2003, there were 371 new cases and 60 carried over”
Guideline 3 - Provide alt text for active areas of client side image maps
What does this mean?
An image map is composed of a single image that contains several different links, each defined by certain coordinates (often referred to as "hotspots"). Image maps are often used for building navigation throughout your site. In order to make an image map accessible, content developers should ensure that all client side image maps contain appropriate ALT text equivalent.
Why is this important?
Image maps can interfere with the overall accessibility of your web site if not designed with Accessibility in mind. Screen readers rely on the Alt attribute in the image map to read out loud the description of the target of the link within an image map. Without this Alt attribute, screen reader users will not know what the content or function is for each of the links within an image map.
What type(s) of disability does this Guideline address?
Which international standard source(s) is this Guideline based on?
WCAG1.0 Priority 1 – 1.1 - Provide a text equivalent for every non-text element
Section 508 - § 1194.22 - (a) Text equivalents for non-text items
What is the solution?
To make an image map accessible, content developers must ensure that all image maps should include appropriate ALT attributes for each hot spot. Content developers should ensure that meaningful alt attributes are provided for all AREA elements within an image map. Alt attributes utilized in this fashion should be concise descriptions of the target of the AREA element, rather than general descriptions. For example alt="Home" or alt="Search”. Descriptions such as "click here" and "more..." are non-meaningful alt text equivalents because they do not indicate the functionality of the links.
Development Techniques for Guideline 3
Compliant Example
Non-Compliant Example
Guideline 4 – Explicitly associate form fields with labels
What does this mean?
Form fields are a way for users to enter input into a form within a web page, usually by filling in text boxes or selecting from drop-down menus. All form fields used within an application should be explicitly associated with labels and located near the labels for the form fields.
Why is this important?
Users who cannot see may not be able to determine which label applies to which form control, and therefore will not know what data to enter. Labels for form fields allow users to understand the content that should be entered for each form field.
What type(s) of disability does this Guideline address?
Which international standard source(s) is this Guideline based on?
WCAG Priority 2 - 12.4 Associate labels explicitly with their controls.
Section 508 - § 1194.22 - (n) Ensure electronic forms are accessible
What is the solution?
In order to be accessible to people with disabilities, form fields must have the LABEL elements and ID attribute that are explicitly associated with them. This will enable users of assistive technologies to understand the type of input that must be entered into the form field.
Development Techniques for Guideline 4
Compliant Example
<label for="Email">Email: id="Email">
Non-Compliant Example
Email:
Avoid utilizing implicit label association
Page authors should avoid using implicit association to associate form fields with labels. While adaptive technology will usually work properly with implicit label association, the association is being created because of screen geometry or commonality of label ancestors rather than explicit association. Implicit association does not ensure that the label will be read properly in all assistive technologies. Instead, authors should utilize labels that are explicitly associated with form fields.
Compliant Example
<tr>
<td>
<label for="first_name">First Name:</label></td>
<td><input type="text" name=”firstname” id="first_name"></td>
</tr>
Non-Compliant Example
<label>
<tr>
<td><b>First Name:</b></td>
<td><input type=”text” name=”firstname”><td>
</tr>
</label>
<tr>
<td><b>First Name: </b></td>
<td><input type=”text” name=”firstname”><td>
</tr>
Place labels near input elements
Whenever possible, page authors should ensure that labels are positioned either immediately before or immediately after the element that they label. While page authors may place labels in separate parts of a layout table no visible characters should separate the label from the element.
Compliant Example
...Instructions for input...
<LABEL for="input_1">Label</LABEL>
<input type="text" name="input_1" id="input_1">
Non-Compliant Example
<LABEL for="input_1">Label</LABEL>
...Instructions for input...
<input type="text" name="input_1" id="input_1">
Utilize titles when visual labels are impractical
While explicit labels should be used whenever possible, occasionally page layout will not allow labels to be visually placed on a page. When this is the case, page authors should utilize the title attribute in its place. The title attribute allows users to provide an inline method of defining the name for a given field.
Compliant Example
<tr>
<td> <input type=checkbox title="Select Training ACL" > </td>
<td>Training ACL </td>
</tr>
Non-Compliant Example
<tr>
<td><input type=checkbox title=" Click to select"...></td>
<td>Training ACL</td>
</tr>
Guideline 5 – Ensure form fields are grouped properly
What does this mean?
Complex forms should utilize proper mark-up to group related form fields together. Generally this means using the FIELDSET element to group related form controls and labeling this group of fields with the LEGEND element. For example, on an order form, authors would separate categories such as "Billing Address," "Shipping Address" and "Payment Information" using FIELDSET elements.
Why is this important?
Grouping form elements by their type can improve comprehension of a form by enclosing related information in smaller logical chunks. The FIELDSET and LEGEND elements make this possible. FIELDSET element group related information within a box, and LEGEND element labels that box.
What type(s) of disability does this Guideline address?
Which international standard source(s) is this Guideline based on?
WCAG Priority 2 - 12.3 Use proper mark-up to group pages.
Section 508 - § 1194.21 Software applications and operating systems –
(l) Ensure usability of electronic forms
Section 508 - § 1194.22 - (n) Ensure electronic forms are accessible
Section 508 - § 1194.31 - (a) Ensure access for blind and visually impaired
What is the solution?
In order to be accessible to people with disabilities, content developers should utilize the FIELDSET and LEGEND to group form fields. Forms should utilize the FIELDSET element to group related form controls. The first element within the FIELDSET group should be a LEGEND element, which provides a description for the entire FIELDSET.
Development Techniques for Guideline 5
Compliant Example
Billing Address
...
...
...
...
...
Shipping Address
...
...
...
...
...
Ensure form fields contain a logical tab order
Page authors should ensure that fields are laid out in a fashion that provides an intuitive tab order. For example, in an address form, page authors would ensure that the tab order for fields would be “Street Address One”, “Street Address Two”, “City”, “Province / State”, “Postal Code.” This can be accomplished by ensuring appropriate tab order attribute is assigned for each form field by using the tabindex attribute.
Compliant Example
…tabindex=”1”> City tabindex=”2”>
Guideline 6 – Ensure users have enough time to fill out a form
What does this mean?
Generally, this issue occurs on web applications that utilize forms to collect user’s responses, and may automatically log out users after a certain period of activity due to session timeout events. In this case, an individual with a disability should have an opportunity to request more time in order to complete filling out an online form.
Why is this important?
If a web application logged users out after fifteen minutes of inactivity, the user would be unable to successfully complete a transaction. If users do not have enough time to fill out a form, the user will not be able to successfully complete a transaction.
What type(s) of disability does this Guideline address?
Which international standard source(s) is this Guideline based on?
Section 508 - § 1194.22 - (p) Ensure user control over timed responses
What is the solution?
Content developers should ensure that whenever a response is required from the user, the user has the ability to extend the time required for the response. Generally, this occurs on web sites that utilize forms to collect responses, and may log out users after a certain period of activity. Individuals with disabilities may take up to ten times as long as regular users to fill out forms on a site. If a sample form takes approximately two minutes to fill out it may take an individual with disabilities up to twenty minutes to successfully fill out the form.
Development Techniques for Guideline 6
Avoid requiring time based responses
Web pages are sometimes designed with scripts or automatic refresh commands. These commands cause the page to automatically reload if a response is not received within a specified amount of time. Page authors should ensure that such functionality is not provided within pages. If such functionality must be used, authors should ensure that there is a mechanism allowing users with disabilities to indicate that they require extra time to fill in the form.
Compliant Example
Non-Compliant Example
Avoid usage of time based sessions
The usage of time based sessions, or sessions that automatically log a user off after a certain period of inactivity, can cause a requirement that a user respond within a certain amount of time. To ensure the accessibility of systems that have time based sessions users should be provided with the ability to set the value for the automatic logoff time. This will ensure that the user can control the amount of time after which they have been logged off. If this option is not available, the system wide setting should be set to a high value such as an hour as a default session timeout value.
Guideline 7 – Ensure error messages are properly formatted
What does this mean?
The ability for users to rapidly recover from errors in filling out forms is important in ensuring the accessibility of a web site. It is acceptable to use color to add emphasis to an error message as long as there is a duplicate method of indicating that the message is an error, such as starting the message with the word “Error:”
Why is this important?
Persons who experience colorblindness (or those using monochrome monitors) may have difficulty distinguishing differences between colors. In addition, when printing the Web page in black and white, the different colors will be lost, making the information less understandable.
What type(s) of disability does this Guideline address?
Which international standard source(s) is this Guideline based on?
WCAG Priority 1 - 2.1 Color cannot be the only method to convey information
Section 508 - § 1194.22 - (c) Information should not be conveyed only with color
What is the solution?
Content developers should ensure that a Guideline method is used for displaying error messages. Error messages should be indicated at the beginning of the form and contain the word “Error”. Follow a Guideline format for displaying error message such as “Error: Description of Error”.
Development Techniques for Guideline 7
Ensure error messages are formatted properly
Error messages should not be indicated using “color” alone. This issue can be addressed by adding the word "Error" to the beginning of any error message.
Compliant Example
Error: Please enter a value for first name
Non Compliant Example
Please enter a value for first name
Locate error messages at the beginning of forms
Error messages should be located at the beginning or before the form they relate to on a page. Error messages located at the end of forms are often not perceived by adaptive technology users who rely on a results overview being listed at the top of the form. To address this issue page authors should move the error message to the beginning of the form.
Compliant Example
Error: Please enter a value for first name.
Non-Compliant Example
Please enter your first and last name:
Please enter a value for first name.span>
Guideline 8 – Ensure data tables are accessible
What does this mean?
Data tables that are included in documents should properly define table headers and ensure that table headers are properly associated with table cells.
Why is this important?
People using screen readers may have difficulty accessing information from pages with data tables. Marking up tables properly provides these technologies with the appropriate information to support navigation in table cells and to access header and other table cell information.
What type(s) of disability does this Guideline address?
Which international standard source(s) is this Guideline based on?
WCAG Priority 1 - 5.1 Identify row and column headers for data tables
Section 508 - § 1194.22 - (g) Identify table headers
Section 508 - § 1194.22 - (h) Associate table and header cells
What is the solution?
Content developers should ensure that all data tables contain appropriate TH element to identify header columns and rows.
Development Techniques for Guideline 8
Identify table headers and use the Scope attributes
Table headers should be indicated using a table header (TH) element and scope attributes.
For example, consider the following data table:
| Team | Wins | Losses |
| Pacific Division | ||
| LA Lakers | 56 | 26 |
| | 55 | 27 |
| | ||
| | 58 | 24 |
| | 57 | 25 |
Table 1 – Western Conference Standings
Compliant Example 1 (based on Table 1 above)
<th scope="col">Teams <th scope="col">Wins <th scope="row">Kings <th scope="row">Lakers 78 70
Compliant Example 2 (based on Table 1 above)
id="teams">Teams id="wins">Wins id="teamKings" headers=”teams”>Kings headers=”wins” headers=”teamKings”>78 id="teamLakers" headers=”teams”>Lakers headers=”wins” headers=”teamLakes”>70
Associate table headers and table data
All data cells within a data table should contain associations with the headers of the tables. Two methods are available for associating table cells with header cells.
Scope association utilizes the scope attribute on the TH and TD element to associate a particular header cell with other cells. Possible values for the scope attribute are row, col, rowgroup or colgroup. When the scope attribute is used, the cell containing the scope is then automatically associated with the data cells in scope. For example a cell having scope=”row”, or “row scope,” will be associated with all cells in the row (TR tag.) The “col” association will cause the cell in question to be associated with all elements beneath the cell in the same column. The “rowgroup” and “colgroup” associations allow associations across groups of cells. However, “rowgroup” and “colgroup” associations are not well supported by adaptive technology and not recommended for use.
Compliant Example 3 (based on Table 2 below)
The following example illustrates how to create accessible data tables with headings Name, College, Major, Grade Point Average.
| Name | College | Major | GPA |
| Tony | | Computer Science | 3.99 |
| John | George Brown | Engineering | 3.70 |
Table 2 – Example of an accessible data table
A screen reader will interpret the data in the above table as:
Name: Tony, College:
Name: John, College: George Brown, Major: Engineering, GPA: 3.70
The HTML for the above example is:
<th id="a1">Name <th id="a2">College <th id="a3">Major <th id="a4" abbr="GPA">Grade Point Averagesummary="This table contains information such as name, college, major, and grade point average of an individual">
headers="a1">Tony headers="a2"> headers="a3">Computer Science headers="a4">3.99 headers="a1">John headers="a2">George Brown headers="a3">Engineering headers="a4">3.7
HEADERS Attribute
Allow screen readers to associate table cells with their appropriate headers. As you can see in the above example (a very simple table), every cell (TD) in the "Name" column is marked with HEADERS="a1", everything in the College column with HEADERS="a2", and so on.
ID Attribute
In this context, the ID attribute goes inside the TH tag and allows table cells to be associated with that table header. The ID value in a TH tag should begin with a letter, followed by a number.
Guideline 9 – Make hypertext links meaningful
What does this mean?
Hyperlinks are often accessed using the Tab key to move from link to link by users with disabilities who are using adaptive technology. It is important to ensure that all hypertext links are meaningful when read out of context.
Why is this important?
It is important to use text that makes sense when read out of context to improve accessibility for users who are using screen readers with audio output. Hyperlinks are often accessed using the Tab key to move from link to link by users who are using s. For this reason, link text should be meaningful enough to make sense when read out of context. At the same time, links should be concise rather than wordy, to increase efficiency.
What type(s) of disability does this Guideline address?
Which international standard source(s) is this Guideline based on?
WCAG Priority 1 - 1.1 Lack of textual equivalents for non-text elements
WCAG Priority 2 - 13.1 Clearly identify the target of each link
Section 508 - § 1194.22 - (a) Text equivalent of non-text items
What is the solution?
Ensure that all hypertext links are informative and makes sense when read out of context. Hyperlinks should be concise and a meaningful representation of the link target.
Development Techniques for Guideline 9
Provide informative alt attributes for image links
IMG elements that are used as links need to have alt attributes that describe both the image and the target of the anchor. Links require meaningful alt attributes which describe their target, such as alt="CNN home page" or "Yahoo's NFL page". The description should function as a replacement for the image link. Page authors should ensure that descriptions are precise and meaningful, and avoid using vague attributes such as alt="Follow this link...". The alt description should effectively describe the target of the link.
Compliant Example
Non Compliant Example
Provide clear text for text links
Good link text generally follows the same rules as good alt text: it should be concise and a meaningful representation of the link target. Consider the link text "click here." Not only is this phrase device-dependent (it implies a pointing device) it says nothing about what is to be found if the link if followed. Instead of "click here", link text should indicate the nature of the link target, as in "more information about sea lions" or "text-only version of this page". Note that for the latter case (and other format- or language-specific documents), content developers are encouraged to use content negotiation instead, so that users who prefer text versions will have them served automatically. Ensure that link text accurately reflects the target of the link.
Compliant Example
Non-Compliant Example
Links should utilize unique text
Links with the same link text should target the same document. Pages that have links with similar names that target different locations can be confusing for adaptive technology users. If the visual representation of the links cannot be changed, the title attribute can be used to indicate the target of the link.
Compliant Example
or
Non-Compliant Example
Link action should be clearly indicated
For links that are used to trigger JavaScript, or open a new window, the action that occurs upon activating the link should be clearly indicated as part of the link text. This is required whenever activating a link results in an action other than navigation. To address this issue page authors must often utilize a title attribute.
Compliant Example
Non-Compliant Example
Guideline 10 – Provide a method for skipping repetitive navigation structure
What does this mean?
As navigation bars are generally at the top of the page, individuals using screen readers must listen to the navigation links before getting to the main content. Similarly, people using the keyboard must tab through the links to get to the main content. This can be time-consuming and repetitive.
Why is this important?
Most often this occurs within a web site that uses a Guideline navigation structure, such as a top and left navigation bar on each page. Each time a user of adaptive technology accesses a new page within the site they will encounter the same links. The user has to browse through these links on every page - before getting to the content of the page. Further, users who use sip-and-puff devices may be tired from these repetitive links.
What type(s) of disability does this Guideline address?
Which international standard source(s) is this Guideline based on?
WCAG Priority 3 - Checkpoint 13.6 – Group links
Section 508 - § 1194.22 - (o) Provide a method for skipping repetitive links
What is the solution?
Page authors should provide a mechanism that enables users to skip past group of repetitive links. To address this page authors should provide a skip link, which allows users to jump directly to the content of the page.
Development Techniques for Guideline 10
[Home]
[Contact]
Welcome to our website! This is the main content area
Guideline 11 – Ensure user control over opening new windows
What does this mean?
Page authors should avoid opening new windows without informing users or allowing the user to control the content change.
Why is this important?
Users who cannot see or who do not notice that the focus of the current window has changed or that a new window has popped up, may be disoriented by the change.
What type(s) of disability does this Guideline address?
Which international standard source(s) is this Guideline based on?
WCAG Priority 2 - 10.1 Do not open up new windows.
What is the solution?
Inform users when using pop-up windows, opening a new window, or changing the focus to a new window.
Development Techniques for Guideline 11
Remove all functions that forcibly open new windows.
Do not open a new window using a JavaScript function
Page authors should avoid opening new windows without informing users or allowing the user to control the content change.
Compliant Example
Non-Compliant Example
Avoid opening a new windows or frame target using “_blank”
This link or frame targets a new blank window. Until user agents allow users to turn off spawned windows, do not cause pop-ups or other windows to appear and do not change the current window without informing the user. Remove all elements in a page that target "_blank".
Compliant Example
Non-Compliant Example
Do not open a new window without warning the user
Compliant Example:
Pearson Accessibility Guidelines. (This will open in a new window.)
Guideline 12 – Ensure proper header usage
What does this mean?
Header tags are used to show the relative importance of text on a page. Headers are used to define new sections of text, and are often rendered as bold text and sometimes in a slightly larger font than the default font. Header tags should not be used for the purpose of formatting; instead, use style sheets.
Why is this important?
Explicit header mark-up will allow users to skim through a document rapidly by navigating its headings. Whenever possible these elements should be included – as they can have a significant positive impact on the usability of documents
What type(s) of disability does this Guideline address?
Which international standard source(s) is this Guideline based on?
WCAG Priority 2 - 3.5 Use header elements appropriately
What is the solution?
Headers should be used in an ordered and logical sequence. For example, "h2" should always appear as a sub-section of "h1", "h3" a sub-section of "h2", and so on. Do not use headers for font effects; instead, use style sheets.
Development Techniques for Guideline 12
Headers should be used in an ordered and logical sequence
Content developers should order heading elements properly. For example, in HTML, H2 elements should follow H1 element, H3 elements should follow H2 elements, etc. Content developers should not "skip" levels (e.g., H1 directly to H3).
Compliant Example
Cooking techniques
... cooking techniques ...
Boiling Water
... cooking techniques -> boiling water...
Non-Compliant Example
Cooking techniques
... cooking techniques ...
- Boiling Water
... cooking techniques -> boiling water...
Compliant Example 2
Heading
Sub-heading
Another heading level
Utilize explicit headers
Whenever possible, explicit header markup should be utilized to mark up page headers. Since some users skim through a document by navigating its headings, it is important to use them appropriately to convey document structure. Page authors should ensure with any page elements that are being used to create visual effect headers with proper mark-up are employed.
Compliant Example
Cooking techniques
... cooking techniques ...
Non Compliant Example
Cooking techniques
... cooking techniques ...
Guideline 13 – Pages must provide titles
What does this mean?
The TITLE element defines a single title for a web page – and is generally the first page component read out in adaptive technology when a page loads. Why is this important? Page title is usually the first value that is read by a screen reader when a page first loads. Adaptive technologies utilize the value of the TITLE element to indicate to users the current page location.
What type(s) of disability does this Guideline address?
Which international standard source(s) is this Guideline based on?
WCAG Priority 2 - 13.2 Describe the page’s relationship to other pages within the site
What is the solution?
The TITLE element should be defined for all pages within a site.
Page authors should ensure the TITLE element is defined for all pages and that the value of the TITLE element is appropriate. The page title should be an appropriate value that describes the content of the page.
Development Techniques for Guideline 13
Utilize the TITLE element
The TITLE element should be defined for all documents. The TITLE element appears once in a document and comes within the HEAD HTML element.
Compliant Example
Content
Non Compliant Example
Content
Ensure page TITLE changes in applications
The page TITLE element should provide information that is specific to the page currently being viewed. Adaptive technologies utilize the value of the TITLE element to indicate to users the current page location. Ensure that the value for the TITLE element is updated as the page content changes.
Compliant Example
Edit User – Toan Tran Generic Application Title
Non Compliant Example
Generic Application Title
Guideline 14 – Ensure keyboard accessibility
What does this mean?
Device independence means users must be able to interact with a browser (and the document it renders) using the devices suiting their needs (e.g., mouse, keyboard, voice input, sip-and-puff device, etc.). If, for example, a form control can only be activated with a mouse or other pointing device, someone who is using the page without sight, with voice input, or with a keyboard or who is using some other non-pointing input device will not be able to use the form.
Why is this important?
Keyboard accessibility is one of the most important aspects of disability access. Not all users can use a mouse or other pointing device. Some users rely on keyboard, alternative keyboard, or voice input to navigate links and activate form controls. Visually impaired
individuals who use screen readers cannot use a mouse because they cannot see where to click. They use their keyboard almost exclusively.
What type(s) of disability does this Guideline address?
Which international standard source(s) is this Guideline based on?
WCAG Priority 2 - 6.4 Ensure device independence
WCAG Priority 2 - 9.3 Specify logical event handlers rather than device-dependent event handlers
Section 508 - § 1194.22 - (l) Ensure scripts are accessible
What is the solution?
Whenever active elements are provided on pages, authors must ensure that they can be accessed from the keyboard. This includes the ability to gain focus on the element and activate it from the keyboard. Ensure that all functions that require user’s interaction within your website or web application can be operated via the keyboard only.
Development Techniques for Guideline 14
Use device independent event handlers
Event handlers define how scripts react to events caused by something the user does (e.g., the mouse moves, a key is pressed, the document is loaded, etc.). Page authors should ensure that redundant device-independent event handlers are provided for all event handlers. This is inaccessible to some users of adaptive technologies who cannot trigger the event because, for example, they may not use a mouse. Authors should insert a redundant device-independent event handler to allow users of adaptive technologies a method to access the functionality. Alternatively, authors should remove the event handlers if they do not wish to add a redundant device-independent one. Event handlers that depend on a device, generally the mouse, should contain redundant non-device dependent event handlers. The following device dependent event handlers correspond to the device independent event handlers that follow.
| Example Keyboard Alternative | |
| Event Handler | Alternative |
| OnClick | OnKeyPress |
| OnMouseDown | OnKeyDown |
| OnMouseUp | OnKeyUp |
| OnMouseOver | OnFocus |
| OnMouseOut | OnBlur |
| OnDblClick | OnKeyDown |
Compliant Example
Non Compliant Example
Avoid using Javascript functions that is not keyboard-accessible
All elements that trigger actions must be accessible from the keyboard. Functionality that is dependent on devices such as a mouse may not be available to all assistive technology users. Page authors must ensure that all active elements can receive focus. Generally this can be accomplished by utilizing Guideline HTML components to handle navigation and form submission. For example, replace SPAN elements that cause navigation with Guideline HTML links ( elements). SPAN elements that trigger form submission can likewise be replaced by INPUT elements.
Guideline 15 – Ensure frames contain appropriate title
What does this mean?
Ensure that all frames include the "title" attribute to describe the function, content or purpose of each frame.
Why is this important?
A screen reader for example, usually reads all of the frames in a frameset, almost as if they belong to the same page. The screen reader user is alerted that a frameset is present, and then continues to read all of the pages in the frameset. However proper title attribute must be provided.
What type(s) of disability does this Guideline address?
Which international standard source(s) is this Guideline based on?
WCAG Priority 1 - 12.1 Titles for frames
Section 508 - § 1194.22 - (i) Properly title frames
What is the solution?
Provide meaningful titles for frames that serve as a short description of the contents of the frame.
Development Techniques for Guideline 15
Authors should enter a title attribute that is a short description of the contents of the frame (e.g. navbar, main content, source window, etc.).
Compliant Example:
title="Left Navigation Menu" name="menu"> title="Main Content" name="content">
Non-Compliant Example:
title="Nav" name="menu"> title="c_frm" name="content">
Guideline 16 – Color will not be used as a sole means of communicating information
What does this mean?
Use of color to represent meaning or functionality is encouraged. If color is used to convey meaning, ensure that the meaning is also represented in another form, such as text.
Why is this important?
Persons who are color blind or have low vision and cognitive impairments (or those using monochrome monitors) may have difficulty distinguishing differences between colors.
What type(s) of disability does this Guideline address?
Which international standard source(s) is this Guideline based on?
WCAG Priority 1 - 2.1 Color cannot be the only method to convey information
Section 508 - § 1194.22 - (c) Information should not be conveyed only with color
What is the solution?
Page authors or content developers must ensure that all information communicated via color is available through some other method of identification, such as text labels. Page authors should not utilize color as the sole means of communicating information. This provision does not prohibit the use of color to enhance identification of important features. It does, however, require that some other method of identification, such as text labels, be combined with the use of color.
Development Techniques for Guideline 16
Page authors must ensure that all information communicated via color is available through some other method of identification, such as text labels.
Compliant Example 1:
Error: You did not complete the appropriate fields
Non-Compliant Example 1:
You did not complete the appropriate fields
Compliant Example 2:
Click (or press Enter) on the blue square to save changes and the green triangle to cancel.
Non-Compliant Example 2:
Click on the blue square to save changes and the green square to cancel.
Guideline 17 – For all non-HTML elements consult with the Accessibility team
What does this mean?
Content that is not in HTML format may require specific enhancements to be made accessible. Page authors should consult with the accessibility team for each of these content types. Relevant content types include, but are not limited to:
• Adobe Acrobat (PDF)
• Macromedia Flash
• Audio Presentations
• Video Presentations
• Microsoft Office Files (Word, PowerPoint, ect…)
• Embedded ActiveX objects
No comments:
Post a Comment