TARGET CORPORATION

Target Online Assistive Technology Guidelines (TOATG)

Created by: Target.com Guest Experience, Interactive Marketing Creative & TTS

June 25, 2008

Version 3.0

Table of Contents
CHANGE HISTORY...........................................................................................................................................4 INTRODUCTION................................................................................................................................................4 PURPOSE.............................................................................................................................................................4 REFERENCES.....................................................................................................................................................4 1. NAVIGATION AND DESIGN .......................................................................................................................5 1.1 COMPREHENSIVE CONTENT DESCRIPTIONS.................................................................................5 1.2 COLOR...........................................................................................................................................................5 Color Challenges ...................................................................................................................................5 1.2.3 Photo-Sensitivity IssuesT ..............................................................................................................9 1.3 NAVIGATION, STRUCTURE AND LAYOUT........................................................................................9 1.3.1 Opening New Windows..................................................................................................................9 1.3.2 Structural Elements and Order......................................................................................................9 1.3.2.1 Header Markup .......................................................................................................................10 1.3.2.2 Structural Markup ...................................................................................................................11 1.3.3 Keyboard Access .........................................................................................................................13 1.3.3.1 Keyboard Focus on Active Elements.........................................................................................13 1.3.3.2 Logical Tab Order....................................................................................................................13 1.3.4 Clear Link Text............................................................................................................................15 1.3.4.1 Navigable Links .......................................................................................................................16 1.3.4.2 Appropriate Link Text...............................................................................................................17 1.3.5 Repetitive Links...........................................................................................................................18 1.3.6 Proper Table Design....................................................................................................................21 1.3.6.1 Data Table Specifications ........................................................................................................21 1.3.6.2 Layout Table Requirements ....................................................................................................23 1.4 ACCESSIBLE ELECTRONIC FORMS..................................................................................................24 T1.4.1 TForm Usability .....................................................................................................................24 1.4.1.1 Form field Labeling and Positioning........................................................................................25 1.4.1.2 Grouping complex forms..........................................................................................................26 1.4.1.2-a Error and Success Indicators ...............................................................................................27 1.4.1.2-b Time-Based Response Considerations...................................................................................27 1.4.1.2-c Session Time-Outs.................................................................................................................27 2. DEVELOPMENT...........................................................................................................................................28 2.1 ALT AND TITLE ATTRIBUTES ...........................................................................................................28 2.1.1 Alt Attributes................................................................................................................................28 2.1.2 Title Attributes.............................................................................................................................30 2.1.3 Attribute Labels...........................................................................................................................31 2.2 BROWSER SUPPORT...............................................................................................................................31 2.3 WEB PAGE CONTENT USING JAVASCRIPT, AJAX, AND/OR CSS.............................................31 2.3.1 JavaScript Policy.........................................................................................................................32 2.3.2 AJAX ...........................................................................................................................................32 2.3.3 Cascading Style Sheets ...............................................................................................................32 2.4 STANDARD REDIRECTION FUNCTIONS ........................................................................................32

2 June 25, 2008 Version 3.0

2.5 FRAMESETS...............................................................................................................................................33 2.5.1 Frame Titles................................................................................................................................33 GLOSSARY........................................................................................................................................................34 APPENDIX I: TARGET ONLINE ASSISTIVE TECHNOLOGY GUIDELINES (TOATG) EXEMPTION POLICY.....................................................................................................................................37 EXEMPTION FORM........................................................................................................................................38

3 June 25, 2008 Version 3.0

Change History
This document is located in: http://sharepoint.target.com/sites/im/teamsites/creative/TOATG%20Wiki/Home.aspx
TU

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
Target Online Assistive Technology Guidelines

Author
Target.com Guest Experience, Interactive Marketing Creative, TTS
TU

Location
http://sharepoint.target.com/sites/im/t eamsites/creative/TOATG %20Wiki/Home.aspx
UT

4 June 25, 2008 Version 3.0

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 Descriptions

Improve the usability of all time-based and interactive multimedia - including Flash and Acrobat content - by using text captioning and/or synchronized audio.

1.2 Color
The use of color can impact the compatibility of the site with assistive technologies. Guidelines : 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.
U U

Best Practice : Use a variety of indicators such as color, text layout, shape/texture, and audio to improve the user experience for all guests.
U U

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.
U

Example : Use color paired with text to convey information

U

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.

5 June 25, 2008 Version 3.0

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.

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 2.1 Alt and Title Attributes ). Note: Even though the same image is used for different tasks on the site, the alt tag adequately describes the buttons action.
T T

1.2.1.1 Markup Solutions

In addition to text and images, appropriately utilize markup language. a. CSS Markup Cascading 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 Markup Use hexadecimal colors values (for 'color', 'background-color', 'border-color', and 'outline-color') and system fonts (for 'font-family').

body { background-color: #FFFFFF;

border-color: #CC0000; outline-color: #000000; font-family: verdana,arial,helvetica,sans-serif; color: #666666; }

6 June 25, 2008 Version 3.0

c. Color Code Specify colors by hexadecimal values not by color name.

Non-preferred
Color: red

Preferred
Color: #CC0000

1.2.1.2 Contextual Solutions

Use icons to provide contextual clues and easy recognition. Example: Use an icon to reinforce color The color red reinforces the asterisk symbol indicating a required form field.

1.2.2 Color Contrast

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:

7 June 25, 2008 Version 3.0

black on white dark gray on white white on black red on white white on red

Avoid Color Combinations:

gray on gray blue on black purple on black light on light white on yellow yellow on white vibrating colors red on red

8 June 25, 2008 Version 3.0

1.2.3 Photo-Sensitivity Issues

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 Layout

The navigation, structure, and layout across Target sites should be compatible with assistive technologies.

1.3.1 Opening New Windows

Some 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 links title attribute.

< a href = "www.target.com" title = "Link will open new window" >Sign up here</ a >
T TT T T TT T T T T T

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 Order

Use proper header and structural markup to assist with site navigation.

9 June 25, 2008 Version 3.0

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. 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

10 June 25, 2008 Version 3.0

<h1>Reviewing &amp; 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>

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 2.1 Alt and Title Attributes ). 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.
T T

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.

11 June 25, 2008 Version 3.0

<html lang="en"> <head> <meta http-equiv="Content-language" content="en"> <title>Childrens Toys</title> </head> <body> Find more information on <span lang="es">Toca El Tambor</span>. </body> </html>

12 June 25, 2008 Version 3.0

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 Elements

Develop 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 doesnt 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 Order

In 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.

13 June 25, 2008 Version 3.0

14 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"> See section 1.3.5 Repetitive Links for a discussion of ways to skip over sections of repetitive links.
T T

1.3.4 Clear Link Text

Links 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 doesnt 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.

15 June 25, 2008 Version 3.0

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 2.1.2 Title Attributes ).
T 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

16 June 25, 2008 Version 3.0

Example: Navigation State as a visual clue.

1.3.4.2 Appropriate Link Text

Link 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

Non-preferred
Click here to view this weeks specials.

Preferred
Current Target.com Specials

17 June 25, 2008 Version 3.0

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 text Avoid 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

Non-preferred
0-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 T

Preferred
What 1-Day and 2-Day Shipping Mean Changing Your Shipping Address
T T

1.3.5 Repetitive Links

Use skip navigation for by-passing skipping repetitive links.

18 June 25, 2008 Version 3.0

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 page 2. 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.
<span style=postion:absolute;><a name=skiptocontent>&nbsp;</a></span>

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.
<a href=#skiptocontent>Skip Page Navigation</a>

The skip navigation link can be presented in a number of ways: Example: On Focus Skip Link By 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:

19 June 25, 2008 Version 3.0

20 June 25, 2008 Version 3.0

With keyboard focus, the skip link becomes visible:

Example: Transparent Skip Link A skip link can be made invisible to sighted guests if it is coded as a 1 pixel transparent image.

1.3.6 Proper Table Design

Upon 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).

21 June 25, 2008 Version 3.0

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 header 3. 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.

22 June 25, 2008 Version 3.0

<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>

</tr> <tr>

<td headers="price cat" scope="row">Bath &amp; Bedding</td> <td headers="price ship">$2.99</td> <td headers="price pounds">$0.59 per lb</td>

<td headers="price cat" scope="row">Books &amp; 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 1.3.1.1 Header Markup , and 1.3.1.2 Structural Markup ).
T T T T

23 June 25, 2008 Version 3.0

The linear order of this table is: 1. Page Header 2. Link 3. Link 4. Link 5. Link 6. Link 7. Link 8. Link 9. Main Content 10. Page Footer

1.4 Accessible Electronic Forms

Electronic forms should be easy to use and provide complete functionality for all guests, including those using assistive technologies.
T

1.4.1 Form Usability

T

Logically order form elements so guests are able to navigate through forms using only the keyboard. Guidelines: 1. Use 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 1.4.1.2 Grouping Complex Forms ).
T T TTT

Example:
<label for="firstname">First Name</label> <input type="text" name="firstname" id="firstname" tabindex="1">

2. Follow guidelines in section 1.3.2 Keyboard Access to assure that guests can tab to
T T

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.

24 June 25, 2008 Version 3.0

5. Provide a non-Flash equivalent for all Flash forms. 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 Positioning

Use 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 attribute of 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 label A 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 label This label provides accurate information to all users

25 June 25, 2008 Version 3.0

1.4.1.2 Grouping complex forms

Provide a logical order of navigation whenever the form includes a complex group of elements. Guidelines: 1. Use the fieldset tag to combine related form elements into an identifiable group 2. 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>

26 June 25, 2008 Version 3.0

1.4.1.2-a Error and Success Indicators

Provide error and success indicators when creating forms. Guidelines: Use a combination of text, color, and icons to present error indicators as shown below. Social Security Number (Last 4 Digits) is a required field. 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.
T T T

1.4.1.2-b Time-Based Response Considerations

When 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 1.4.1.1-c Session Time-Outs ).
T T

1.4.1.2-c Session Time-Outs

Provide notification and an indication that more time is needed for process or session time-outs. Example:

27 June 25, 2008 Version 3.0

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 linksuch 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 Attributes

Use 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 information The 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.

28 June 25, 2008 Version 3.0

Example: Alt attributes to convey information The bulls eye logo on the home page is described as Target, not picture of bulls 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 information The 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 map Each 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 images The 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

29 June 25, 2008 Version 3.0

<img src=images/pumpkin.gif width=139 height=110 alt=> Example: Null alt attributes for spacer images Use 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 images Use 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 images Background images should not contain text or other information, as assistive technologies would likely not render these images (see section 1.3.1 Structural Elements and Order ).
T T

2.1.2 Title Attributes

Use 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.

30 June 25, 2008 Version 3.0

Title attributes can be added to images and form input fields as well as text links. Example: Coded title attributes
<a href="http://target.com/targethouse" title="Learn more about Target House">Target House</a>

2.1.3 Attribute Labels

Improve 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 Support

All 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 CSS

Web page content augmented by JavaScript, AJAX and/or CSS should function with assistive technologies.

31 June 25, 2008 Version 3.0

2.3.1 JavaScript Policy

JavaScript-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 1.3.1 Structural Elements and Order to assure presentational and structural elements of the site are kept separate.
T T

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.

32 June 25, 2008 Version 3.0

2.5 Framesets
Use 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 frames function.

2.5.1 Frame Titles

Use 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 Attribute A 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 Attribute The <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 Tag All HTML files carry a <title> tag as part of page identification. Properly identify all web pages using the <title> tag.
<title>Site Navigation</title>

33 June 25, 2008 Version 3.0

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 Design
To 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.

Accessibility
The process in which a website is made usable by people with a wide range of physical, visual, and cognitive abilities.

Alt Attribute
Language 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 Tag
HTML code that contains the alt attribute (see Alt Attribute).

Alt Text
The descriptive language that is served by the alt tag (see Alt Tag).

Braille Devices
Assistive 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 Impairment
A 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 Elements

Elements that may become obsolete or invalid in future versions of published standards.

Device Dependent
An 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. mousedependent experiences cannot be accessed with the keyboard).

34 June 25, 2008 Version 3.0

Device Independent
An experience can be accessed by more than one device (e.g. both mouse and keyboard).

Flash
Technology used to add interaction or animation to a web site.

Focus
An 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.

Form
A document containing blank fields; the guest can fill the field with data as appropriate.

Form Field
Blank area within a form; the guest can fill the form with data as appropriate.

Frame
A segment of a browser window which can be scrolled independently of other segments.

Frameset
The element that specifies the layout of the main user window within which independent segments (Frames) reside.

Header Markup
Used to define a pages 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 Code

A 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 State
The active highlighted state of an element when the cursor is positioned over it.

Image Map Area

An image map is a graphic that contains more than one hot spot, or link. Each hot spot is a separate image map area.

JavaScript
A 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 Order
Elements 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).

35 June 25, 2008 Version 3.0

Link Title - ( See Title Attribute)

T

Markup Language
A combination of text intermingled with information about the texts structure or presentation. HTML and XML are examples of markup languages.

Noframes
An element in a frameset that provides alternate content for guests who do not use frames.

Null Value
An 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-Sensitivity
A condition in which flashing or flickering lights can cause adverse physical reactions.

Presentational Markup
HTML or other markup language used to control the appearance of a page (see Structural Markup).

Screen Readers
Assistive technologies that reproduce text displayed on a computer screen as a synthesized voice or Braille; used by persons who have vision impairments.

Screen Reader Order

The 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 Links

Features 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 Markup
HTML or other Markup Language used to define the logical structure of the page (see Presentational Markup).

Time-Based Response
Interactions 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 Attribute
Language added to tags within the HTML code that communicates the same information as the tagged content.

Title Tag
The element that defines the title of a web page document.

36 June 25, 2008 Version 3.0

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.

37 June 25, 2008 Version 3.0

Exemption Form
PROJECT INFORMATION Date: Project Name: Project Manager: Business Owner: Project Launch Date: Description: Guideline Exemption Information Request Date: Impacted Area of the site: (Select all that apply) Home Page and Global Navigation Search Checkout Forms My Accounts & Pages Using/Storing/Displaying Personal Information (not including Checkout) Online Return Center Registries Store Locator Weekly Ad Shopping Pages Corporate Information Site SuperTarget Target Commercial Interiors Other (specify)

Red = Core Blue = Primary Green = Secondary

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:

38 June 25, 2008 Version 3.0

Date Processed: Approved: Approved by:

39 June 25, 2008 Version 3.0