Docstoc

web_requirements

Document Sample
web_requirements Powered By Docstoc
					              The King County Web Page Specification:

                    Design requirements,
                     recommendations,
                       and checklist.
    The following specification reflects enterprise                  disabled users. Testing in additional environments such as
usability/accessibility, branding, and technical requirements in     multiple operating systems (ie Linux, Macintosh OS), other
the development and maintenance of Web site content                  browsers and multiple browser versions is usually a good
(including Web pages, applications, and other such interfaces).      idea.
This document can be used in two ways:                                   A tip for testers: Set your browser defaults to a non-
    (1) As a foundation for Web-interface requirements. If           white background and a non-arial, not-black font (in IE,
          agencies are working with vendors, this specification      Tools / Internet Options / General / Colors and Fonts). Also,
          can be included in contracts for Web development           set your monitor to 800x600, ideally 640x480 (Control Panel
          (agencies can simply add their unique requirements         / Display / Settings). Then begin testing, indicating in the
          to the list of enterprise specifications).                 form below when a standard is met, and when it isn‟t. Each
    (2) As a supporting document and checklist for vendors           time a standard isn‟t met, add a description regarding how
          and agencies during development and testing of Web         the issue will be addressed.
          content.                                                       Got feedback? Need tools, classes, or other help
At a minimum, testers must test in the most-used browsers            implementing some of these provisions? Other questions? E-
(as per site statistics) as well as Lynx, which simulates            mail webteam@metrokc.gov. We‟ll do what we can!
screenreaders employed by




                                                               -1-
Notes:
 The “Req?” column contains “Req.” for “required provision,” or is blank. A blank field indicates a recommended provision.
   While not required, such provisions are highly recommended to insure maximum success; developers should attempt to
   achieve them.
 “Test” is a field for developers or testers to fill out during functional (pre-acceptance) testing. By using a “Y” for “yes,” a
   tester indicates that a required provision has been achieved. By using an “N” for “no,” a tester indicates that a required
   provision hasn‟t been met. When an “N” appears as part of a required provision, an explanation is required in the same
   field.
 “OK‟d?” is a field for final approvers to fill out during acceptance testing; by using a “Y,” a final approver indicates that a
   provision has been met. There‟s no need to test recommended specifications, or to explain why a recommended
   specification was not met. In cases where a required provision absolutely cannot be achieved, a final approver must request
   permission by e-mailing webteam@metrokc.gov, and include a justification for the request. Pages not meeting required
   provisions may not be published without Web Team authorization in writing (via e-mail is fine).

Provision               Details                                                                         Req?    Test?    OK’d?
1. Development:         Don’t develop and test files that are in production! Instead, copy files        Req.     Y/N     Y/N
   Web files must be    from the Internet server to your hard drive (or other development
   developed and        environment), make a backup in case things go wrong, then make the
   tested in a          changes to the first file on your hard drive, then test the updated file in a
   development          test environment before replacing the production file. Web authors often
   environment          make the mistake of publishing untested files on the production server,
   (such as a web       which means untested files and their errors become immediately obvious to
   author‟s hard        users. Avoid it!
   drive and testing
   server).
2. HTML: Web files      XHTML 1.0 information and guidelines: http://www.w3.org/TR/xhtml1/               Req.     Y/N    Y/N
   will use at least
   transitional HTML    It‟s basic differences with HTML 4 (http://www.w3.org/TR/xhtml1/#diffs):
   4.01 in HTML                  Well-formed code; all elements must be properly nested, as per
   coding, and                      the following:
   preferably XHTML
   1.0. Transitional                  Good nesting:
   XHTML is OK;
   strict XHTML is                            <p><b>Ah… The bold tags appear inside the
   even better.                               paragraph tags. Very nice.</b></p>




                                                                                                                                 2
                                      Bad nesting:

                                             <p><b>Oh my! The bold tags follow the
                                             paragraph tags. Eeeks!</p></b>

                                  End-tags required for all elements (even empty ones: <br /> --
                                   just make sure there‟s a space between the tag and the closing
                                   slash)
                                  All tags, attributes, and values must be in lowercase
                                  All values must be surrounded by double-quotes
                                  All attributes must have written values

                        Also, consider not using <font>, <center>, and other “deprecated” tags --
                        tags that are frowned upon by the W3C and slated for possible extinction
                        (http://www.w3.org/TR/html401/appendix/changes#h-A.3.1.2), and whose
                        results can be achieved through CSS (see CSS).

                        To upgrade your old HTML to XHTML 1.0, use TidyGUI
                        (http://perso.wanadoo.fr/ablavier/TidyGUI/). If an agency Web author
                        needs help, he or she should schedule a 15-minute visit with a Web Team
                        staffer.

                        HTML 4.01 information and guidelines:
                        http://www.w3.org/TR/html401/sgml/loosedtd.html

                        Validate using an appropriate tool (HTML Validator, http://validator.w3.org/,
                        etc.)
3. CSS: Web files       CSS information and guidelines: http://www.w3.org/Style/CSS/
   will adhere to CSS
   2.0 in CSS coding.   CSS 2.0 specification: http://www.w3.org/TR/REC-CSS2/

                        NOTE: Several broadly used browsers do not implement CSS 2 as per the
                        spec (IE5 for Mac and 5 and 6 for Windows support CSS2, but fall short of
                        full support. Netscape 6 and Opera 5 substantially support CSS2; details at




                                                                                                        3
                         http://www.westciv.com/style_master/academy/browser_support/). If you
                         use CSS, it‟s essential to understand when it will not work in broadly used
                         browsers and insure that the user-experience is not damaged.

                         Why use CSS? “CASCADING STYLE SHEETS (CSS) save bandwidth, vastly
                         reducing the size of your files when compared to old-style <FONT FACE>
                         markup. With Styles, your sites load faster. You work faster, too. Styles
                         shave grueling hours of grunt-work off your design workload: one brief CSS
                         document can style an entire domain; and when it's time to redesign, you
                         can execute site-wide changes in minutes instead of days…. (Plus,) CSS is
                         bone-simple to learn and use.” See http://www.alistapart.com/stories/fear/.
4. Template: Web         Templates are on an internal server at                                            Req.   Y/N   Y/N
   files using HTML      http://kcweb.metrokc.gov/oirm/services/web/templates.aspx
   code will adhere
   to a King County
   enterprise
   template.
5. No spaces in file     Blank spaces in file names produce usability and accessibility problems for       Req.   Y/N   Y/N
   names: Web files      users, especially in lesser-used browsers (including screenreaders for
   will not use blank    disabled users).
   spaces in file
   names.
6. <title>: Each         Why create good page titles? Because they‟re the first thing users see when       Req.   Y/N   Y/N
   Web file will use a   perusing search-engine results. So, beware of bad titles. The more specific,
   <title> element       the better for the user.
   that is descriptive
   of the page.          Also, unique titles help pages show up higher in search-engine results.
7. <Meta>: Web           The keyword attribute is used to specify keywords that describe the contents      Req.   Y/N   Y/N
   files will use        of a Web page. Search engines scour the Web for keywords, which are
   keyword, URL,         invisible to users. The attribute, along with the description attribute, should
   description, and      include up to 1000 characters of text. Best scenario is probably 900
   author attributes     characters for keywords, and 100 for the description. Keyword tip: Use
   in “meta” tags        commonly used search words and phrases (check agency Web site traffic
   that are unique to    reports for most commonly used keywords), including common misspellings;
   the page, as per      separate words and phrases by commas.




                                                                                                                              4
   the enterprise
   King County           Descriptions will appear in search-engine results (Google, KC search engine,
   templates.            etc.), helping users determine whether pages contain the content they seek.
   Likewise, such
   attributes will be    The e-mail address of the page maintainer or owner (better yet, both!),
   added to Word,        accessible in the source code, will help the King County ITS Web Team
   Acrobat, and          identify a person responsible for the content of a Web page.
   other files
   containing similar    The URL in source code helps identify the location of a page when users
   properties.           send entire pages by e-mail.
8. <body>: Web           The templates‟ body element declares white background color and black text       Req.   Y/N   Y/N
   files will use the    (either within the page or, preferably, in an external CSS file; in XHTML 1.0,
   <body> element        the <body> element has been deprecated).
   as per the
   enterprise King       A branding requirement (universal white backgrounds), it also fosters
   County templates.     greater visual accessibility when used with black fonts.

                         The white-background requirement does not apply to small tables/cells, as
                         long as the text provides adequate color contrast (see “Effective Color
                         Contrast: Designing for People with Partial Sight and Color Deficiencies,” at
                         http://www.lighthouse.org/color_contrast.htm).

                         No background images or specified link colors can be associated with
                         <body> tags (see “Background images”). This allows Internet standards or
                         user preferences to prevail.
9. Nav-bar: Web          "Navigation bar" code includes navigation gif, server-side image map, and        Req.   Y/N   Y/N
    files will use the   alternate text. (Note: Server-side image map is not ideal for disability
    "navigation bar"     compliance, and will be addressed in a future site revamp. See “server-side
    code as per the      image maps,” below.)
    enterprise King
    County templates.
10. Background           This specification is aimed at improving usability of a Web page, especially     Req.   Y/N   Y/N
    images/colors:       for visually disabled users. The problem usually arises when text appears
    Web files will use   over a background image or color, making it difficult to distinguish between
    no background        text and image.




                                                                                                                             5
   images or colors
   when they pose        It‟s also a branding issue: As per the body-tag declaration, King County
   problems for          requires white backgrounds to all pages. As mentioned above, the white-
   users with visual     background requirement does not apply to small tables/cells, as long as the
   impairments.          text provides adequate color contrast (see “Effective Color Contrast:
                         Designing for People with Partial Sight and Color Deficiencies,” at
                         http://www.lighthouse.org/color_contrast.htm).

                         Not sure whether your page meets this standard? E-mail
                         webteam@metrokc.gov, which may enlist help from County ADA specialists.
                         (We found a neat colorblind-vision simulator, which can help in designing
                         pages that have good color contrast: www.vischeck.com. Check it out.)
11. Updated date:        Associated Press Stylebook style: Month is spelled out (and abbreviated as     Req.   Y/N   Y/N
    Web files will       here: Jan., Feb., Aug., Sept., Oct., Nov., and Dec.), followed by date,
    include an           comma, and four-digit year, as in Feb. 22, 2002 and March 8, 2003.
    updated date,
    month, and year      Updated date is not required – or recommended – when a file serves data
    in Associated        (from a database) that has been updated more recently than the file. For
    Press style on the   example, files from the King County directory may be a year old, yet they
    bottom of the        may be calling information from a database that may be just a day old. In
    page as per the      that case, the page update information could send an inaccurate message to
    King County          the user – namely that the data may be out of date.
    template.
12. Footer: Web files    External link disclaimer and terms.htm were written at Council‟s request and   Req.   Y/N   Y/N
    will include the     with the involvement of the Prosecuting Attorney‟s Office. Terms.htm can be
    King County          amended as needs change or increase.
    footer, including
    text-based
    navigation,
    external-link
    disclaimer, and
    link to
    www.metrokc.gov
    /terms.htm, as
    per the King




                                                                                                                           6
    County template.
13. Links: All active     Web file maintainers should confirm that links work every week (link reports     Req.   Y/N   Y/N
    hyperlinks on Web     are available internally at http://kcweb.metrokc.gov/des/web/).
    files will work and
    go to their
    intended
    destinations.
14. Screen display:       Flexible-width coding of tables and cells is recommended (in percentages, as     Req.   Y/N   Y/N
    Web-file content      per http://www.killersites.com/tutorial/sizing.html and
    will be viewable in   http://www.w3.org/TR/REC-html40/struct/tables.html#column-width),
    800x600 screen        except when multiple tables would make a page look awkward. That way,
    display settings      page content would expand to larger screen display settings.
    (and preferably
    640x480) with the     (Ideally, content would scale down to at least 544 pixels wide, meeting
    browser               requirements for WebTV, and even far more, to accommodate cell phones
    maximized, and        and PDAs. This is not possible with the current navigation bar (586 pixels),
    will not require      but will be addressed in a future site revamp.)
    users to scroll
    horizontally to
    view the page.
15.Font face, color:      Headlines, captions, portal links, and often-repeated fine print (for example,   Req.   Y/N   Y/N
    Web files should      the disclaimer that appears on the bottom of all King County Internet pages)
    use arial, black      are exempted from this provision and may be of other sizes, colors, and/or
    text for all          font faces.
    paragraphs and
    other written         Ideally, font styles and colors can be declared in a separate CSS stylesheet
    material              (see XHTML and CSS).
    containing more
    than one
    sentence.
16. Font size: Web        This provision arises from branding and accessibility goals. Basically, King     Req.   Y/N   Y/N
    files should use      County wants a brand consistency from page to page, including font size
    undeclared or 100     (and face, as per the above). Also, fixed font sizes often pose problems for
    percent font size     users, who may not be able to resize despite changing preference settings
    for all paragraphs    (this happens frequently with older browsers or when such font size




                                                                                                                              7
   and other written    declarations are included in external CSS files).
   material
   containing more      Headlines, captions, portal links, and often-repeated fine print (for example,
   than one             the disclaimer that appears on the bottom of all King County Internet pages)
   sentence.            are exempted from this provision and may be of other sizes, colors, and/or
                        font faces. Ideally, size declarations and other unique font characteristics
                        can be declared in a separate CSS stylesheet (see XHTML and CSS).
17. External links:      As of March 5, 2002:                                                            Req.   Y/N   Y/N
    Web files shall
    adhere to King         External site must not offer or promote any illegal activities.
    County‟s external      External site information must not defame, harass, threaten or otherwise
    link policy             violate the legal rights of others, including their privacy.
                           External site content must be relevant to the subject of the referring
                            King County Web page.
                           External site information must be accurate, up-to-date, and legal.
                           The County Web page from which the external link is made must contain
                            a link to the County's link disclaimer policy.
                           All County links to external pages must be identified as external links.
                            Recommended style, using "external link" in parentheses on first
                            reference on a page, "external" on second, is as follows: what about the
                            common practice on some King County sites to asterisk the link and
                            place text “* (=) External link”?

                               This sample sentence leads to the
                               City of Seattle's home page (external link).

                               This second sample sentence leads to the
                               Seattle Mayor‟s home page (external).

                            There are other ways. One way is via an introductory sentence, as in
                            “The following links will take you to external sites.” Another method
                            requiring more from the user but less screen real estate: The asterisk,
                            whereby the user clicks on the asterisk and then learns that a link is
                            external. Example:




                                                                                                                            8
                                 This sample sentence leads to the
                                 City of Seattle's home page. *

                                 * External link

                             The external link should not contain any graphics unless it‟s in the user‟s
                              best interest (i.e., no graphic logos for Acrobat Reader or Real Player,
                              which constitutes free advertising).
                           The external site owner (Webmaster, publisher, etc.) must be easy to
                              contact, via e-mail or phone.
                           Links to external sites containing changing advertisements should be
                              avoided as the advertisements may be potentially offensive.
                           No links should be made to a King County employee's personal Web site
                              unless it deals with King County business (and meets other appropriate-
                              content guidelines).
                           External site must not contain a majority of content written without
                              moderation by site administrators (chat rooms, bulletin boards, etc.).
                           Linked page on external site must be swift to download (if it's over 100K,
                              warn users beforehand).
                           External sites cannot purchase links, nor can they accept linkages as a
                              form of payment.
                           No external link should constitute an unfair advantage for one business
                              over another. For example, King County cannot link to only one TV
                              station Web site if other station Web sites contain similar information
                              (this would look like an unfair endorsement by King County). Instead,
                              the County should either link to all media Web sites containing similar
                              information, or link to none. If a site contains unique information that
                              relates to the page linking to it, then it is OK to make the link.
                           Links should never direct users to news about political campaigns or to
                              campaign Web sites.
18. Alt-text: Web         A text equivalent means adding words to represent the purpose of a non-           Req.   Y/N   Y/N
    files will use a      text element. This provision requires that when an image indicates a
    text equivalent for   navigational action such as "move to the next screen" or "go back to the top
    every non-text        of the page," the image must be accompanied by actual text that states the
    element (e.g., via    purpose of the image. This provision also requires that when an image is




                                                                                                                               9
   "alt", "longdesc",   used to represent page content, the image must have a text description
   or in content).      accompanying it that explains the meaning of the image.

Http://www.access-      HTML Source Code:
board.gov/sec508/gui
de/1194.22.htm#(a)             <img src="/images/navbars/home.gif" alt="King County
                               Navigation Bar (text navigation at bottom)" />

                        How much information actually needs to be in the text equivalent?
                        The text information associated with a non-text element should, when
                        possible, communicate the same information as its associated element. For
                        example, when an image indicates an action, the action must be described
                        in the text. The types of non-text elements requiring actual text descriptions
                        are limited to those elements that provide information required for
                        comprehension of content or those used to facilitate navigation. Web page
                        authors often utilize transparent graphics for spacing. Adding a text
                        description to these elements will produce unnecessary clutter for users of
                        screen readers. For such graphics, an empty ALT attribute is useful.

                        Example of source code: <IMG src="transparent.gif" alt="" />

                        What is meant by the term, non-text element?
                        A non-text element is an image, graphic, audio clip, or other feature that
                        conveys meaning through a picture or sound. Examples include buttons,
                        check boxes, pictures and embedded or streaming audio or video.

                        How should audio presentations be treated?
                        This provision requires that when audio presentations are available on a
                        multimedia web page, the audio portion must be captioned. Audio is a non-
                        textual element, so a text equivalent of the audio must be provided if the
                        audio is part of a multimedia presentation. Multimedia includes both audio
                        and video. If the presentation is audio only, a text transcript would meet this
                        requirement.

                        What are ways of assigning text to elements?




                                                                                                          10
                       There are several ways of providing textual information so that it can be
                       recognized by assistive technology devices. For instance, the <IMG> tag can
                       accept an "alt" attribute that will enable a web designer to include text that
                       describes the picture directly in the <IMG> tag.

                       HTML source code: <img src="/geeman/images/geeman2.gif"
                       alt="Banner: The Gee-Man, King County's Accessible Answer Guy,
                       by Steve Johnston, Columnist" />

                       Similarly, the <APPLET> tag for Java applets also accepts an "alt" attribute,
                       but it only works for Java-enabled browsers. Often, users with slower
                       Internet connections will turn support for Java applets off. A better
                       alternative for providing textual descriptions is to include the alternative text
                       between opening and closing <APPLET> or <OBJECT> tags. For instance, if
                       a Web developer wanted to include an applet called MyCoolApplet in a Web
                       page, and also include a description that the applet shows a stock ticker
                       displaying the current price of various stocks, the developer would use the
                       following HTML coding for example:

                       <APPLET CODE="MyCoolApplet.class" WIDTH="200" HEIGHT="100">
                       This applet displays current stock prices for many popular
                       stocks.
                       </APPLET>

                       Finally, yet another way of providing a textual description is to include it in
                       the page in the surrounding context:

                       Below is a picture of me during my great vacation!
                       <p><IMG src="pictureofme.jpg" /></p>
19. Synchronized       What are considered equivalent alternatives?
    multimedia         Captioning for the audio portion and audio description of visual information
    alternatives:      of multimedia presentations are considered equivalent alternatives. This
    Equivalent         provision recommends that when an audio portion of a multimedia
    alternatives for   production is captioned, as required in the alternate-text provision, the
    any multimedia     captioning must be synchronized with the audio. Synchronized captioning




                                                                                                           11
   presentation          would be required so someone reading the captions could also watch the
   should be             speaker and associate relevant body language with the speech.
   synchronized with
   the presentation.     If a Web site offers audio files with no video, do they have to be
                         captioned?
http://www.access-       No, because it is not multimedia. It‟s a single medium. However, since audio
board.gov/sec508/gui     is a non-text element, a text equivalent, such as a transcript, must be
de/1194.22.htm#(b)       available. Similarly, a (silent) Web slide show presentation does not need to
                         have an audio description accompanying it, but does require text
                         alternatives to be associated with the graphics.

                         If a County official delivers a live audio and video Web cast speech,
                         does it need to be captioned?
                         Yes, this would qualify as a multimedia presentation and would require the
                         speech to be captioned.
                         Example:

                         National Endowment for the Humanities
                         www.neh.gov/media/scottcaptions.ram

                         How do I do it?
                         You‟ll find a series of links on this subject at
                         http://newmedia.doit.wisc.edu/staff/wolf/caption.html (scroll down). That
                         page includes a link to Magpie, a free tool for adding captions to video.


20. Color-               Why is this provision necessary?                                                  Req.   Y/N   Y/N
    independent:         When colors are used as the sole method for identifying screen elements or
    Web files shall be   controls, persons who are color blind as well as those people who are blind
    designed so that     or have low vision may find the Web page unusable.
    all information
    conveyed with        Does this mean that all pages have to be displayed in black and
    color is also        white?
    available without    No, this provision does not prohibit the use of color to enhance identification
    color, for example   of important features. It does, however, require that some other method of




                                                                                                                              12
   from context or       identification, such as text labels, must be combined with the use of color.
   markup.               This provision addresses not only the problem of using color to indicate
                         emphasized text, but also the use of color to indicate an action. For
                         example, a Web page that directs a user to "press the green button to start"
http://www.access-       should also identify the green button in some other fashion than simply by
board.gov/sec508/gui     color.
de/1194.22.htm#(c)
                         Is there any way a page can be quickly checked to ensure
                         compliance with this provision?
                         Yes, by printing it out on a black and white printer, which will quickly show if
                         the removal of color affects the usability of the page.

                         Exceptions?
                         There may be some instances in which a medium, such as maps or complex,
                         color-coded diagrams, can only convey information in color. Exceptions may
                         be granted for such media, but won‟t necessarily exempt an agency from
                         having to provide that information in an alternate, color-independent format
                         should the request arise.
21. Stylesheet-          What are the potential problems posed by style sheets?                             Req.   Y/N   Y/N
    independent:         Style sheets can enable users to define specific viewing preferences to
    Web files shall be   accommodate their disability. For instance, users with low vision may create
    coded so they are    their own style sheet so that, regardless of what Web pages they visit, all
    readable without     text is displayed in an extra large font with white characters on a
    requiring an         black background. If designers set up their pages to override user-defined
    associated style     style sheets, people with disabilities may not be able to use those pages. For
    sheet.               good access, therefore, it is critical that designers ensure that their Web
                         pages do not interfere with user-defined style sheets.
http://www.access-
board.gov/sec508/gui     In general, the "safest" and most useful form of style sheets are "external"
de/1194.22.htm#(d)       style sheets, in which the style rules are set up in a separate file. An
                         example of a link to an external style sheet is:

                         <link rel="stylesheet" type="text/css" href="kc.css" />
22. Server-side          How do image maps work?                                                            Req.   Y/N   Y/N
    image maps:          An image map is a picture (often an actual map) on a Web page that




                                                                                                                               13
   Redundant text       provides different links to other Web pages, depending on where a user
   links shall be       clicks on the image. There are two basic types of image maps: client-side
   provided for each    image maps and server-side image maps. With client-side image
   active region of a   maps, each active region in a picture can be assigned its own link that
   server-side image    specifies what Web page to retrieve when a portion of the picture is
   map.                 selected. HTML allows each active region to have its own alternative text,
                        just like a picture can have alternate text. By contrast, clicking on a location
http://www.access-      of a server-side image map only specifies the coordinates within the image
board.gov/sec508/gui    when the mouse was depressed. The ultimate selection of the link or URL
de/1194.22.htm#(e)      must be deciphered by the computer serving the Web page.

                        Why is this provision necessary?
                        When a Web page uses a server-side image map to present the user with a
                        selection of options, browsers cannot indicate to the user the URL that will
                        be followed when a region of the map is activated. Therefore, the redundant
                        text link is necessary to provide access to the page for anyone not able to
                        see or accurately click on the map.
23. Data tables: Web    Why are these two provisions necessary?                                             Req.   Y/N   Y/N
    files with data     These provisions permit the use of data tables, but require they be coded
    tables that have    according to the rules of the markup language being used for creating
    two or more rows    tables. Large tables of data can be difficult to interpret if a person is using a
    or columns (as      non-visual means of accessing the Web. Users of screen readers can easily
    opposed to tables   get "lost" inside a table because it may be impossible to associate a
    for layout          particular cell that a screen reader is reading with the corresponding column
    purposes) shall     headings and row names. For instance, assume that a salary table includes
    use row and         the salaries for federal employees by grade and step. Each row in the table
    column headers.     may represent a grade scale and each column may represent a step. Thus,
    Markup shall be     finding the salary corresponding to a grade 9, step 5 may involve finding the
    used to associate   cell in the ninth row and the fifth column. For a salary chart of 15 grade
    data cells with     scales and 10 steps, the table will have at least 150 cells. Without a method
    header cells.       to associate the headings with each cell, it is easy to imagine the difficulty a
                        user of assistive technology may encounter with the table.
http://www.access-
board.gov/sec508/gui    These provisions require that when information is displayed in a table
de/1194.22.htm#(g)      format, the information shall be laid out using appropriate table tags as




                                                                                                                               14
opposed to using a preformatted table in association with the "<pre>" tag.
Web authors are also required to use one of several methods to provide an
association between a header and its related information.

How can HTML tables be made readable with assistive technology?
Using the "Scope" Attribute in Tables – Using the "scope" attribute is one of
the most effective ways of making HTML compliant with these requirements.
It is also the simplest method to implement. The scope attribute also works
with some (but not all) assistive technology in tables that use "colspan" or
"rowspan" attributes in table header or data cells.

Using the Scope Attribute – The first row of each table should include
column headings. Typically, these column headings are inserted in <TH>
tags, although <TD> tags can also be used. These tags at the top of each
column should include the following attribute:

scope="col"

By doing this simple step, the text in that cell becomes associated with
every cell in that column. Unlike using other approaches (notably "id" and
"headers") there is no need to include special attributes in each cell of the
table. Similarly, the first column of every table should include information
identifying information about each row in the table. Each of the cells in that
first column are created by either <TH> or <TD> tags. Include the following
attribute in these cells:

scope="row"

By simply adding this attribute, the text in that cell becomes associated with
every cell in that row. While this technique dramatically improves the
usability of a Web page, using the scope attribute does not appear to
interfere in any way with browsers that do not support the attribute.

Example of source code – the following simple table summarizes the work
schedule of three employees and demonstrates these principles.




                                                                                 15
<table>
<tr>
<th>&nbsp;</th>
<th scope="col" >Spring</th> <th scope="col" >Summer</th> <th
scope="col" >Autumn</th> <th scope="col" >Winter</th> </tr>
<tr> <td scope="row" >Betty</td> <td>9-5</td> <td>10-6</td>
<td>8-4</td><td>7-3</td>
</tr>
<tr> <td scope="row" >Wilma</td> <td>10-6</td> <td>10-6</td>
<td>9-5</td> <td>9-5</td>
</tr>
<tr> <td scope="row" >Fred</td> <td>10-6</td> <td>10-6</td>
<td>10-6</td> <td>10-6</td>
</tr>
</table>

This table would be displayed as follows:

         Spring     Summer      Autumn      Winter
Betty     9-5         10-6        8-4          7-3
Wilma    10-6        10-6         9-5         9-5
Fred     10-6        10-6        10-6        10-6

The efficiency of using the scope attribute becomes more apparent in much
larger tables. For instance, if an agency used a table with 20 rows and 20
columns, there would be 400 data cells in the table. To make this table
comply with this provision without using the scope attribute would require
special coding in all 400 data cells, plus the 40 header and row cells. By
contrast, using the scope attribute would only require special
attributes in the 40 header and row cells.

Using the "ID" and "Headers" Attributes in Tables
Unlike using the "scope" attribute, using the "id" and "headers" attributes
requires that every data cell in a table include special attributes for
association. Although its usefulness for accessibility may have been




                                                                              16
diminished as browsers provide support for the "scope" attribute, the "id"
and "headers" attributes are still very useful and provide a practical means
of providing access in smaller tables.

The following table is much more complicated than the previous example
and demonstrates the use of the "id" and "headers" attributes and then the
scope attribute. Both methods provide a means of complying with the
requirements for data tables in Web pages. The table in this example
includes the work schedules for two employees. Each employee has a
morning and afternoon work schedule that varies depending on whether the
employee is working in the winter or summer months. The "summer" and
"winter" columns each span two columns labeled "morning" and "afternoon."
Therefore, in each cell identifying the work schedule, the user needs to be
told the employee's name (Fred or Wilma), the season (Summer or Winter),
and the shift (morning or afternoon).

<table>
<tr>
<th>&nbsp;</th>
<th colspan="2" id="winter" >Winter</th>
<th colspan="2" id="summer" >Summer</th>
</tr>
<tr>
<th>&nbsp;</th>
<th id="am1" >Morning</th>
<th id="pm1" >Afternoon</th>
<th id="am2" >Morning</th>
<th id="pm2" >Afternoon</th>
</tr>
<tr>
<td id="wilma" >Wilma</td>
<td headers="wilma am1 winter" >9-11</td>
<td headers="wilma pm1 winter" >12-6</td>
<td headers="wilma am2 summer" >7-11</td>
<td headers="wilma pm2 summer" >12-3</td>
</tr>




                                                                               17
<tr>
<td id="fred" >Fred</td>
<td headers="fred am1 winter"       >10-11</td>
<td headers="fred pm1 winter"       >12-6</td>
<td headers="fred am2 summer"       >9-11</td>
<td headers="fred pm2 summer"       >12-5</td>
</tr>
</table>

This table would be displayed as follows:

               Winter                   Summer
         Morning    Afternoon     Morning  Afternoon
Wilma    9-11         12-6         7-11        12-3
Fred     10-11        12-6         9-11        12-5

Coding each cell of this table with "id" and "headers" attributes is much
more complicated than using the "scope" attribute shown below:

<table>
<tr>
<th>&nbsp;</th>
<th colspan="2"    scope="col" >Winter</th>
<th colspan="2"    scope="col" >Summer</th>
</tr>
<tr>
<th>&nbsp;</th>
<th scope="col"    >Morning</th>
<th scope="col"    >Afternoon</th>
<th scope="col"    >Morning</th>
<th scope="col"    >Afternoon</th>
</tr>
<tr>
<td scope="row"    >Wilma</td>
<td>9-11</td>
<td>12-6</td>
<td>7-11</td>




                                                                            18
                         <td>12-3</td>
                         </tr>
                         <tr>
                         <td scope="row" >Fred</td>
                         <td>10-11</td>
                         <td>12-6</td>
                         <td>9-11</td>
                         <td>12-5</td>
                         </tr>
                         </table>

                         This table would be displayed as follows:

                                           Winter                 Summer
                                     Morning    Afternoon   Morning  Afternoon
                         Wilma       9-11         12-6       7-11        12-3
                         Fred        10-11        12-6       9-11        12-5

                         Is the summary attribute an option?
                         Although highly recommended by some Web page designers as a way of
                         summarizing the contents of a table, the "summary" attribute of the TABLE
                         tag is not sufficiently supported by major assistive technology manufacturers
                         to warrant recommendation. Therefore, Web developers who are interested
                         in summarizing their tables should consider placing their descriptions either
                         adjacent to their tables or in the body of the table, using such tags as the
                         CAPTION tag. In no event should Web developers use summarizing tables as
                         an alternative to making the contents of their tables compliant as described
                         above.
24. Frames: Web          Frames pose usability problems. For example:                                    Req.   Y/N   Y/N
    files will not use
    frames.                          Printing problems: With frames, it is common to have the print
                                      command result in the printing of a single frame.
http://www.access-                   Search problems: Search engines results link to single pages,
board.gov/sec508/gui                  not framed sets of pages. Some search engines stop when they
de/1194.22.htm#(i)                    encounter frames.
                                     User preferences: Most users prefer frame-free pages. For




                                                                                                                            19
                                    example, when users click “back,” which frame goes back, or
                                    “bookmark,” which one is bookmarked?
                                   Accessibility problems: Most frames result in pages that are
                                    difficult or impossible for users to navigate with screenreader
                                    software or older browsers (version 3 and older).

                         Exceptions may be granted under rare circumstances: Namely when the
                         target audience is small, known, and easily accessible. Contact the Web
                         Team if you believe frames best meet your business needs.

25. Scripts: Web files   What accessibility problems can scripts cause?                                  Req.   Y/N   Y/N
    using scripting      Web page authors have a responsibility to provide script information in a
    languages to         fashion that can be read by assistive technology. When authors do not put
    display content,     functional text with a script, a screen reader will often read the content of
    or to create         the script itself in a meaningless jumble of numbers and letters. Although
    interface            this jumble is text, it cannot be interpreted or used.
    elements, must
    insure that the      How can Web developers comply with this provision?
    information          Web developers working with JavaScript frequently use so-called JavaScript
    provided by the      URL's as an easy way to invoke JavaScript functions. Typically, this
    script shall be      technique is used as part of <a> anchor links. For instance, the following
    identified with      link invokes a JavaScript function called myFunction:
    functional text
    that can be read     <a href="javascript:myFunction();">Start myFunction</a>
    by assistive
    technology.          This technique does not cause accessibility problems for assistive
                         technology. A more difficult problem occurs when developers use images
http://www.access-       inside of JavaScript URL's without providing meaningful information about
board.gov/sec508/gui     the image or the effect of the anchor link. For instance, the following link
de/1194.22.htm#(l)       alsoinvokes the JavaScript function myFunction, but requires the user to
                         click on an image instead of the text "Start myFunction":

                         <a href="javascript:myFunction();"><img
                         src="myFunction.gif"></a>




                                                                                                                            20
This type of link, as written, presents tremendous accessibility problems, but
those problems can easily be remedied. The <img> tag, of course, supports
the "alt" attribute that can also be used to describe the image and the effect
of clicking on the link. Thus, the following revision remedies the accessibility
problems created in the previous example:

<a href="javascript:myFunction();"><img src="myFunction.gif"
alt="picture link for starting myFunction"></a>

Another technique advocated by some developers is to use the "title"
attribute of the <a> tag. For instance, the following example includes a
meaningful description in a "title" attribute:

<a title="this link starts myFunction"
href="javascript:myFunction();"><img src="myFunction.gif"></a>

This tag is supported by some but not all assistive technologies. Therefore,
while it is part of the HTML 4.0 specifications, authors should use the "alt"
tag in the enclosed image.

Finally, the browser's status line (at the bottom of the screen) typically
displays the URL of any links that the mouse is currently pointing towards.

For instance, if clicking on an anchor link will send the user to
http://www.metrokc.gov, that URL will be displayed in the status line if the
user's mouse lingers on top of the anchor link. In the case of JavaScript
URL's, the status line can become filled with meaningless snips of script. To
prevent this effect, some Web developers use special "event handlers" such
as onmouseover and onmouseout to overwrite the contents of the status line
with a custom message. For instance, the following link will replace the
content in the status line with a custom message "Nice Choice".

<a href="javascript:myFcn();" onmouseover="status='Nice Choice';
return true;" onmouseout="status='';"><img src="pix.gif"></a>




                                                                                   21
This text rewritten into the status line is difficult or impossible to detect with
a screen reader. Although rewriting the status line did not interfere with the
accessibility or inaccessibility of the JavaScript URL, Web developers should
ensure that all important information conveyed in the status line also be
provided through the "alt" attribute, as described above.

JavaScript uses so-called "event handlers" as a trigger for certain actions or
functions to occur. For instance, a Web developer may embed a JavaScript
function in a Web page that automatically checks the content of a form for
completeness or accuracy. An event handler associated with a "submit"
button can be used to trigger the function before the form is actually
submitted to the server for processing. The advantage for the government
agency is that it saves government resources by not requiring the
government's server to do the initial checking. The advantage for the
computer user is that feedback about errors is almost instantaneous because
the user is told about the error before the information is even submitted
over the Internet.

Web developers must exercise some caution when deciding which event
handlers to use in their Web pages, because different screen readers provide
different degrees of support for different event handlers. The following table
includes recommendations for using many of the more popular event
handlers:
     onClick – The onClick event handler is triggered when the user clicks
        once on a particular item. It is commonly used on links and button
        elements and, used in connection with these elements, it works well
        with screen readers. If clicking on the element associated with the
        onClick event handler triggers a function or performs some other
        action, developers should ensure that the context makes that fact
        clear to all users. Do not use the onClick event handlers for form
        elements that include several options (e.g. select lists, radio buttons,
        checkboxes) unless absolutely necessary.
     onDblClick – The onDblClick event handler is set off when the user
        clicks twice rapidly on the same element. In addition to the
        accessibility problems it creates, it is very confusing to users and




                                                                                     22
                            should be avoided.
                           onMouseDown and onMouseUp – The onMouseDown and onMouseUp
                            event handlers each handle the two halves of clicking a mouse while
                            over an element – the process of (a) clicking down on the mouse
                            button and (b) then releasing the mouse button. Like onDblClick, this
                            tag should be used sparingly, if at all, by Web developers because it
                            is quite confusing. In most cases, developers should opt for the
                            onClick event handler instead of onMouseDown.
                          onMouseOver and onMouseOut – These two event handlers are very
                            popular on many Web sites. For instance, so-called rollover gifs,
                            which swap images (or background colors) on a Web page when the
                            mouse passes over an image (or cell), typically use both of these
                            event handlers. These event handlers neither can be accessed by the
                            mouse nor interfere with accessibility – a screen reader simply
                            bypasses them entirely. Accordingly, Web designers who use these
                            event handlers should be careful to duplicate the information (if any)
                            provided by these event handlers through other means.
                          onLoad and onUnload – Both of these event handlers are used
                            frequently to perform certain functions when a Web page has either
                            completed loading or when it unloads. Because neither event handler
                            is triggered by any user interaction with an element on the page,
                            they do not present accessibility problems.
                          onChange – This event handler is very commonly used for triggering
                            JavaScript functions based on a selection from within a <select> tag.
                            Surprisingly, it presents tremendous accessibility problems for many
                            commonly used screen readers and should be avoided. Instead, Web
                            developers should use the onClick event handler (associated with a
                            link or button that is adjacent to a <select> tag) to accomplish the
                            same functions.
                          onBlur and onFocus – These event handlers are not commonly used
                            in Web pages. While they don't necessarily present accessibility
                            problems, their behavior is confusing enough to a Web page visitor
                            that they should be avoided.
26. Apps, plug-ins,   Why is this provision necessary?                                               Req.   Y/N   Y/N
    and applets:      While most Web browsers can easily read HTML and display it to the user,




                                                                                                                        23
   When a Web file        several private companies have developed proprietary file formats for
   requires that an       transmitting and displaying special content, such as multimedia or very
   applet, plug-in or     precisely defined documents. Because these file formats are proprietary,
   other application      Web browsers cannot ordinarily display them. To make it possible for these
   be present on the      files to be viewed by Web browsers, add-on programs or "plug-ins" can be
   client system to       downloaded and installed on the user's computer that will make it possible
   interpret page         for their Web browsers to display or play the content of the files. This
   content, the page      provision requires that Web pages that provide content such as RealAudio or
   must provide a         PDF (Adobe Acrobat's Portable Document Format) files also provide a link to
   link to a plug-in or   a plug-in that will meet the software provisions. It is very common for a Web
   applet that            page to provide links to needed plug-ins. For example, Web pages
   complies with the      containing RealAudio almost always have a link to a download source for the
   provisions of this     necessary player. This provision places a responsibility on the Web page
   specification.         author to know that a compliant application exists, before requiring a plug-
                          in.

http://www.access-        How can plug-ins and applets be detected?
board.gov/sec508/gui      Plug-ins can usually be detected by examining a page's HTML for the
de/1194.22.htm#(m)        presence of an <object> tag. Some plug-in manufacturers, however, may
                          require the use of proprietary tags. Like plug-ins, applets can also be
                          identified by the presence of an <object> tag in the HTML source for a Web
                          page. Also, an <applet> tag may also signal the inclusion of an applet in a
                          Web page.
27. Forms: When           Why do electronic forms present difficulties to screen readers?                   Req.   Y/N   Y/N
    electronic forms      Currently, the interaction between form controls and screen readers can be
    are designed to       unpredictable, depending upon the design of the page containing these
    be completed on-      controls. HTML forms pose accessibility problems when Web developers
    line, the form        separate a form element from its associated label or title. For instance, if an
    shall allow people    input box is intended for receiving a user's last name, the Web developer
    using assistive       must be careful that the words "last name" (or some similar text) appear
    technology to         near that input box or are somehow associated with it. Although this may
    access the            seem like an obvious requirement, it is extremely easy to violate because
    information, field    the visual proximity of a form element and its title offers no guarantee that a
    elements, and         screen reader will associate the two or that this association will be obvious
    functionality         to a user of assistive technology.




                                                                                                                               24
   required for
   completion and        The following form demonstrates these problems. Visually, this form is part
   submission of the     of a table and each field is carefully placed in table cells adjacent to their
   form, including all   corresponding labels (formatting forms with tables are by no means the only
   directions and        situation presenting the accessibility problems inherent in forms; tables
   cues.                 merely illustrate the problem most clearly).

http://www.access-       While the relationship between the titles "First Name" or "Last Name" and
board.gov/sec508/gui     their respective input boxes may be obvious from visual inspection, the
de/1194.22.htm#(n)       relationship is not obvious to a screen reader. Instead, a screen reader may
                         simply announce "input box" when encountering each input box. The reason
                         for these difficulties is revealed from inspecting the HTML source for this
                         table. The following code is a simplified version of this table.

                         <form>
                         <table>
                         <tr>
                         <td><b>FIRST NAME: </b></td>
                         <td><input type="text" name="firstname" /></td>
                         </tr>
                         <tr>
                         <td><B>LAST NAME: </b></td>
                         <td><input type="text" name="lastname" /></td>
                         </tr>
                         </table>
                         <p />
                         <input type="submit" value="submit">
                         </form>

                         The two pairs of form elements are indicated in bold above. The problem
                         created by laying out form elements inside this table is now clear – the form
                         elements are separated from their labels by the formatting instructions for
                         the table.

                         How can developers provide accessible HTML forms?
                         The first rule of thumb is to place labels adjacent to input fields, not in




                                                                                                          25
separate cells of a table. For the Web developer who does not wish to place
form elements immediately adjacent to their corresponding titles, the XHTML
1.0 (and HTML 4.0) specification includes the <label> tag that lets Web
developers mark specific elements as "labels" and then associate a form
element with that label. There are generally two ways to use the label tag:
explicit labels and implicit labels.

“Explicit Labels" Work Well
Experience has shown that explicit labeling works extremely well with all
popular assistive technology and are recommended in all but the very
simplest of tables. We recommend that all agencies ensure that their Web
developers are familiar with these important concepts. Using "explicit" labels
involves two distinct steps:

      Use the <label> tag and associated "for" attribute to tag labels. In
       other words, identify the exact words that you want to use as the
       label for the form element and enclose those words in a <label> tag.
       Use the "for" attribute to uniquely identify that element.
      Use the "id" attribute in the associated form element. Every form
       element supports the "id" attribute. By setting this attribute to the
       identifier used in the "for" attribute of the associated <label> tag,
       you "tie" that form element to its associated label. For instance, we
       have rewritten the HTML code for our simple form-inside-a-table to
       include explicit labels below. The new HTML code for the explicit
       labels is indicated in bold:

          <form>
          <table>
          <tr>
          <td><b><label for="first"> FIRST NAME:</label></b></td>
          <td><input type=”text” name=”firstname” id="first"
          /></td>
          </TR>
          <TR>
          <td><B><LABEL FOR="last"> LAST NAME:</LABEL></B></td>
          <td><input type=”text” name=”last” id="last" /></td>




                                                                                 26
                                   </tr>
                                   </table>
                                   <p />
                                   <input type="submit" value="submit" />
                                   </form>

                        In a nutshell, that's all there is to making HTML form elements accessible to
                        assistive technology. Experience has shown that this technique works
                        extremely well in much more complicated and convoluted forms and it
                        should work well in all agency HTML forms.

                        Avoid Using "Implicit Labels"
                        In "implicit" labels, the form element and its associated label are contained
                        within an opening <LABEL> tag and a closing </LABEL> tag. For instance,
                        in the table above, an implicit label to associate the words "First Name" with
                        its associated input cell, we could use an implicit label as follows:

                               <LABEL >
                               <TR>
                               <TD><B>FIRST NAME:</B></TD>
                               <TD><INPUT TYPE="TEXT" NAME="FIRSTNAME"></TD>
                               </TR>
                               </LABEL >

                        Experience has shown that implicit labeling should be avoided for two
                        reasons. First, implicit labeling is not reliably supported by many screen
                        readers and, in particular, does not work well if explicit labels are
                        simultaneously used anywhere on the same Web page. Often, the output
                        can be wildly inaccurate and confusing. Second, if any text separates a label
                        from its associated form element, an implicit label becomes impractical and
                        confusing because the label itself is no longer easily identified with the form
                        element.
28.Timed response:      Why do timed responses present problems to Web users with                         Req.   Y/N   Y/N
   When a timed         disabilities?
   response is          Web pages can be designed with scripts so that the Web page disappears or
   required, the user   expires if a response is not received within a specified amount of time.




                                                                                                                             27
   shall be alerted     Sometimes, this technique is used for security reasons or to reduce the
   and given            demands on the computer serving the Web pages. Someone's disability can
   sufficient time to   have a direct impact on the speed with which he or she can read, move
   indicate more        around, or fill in a Web form. For instance, someone with extremely low
   time is required.    vision may be a slower-than-average reader. A page may time out before he
                        is able to finish reading it. Many forms, when they time out automatically,
http://www.access-      also delete whatever data has been entered. The result is that someone with
board.gov/sec508/gui    a disability who is slow to enter data cannot complete the form. For this
de/1194.22.htm#(p)      reason, when a timed response is required, the user shall be alerted via a
                        prompt and given sufficient time to indicate whether additional time is
                        needed.
29. Changes in          If you use a number of different languages on a page, make sure that any          Req.   Y/N   Y/N
    language:           changes in language are clearly identified by using the "lang" attribute.
    Whenever a Web
    file‟s content      Example:
    shifts from one
    language to            <P>And with a certain <SPAN lang="fr">je ne sais quoi</SPAN>,
    another, the file      she entered both the room, and his life, forever. <Q>My name
    should clearly         is Natasha,</Q> she said. <Q lang="it">Piacere,</Q>
    identify this in       he replied in impeccable Italian, locking the door.</P>
    HTML.
                        Identifying changes in language are important for a number of reasons:
http://www.w3.org/T
R/WCAG10-HTML-             1. Users who are reading the document in braille will be able to
TECHS/#changes-in-            substitute the appropriate control codes (markup) where language
lang                          changes occur to ensure that the braille translation software will
                              generate the correct characters (accented characters, for instance).
                              These control codes also prevent braille contractions from being
                              generated, which could further confuse the user. Braille contractions
                              combine commonly used groups of characters that usually appear in
                              multiple cells into a single cell. For example, "ing" which usually takes
                              up three cells (one for each character) can be contracted into a single
                              cell.
                           2. Similarly, speech synthesizers that "speak" multiple languages will be
                              able to generate the text in the appropriate accent with proper




                                                                                                                             28
                               pronunciation. If changes are not marked, the synthesizer will try its
                               best to speak the words in the primary language it works in. Thus,
                               the French word for car, "voiture" would be pronounced "voter" by a
                               speech synthesizer that uses English as its primary language.
                            3. Users who are unable to translate between languages themselves,
                               will be able to have unfamiliar languages translated by machine
                               translators.

                         Public Health and other agencies use more than one language in the Web
                         files they serve.
30. Pop-ups: Unless      New web pages, pop-ups and pop-unders and other new browser-based                 Req.   Y/N   Y/N
    approved as an       windows shall not be allowed unless approved by the ITS Web Team. Why?
    exception, pop-up
    windows are not                Most users prefer deciding whether to open new windows on their
    allowed.                        own.
                                   New windows do not allow users from using the “back” button
                                    immediately.
                                   Most users are annoyed by the proliferation of pop-ups and pop-
                                    unders, and frequently associate them with advertisements.
                                   Some browsers (notably screenreaders) have difficulty with new
                                    windows.

                         Pop-up windows includes any web file that is spawned from an existing web
                         file when that existing web file remains. Examples include target="_blank"
                         in HTML, and window.open in Javascript.
31. Alternate page:      Content developers should only resort to alternative pages when other             Req.   Y/N   Y/N
    If, after best       solutions fail because alternative pages are generally updated less often
    efforts, you         than "primary" pages. An out-of-date page may be as frustrating as one that
    cannot create an     is inaccessible since, in both cases, the information presented on the original
    accessible page,     page is unavailable. Automatically generating alternative pages may lead to
    provide a link to    more frequent updates, but content developers must still be careful to
    an alternative       ensure that generated pages always make sense, and that users are able to
    page that uses       navigate a site by following links on primary pages, alternative pages, or
    W3C technologies,    both. Before resorting to an alternative page, reconsider the design of the
    is accessible, has   original page; making it accessible is likely to improve it for all users.




                                                                                                                              29
    equivalent
    information (or
    functionality), and
    is updated as
    often as the
    inaccessible
    (original) page.
32. Link verbiage:        Good link text should not be overly general; don't use "click here." Not only
    Clearly identify      is this phrase device-dependent (it implies a pointing device) it says nothing
    the target of each    about what is to be found if the link if followed. Instead of "click here", link
    link.                 text should indicate the nature of the link target, as in "more information
                          about sea lions" or "text-only version of this page."
http://www.w3.org/T
R/WCAG10-
TECHS/#tech-
meaningful-links
33. PIO/Mgr               Review/approval should be performed by an agency public-information                Req.   Y/N   Y/N
    review: Web files     officer, manager, or other business owner to confirm that the page meets
    must be reviewed      King County and agency goals and contains no misspellings, factual errors,
    and approved          or outdated information.
    before being
    published.            Review should occur before first publishing, prior to publishing any revisions,
                          and on an ongoing basis (at least once every six months) to assure accuracy
                          and relevance.
34. Plain language:       Here are a few links to good info about language:                                  Req.   Y/N   Y/N
    Web file content      http://www.w3.org/TR/WCAG10-CORE-TECHS/#comprehension
    should use the        plus:
    clearest and          http://www.metrokc.gov/kcdot/aboutus/style/betwrit.htm and
    simplest language     http://www.metrokc.gov/kcdot/aboutus/style/plainlang.htm
    possible. Also,
    they should be        Spell-checking can be down via many HTML editors and validators
    spell-checked.        (Netmechanic provides this service on page-by-page basis for free, as long
                          as the file is available on the Internet. See http://www.netmechanic.com)
http://www.w3.org/T
R/WCAG10-




                                                                                                                                30
TECHS/#tech-simple-
and-straightforward
35. AP/KC Style:       Got a question? Consult this: http://www.metrokc.gov/kcdot/aboutus/style/          Req.   Y/N   Y/N
    Web-file content
    should follow
    Associated
    Press/King
    County/Metro
    style.
36.<100K limit:        The greater the download size, the greater the risk of losing audience. The        Req.   Y/N   Y/N
    Fully-loaded Web   industry looks to Yahoo! as setting the standard -- 30K (a 10-second
    files should       download using a 56K modem). Build it light, and they will come. 100K is
    remain under       our upper limit. Less -- even lots less -- is preferable.
    100K (file size
    plus images and    There are a number of ways to determine page size. Check the HTML file
    other elements).   size in Windows Explorer, and then in a browser right click on each image to
                       get its size. Then add „em up. Or, if the page in question‟s on the Internet,
                       use the load-time check at Netmechanic Toolbox
                       (http://www.netmechanic.com/toolbox/html-code.htm).

                       If a page with its elements is over 100K, trim it down - start with
                       compressing or removing images and unnecessary code. If you absolutely
                       can‟t, then make sure all links to it contain user warnings about file size (see
                       next point). This will help users determine whether the link is worth clicking.
37.>100K file          Linking to a page whose elements are over 100K? Make sure to warn users,           Req.   Y/N   Y/N
   warning: Web        as per the following:
   files should
   contain user        Check the King County weather report (125K).
   warnings when
   linking to a file
   whose total
   elements add up
   to more than
   100K.
38.Non-Web file        Word-processing, (.rtf and .doc), Acrobat (.pdf), Microsoft Office (.ppt, .xls,    Req.   Y/N   Y/N




                                                                                                                             31
   warning: Web        .mdb), and multimedia files (RealNetworks audio/video, Windows Media,
   files should        Apple Quicktime, Macromedia Flash, etc.) cannot be rendered by browsers
   contain user        alone, and require special software. Warn users beforehand that they‟ll need
   warnings when       the software; if it‟s available for free, link them to directions on how to get
   linking to a file   it. Example:
   requiring a
   software                   Hear today‟s King County weather report (125K RealAudio file).
   application other
   than a browser.     With the “RealAudio” link going to our directions on RealNetworks software
                       here: www.metrokc.gov/rahelp.htm. Directions on Acrobat software are
                       here: www.metrokc.gov/pdfhelp.htm.
39.Ethics: Web-file    King County employees are expected to know basic King County ethics               Req.   Y/N   Y/N
   contents do not     (preferential treatment, conflict of interest, etc.), which are documented at
   violate King        www.metrokc.gov/ethics. Key areas:
   County ethics.
                                Use of county property
                                 (http://www.metrokc.gov/ethics/opinion/index.html#use)
                               Consulting/contracting
                                 (http://www.metrokc.gov/ethics/opinion/index.html#consultant)
40.Law: Web-file       King County employees, or their legal representatives (usually in the             Req.   Y/N   Y/N
   contents do not     Prosecuting Attorney‟s Office), are expected to know King County
   violate             administrative code as well as as local, state, and federal laws. Key areas:
   administrative
   code or local,                Intellectual property (copyrights, patents, and trademarks): If
   state, or federal              King County doesn‟t own or have written permission to use text,
   laws.                          images, pieces of code, whatever, don‟t use „em.
                                 Privacy (http://www.metrokc.gov/terms.htm#privacy)
                                 Liability
                                 Contracts

                       If you‟re creating a Web page or Web site and have even the slightest
                       shadow of a shred of concern that maybe something isn‟t legally spit-spot,
                       contact your PAO rep!
41.Advertising:        Unless part of a contractual obligation, no Web page will needlessly market       Req.   Y/N   Y/N
   Web-file contents   or promote a business, organization, or activity unless it directly relates to




                                                                                                                            32
   do must not           the purpose of the Web page. For example, when users need to use Acrobat
   contain needless      Reader to view a file, the referring Web page may use the term “Acrobat
   advertising.          Reader” and contain a link to information about downloading Acrobat reader,
                         but should not contain advertising-like text, links, or images linking to and
                         promoting Acrobat or its maker, Adobe. (See external link policy, ethical
                         issues, and legal issues.)
42. URLs: Web files      Details here (internal Web site, 41K Word document).                            Req.   Y/N   Y/N
    will use King
    County‟s
    approved Domain
    Name,
    metrokc.gov,
    when providing
    services to the
    public via the
    Internet.
43. Virus check: All     Easily performed using your desktop virus-checking program. If you don‟t        Req.   Y/N   Y/N
    files must be        know how to use this, check with your LAN-administrator.
    virus-checked
    prior to
    publication or
    republication.
44. Essential files      Keep only what users need online, and remove anything else that‟s not           Req.   Y/N   Y/N
    only: No test,       intended for them. Backup copies, archive copies, trial pages, _vti-related
    outdated, backup,    files generated by Frontpage, etc should not be placed on a production web
    or other files not   server.
    intended for
    Internet             Prohibited files: Do not upload.exe, .bat, and .cmd files to production
    publication shall    servers, as they‟re prohibited. Such files can cause web-server failure.
    be published. No     Though if necessary to deliver to an Internet audience, they may be
    .exes, .bats, or     compressed to zip format and placed on a server – but make sure to provide
    .cmds.               users a link to the zip tools they‟ll need.
45. Pre-publish          Using this spec sheet as a checklist, testing should be done using the most     Req.   Y/N   Y/N
    testing: Prior to    widely used browsers (IE 6.0 and Firefox 1.5.0.4 for the main Web site, as
    launch or any        of Aug. 20, 2006) as well as a screenreader simulator, such as Lynx.




                                                                                                                            33
    upgrade, agencies    Browsers, including Lynx, are available at http://browsers.evolt.org/. A Lynx
    shall test pages     emulator is available at http://ugweb.cs.ualberta.ca/~gerald/lynx-me.cgi.
    on a test site, or
    employ a third
    party to do so.
46. Redirects: When      Highly recommended! To prevent users from reaching dead-ends on your
    removing old         site (a common event when files are deleted and search engines or other
    pages, web           links lead users to those defunct locations), replace any files due for archive
    authors shall        with a page with redirector code, such as the following:
    replace them with
    redirector pages     <meta HTTP-EQUIV="refresh"
    for at least six     content="5;url=http://www.metrokc.gov/oldfile.htm">
    months.
                         In the above code, “5” refers to the five seconds until the user is redirected
                         to a new file. Often, a message is included for the user to read during these
                         five seconds such as “The page you are visiting has moved; you will be
                         redirected to the new pages in five seconds.” You can change the number of
                         seconds; five seconds is often enough.

                         Also, the URL in the above code refers to the destination URL. The
                         destination URL should either be the new location of the old file, or an
                         appropriate page should there be no version of the new file (a home page,
                         for example).

47. Backup: Web          Web authors are ultimately responsible for backup and/or archiving of their         Req.   Y/N   Y/N
    authors shall back   data files. ITS provides backup as a courtesy, and cannot guarantee retrieval
    up code locally to   of files, nor even an attempt to retrieve files within a specific period of time.
    prevent data loss.
48. Home page link:      If you‟re publishing a new page and seek a link to it from upper-level King
    Want one?            County Web pages, including the home page, e-mail the Web Team!




                                                                                                                                34

				
DOCUMENT INFO
Shared By:
Categories:
Tags:
Stats:
views:3
posted:12/17/2011
language:English
pages:34