Docstoc

History of Assistive Technology

Document Sample
History of Assistive Technology Powered By Docstoc
					                        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 HIS TORY ______________________________________________________________ 4
TU                                            UT




 INTRODUCTION _________________________________________________________________ 4
TU                                       UT




 PURPOS E _______________________________________________________________________ 4
TU              UT




 REFER ENCES ___________________________________________________________________ 4
TU                             UT




 1.
TU   UT    NAVIGATION AND DES IGN __________________________________________________ 5
          TU                                                                                                         UT




 1.1 COMPREHENS IVE CONTENT DESCRIPTIONS ___________________________________ 5
TU                                                                                                                                                                UT




 1.2 COLOR ______________________________________________________________________ 5
TU                   UT




           1.2.1
          TU   UT   Color Challenges _______________________________________________________ 5
                          TU                                                               UT




           1.2.1.1 Markup Solutions ________________________________________________________ 6
          TU                                                                     UT




           1.2.1.2 Contextual Solutions ______________________________________________________ 6
          TU                                                                                         UT




           1.2.2 Color Contrast ___________________________________________________________ 7
          TU                                            UT




           1.2.3 Photo-Sensitivity Issues _____________________________________________________ 7
          TU                                                                                              UT




 1.3 NAVIGATION, STRUCTURE AND LAYOUT _______________________________________ 8
TU                                                                                                                                                           UT




           1.3.1 Opening New Windows _____________________________________________________ 8
          TU                                                                                              UT




           1.3.2 Structural Elements and Order _______________________________________________ 8
          TU                                                                                                                        UT




           1.3.2.1 Header Markup _________________________________________________________ 9
          TU                                                           UT




           1.3.2.2 Structural Markup _______________________________________________________ 9
          TU                                                                          UT




           1.3.3 Keyboard Access _________________________________________________________ 11
          TU                                                      UT




           1.3.3.1 Keyboard Focus on Active Elements _________________________________________ 11
          TU                                                                                                                                       UT




           1.3.3.2 Logical Tab Order ______________________________________________________ 11
          TU                                                                          UT




           1.3.4 Clearly Defined Links _____________________________________________________ 12
          TU                                                                                    UT




           1.3.4.1 Navigable Links ________________________________________________________ 13
          TU                                                                UT




           1.3.4.2 Appropriate Link Text ____________________________________________________ 14
          TU                                                                                                   UT




           1.3.5 Repetitive Links __________________________________________________________ 15
          TU                                                 UT




           1.3.6 Proper Table Design ______________________________________________________ 17
          TU                                                                               UT




           1.3.6.1 Data Table Specifications _________________________________________________ 17
          TU                                                                                                              UT




           1.3.6.2 Layout Table Requirements _ _______________________________________________ 19
          TU                                                                                                                   UT




 1.4 ACCESS IBLE ELECTRONIC FORMS ___________________________________________ 20
TU                                                                                                                                            UT




           1.4.1 Form Usability __________________________________________________________ 20
          TU                                             T
                                                         U




           1.4.1.1 Form field Labeling and Positioning _________________________________________ 21
          TU                                                                                                                                       UT




           1.4.1.2 Grouping complex forms __________________________________________________ 21
          TU                                                                                                        UT




           1.4.1.2-a Error and Success Indicators _____________________________________________ 23
          TU                                                                                                                             UT




           1.4.1.2-b Time-Based Response Considerations ______________________________________ 23
          TU                                                                                                                                            UT




           1.4.1.2-c Session Time-Outs _____________________________________________________ 23
          TU                                                                                    UT




 2.
TU   UT    DEVELOPMENT ___________________________________________________________ 24
          TU                                       UT




 2.1 ALT AND TITLE ATTRIB UTES ________________________________________________ 24
TU                                                                                                                        UT




           2.1.1 Alt Attributes ____________________________________________________________ 24
          TU                                       UT




           2.1.2 Title Attributes _ __________________________________________________________ 26
          TU                                            UT




           2.1.3 Attribute Labels __________________________________________________________ 27
          TU                                                 UT




 2.2 BROWS ER S UPPORT _________________________________________________________ 27
TU                                                                UT




 2.3 WEB PAGE CONTENT US ING JAVASCRIPT, AJ AX, AND/OR CSS __________________ 27
TU                                                                                                                                                                     UT




           2.3.1 JavaScript Policy _ ________________________________________________________ 28
          TU                                                           UT




           2.3.2 AJAX __________________________________________________________________ 28
          TU                        UT




                                                                                                                                                                                     2

June 25, 2008                                                                                                                                                               Version 3.0
          2.3.3 Cascading Style Sheets ____________________________________________________ 28
         TU                              UT




 2.4 STANDARD REDIRECTION FUNCTIONS ________________________________________ 28
TU                                             UT




 2.5 FRAMES ETS ________________________________________________________________ 29
TU                   UT




          2.5.1 Frame Titles ____________________________________________________________ 29
         TU                    UT




 GLOSSARY ____________________________________________________________________ 30
TU              UT




APPENDIX I: TARGET ONLINE ASSIS TIVE TECHNOLOGY GUID ELINES (TOATG)
TU




EXEMPTION POLICY ____________________________________________________________ 33
                                    UT




TU   EXEMPTION FORM _____________________________________________________________ 34
                          UT




                                                                                            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                        Author                                Location
     Target Online Assistive    Target.com Guest Experience,       http://sharepoint.target.com/sites/im/t
                                                                  TU




     Technology Guidelines     Interactive Market ing Creative,    eamsites/creative/TOATG%20W iki/
                                            TTS                                 Ho me.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 :
        U             U




       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.

        Best Practice : Use a variety of indicators such as color, text layout, shape/texture, and
        U                 U




        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.

        Example : Use color paired with text to convey information
        U         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.




        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.




                                                                                                     5

June 25, 2008                                                                            Version 3.0
        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
                                      T                           T




        image is used for different tasks on the site, the alt tag adequately describes the button‟s
        action.




1.2.1.1 Markup Solutions
T                            T




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

1.2.1.2 Contextual Solutions
T                                T




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.

                                                                                                       6

June 25, 2008                                                                            Version 3.0
1.2.2 Color Contrast
T                          T




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




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.

                                                                                                    7

June 25, 2008                                                                           Version 3.0
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.




     < a href = "www.target.com" title ="Link will open new
       T   TT       T   T                   TT   T   T




     window" >Sign up here</ a >
                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.
       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.




                                                                                                8

June 25, 2008                                                                         Version 3.0
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




       <h1>Reviewi ng &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>Reviewi ng and Changing Your Orders</h3>

       <p>You can rev iew 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 nu mber, 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:

                                                                                                      9

June 25, 2008                                                                               Version 3.0
              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 ).
                        T                          T




       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.


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




                                                                                                10

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




                                                                                                 11

June 25, 2008                                                                          Version 3.0
     <label for="fullname">Name<span class="required">*</span></label>

     <input type="text" name="fu llname" 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" tabi ndex="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">Vo lunteers<span class="required">*</span></label>

     <input type="text" name="volunteers" id="volunteers" tabi ndex="7">
   See section 1.3.5 Repetit ive Links for a d iscussion 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 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.
                                                                                                              12

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




                                                                                                        13

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                                  Preferred
         Click here to view this week‟s specials.            Current Target.com Specials




                                                                                                 14

June 25, 2008                                                                        Version 3.0
        Example: Title attributes to clarify link text




<a href=”electronics/”                <a href=”sports/” title=”Shop All        <a href=”toys/” title=”Shop All
title=”Shop All Electronics”>         Sports”>See All</a>                      Toys”>See A ll</a>
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                                           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 >>   What 1-Day and 2-Day Shipping Mean
                                                                           T                                    T




                                                                           Changing Your Shipping Address
                                                                           T                            T




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



                                                                                                                15

June 25, 2008                                                                                     Version 3.0
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:abs olute;”><a name=”skiptocontent”>&nbs p;</a></s pan>


       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 Nav igation</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:




                                                                                                   16

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



                                                                                                  17

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.




                                                                                                 18

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

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




                                                                                                  19

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.

1.4.1 Form Usability
T      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.
               T




            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                                TTT




               Example:
               <label for="firstname">First Name</l abel>
               <input type="text" name="firstname" i d="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.

                                                                                                      20

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




1.4.1.2 Grouping complex forms
Provide a logical order of navigation whenever the form includes a complex group of elements.
                                                                                                    21

June 25, 2008                                                                         Version 3.0
        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>




                                                                                                22

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




            The Last 4 Digits of the Social Security Number you have entered are incorrect.
            T




            Please re-enter your information.
            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 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:




                                                                                                  23

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




                                                                                                    24

June 25, 2008                                                                          Version 3.0
        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.”




<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" al t="Search Submi t">

        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

                                                                                                  25

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” al t=””>

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

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="Appl y
                                                      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. anyti me. Gi ve 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.


                                                                                                      27

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




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.




                                                                                                     28

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
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 <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="navig ation">

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>




                                                                                                 29

June 25, 2008                                                                          Version 3.0
Glossary
Assistive Technology (AT)
Technology which allo ws persons with disabilities to perform web functions with litt le to no difficulty.
Examples of assistive technology related to computers and IT include keybo ards 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 HTM L code that communicates the
same in formation as the images. (A lt Attributes are sometimes incorrect ly referred to as Alt Tags and/or
Alt Text.)

Alt Tag
HTM L 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 ).


                                                                                                            30

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 fro m a Focus event by using the onFocus event
handler within certain HTM L 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 wh ich independent segments
(Frames) reside.

Header Markup
Used 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 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 HTM L code to create dynamic content.

Layout Table
Use of a hierarchical mat rix to create a desired v isual display or effect (see Data Table).

Linear Order
Elements of a web page arranged fro m top to bottom and left to right. Accessible web pages are laid out in
linear order (see Screen Reader Order).

Link Title - ( See Title Attribute)
              T                       T




                                                                                                           31

June 25, 2008                                                                                   Version 3.0
Markup Language
A combination of text intermingled with information about the text‟s structure or presentation. HTML and
XM L are examp les 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 blan k and is used for images wh ich are ornamental o r 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 react ions.

Presentational Markup
HTM L 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 fro m top to
bottom and fro m 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. Co mmonly us ed to allo w the guest to
move past navigation links to the main content of the page.

Structural Markup
HTM L 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 t ime.

Title Attribute
Language added to tags within the HTM L code that communicates the same information as the tagged
content.

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




                                                                                                               32

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.




                                                                                              33

June 25, 2008                                                                     Version 3.0
Exemption Form
                                    PROJ ECT INFORMATION
Date:
Project Name:
Project Manager:
Business Owner:
Project Launch Date:
Descripti on:
                                  Gui deline Exempti on Informati on
Request Date:
Impacted Area of the site:                   Home Page and Gl obal Navigati on
(Select all that appl y)                     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 Informati on Site
                                             SuperTarget
Red = Core                                   Target Commerci al Interiors
B lue = Primary                              Other (specify)
G reen = Secondar y


Guideline Exemption Information

Gui deline(s) that cannot be met:
Gui deline number(s) that cannot be met:
Reason that gui deline(s) cannot be met:
Impact to users of assistive technologies if
guideline is not met:
Other i mpact considerati ons:
Descripti on of proposed i mplementation:
Expected duration of i mplemented experience:
Notes/Comments:

Approval Information

Date Recei ved:
Date Reviewed:
Questions/Clarification Needed:
Dated returned for questions:
Date all information recei ved:
Date Processed:
Approved:
Approved by:



                                                                                             34

June 25, 2008                                                                        Version 3.0

				
DOCUMENT INFO
Description: History of Assistive Technology document sample