The King County Web Page Specification:
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 firstname.lastname@example.org. We‟ll do what we can!
screenreaders employed by
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
“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
“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 email@example.com, 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
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:
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>
<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
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
HTML 4.01 information and guidelines:
Validate using an appropriate tool (HTML Validator, http://validator.w3.org/,
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
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
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
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.
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.
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.
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
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.)
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.
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
Not sure whether your page meets this standard? E-mail
firstname.lastname@example.org, 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.
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.
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.
per the King
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
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.
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
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.
other written Ideally, font styles and colors can be declared in a separate CSS stylesheet
material (see XHTML and CSS).
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
and other written declarations are included in external CSS files).
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
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-
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
"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:
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
What are ways of assigning text to elements?
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
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
presentation would be required so someone reading the captions could also watch the
should be speaker and associate relevant body language with the speech.
the presentation. If a Web site offers audio files with no video, do they have to be
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.
National Endowment for the Humanities
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.
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
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
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.
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.
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
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.
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
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:
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:
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.
<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>
<tr> <td scope="row" >Wilma</td> <td>10-6</td> <td>10-6</td>
<tr> <td scope="row" >Fred</td> <td>10-6</td> <td>10-6</td>
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
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).
<th colspan="2" id="winter" >Winter</th>
<th colspan="2" id="summer" >Summer</th>
<th id="am1" >Morning</th>
<th id="pm1" >Afternoon</th>
<th id="am2" >Morning</th>
<th id="pm2" >Afternoon</th>
<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>
<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>
This table would be displayed as follows:
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:
<th colspan="2" scope="col" >Winter</th>
<th colspan="2" scope="col" >Summer</th>
<th scope="col" >Morning</th>
<th scope="col" >Afternoon</th>
<th scope="col" >Morning</th>
<th scope="col" >Afternoon</th>
<td scope="row" >Wilma</td>
<td scope="row" >Fred</td>
This table would be displayed as follows:
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
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
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.
insure that the How can Web developers comply with this provision?
script shall be technique is used as part of <a> anchor links. For instance, the following
technology. This technique does not cause accessibility problems for assistive
technology. A more difficult problem occurs when developers use images
board.gov/sec508/gui the image or the effect of the anchor link. For instance, the following link
click on an image instead of the text "Start myFunction":
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:
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"
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
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".
return true;" onmouseout="status='';"><img src="pix.gif"></a>
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
ensure that all important information conveyed in the status line also be
provided through the "alt" attribute, as described above.
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
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
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
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
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,
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-
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
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.
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.
<td><b>FIRST NAME: </b></td>
<td><input type="text" name="firstname" /></td>
<td><B>LAST NAME: </b></td>
<td><input type="text" name="lastname" /></td>
<input type="submit" value="submit">
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
How can developers provide accessible HTML forms?
The first rule of thumb is to place labels adjacent to input fields, not in
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:
<td><b><label for="first"> FIRST NAME:</label></b></td>
<td><input type=”text” name=”firstname” id="first"
<td><B><LABEL FOR="last"> LAST NAME:</LABEL></B></td>
<td><input type=”text” name=”last” id="last" /></td>
<input type="submit" value="submit" />
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:
<TD><INPUT TYPE="TEXT" NAME="FIRSTNAME"></TD>
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
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.
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
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>
Identifying changes in language are important for a number of reasons:
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
2. Similarly, speech synthesizers that "speak" multiple languages will be
able to generate the text in the appropriate accent with proper
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
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?
windows are not Most users prefer deciding whether to open new windows on their
New windows do not allow users from using the “back” button
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
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"
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.
is updated as
often as the
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."
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.
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
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
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)
35. AP/KC Style: Got a question? Consult this: http://www.metrokc.gov/kcdot/aboutus/style/ Req. Y/N Y/N
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
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:
contain user Check the King County weather report (125K).
linking to a file
elements add up
to more than
38.Non-Web file Word-processing, (.rtf and .doc), Acrobat (.pdf), Microsoft Office (.ppt, .xls, Req. Y/N Y/N
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:
software Hear today‟s King County weather report (125K RealAudio file).
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
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:
Use of county property
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:
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.
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
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
services to the
public via the
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.
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.
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 184.108.40.206 for the main Web site, as
launch or any of Aug. 20, 2006) as well as a screenreader simulator, such as Lynx.
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">
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,
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!