target online assistive technology guidelines (2mb word doc)
TRANSCRIPT
TARGET CORPORATION
June 25, 2008 Version 3.0
Target Online Assistive Technology Guidelines (TOATG)
Created by:
Target.com Guest Experience, Interactive Marketing Creative & TTS
Table of Contents
TUCHANGE HISTORYUT____________________________________________________________________4
TUINTRODUCTIONUT_____________________________________________________________________4
TUPURPOSEUT____________________________________________________________________________4
TUREFERENCESUT________________________________________________________________________4
TU1.UT TUNAVIGATION AND DESIGNUT______________________________________________________5
TU1.1 COMPREHENSIVE CONTENT DESCRIPTIONSUT______________________________________5
TU1.2 COLORUT___________________________________________________________________________5
TU1.2.1UT TUColor ChallengesUT___________________________________________________________5TU1.2.1.1 Markup SolutionsUT____________________________________________________________6TU1.2.1.2 Contextual SolutionsUT__________________________________________________________6TU1.2.2 Color ContrastUT________________________________________________________________7TU1.2.3 Photo-Sensitivity IssuesUT_________________________________________________________7
TU1.3 NAVIGATION, STRUCTURE AND LAYOUTUT__________________________________________8
TU1.3.1 Opening New WindowsUT_________________________________________________________8TU1.3.2 Structural Elements and OrderUT___________________________________________________8TU1.3.2.1 Header MarkupUT______________________________________________________________9TU1.3.2.2 Structural MarkupUT____________________________________________________________9TU1.3.3 Keyboard AccessUT_____________________________________________________________11TU1.3.3.1 Keyboard Focus on Active ElementsUT____________________________________________11TU1.3.3.2 Logical Tab OrderUT__________________________________________________________11TU1.3.4 Clearly Defined LinksUT_________________________________________________________12TU1.3.4.1 Navigable LinksUT____________________________________________________________13TU1.3.4.2 Appropriate Link TextUT________________________________________________________14TU1.3.5 Repetitive LinksUT______________________________________________________________15TU1.3.6 Proper Table DesignUT__________________________________________________________17TU1.3.6.1 Data Table SpecificationsUT_____________________________________________________17TU1.3.6.2 Layout Table RequirementsUT___________________________________________________19
TU1.4 ACCESSIBLE ELECTRONIC FORMSUT_______________________________________________20
TU1.4.1 Form UsabilityUT_______________________________________________________________20TU1.4.1.1 Form field Labeling and PositioningUT____________________________________________21TU1.4.1.2 Grouping complex formsUT_____________________________________________________21TU1.4.1.2-a Error and Success IndicatorsUT________________________________________________23TU1.4.1.2-b Time-Based Response ConsiderationsUT_________________________________________23TU1.4.1.2-c Session Time-OutsUT_________________________________________________________23
TU2.UT TUDEVELOPMENTUT________________________________________________________________24
TU2.1 ALT AND TITLE ATTRIBUTESUT____________________________________________________24
TU2.1.1 Alt AttributesUT________________________________________________________________24TU2.1.2 Title AttributesUT_______________________________________________________________26TU2.1.3 Attribute LabelsUT______________________________________________________________27
TU2.2 BROWSER SUPPORTUT_____________________________________________________________27
TU2.3 WEB PAGE CONTENT USING JAVASCRIPT, AJAX, AND/OR CSSUT_____________________27
TU2.3.1 JavaScript PolicyUT_____________________________________________________________28TU2.3.2 AJAXUT______________________________________________________________________28
June 25, 2008 Version 3.0
2
TU2.3.3 Cascading Style SheetsUT________________________________________________________28
TU2.4 STANDARD REDIRECTION FUNCTIONSUT___________________________________________28
TU2.5 FRAMESETSUT_____________________________________________________________________29
TU2.5.1 Frame TitlesUT_________________________________________________________________29
TUGLOSSARYUT_________________________________________________________________________30
TUAPPENDIX I: TARGET ONLINE ASSISTIVE TECHNOLOGY GUIDELINES (TOATG) EXEMPTION POLICYUT________________________________________________________________33
TUExemption FormUT_______________________________________________________________________34
June 25, 2008 Version 3.0
3
Change History
This document is located in:TU http://sharepoint.target.com/sites/im/teamsites/creative/TOATG%20Wiki/Home.aspx UTT
This document was created based on the Target Online Assistive Technology Guidelines (TOATG) - Short Form.
Introduction
Target is dedicated to providing the best experience for all Target.com guests, including those who use assistive technologies. Target Team Members and agency partners are expected to follow the Target Online Assistive Technology Guidelines (TOATG) when either developing new creative for Target.com or improving existing creative.
Purpose
To provide a scope of technology recommendations, including the logical and physical components of an application, in sufficient detail, to effectively and appropriately build a Target site experience.
References
Title Author LocationTarget Online Assistive Technology Guidelines
Target.com Guest Experience, Interactive Marketing Creative,
TTS
TU http://sharepoint.target.com/sites/im/ teamsites/creative/TOATG
%20Wiki/Home.aspxUT
June 25, 2008 Version 3.0
4
1. Navigation and Design
Target web pages should be designed according to the guidelines herein while retaining the best use of color, layout, navigational structure and all other aesthetic considerations that contribute to the production of well-balanced content and form.
1.1 Comprehensive Content DescriptionsImprove the usability of all time-based and interactive multimedia - including Flash and Acrobat content - by using text captioning and/or synchronized audio.
1.2 ColorThe use of color can impact the compatibility of the site with assistive technologies.
UGuidelinesU:1. Do not use color alone to convey information.2. Do use color to reinforce information presented in text, images or icons.3. Provide sufficient contrast between text and background.4. Avoid images that flash more than 4 times per second.
UBest PracticeU: Use a variety of indicators such as color, text layout, shape/texture, and audio to improve the user experience for all guests.
1.2.1 Color Challenges Information presented in color should also be evident without color. Use effective markup or context solutions on Target site pages to accomplish this objective.
UExampleU: Use color paired with text to convey information
To match the error message at the top of the form, three asterisks before and after the error message in the form field conveys the necessary information with or without the use of color.
Example: Use a colored an icon to reinforce information
In order to indicate an important feature of the site, the shopping cart is accentuated with the color red.
June 25, 2008 Version 3.0
5
Example: Use multiple indicators to convey and reinforce information
The Target site uses a red button labeled “Go” with the alt attribute “Search Submit” to initiate a search (see section T 2.1 Alt and Title Attributes T). Note: Even though the same image is used for different tasks on the site, the alt tag adequately describes the button’s action.
T1.2.1.1 Markup SolutionsT In addition to text and images, appropriately utilize markup language.
a. CSS MarkupCascading Style Sheets (CSS) should be used to define system colors and fonts. Use of CSS improves accessibility by separating presentation from content.
Avoid placing formatting attributes in HTML tags (i.e. background, color, text size, etc.) where they could be better served through the use of Cascading Style Sheets.
b. Color MarkupUse hexadecimal colors values (for 'color', 'background-color', 'border-color', and 'outline-color') and system fonts (for 'font-family').
c. Color CodeSpecify colors by hexadecimal values not by color name.
T1.2.1.2 Contextual SolutionsT Use icons to provide contextual clues and easy recognition.
Example: Use an icon to reinforce color
June 25, 2008 Version 3.0
body {background-color: #FFFFFF;border-color: #CC0000;outline-color: #000000;font-family: verdana,arial,helvetica,sans-serif;color: #666666;
}
Non-preferred Preferred
Color: red Color: #CC0000
6
The color red reinforces the asterisk symbol indicating a required form field.
T1.2.2 Color ContrastT Ensure there is sufficient contrast between text and background colors.
If an image contains text, use either light text on a dark background or dark text on a light background to provide adequate contrast. Avoid placing text over strongly patterned backgrounds.
Optimal Color Combinations:
Avoid Color Combinations:
June 25, 2008 Version 3.0
black on white
dark gray on white
white on black
red on white
white on red
7
1.2.3 Photo-Sensitivity IssuesT Avoid high contrast flickering or the intense blinking of colors as some guests may have sensitivity to such effects, potentially resulting in severe physical reactions.
Guidelines:1. Avoid strobe-like effects that combine rapid flashing (more than 4 flashes per
second) with high contrast.2. If flickering, flashing, or blinking content is used, provide a mechanism to stop the
blinking, such as a “Stop Animation” button.
1.3 Navigation, Structure and LayoutThe navigation, structure, and layout across Target sites should be compatible with assistive technologies.
June 25, 2008 Version 3.0
gray on gray
blue on black
purple on black
light on light
white on yellow
yellow on white
vibrating colors
red on red
8
1.3.1 Opening New WindowsSome screen readers may announce when a new window has opened; however, this is not standard across all screen reader technologies. Avoid opening a new window without first alerting guests.
Example: If a link will open a new window, information about this action should be nested in the anchor of the link’s title attribute.
Example: Consistent use of an icon that indicates a new page. If using an icon to show a link opening in a new window, please ensure that the icon is included in the anchor.
1.3.2 Structural Elements and OrderUse proper header and structural markup to assist with site navigation.
Guidelines:1. Follow rules and conventions specified in the current Target Production and Front
End Web Development Guidelines.2. Separate content markup from presentational markup:
a. Content Markup is the text, images and other informational elements of the document.
b. Presentation Markup is how the content is displayed.3. Use style sheets to control the layout and presentation of a page.4. Create pages that are readable with style sheets turned off.
1.3.2.1 Header Markup Screen readers extract headings from HTML markup; guests using such technology may more easily navigate directly to the appropriate portion of the page from the list of headings if proper header markup is maintained to support navigation. It is important to both use headers on the main sections of each page and order them numerically to optimize the experience of all guests.
Guidelines:1. Format the appearance of the headings from the style sheet. Do not place
presentational formatting (i.e. text size and font) in the HTML source code.
June 25, 2008 Version 3.0
<TaTT hrefT=T"www.target.com" TTtitleT=T"Link will open new window"T>Sign up here</TaT>
9
2. The first header in a document, usually containing the page title, must be <h1>; this may not be the same as the contents of the <title> tag.
3. Headers should appear in logical order (i.e. <h1>, <h2>, <h3>, etc).
Example: The headers below are similarly styled; yet, a screen reader would read them in a logical order
1.3.2.2 Structural Markup Ensure page flow and navigation are sufficiently supported by using structural markup.
Guidelines:1. Appropriate use of HTML tags:
a. <blockquote> is used to offset quotations, not to display unquoted text with an indent.
b. For emphasis use EM and STRONG rather than B and I elements. EM and STRONG elements accentuate structural emphasis that can render font style changes and speech inflection changes in screen readers.
c. Avoid deprecated HTML elements. 2. Use style sheets to create effects, sizes, or colors in text rather than using images to
display text. Text within images cannot be interpreted by screen readers; therefore, information contained in images must be conveyed by adding alt and title attributes (see section T 2.1 Alt and Title Attributes T).
June 25, 2008 Version 3.0
<h1>Reviewing & Changing My Orders</h1>
<h2>Your Recent Orders</h2>
<p>Click "My Account" in the top right corner of any page and you'll find an Instant Order Update.</p>
<h3>Reviewing and Changing Your Orders</h3>
<p>You can review the status of any order you've placed by clicking "My Account" in the top right corner of any page.</p>
<p>You can confirm the date and method of shipment, an estimated date of arrival and a tracking number, if available.</p>
10
3. Specify text language.a. Consider context when using foreign and/or multiple languages in text.b. Use the lang attribute to identify words or phrases in other languages, so
assistive technologies can better interpret them.
Example: A Spanish phrase within an English document could be coded as <span lang="es"> Toca El Tambor </span>.
c. When the bulk of the content on a page is in a language other than English, specify the language code in the HTML tag to declare the primary natural language of the document. This will enable screen readers to serve the correct text-processing language to the guest. This should also be used in conjunction with http-equiv and content attributes on the meta tag to specify the language of the targeted audience.
June 25, 2008 Version 3.0
<html lang="en"><head><meta http-equiv="Content-language" content="en"><title>Children’s Toys</title></head><body>Find more information on <span lang="es">Toca El Tambor</span>.</body></html>
11
1.3.3 Keyboard Access Web pages and site structure should support keyboard equivalents for all mouse actions (e.g., access to menus, toolbars, buttons and links) for guests who do not use, or are not capable of using, a mouse.
1.3.3.1 Keyboard Focus on Active ElementsDevelop pages to provide keyboard focus, thereby improving the ability to navigate all active page elements. Ensure that every link has an active state.
Guidelines:1. Provide keyboard focus by using tab stops for buttons, links, and other interactive
controls. The tab index attribute should only be used when the default tab order doesn’t support optimal navigation.
2. Keyboard focus should be obvious and visually highlighted with colors, fonts, outlines or magnification.
3. Keyboard equivalents and shortcuts should not conflict with operating system accessibility features or keystrokes.
1.3.3.2 Logical Tab OrderIn general, screen readers read from left to right and then top to bottom; the tab order may affect the reading order for assistive technologies. Group the tab order so guests may navigate through the page logically. (Note: Use the tabindex attribute to control the tab order.)
Example: The tab index attribute assures the user will tab through the form in the correct order.
June 25, 2008 Version 3.0
12
See section T 1.3.5 Repetitive Links T for a discussion of ways to skip over sections of repetitive links.
1.3.4 Clear Link TextLinks should have clear text and be easily navigable across all web pages.
Guidelines:1. Link text should indicate the nature of the link target. Avoid “click here” because it
is ambiguous and doesn’t provide the user direction.2. When a link text appears more than once on a page, it should point to the same link
target. Distinct link targets should be indicated by different link text.
June 25, 2008 Version 3.0
<label for="fullname">Name<span class="required">*</span></label>
<input type="text" name="fullname" id="fullname" tabindex="1"><br>
<label for="address1">Address 1<span class="required">*</span></label>
<input type="text" name="address1" id="address1" tabindex="2">
<label for="address2">Address 2</label>
<input type="text" name="address2" id="address2" tabindex="3"><br>
<strong>How many students, staff and volunteers will be participating?</strong> <br>
<label for="staff">Staff<span class="required">*</span></label>
<input type="text" name="staff" id="staff" tabindex="4"><br>
<label for="students">Students<span class="required">*</span></label>
<input type="text" name="students" id="students" tabindex="5">
<select name="grade" id="grade" title="Please select your student's grade." tabindex="6">
<option VALUE="" selected>Select Level</option>
<option VALUE="K">K</option>
<option VALUE="1">1</option>
<option VALUE="2">2</option>
<option VALUE="3">3</option>
</select><br>
<label for="volunteers">Volunteers<span class="required">*</span></label>
<input type="text" name="volunteers" id="volunteers" tabindex="7">
13
3. If it is necessary to use the same link text to point to different link targets, use title attributes to distinguish between them (see section T 2.1.2 Title Attributes T).
4. Links should not be a single word or letter. Links presented as buttons or icons should be large enough to easily navigate.
1.3.4.1 Navigable Links Provide navigation links that flow logically and intuitively.
Screen readers normally read text left to right and then top to bottom. Provide visual clues such as breadcrumbs and navigation states to help the user to remember where they are, where they are going, or where they have been.
Example: Breadcrumbs as a visual clue
June 25, 2008 Version 3.0
14
Example: Navigation State as a visual clue.
1.3.4.2 Appropriate Link TextLink text should enable guests to quickly understand their navigational options.
Some assistive technologies allow guests to extract all hyperlinks from a web page; therefore, Link text should be clear when extracted from the context in which they appear on the page.
Example: Link Text
June 25, 2008 Version 3.0
Non-preferred Preferred
Click here to view this week’s specials. Current Target.com Specials
15
Example: Title attributes to clarify link text
<a href=”electronics/” title=”Shop All Electronics”>See All</a>
<a href=”sports/” title=”Shop All Sports”>See All</a>
<a href=”toys/” title=”Shop All Toys”>See All</a>
Example: Inappropriate Link textAvoid sets of links that are single letters or numerals presented in a horizontal row separated only by a space. Some screen readers might interpret the entire series as a single link. The small size could be difficult to navigate.
Example: Link text
June 25, 2008 Version 3.0
Non-preferred Preferred0-9 A B C D E F G H I J K L M N O P Q R S T U V W X Y Z Next >> T What 1-Day and 2-Day Shipping Mean T
T Changing Your Shipping Address T
16
1.3.5 Repetitive LinksUse “skip navigation” for by-passing skipping repetitive links.
In general, screen readers read each link in the navigation bar of each page prior to reading page content. Avoid this by providing guests with a means to bypass repetitive links as a group.
The skip navigation link consists of two elements:1. A named anchor link at the initiation of the main content area of the page2. A link that points to the named anchor
The code below is a model for the named anchor, which goes directly before the HTML code that contains the main content of the page. The name attribute of the HTML tag sets the anchor. Names should be all lower case, without spaces.
Example: Named anchor link.
The skip navigation link is near the top of the page; this is often the first item on the web page. Connect to the named anchor using a link similar to the one below.
The skip navigation link can be presented in a number of ways:
Example: On Focus Skip LinkBy making the skip link visible with keyboard focus, mouse users will not see the link; however, if the link is positioned appropriately it will be the first thing a screen reader or keyboard user encounters on the page.
Without keyboard focus, the skip link is not visible:
June 25, 2008 Version 3.0
<span style=”postion:absolute;”><a name=”skiptocontent”> </a></span>
<a href=”#skiptocontent”>Skip Page Navigation</a>
17
With keyboard focus, the skip link becomes visible:
Example: Transparent Skip LinkA skip link can be made invisible to sighted guests if it is coded as a 1 pixel transparent image.
1.3.6 Proper Table DesignUpon developing tables, structure the information in such a way that it is displayed in a readable, well-balanced manner.
1.3.6.1 Data Table Specifications Identify and associate both row and column headers within data tables.
Data tables are the best practice for displaying numerical or tabular data. Using appropriate markup will improve the ability of screen readers and other assistive technologies to interpret rows and columns in the proper order (see example on page 17).
June 25, 2008 Version 3.0
18
Layout Table Data Table
Guidelines:1. Identify data cells with TD (tabular data) and headers with TH (table headers).2. Use scope=”row” for each row header and scope=”col” for each column header3. Identify structural groups of rows by using THEAD for repeated table headers,
TFOOT for repeated table footers, and TBODY for other groups of rows. Use COLGROUP and COL for groups of columns.
a. For data tables which have two or more levels of row or column headers add an id attribute to each header cell and provide a header attribute for each data cell that lists all header cells for that data cell. (Example: [like headers=’id1 id2 id3”] if those were the ids of the headers of that data cell.)
(Note: Screen readers may not render tables with more than two logical levels of row and/or column headers correctly, even when they are properly marked.)
4. Use the TABLE element, rather than PRE, to create a tabular layout of text, enabling many assistive technologies to recognize a table.
June 25, 2008 Version 3.0
19
<table width="450" border="0" cellpadding="3" cellspacing="1" ><caption>SHIPPING INFORMATION</caption><tr>
<th id="price" colspan="3">Pricing</th></tr><tr>
<th id="cat" scope="col">CATEGORY</th><th id="ship" scope="col">PER SHIPMENT</th><th id="pounds" scope="col">+ PER POUND</th>
</tr>
<tr><td headers="price cat" scope="row">Baby</td><td headers="price ship">$4.50</td><td headers="price pounds">$0.40 per lb</td>
</tr>
<tr><td headers="price cat" scope="row">Bath & Bedding</td><td headers="price ship">$2.99</td><td headers="price pounds">$0.59 per lb</td>
</tr>
<tr><td headers="price cat" scope="row">Books & VHS Videos</td><td headers="price ship">$3.00</td><td headers="price pounds">$0.99 per lb</td></tr>
</table>
1.3.6.2 Layout Table Requirements Arrange table contents in linear order given the potential to be removed from the table layout.
When layout tables are used to achieve formatting effects, the linearized order (sometimes also called screen reader order or source code order) may not be the same as the visual reading order.
Guidelines:1. Do not use tables for layout unless the table makes sense when linearized; cells
should make sense when read in row order. 2. Include structural elements to create paragraphs, headings, and lists so the page is
coherent after linearization.3. Use style sheets rather than structural markup to create visual formatting.
Example: Do not use the TH elements to display text other than centered and bolded headers (see section T 1.3.1.1 Header Markup T, and T 1.3.1.2 Structural Markup T).
June 25, 2008 Version 3.0
20
The linear order of this table is:1. Page Header2. Link3. Link4. Link5. Link6. Link 7. Link8. Link9. Main Content10. Page Footer
1.4 Accessible Electronic FormsElectronic forms should be easy to use and provide complete functionality for all guests, including those using assistive technologies.
T1.4.1 TForm Usability Logically order form elements so guests are able to navigate through forms using only the keyboard.
Guidelines:1. TUse form labels properly and/or keep descriptive text next to the form field.
Techniques for doing this include wrapping each form label with a label tag and associating it to its respective form field using the ID attribute. Group related form fields by using the fieldset element (see section T 1.4.1.2 Grouping Complex Forms TTT).
Example: <label for="firstname">First Name</label><input type="text" name="firstname" id="firstname" tabindex="1">
2. Follow guidelines in section T 1.3.2 Keyboard Access T to assure that guests can tab to appropriate fields and navigate using arrow keys.
3. Mouseover text should not be used to provide instructions in the form unless there is a keyboard-accessible equivalent.
4. If only one option is displayed when using radio buttons, the available radio button should be selected by default.
5. Provide a non-Flash equivalent for all Flash forms.
June 25, 2008 Version 3.0
21
6. Where CAPTCHA (Completely Automated Public Turing Test to Tell Computers and Humans Apart) is used to validate form entries, provide a non-graphic equivalent, such as an audio alternative.
Example:
1.4.1.1 Form field Labeling and PositioningUse clear, concise, jargon-free form-element labels. Properly position the labels for the related form elements.
Label at the left of form field
Label at the left of dropdown box
Label at right of check box
Label at right of radio button
Label is the Value attributeof a button
Use one form field per label; telephone numbers, Social Security numbers, etc. should be entered in a single field unless labels or instructions say otherwise.
Example: More than one field per labelA screen reader may not recognize when there are three fields following the single label “Phone,” allowing all 10 digits in one field
Phone * - -
Example: One field per labelThis label provides accurate information to all users
1.4.1.2 Grouping complex formsProvide a logical order of navigation whenever the form includes a complex group of elements.
June 25, 2008 Version 3.0
22
Guidelines:1. Use the fieldset tag to combine related form elements into an identifiable group2. Each fieldset should have a legend; use the legend tag to give a group of form
elements a heading.
<fieldset>
<legend>Contact Information</legend>
<label for="firstName">First Name:</label><input size="30" maxlength="100" value="" id="firstName" name="firstName">…
</fieldset><fieldset>
<legend>Order Information</legend>
<label for="subject"><b class="small">Subject:</b></label><select id="subject" name="subject"> <option value="Please Select">Please Select</option>...
</fieldset>
1.4.1.2-a Error and Success Indicators Provide error and success indicators when creating forms. Guidelines:
June 25, 2008 Version 3.0
23
Use a combination of text, color, and icons to present error indicators as shown below.
T Social Security Number (Last 4 Digits) is a required field. T T The Last 4 Digits of the Social Security Number you have entered are incorrect.
Please re-enter your information. ZIP Code is a required field.
1.4.1.2-b Time-Based Response ConsiderationsWhen scripting, allow sufficient time for guests to access and complete the forms.
Guidelines:1. Continue to display important messages until the user closes them.2. Provide a method for extending time allowed to complete timed entries, such as
forms (see example in section T 1.4.1.1-c Session Time-Outs T).
1.4.1.2-c Session Time-OutsProvide notification and an indication that more time is needed for process or session time-outs.
Example:
June 25, 2008 Version 3.0
24
2. Development
Target is committed to the development of web page content that can be fully experienced by all guests. The following technical guidelines should be applied in the development of Target web pages.
2.1 Alt and Title Attributes Alt and title attributes improve the guest experience, including the experience of visitors using assistive technologies.
The use of alt and title attributes enables screen readers or refreshable Braille devices to read graphics and images as text. In the absence of alternative text for graphic images, these assistive technologies may either skip the image completely or read some associated text, such as the file name, which might be meaningless.
Guidelines:1. Provide alt attributes for all images.2. For decorative graphics that take no description, do not represent any meaningful
information, or do not represent a link, use an alt attribute with no content in double quotes (example: alt =””). An example of this would be an icon image that is meant to represent a particular call to action or direction.
3. The alt description should convey the meaning of an image or (in the case where an image is an active link—such as a button) the function and purpose of the image.
4. Provide alt text for each area of an image map.
Do not use background images to convey information, since they cannot have alternative text explicitly associated with them. Provide title attributes to clarify text links as needed.
2.1.1 Alt AttributesUse alt attributes for images and image map areas on the site. Structural and /or decorative images should use an alt attribute with no content in double quotes (alt=””).
The alt attribute is a required element of the HTML or XML tag for every image on a website. The content of the attribute is determined by whether or not the image conveys information.
Images that convey informationThe alt attribute for these images and image maps must contain text that conveys the same information as the image. This is not necessarily a description of the image.
June 25, 2008 Version 3.0
25
Example: Alt attributes to convey informationThe bull’s eye logo on the home page is described as “Target,” not “picture of bull’s eye.”
<a href="http://target.com"><img src="images/logo.gif" width="115" height="77" border="0" alt="Target"></a>
Example: Alt attributes to convey informationThe search button is labeled “Search Submit,” not “red rectangle with the word ‘Go’ in it.”
<input src="images/go_button.gif" type="image" value="Go" border="0" alt="Search Submit">
Areas of an image mapEach area of an image map should have its own alt attribute, in addition to the alt attribute for the image map as a whole.
Example: Alt attributes for areas of an image map
<area shape="rect" coords="146,359,280,374" href="accentchairs/" alt="Accent Chairs">
Structural and decorative imagesThe alt attribute for structural and decorative images should be blank (null); preventing assistive technologies from reading the file name or other irrelevant information.
A blank or null alt attribute is coded as alt=”” (two quotation marks with no text and no spaces in between.)
Example: Null alt attributes for decorative images
June 25, 2008 Version 3.0
26
<img src=”images/pumpkin.gif” width=”139” height=”110” alt=””>
Example: Null alt attributes for spacer imagesUse the null alt attribute for structural, transparent, or spacer images. These will not be visible on the screen and will be ignored by most assistive technologies.
<img src=”images/spacer.gif” width=”30” height=”1” alt=””>
Example: Null alt attribute for redundant imagesUse the null alt attribute rather than repeating the same alt attribute for multiple images in the same area to prevent repeating redundant alt text.
<img src=”images/redcard_header.gif” width=”146” height=”35” alt=”The REDcards”><br><img src=”images/redcards.gif” width=”146” height=”44” alt=””><br><a href=”http://target.com/redcards”>Apply for a card</a>
Background imagesBackground images should not contain text or other information, as assistive technologies would likely not render these images (see section T 1.3.1 Structural Elements and Order T).
2.1.2 Title AttributesUse title attributes for specific text links.
Title attributes can be longer than alt attributes and can be used to convey more information. Title attributes are visible along with images in most browsers and can be used not only by assistive technology users, but also by people with cognitive impairment and learning disabilities.
June 25, 2008 Version 3.0
27
Title attributes can be added to images and form input fields as well as text links.
Example: Coded title attributes
2.1.3 Attribute LabelsImprove usability by providing clear, concise, jargon-free text explanations for both alt and title attributes.
The text for alt and title attributes is important communication for people using assistive technologies. Language should be consistent with Target website standards.
Example: Text for title attributes on links
<a href="http://target.com/redcard" title="Apply for a Target REDCard™">TargetREDCard™</a>
Example: Text for alt attributes on images
<a href="http://target.com/giftcards"><img src="images/giftcard.gif" alt="anyone. anywhere. anytime. Give a GiftCard."></a>
2.2 Browser SupportAll Target content should meet the specified browser-support guidelines, including testing and subsequent validation protocol.
Guideline:The guest experience should be comparable across all supported browsers. For the current required browser support compatibility list, consult Target Production & Front End Web Development Guidelines.
2.3 Web Page Content Using JavaScript, AJAX, and/or CSSWeb page content augmented by JavaScript, AJAX and/or CSS should function with assistive technologies.
June 25, 2008 Version 3.0
28
<a href="http://target.com/targethouse" title="Learn more about Target House">Target House</a>
2.3.1 JavaScript PolicyJavaScript-dependent experiences should be fully navigable for a guest using assistive technologies. Improper use of JavaScript can introduce navigation issues using the keyboard or assistive technologies, content or functionality may be hidden from assistive technologies, loss of user control over dynamic content changes, and triggering of events the user is not aware of or that are confusing.
All JavaScript enabled objects that constitute part of the site navigation should have a tab order and be usable with keyboard controls.
When new content is displayed, use Java Script to bring focus on the new content and test with a screen reader.
2.3.2 AJAX When using AJAX techniques, strive to create a consistent screen reader experience by avoiding situations where content is overwritten or refreshed without first alerting the guest.
Guidelines:1. Never rewrite content in a region of a page that has already loaded, without alerting
the guest that such an event has occurred, and providing a clear means for the guest to retrieve that content.
2. When using a JSON or XML data source to populate a page, be sure to populate the content during the load time of the page. Never repopulate a portion of the page with new content without an alert (see above).
3. If an AJAX-powered experience must rely upon portions of the page being repopulated without a page reload, provide an alternate means to guests to retrieve the same content without AJAX.
2.3.3 Cascading Style Sheets Use Cascading Style Sheets (CSS) to control the page layout and text; code them so the page is still readable and logical when the style sheets are turned off.
Follow guidelines in section T 1.3.1 Structural Elements and Order T to assure presentational and structural elements of the site are kept separate.
2.4 Standard Redirection Functions Use server side redirects when using redirect functions.
Guideline:Avoid using Meta refresh or other markup to automatically redirect pages. Automatic redirects break the history list and may cause continual loops when using the back button to return to previously viewed pages.
June 25, 2008 Version 3.0
29
2.5 FramesetsUse appropriate frame titles when implementing framesets.
Most screen readers identify frames by speaking the name and/or page title of each frame. To navigate through the site, users require an understandable name for each frame indicating the frame’s function.
2.5.1 Frame TitlesUse clearly delineated frame titles.
Different screen readers look in different places for frame identification; thus, three components are needed to ensure that all users will have access to a frame title:
1. HTML frame name attributes. 2. HTML frame title attributes.3. An HTML <title> Tag for all web pages that will become part of a frameset.
1. HTML Frame Name AttributeA frameset includes a <frame> tag with a name attribute; the name attribute should be a one word descriptor.
<frame src="frame_nav.htm" name="navigation" scrolling="auto" noresize title="navigation">
2. HTML Frame Title AttributeThe <frame> tag includes a title attribute, and it should be a one-word descriptor.
<frame src="frame_nav.htm" name="navigation" scrolling="auto" noresize title="navigation">
3. Web Page Title TagAll HTML files carry a <title> tag as part of page identification. Properly identify all web pages using the <title> tag.
<title>Site Navigation</title>
June 25, 2008 Version 3.0
30
Glossary
Assistive Technology (AT)Technology which allows persons with disabilities to perform web functions with little to no difficulty. Examples of assistive technology related to computers and IT include keyboards with large keys for persons with mobility impairments and software that reads aloud text on a document or website for persons with vision impairments.
Accessible DesignTo intentionally create products - including websites - for use by people with a wide range of capabilities, either through direct access or with assistive technology. Accessible design is required for Assistive Technology to work.
AccessibilityThe process in which a website is made usable by people with a wide range of physical, visual, and cognitive abilities.
Alt AttributeLanguage added to images, image map areas, and graphics within the HTML code that communicates the same information as the images. (Alt Attributes are sometimes incorrectly referred to as Alt Tags and/or Alt Text.)
Alt TagHTML code that contains the alt attribute (see Alt Attribute).
Alt TextThe descriptive language that is served by the alt tag (see Alt Tag).
Braille DevicesAssistive Technology that renders website text as raised dots that can be read by visually impaired guests.
Cascading Style Sheets (CSS)A standard for web page content presentation control; using CSS assures that the Web site's content is separate from its structure.
Cognitive ImpairmentA problem with the ability to think about, concentrate on, or remember information or ideas.
Data table A matrix used for displaying tabular or numeric content (see Layout Table).
Deprecated HTML ElementsElements that may become obsolete or invalid in future versions of published standards.
Device DependentAn experience that can only be accessed by means of a particular device, such as a mouse or keyboard. These experiences are not accessible to assistive technologies that do not use those devices (e.g. mouse-dependent experiences cannot be accessed with the keyboard).
Device Independent
June 25, 2008 Version 3.0
31
An experience can be accessed by more than one device (e.g. both mouse and keyboard).
FlashTechnology used to add interaction or animation to a web site.
FocusAn interaction whereby an image, form field, button or otherwise selectable object within a web page is selected by the guest. A JavaScript routine can be executed from a Focus event by using the onFocus event handler within certain HTML tags.
FormA document containing blank fields; the guest can fill the field with data as appropriate.
Form FieldBlank area within a form; the guest can fill the form with data as appropriate.
FrameA segment of a browser window which can be scrolled independently of other segments.
FramesetThe element that specifies the layout of the main user window within which independent segments (Frames) reside.
Header MarkupUsed to define a page’s organizational structure (i.e. <H1>, <H2>, <H3>, etc.). Header markup provides a navigational aid to help guests using assistive technology quickly scan the content of a page.
Hex Color CodeA hexadecimal representation of color value frequently used in HTML coding. Colors are coded with numerals 0 through 9 and letters a through f (e.g. Target red in hexadecimal is represented as #cc0000).
Hover StateThe active highlighted state of an element when the cursor is positioned over it.
Image Map AreaAn image map is a graphic that contains more than one hot spot, or link. Each hot spot is a separate image map area.
JavaScriptA scripting language that can interact with HTML code to create dynamic content.
Layout Table Use of a hierarchical matrix to create a desired visual display or effect (see Data Table).
Linear OrderElements of a web page arranged from top to bottom and left to right. Accessible web pages are laid out in linear order (see Screen Reader Order).
Link Title - (TSee Title Attribute)T
Markup LanguageA combination of text intermingled with information about the text’s structure or presentation. HTML and XML are examples of markup languages.
June 25, 2008 Version 3.0
32
NoframesAn element in a frameset that provides alternate content for guests who do not use frames.
Null ValueAn alt attribute that is coded to remain blank and is used for images which are ornamental or decorative. A screen reader will skip over a null value; the blank value that is placed inside an alt attribute.
Photo-SensitivityA condition in which flashing or flickering lights can cause adverse physical reactions.
Presentational MarkupHTML or other markup language used to control the appearance of a page (see Structural Markup).
Screen ReadersAssistive technologies that reproduce text displayed on a computer screen as a synthesized voice or Braille; used by persons who have vision impairments.
Screen Reader OrderThe order in which a Screen Reader will render the text on a website, generally in linear order from top to bottom and from left to right. Accessible web pages will enable the screen reader to render the site in a logical order.
Skip links, or Skip Navigation LinksFeatures that allow a user to move past an entire area of content. Commonly used to allow the guest to move past navigation links to the main content of the page.
Structural MarkupHTML or other Markup Language used to define the logical structure of the page (see Presentational Markup).
Time-Based ResponseInteractions must be completed within a set time (e.g. forms or applications that are set to “time out” in a certain period of time.
Title AttributeLanguage added to tags within the HTML code that communicates the same information as the tagged content.
Title TagThe element that defines the title of a web page document.
June 25, 2008 Version 3.0
33
Appendix I: Target Online Assistive Technology Guidelines (TOATG) Exemption Policy
Target Online Assistive Technology Guidelines (TOATG) apply to new and/or newly revised web pages on Target websites.
Any request for project exemption from TOATG must be made with the Guest Experience Team using the Exemption Request Form, available from the Guest Experience Team (see page 32 for a sample form).
The need for an exemption request should be identified during the Concept/Development phase (or equivalent) and submitted prior to the Design phase.
Site experiences are categorized as Core, Primary, and Secondary (see the Exemption Request Form for examples of said categories).
Exemption requests will be evaluated on a case by case basis.
June 25, 2008 Version 3.0
34
Exemption Form
PROJECT INFORMATIONDate: Project Name: Project Manager: Business Owner: Project Launch Date: Description:
Guideline Exemption InformationRequest Date: Impacted Area of the site:(Select all that apply)
Red = CoreBlue = PrimaryGreen = Secondary
Home Page and Global NavigationSearchCheckoutFormsMy Accounts & Pages Using/Storing/Displaying Personal Information (not including Checkout)Online Return CenterRegistriesStore LocatorWeekly Ad Shopping PagesCorporate Information SiteSuperTargetTarget Commercial InteriorsOther (specify)
Guideline Exemption Information
Guideline(s) that cannot be met: Guideline number(s) that cannot be met: Reason that guideline(s) cannot be met: Impact to users of assistive technologies if guideline is not met:
Other impact considerations: Description of proposed implementation: Expected duration of implemented experience: Notes/Comments:
Approval Information
Date Received: Date Reviewed: Questions/Clarification Needed: Dated returned for questions: Date all information received: Date Processed: Approved: Approved by:
June 25, 2008 Version 3.0
35