Quick 508 accessibility guideline.

Quick 508 accessibility guideline for web site designers


Based on information from :

  • Guide to the Section 508 Standards for Electronic and Information Technology ( http://www.access-board.gov)

  • “Accessibility for Everybody” – by Joan Paul Mueller. ISBN 1-59059-086-4

  • Web-based Intranet and Internet Information and Applications (1194.22) (http://www.access-board.gov/sec508/guide/1194.22.htm)

  • Web Accessibility Initiative (WAI) (http://www.w3.org/WAI/)

Note: his document is not official government 508 standard requirements for Federal agencies, but it based to that requirements. The purpose of this 508 accessibility guideline is to summaries and create smaller guideline with code samples that web designer may follow while creating web sites that will be assessable for people with disability. The below rules are required for Government agencies for all others it is guideline that we all need to follow in respect to individuals with disability.
Validate your web site with: http://validator.w3.org/ – do not be scared by your results.

508 guadelines contents. (not in order)

Go to TOP

<–The value of the LANG attribute must be set to one of the (ISO 639 language codes – http://www.oasis-open.org/cover/iso639a.html )–>

<HTML lang=”fr”>
<HEAD> <TITLE>Un document multilingue</TITLE> </HEAD>
<!– more on language.–>
<HTML lang=”fr”>
<TITLE>Un document multilingue</TITLE>
<P>…Interpreted as French…</P>
<P lang=”es”>…Interpreted as Spanish…</P>
<P>…Interpreted as French again…</P>
<P>…French text interrupted by <EM lang=”ja”>some
Japanese</EM> French begins here again…</P>
<!– If the text for which you are changing the language is not the sole content of a given HTML element, you may wrap the section in a SPAN tag and apply the “lang” attribute to that, for example:–>
<P lang=”en”>This paragraph combines English <SPAN lang=”fr”>et Français</SPAN>.</P>

Go to TOP

<!–Tables alt tag–>
Like “alt” text for images, each TABLE element should contain a “summary” attribute that briefly describes the table structure and purpose. –><TABLE border=”border” summary=”This table charts the number of
cups of coffee consumed by each senator, the type of coffee
(decaf or regular), and whether taken with sugar.”>
<CAPTION> Cups of coffee consumed by each senator </CAPTION>
<!–table cells here–>
<!–Adding a table summary is especially useful for non-visual users.–>

<!–Table –>
<TABLE border=”1″
summary=”This table charts the number of
cups of coffee consumed by each senator,
the type of coffee (decaf or regular),
and whether taken with sugar.”>
<CAPTION>Cups of coffee consumed by each senator</CAPTION>
<TH id=”header1″>Name</TH>
<TH id=”header2″>Cups</TH>
<TH id=”header3″ abbr=”Type”>Type of Coffee</TH>
<TH id=”header4″>Sugar?</TH>
<TD headers=”header1″>T. Sexton</TD>
<TD headers=”header2″>10</TD>
<TD headers=”header3″>Espresso</TD>
<TD headers=”header4″>No</TD>
<TD headers=”header1″>J. Dinnen</TD>
<TD headers=”header2″>5</TD>
<TD headers=”header3″>Decaf</TD>
<TD headers=”header4″>Yes</TD>

<!– 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.–>
<th> </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> <td scope=”row” >Wilma</td> <td>10-6</td> <td>10-6</td> <td>9-5</td> <td>9-5</td>
<tr> <td scope=”row” >Fred</td> <td>10-6</td> <td>10-6</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

<!–Example. A speech synthesizer might render this tables as follows:Caption: Cups of coffee consumed by each senator
Summary: This table charts the number of cups of coffee
consumed by each senator, the type of coffee
(decaf or regular), and whether taken with sugar.
Name: T. Sexton, Cups: 10, Type: Espresso, Sugar: No
Name: J. Dinnen, Cups: 5, Type: Decaf, Sugar: Yes –>

Go to TOP


The FONT tag with the “size” attribute — Use “+” or “-” with a size to make the size one size larger (as defined by the browser, usually about 120%); for example, +1. Do not use fixed sizes such as “1”, which may appear unexpectedly small on some configurations.It is recommended that you use style sheets instead of FONT to format text.

<!–ALT text. see:1194.22.htm#(a)–>
The alt text is used only for a brief summary of an object’s function; longer alt text is too unwieldy for this purpose
( WAI checkpoint 1.1 – http://www.w3.org/TR/1999/WAI-WEBCONTENT-19990505/#tech-text-equivalent)
<IMG src=”http://911cybersecurity.com/wp-content/uploads/2008/01/https://www.newyorkdesignagency.com/wp-content/uploads/2008/01/approved3_2.gif” mce_src=”approved3_2.gif” ALT=”Bobby Approved” LONGDESC=”approved3_2id.html”> <A href=”approved3_2id.html” mce_href=”approved3_2id.html”>D</A>
<!–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.–><IMG src=”transparent.gif” mce_src=”transparent.gif” alt=””>

<!– The ABBR and ACRONYM–>
<!– elements allow authors to identify the expanded meaning of abbreviations and acronyms to the computer. The expanded meaning is identified by the value of the “title” attribute. For example: –>
<ABBR title=” California “>CA</ABBR> <ACRONYM title=”World Wide Web”>WWW</ACRONYM>
<!–Note that it is only necessary to use ABBR and ACRONYM where the abbreviation or acronym first occurs in the document; not for every instance. –>

Go to TOP


<!–Audio and video presentations–>
<!–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, If the presentation is audio only, a text transcript would meet this requirement.–>
<!–Multimedia includes both audio and video. Live audio and video webcast speech, considered as multimedia presentation and would require the speech to be captioned to meet 508 assesobility requirements complients
QuickTime and SMIL, allow captions and video descriptions to be added to the multimedia presentation. If the format used does not support synchronized captions, an alternative video with captions embedded in the video can be provided
<!–Java applets–>

<!–<APPLET> tag for Java applets also accepts an “alt” attribute, but it only works for browsers that provide support for Java. Often, users with slower internet connections will turn support for Java applets off. A better alternative for providing textual descriptions is to simply include the alternative text between opening and closing <APPLET> or <OBJECT> tags. For instance, if a web designer 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 designer 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>
<!–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=”http://911cybersecurity.com/wp-content/uploads/2008/01/https://www.newyorkdesignagency.com/wp-content/uploads/2008/01/pictureofme.jpg” mce_src=”pictureofme.jpg”>

<!–Applet, plug-in’s and objects in general –>
All OBJECT elements should contain alternative content to serve as a fallback if the object’s media is not supported. Provide alternative HTML-based content that duplicates or describes the function of the OBJECT for those users who are unable to access it in its original form.
For example:
<OBJECT classid=”java:Press.class” width=”500″ height=”500″
title=”Java applet: how temperature affects pressure.”>
<APPLET code=”java:Press.class” width=”500″ height=”500″>

As temperature increases the velocity of the molecules in the

MPEG movie on the page, or alternatively, an image, if the browser doesn’t support mpeg movies or the OBJECT element:

<OBJECT DATA=”dog.mpeg” TITLE=”Dog barking” TYPE=”image/mpeg”
WIDTH=”500″ height=”500″>
<IMG src=”http://911cybersecurity.com/wp-content/uploads/2008/01/https://www.newyorkdesignagency.com/wp-content/uploads/2008/01/dog.gif” mce_src=”dog.gif” ALT=”Dog barking”>
This is important for users whose browsers do not support the OBJECT tag or the media type of the object.
In short for. Your web page must provide a link to a plug-in or applet that complies with §1194.21(a) through (l).

Colors for web page
To determine if this requirement is being met: by either viewing the page on a black and white monitor, or by printing it out on a black and white printer.Many printer’s default setting set to BG not printed they assumes that page’s BG color not Black so, if web page has Black or very dark BG but fonts are light you may see nothing on you print out. You see nothing on printout or if it is hard to see the text on the page that page might not complies with 508 accessibility guideline.
With some kind of visual disability it is important to have option to change page’s BG and text color. Ex.http://www.disabilityinfo.gov/ – provide option to change page to ‘High Contrast’ and ‘No Graphics’ option

Web Color Chart:http://www.websubmissionservice.com/tools.htm
Web color simulation control: http://colorlab.wickline.org/colorblind/colorlab/
Run you site with color filter Colorblind Web Page Filter (http://colorfilter.wickline.org/)

Go to TOP

<!–Client-side image map (see §1194.22(a)). –>
<!–Identify an image for the map. First, an image must be used in a client-side image map. This image is identified using the <img> tag. To identify it as a map, use the “usemap” attribute.–>
<!–Use the <MAP> tag to “areas” within the map . The <MAP> tag is a container tag that includes various <AREA> tags that are used to identify specific portions of the image.–>
<!–Use <AREA> tags to identify map regions . To identify regions within a map, simply use <AREA> tags within the <MAP> container tags. Making this client-side image map accessible is considerably easier to describe: simply include the “ALT” attribute and area description inside each <AREA> tag. The following HTML demonstrates how to make a client-side image map:–>

<img src=”http://911cybersecurity.com/wp-content/uploads/2008/01/https://www.newyorkdesignagency.com/wp-content/uploads/2008/01/navbar.gif” mce_src=”navbar.gif” border=”0″ usemap=”#Map”>
<map name=”Map”>
<area shape=”rect” coords=”0,2,64,19″ href=”general.html” mce_href=”general.html” alt=”information about us” >
<area shape=”rect” coords=”65,2,166,20″ href=”jobs.html” mce_href=”jobs.html” alt=”job opportunities” >
<area shape=”rect” coords=”167,2,212,19″ href=”faq.html” mce_href=”faq.html” alt=”Frequently Asked Questions” >
<area shape=”rect” coords=”214,2,318,21″ href=”location.html” mce_href=”location.html” alt=”How to find us” >
<area shape=”rect” coords=”319,2,399,23″ href=”contact.html” mce_href=”contact.html” alt=”How to contact us” >

<!–Frames see 1194.22.htm#(i).–>
<!– When frames are used in a web page, the first page that is loaded must include a <frameset> tag that encloses the basic layout of the frames on the page. Within the <frameset> tag, <frame> tags specify the name, initial contents, and appearance of each separate frame. Thus, the following example uses the “title” attribute to label one frame “Navigational Links Frame” and the second frame “Contents Frame.” –>
<frameset cols=”30%, 60%”>
<frame src=”navlinks.html” mce_src=”navlinks.html” name=”navlinks” title=”Navigational Links Frame”>
<frame src=”geninfo.html” mce_src=”geninfo.html” name=”contents_page” title=”Contents Frame”>
<!–While assistive technology does not yet widely support the “title” attribute, we recommend including this attribute in web pages using frames.–>

Go to TOP


<!– JavaScript –>
<a href=”javascript:myFunction();” mce_href=”javascript:myFunction();”>Start myFunction</a>
<!–This technique does not cause accessibility problems for assistive technology. –>
<a href=”javascript:myFunction();” mce_href=”javascript:myFunction();”><img src=”myFunction.gif” mce_src=”myFunction.gif”></a>
<!–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();” mce_href=”javascript:myFunction();”><img src=”myFunction.gif” mce_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();” mce_href=”javascript:myFunction();”><img src=”myFunction.gif” mce_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.
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.usdoj.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();” mce_href=”javascript:myFcn();” onmouseover=”status=’Nice Choice’; return true;” onmouseout=”status=”;”><img src=”pix.gif” mce_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 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 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.
The following table includes recommendations for using many of the more popular event handlers:Note. This is part about JavaScript was just copy from 1194.22.htm#(l) since it is important and it hard to make it shorter..

  • 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 gif’s, which swap images on a web page when the mouse passes over an image, 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. –>

Go to TOP


<!–Text-only page–>
<!–A text-only page, with equivalent information or functionality The content of the text-only page shall be updated whenever the primary page changes.You may displays a text only page on home page but in addition it is usefull to have links that change appiarense of the page:Preferences:

  • Skip to Page Content – go to page contents by skiping header and top banners.

  • Low Graphics – less graphics and other easy to read web page layout

  • High Contrast – with balck BG and not white text.

  • No Graphics – real text only page…

  • Hovever it is optional to add fonts and Bg color script to the site A a , A a , A a , and it will really help many user to read contents, but it is not supported by 508 gudeline (no official info)

HTML code for text only: –>
<div ID=”textonly”> <p><a HREF=”../textonly/pagename.html”>Text Only</a> </p></div>

Go to TOP
<!– Form –>
<!–“Explicit Labels”
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.

  • 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><B><LABEL FOR=”last”> LAST NAME:</LABEL> </B></TD>
<!– This technique works extremely well in much more complicated and convoluted forms and it should work well in most assistive technology. –>
<!– 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: –>
<!– Implicit labeling should be avoided

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

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

<!– Repetitive navigational links –>Section 508 rule requires that when repetitive navigational links are used, there must be a mechanism for users to skip repetitive navigational links.Skip Navigational Links — must be made.
Go to TOP


<!– Flash –>
All federal websites, must comply with these guidelines.
If a SWF file does not communicate all of the information to the screen reader, the SWF file is no longer Section 508-compliant.What we could do to make Flash more accessible.

  • MSAA is currently not supported in the opaque windowless and transparent windowless modes. (These modes are options in the HTML Publish Settings panel, available for use with the Windows version of Internet Explorer 4.0 or later, with the Flash ActiveX control.) To make your Flash content accessible to screen readers, avoid using opaque windowless and transparent windowless modes.

  • In Macromedia Flash 8, text equivalents (alt) are not needed for all elements of a Macromedia Flash movie. Using the autolabeling feature, text equivalents are automatically provided for several elements. Moreover, designers and developers may use the Make Child Object Accessible feature to hide elements that convey no content or are difficult to render using assistive technologies.

  • Some Macromedia Flash content will never be accessible using the current Macromedia Flash Player. Such content includes dynamic text variables and custom navigational elements, which are not exposed to the operating system using the same methods as HTML.

  • Flash applications must be viewed in Internet Explorer on Windows, because Microsoft Active Accessibility (MSAA) support is limited to this browser.

  • Some visitors might have difficulty reading small text or seeing small graphics. Allow users to zoom in on these elements, taking advantage of scalable vector graphics in SWF files.

  • Provide audio narration

  • Consider providing an audio narration for visitors without a screen reader, or where screen readers might not work, such as with video content.

  • Provide captions for audio narrations.

  • Some visitors might not be able to hear an audio narration for your site or a video. Consider providing captions for these visitors.

  • Do not rely on color to communicate information

  • Many visitors might be color blind. If you rely on color to communicate information (such as: Click the green button to go to page 1, click the red button to go to page 2), provide text or speech equivalents.

  • Parts of your SWF file can be exposed to screen readers. Text elements (such as text fields, static text, and dynamic text), buttons, movie clips, components, and the entire SWF file can be interpreted by MSA-compliant screen readers

Minimum requirements for 508 compliant Flash.
• Macromedia Flash Player 6 or later. This version of the player serves as a minimum requirement for accessible Flash content (+ link to download)
• Windows 98, 2000 or XP
• Microsoft Internet Explorer 5 or later (+ link to download)
• Screen readers:
• GW Micro Window Eyes 4.2 or later (+ link to download)
• Freedom Scientific JAWS 4.5, 6.1 or later (+ link to download)
• IBM Home Page Reader 3.04 (+ link to download)
• Dolphin HAL 6.50 (+ link to download)
• KDS PC Talker (Japan)

While there have been recent improvements to the Apple Macintosh OS 10.4 release (Tiger), including built in screen reader called VoiceOver, the Flash Player does not support this screen reader.
Internet Explorer currently the only accessible browser available.
The Mozilla Project has made some improvements with the Firefox Browser, and support for screen readers will soon be available. However, the version of the Flash Player that runs in Firefox is not yet accessible. (I need to check more about Firefox)
While the future of cross platform and cross browser accessibility looks promising (with the recent improvements at Apple and Mozilla), the reality is that today, people with disabilities are almost exclusively restricted to using Windows with Internet Explorer. For now, user should feel comfortable viewing content using Windows with Internet Explorer.
For moer information on how to make Flash movie 508 accesible is to read this article made by macromedia team. read it.
Flash provide support for MSAA built into Macromedia Flash Player 8 see how to use it.
Flash Player 8 Accessibility Overview Read about Flash player 8
Flash accessibility tutorial – http://www.adobe.com/resources/accessibility/flash8/

Go to TOP

<!–CSS elements and other meta tag–>
<!–the “safest” and most useful form of style sheets are “external” style sheets, in which the style rules are set up in a separate file. An example of an external style sheet is:–>
<link rel=stylesheet type=”text / css” href=”section508.css>

<!–Web font syntax for CSS is: –>@font-face {
font-family: “font_name“; src: url(URL)
<!–where font_name is the name assigned to the font, and URL is the URL of the Web Font file. For example, the following style declarations: –>
<style type=”text/css”>
@font-face {
font-family: “Broadway”;
h1 {
font-family: Broadway, Arial, serif
<!–will cause the Web browser to retrieve the Broadway font and then use it to display all h1 header text. –>

<!– Printing controls –>
<!– to specify a page size of 8.5 inches wide by 11 inches high, use the attribute: –>
@page {size: 8.5in 11in}
<!– or to specify landscape orientation for the printout, use the attribute: –>
@page {size: landscape)
<!–To control the size of the page margins, use the margin attribute, as follows: –>
@page {margin: 1in}
<!–to create a 1 inch margin around the page content. If you want to specify different margin sizes, use the following attributes: –>
@page {margin-top: 0.5in; margin-right: 1in; margin-bottom: 1in; margin-left: 0.5in}
<!– Paragraph –>
<!– The widow attribute can be used to specify the maximum number of widow lines. To set the maximum value to two lines for every paragraph, use the style: –>
p {widow: 2}
<!–Similarly, orphans are lines left at the bottom of a page. To control the size of the orphan or orphan lines, use the orphan attribute. For example, the style: –>
p {orphans: 2}
<!–will limit the size of the orphan lines to two lines for every paragraph in the document. –

Go to TO

Back to – YouNeedItAll.com