Using the Accessibility Checker on Web Pages
The Accessibility Checker examines user-generated HTML code for the following P1 and P2 level features. An HTML page must meet these levels to qualify as accessible under standards defined by the Web Content Accessibility Guidelines (WCAG) and United States Access Board.
| HTML FEATURE | SUMMARY | EXAMPLE | MESSAGE CHECKER DISPLAYS | WCAG PRIORITY |
| Anchor (<a>) | Do not create links with “javascript” as the HREF value. | <a href="javascript:alert ‘Example’)">Alert</a> | Provide alternative content for each SCRIPT that conveys important information or functionality. Avoid creating links that use "javascript" as the URI. | P2 |
| Every <a> tag must have a title attribute with a value explaining the link. If not needed, use title="””. | <a href=”#mainContent” title="”Skip" navigation and jump directly to main content of this page.”>Skip Links</a> | Add a descriptive title to links when needed. | P2 | |
| If the result of clicking a link opens a pop-up window or changes the active window, use the title attribute. | <a href=”home.html” title="”Opens" the home page in new window on top of this window.” Target=”_blank”>Open home page </a> | If scripts create pop-up windows or change the active window, make sure that the user is aware this is happening. | P2 | |
| A complete transcript must accompany all media files, such as video or sound. | <a href=”Blackbaud_jingle.mp3” title="”To" the tune of ‘Oh, Susana’, O, Blackbaud, we love to work for you.”>Listen to our theme song</a> | Do all audio files have transcripts? | P1 | |
| The linked text should make sense by itself. |
Poor: <a href=”#mainContent” title="”Skip" navigation and jump directly to main content of this page.”>Click</a> Good: <a href=”#mainContent” title="”Skip" navigation and jump directly to main content of this page.”>Skip navigation.</a> |
Create link phrases that make sense when read out of context. | P2 | |
| Alt attribute | Each unique link should have unique link text or a unique link image). |
Poor: <a href=”index.html”>Click</a> Good: <a href=”index.html”>Home</a> |
Do not use the same link phrase more than once when the links point to different URLs. | P2 |
| Alt text should not exceed 150 characters. If it does, you must provide a separate plain text or HTML file containing the long description. | <img src=”history_graph.gif” alt=”Detailed summary of history from 1999 founding to IPO.” Longdesc=”history.html” /><a href=”history.html” title="”Load" the detailed history of the company.”>D</a> | ALT text >150 characters, consider providing a separate description. | P1 | |
| Applet (<applet> | The information delivered by a JAVA applet must be provided for users whose software does not support JAVA. | <applet src=”someJava.class” alt=”WYSIWYG editor: if JAVA not supported use text field that follows.”></applet> | Provide accessible alternatives to the information in scripts, applets, or objects | P1 |
| This is effectively the same as the Alt attribute above. | <applet src=”someJava.class” alt=”Animation of cat chasing dog.”></applet> | Provide alternative text for each APPLET. | P1 | |
| The <applet></applet> is now obsolete. Use <object></object>. | <object data=”someJava.class” alt=”Animation of cat chasing dog.”></object> | Avoid use of obsolete language features if possible. Use <OBJECT> instead of <APPLET>. | P2 | |
|
Image map (<area>) |
Any clickable hotspot within an image map must have an alt attribute with a value. |
<map> <area shape=”rect” coords=”1,1,50,50” alt=”Click within this area to load Blackbaud.” href=”main.html” /> <area shape=”rect” coords=”71,71,72,72” alt=”Click within this area to load our competitor.” href=”blank.html” /> </map> <a alt=”Click to load Blackbaud.” href=”main.html”>Blackbaud</a> <a alt=”Click to load our competitor.” href=”blank.html”>Competitor</a> |
Provide alternative text for all image map hot-spots (AREAs) | P1 |
| Provide text links that correspond to any image map areas. |
<map> <area shape=”rect” coords=”1,1,50,50” alt=”Click within this area to load Blackbaud.” href=”main.html” /> <area shape=”rect” coords=”71,71,72,72” alt=”Click within this area to load our competitor.” href=”blank.html” /> </map> <a alt=”Click to load Blackbaud.” href=”main.html”>Blackbaud</a> <a alt=”Click to load our competitor.” href=”blank.html”>Competitor</a> |
Are there text links that duplicate all server-side image map hot-spots? | P2 | |
| Use client-side image maps. There is no reason to use a server-side image map. If you insist on using a server-side image map, provide text links as above. |
<A HREF="/cgi-bin/imagemap/;imgtest.map"> <IMG SRC=" /imgtest.gif" ISMAP alt="a server-side image map doesn’t provide accessible links."></a> <a href=”main.html” alt=”How to make a hotspot from the above server-side image map accessible.”>Home</a> |
Provide client-side image maps instead of server-side image maps except where the regions cannot be defined with an available geometric shape. Provide redundant text links for each active region of a server-side image map. | P1 | |
| Bold (<b>) | <b> is deprecated. Use <strong>. | <strong>Arnold</strong> | Avoid use of obsolete language features if possible. Use <STRONG> instead of <B>. | P2 |
| Color Contrast | Sufficient contrast and color difference must be provided to separate foreground from background. |
<body bgcolor=”white”> <div style=”background-color:black”>Black text</div>. |
Background color changed without changing foreground color. --AND-- Foreground color changed without changing background color. |
P2 for images or P3 for text |
| Basefont (<basefont>) | Avoid deprecated HTML tags. |
<style>body {font-family:arial} </style> |
Avoid use of obsolete language features if possible. Use style sheets instead of <BASEFONT>. | P2 |
| Center | Avoid deprecated HTML tags. | <p style=”text-align:center”>Center</p> | Avoid use of obsolete language features if possible. Use style sheets instead of <CENTER>. | P2 |
| Mouse Required | Avoid event handlers that require the use of a mouse. |
Poor: <img src=”a.gif” onMouseover=”alert(‘Hi’)” alt=”hi” /> Good: <img src=”a.gif” onKeyup=”alert(‘Hi’)” alt=”hi” /> |
If objects use event handlers, make sure they do not require use of a mouse. | P2 |
| Font Properties | Do not use the obsolete <font> tag. Use style sheets instead. | <p style=”font-style:underline;color:green;font-family:arial”>Green, underlined Arial text</a> | Avoid use of obsolete language features if possible. Use style sheets instead of <FONT>. | P2 |
| Avoid absolute font sizes, such as 12px or 84in. Use relative sizing instead. | <p style=”font-size:12em”>EM is scalable.</a> | Use relative sizing (% values) rather than absolute for fonts. Use SIZE=+/- on FONT tags and font sizes in % or EM for style sheets. | P2 | |
| Frames (<frame> and <frameset>) | Each <frame> tag should have a name. |
<frameset> <frame name=”home” title="”Home" Page” src=”index.html” /> <frame name=”nav” title="”Nav" page” src=”nav.html” /> </frameset> |
Give each frame a name. | P2 |
| For every frameset, provide a corresponding NOFRAMES section. |
<frameset> <frame name=”home” title="”Home" Page” src=”index.html” /> <frame name=”nav” title="”Nav" Page” src=”nav.html” /> </frameset> <noframes> <a href=”index.html” alt=”Main page”>Blackbaud Home</a> <a href=”nav.html” alt=”Links page”>Nav</a> <’/noframes |
Provide a NOFRAMES section when using FRAMES. | P2 | |
| Do not use empty frames for page design. Each frame must load an HTML page. | Poor: <frameset> <frame name=”home” /> <frame name=”nav” src=”nav.html” /> </frameset> |
Each FRAME must reference an HTML file. | P1 | |
| Provide a title attribute with an appropriate descriptive value for each <frame> | <frameset>
<frame name=”home” title="”Home" Page” src=”index.html” /> <frame name=”nav” title="”Nav" page” src=”nav.html” /> </frameset> |
Give each frame a title. | P1 | |
| Specify the rows and columns in a frameset using relative sizing values (%). | <frameset cols = "50%, 50%"> <frame name=”home” title="”Home" Page” src=”index.html” /> <frame name=”nav” title="”Nav" page” src=”nav.html” /> </frameset> |
Use relative sizing (% values) rather than absolute (pixels) for rows and columns in FRAMESETs. | P2 | |
| Header Tags | Use the six header tags to indicate logical heading structure within a document, not for formatting and rendering text as bold. | Poor: <p>Some text in one paragraph.</p> <h3>Bold text in another paragraph.</p> |
Nest headings properly. Make sure header elements are not used only for bold text. | P2 |
| Italics | The <i> tag is deprecated. To render text as italic use either the <em></em> tag or style sheets. |
<span style=”font-style: italic”>This is best.</span> <em>This is okay.</em> <i>This is right out.</i> |
Avoid use of obsolete language features if possible. Use <em> instead of <i>. | P2 |
| Images | Always provide an alt attribute. For spacers, use alt=””. For other images, that actually represent something, provide a meaningful equivalent of the image. |
<img src=”spacer.gif” alt=”” /> <img src=”Blackbaud.gif” alt=”Explode your online fundraising and constituent activities with Blackbaud.” /> |
Provide alternative text for all images. | P1 |
| Image button | When using an image instead of the submit button, be sure to add an alt attribute with an appropriate descriptive value. | <input type=”image” src=”Blackbaud_power.gif” alt=”Click this button to launch your brilliant career online thanks to Blackbaud.” /> | Provide alternative text for all image-type buttons in forms. | P1 |
| Longdesc and D Link | If you use the longdesc attribute with a complicated image, such as a bar chart, you must also provide a D link to the page that contains the explanatory text. | <img src=”history_graph.gif” alt=”Detailed summary of Blackbaud’s history from founding in 1999 through its IPO.” Longdesc=”Blackbaud.html” /><a href=”Blackbaud.html” title="”Load" the detailed history of Blackbaud.”>D</a> | Do you have a descriptive (D) link in addition to LONGDESC? | P1 |
| Object | As with the (deprecated) <applet> tag, the information delivered by an object must be provided for users whose software does not support the protocol. | <object classid=”abc” data=”someJava.class” alt=”Java applet depicts cat chasing dog.”>This is alternative text that will display should the Java fail to run. The applet referenced depicts a dog barking at a cat. The cat becomes annoyed and chases the dog around a house.</object> | Provide accessible alternatives to the information in scripts, applets, or objects. | P1 |
| Always include an alt attribute with a value for the <object></object> | <object classid=”abc” data=”someJava.class” alt=”Java applet depicts cat chasing dog.”>The applet referenced depicts a dog barking at a cat. The cat becomes annoyed and chases the dog around a house.</object> | Provide alternative text for each OBJECT. | P1 | |
| The classid attribute is required for an <object> tag. | <object classid=”abc” data=”someJava.class” alt=”Java applet depicts cat chasing dog.”>The applet referenced depicts a dog barking at a cat. The cat becomes annoyed and chases the dog around a house.</object> | Provide a classid for each OBJECT. | P1 | |
| S (<s> or <strike>) | To strike out text use style sheets. | <p style=”text-decoration:line-through”>Line through text</p> | Avoid use of obsolete language features if possible. Use stylesheets instead of<S> or <STRIKE>. | P2 |
| Scripts and Noscript | If Javascript is used, always provide an equivalent of whatever the Javascript renders. This typically requires that a <noscript></noscript> tag set following every <script></script>. |
<script> alert(“Welcome to Blackbaud!”); </script> <noscript> Welcome to Blackbaud! </noscript> |
Ensure that pages are usable when scripts, applets, or other programmatic objects are turned off or not supported. Provide alternative content for each SCRIPT that conveys important information or functionality. | P1 |