WordPress.com



TARGET CORPORATION

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 5

TU1.2.1.1 Markup SolutionsUT 6

TU1.2.1.2 Contextual SolutionsUT 6

TU1.2.2 Color ContrastUT 7

TU1.2.3 Photo-Sensitivity IssuesUT 7

TU1.3 Navigation, Structure and LayoutUT 8

TU1.3.1 Opening New WindowsUT 8

TU1.3.2 Structural Elements and OrderUT 8

TU1.3.2.1 Header MarkupUT 9

TU1.3.2.2 Structural MarkupUT 9

TU1.3.3 Keyboard AccessUT 11

TU1.3.3.1 Keyboard Focus on Active ElementsUT 11

TU1.3.3.2 Logical Tab OrderUT 11

TU1.3.4 Clearly Defined LinksUT 12

TU1.3.4.1 Navigable LinksUT 13

TU1.3.4.2 Appropriate Link TextUT 14

TU1.3.5 Repetitive LinksUT 15

TU1.3.6 Proper Table DesignUT 17

TU1.3.6.1 Data Table SpecificationsUT 17

TU1.3.6.2 Layout Table RequirementsUT 19

TU1.4 Accessible Electronic FormsUT 20

TU1.4.1 Form UsabilityUT 20

TU1.4.1.1 Form field Labeling and PositioningUT 21

TU1.4.1.2 Grouping complex formsUT 21

TU1.4.1.2-a Error and Success IndicatorsUT 23

TU1.4.1.2-b Time-Based Response ConsiderationsUT 23

TU1.4.1.2-c Session Time-OutsUT 23

TU2.UT TUDevelopmentUT 24

TU2.1 Alt and Title AttributesUT 24

TU2.1.1 Alt AttributesUT 24

TU2.1.2 Title AttributesUT 26

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

TU2.3.2 AJAXUT 28

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

Change History

This document is located in:

TU

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

|Target Online Assistive Technology | Guest Experience, Interactive|TU

|Guidelines |Marketing Creative, TTS |s/creative/TOATG%20Wiki/Home.aspxUT |

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.

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

|[pic] |

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 T2.1 Alt and Title AttributesT). 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 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; |

|} |

c. Color Code

Specify colors by hexadecimal values not by color name.

|Non-preferred |Preferred |

|Color: red |Color: #CC0000 |

T1.2.1.2 Contextual SolutionsT

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.

|[pic] |

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:

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

| |

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 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 link’s title attribute.

|[pic] |

|Sign up here |

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.

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 ; this may not be the same as the contents of the tag.

3. Headers should appear in logical order (i.e. , , , etc).

Example: The headers below are similarly styled; yet, a screen reader would read them in a logical order

[pic]

|Reviewing & Changing My Orders |

| |

|Your Recent Orders |

| |

|Click "My Account" in the top right corner of any page and you'll find an Instant Order Update. |

| |

|Reviewing and Changing Your Orders |

| |

|You can review the status of any order you've placed by clicking "My Account" in the top right corner of any |

|page. |

| |

|You can confirm the date and method of shipment, an estimated date of arrival and a tracking number, if |

|available. |

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. 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 T2.1 Alt and Title AttributesT).

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 Toca El Tambor .

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.

| |

| |

| |

| |

|Children’s Toys |

| |

| |

|Find more information on Toca El Tambor. |

| |

| |

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

| |

|Name* |

| |

|Address 1* |

| |

|Address 2 |

| |

|How many students, staff and volunteers will be participating? |

|Staff* |

| |

|Students* |

| |

| |

|Select Level |

|K |

|1 |

|2 |

|3 |

| |

|Volunteers* |

| |

See section T1.3.5 Repetitive LinksT for a discussion of ways to skip over sections of repetitive links.

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

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 T2.1.2 Title AttributesT).

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

| |

Example: Navigation State as a visual clue.

|[pic] |

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

|Click here to view this week’s specials. |Current Specials |

Example: Title attributes to clarify link text

| | | |

|[pic] |[pic] |[pic] |

|See All |All |

|See All | | |

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 |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 >> |TWhat 1-Day and 2-Day Shipping MeanT |

| |TChanging Your Shipping AddressT |

1.3.5 Repetitive Links

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

|  |

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.

|Skip Page Navigation |

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:

|[pic] |

With keyboard focus, the skip link becomes visible:

|[pic] |

Example: Transparent Skip Link

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

|[pic] |

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

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

|[pic] |

| |

|SHIPPING INFORMATION |

| |

|Pricing |

| |

| |

|CATEGORY |

|PER SHIPMENT |

|+ PER POUND |

| |

| |

| |

|Baby |

|$4.50 |

|$0.40 per lb |

| |

| |

| |

|Bath & Bedding |

|$2.99 |

|$0.59 per lb |

| |

| |

| |

|Books & VHS Videos |

|$3.00 |

|$0.99 per lb |

| |

| |

| |

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 T1.3.1.1 Header MarkupT, and T1.3.1.2 Structural MarkupT).

|The linear order of this table is: | |

|Page Header | |

|Link | |

|Link | |

|Link | |

|Link | |

|Link | |

|Link | |

|Link | |

|Main Content | |

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

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 T1.4.1.2 Grouping Complex FormsTTT).

Example:

First Name

2. Follow guidelines in section T1.3.2 Keyboard AccessT 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.

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:

|[pic] |

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 |[pic] |

|Label at the left of dropdown box |[pic] |

|Label at right of check box |[pic] |

|Label at right of radio button |[pic] |

|Label is the Value attribute |[pic] |

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

|[pic] |

|[pic] - [pic] - [pic] |

| |

Example: One field per label

This label provides accurate information to all users

|[pic] |

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.

[pic]

| |

| |

|Contact Information |

| |

|First Name: |

|… |

| |

| |

| |

| |

|Order Information |

| |

|Subject: |

| |

|Please Select... |

| |

| |

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.

[pic]  TSocial Security Number (Last 4 Digits) is a required field.T

[pic]  TThe Last 4 Digits of the Social Security Number you have entered are incorrect.

Please re-enter your information.

[pic]  ZIP Code is a required field.

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 T1.4.1.1-c Session Time-OutsT).

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:

|[pic] |

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

Example: Alt attributes to convey information

The bull’s eye logo on the home page is described as “Target,” not “picture of bull’s eye.”

[pic]

| |

Example: Alt attributes to convey information

The search button is labeled “Search Submit,” not “red rectangle with the word ‘Go’ in it.”

[pic]

| |

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

[pic]

| |

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

[pic]

| |

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.

[pic]

| |

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.

[pic]

|Apply for a card |

Background images

Background images should not contain text or other information, as assistive technologies would likely not render these images (see section T1.3.1 Structural Elements and OrderT).

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.

Title attributes can be added to images and form input fields as well as text links.

Example: Coded title attributes

| |Target House |

| | |

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

|[pic] |TargetREDCard™ |

| | |

Example: Text for alt attributes on images

|[pic] | |

| | |

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.

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 T1.3.1 Structural Elements and OrderT 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.

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 frame’s 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 Tag for all web pages that will become part of a frameset.

1. HTML Frame Name Attribute

A frameset includes a tag with a name attribute; the name attribute should be a one word descriptor.

| |

2. HTML Frame Title Attribute

The tag includes a title attribute, and it should be a one-word descriptor.

| |

3. Web Page Title Tag

All HTML files carry a tag as part of page identification. Properly identify all web pages using the tag.

|Site Navigation |

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. mouse-dependent experiences cannot be accessed with the keyboard).

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 page’s organizational structure (i.e. , , , 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).

Link Title - (TSee Title Attribute)T

Markup Language

A combination of text intermingled with information about the text’s 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.

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.

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: | |Home Page and Global Navigation |

|(Select all that apply) | | |

| | | |

| | | |

| | | |

| | | |

| | | |

| | | |

| | | |

| | | |

| | | |

| | | |

| | | |

| | | |

|Red = Core | | |

|Blue = Primary | | |

|Green = Secondary | | |

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

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

-----------------------

Target Online Assistive Technology Guidelines (TOATG)

Created by:

Guest Experience, Interactive Marketing Creative & TTS

................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download