Accessible Code Examples » VCU Web Standards & Guidelines

Example code

You've scanned your page and gotten some errors. How can you fix the errors you're receiving?

Alternative text and content

This is the most common error and often the easiest to fix within a site. All images, image maps, and multimedia within a site should provide alternative text or content for users who may not be able to see the images or multimedia content.

Images & alt attributes

Adding alternate text to images is as easy as adding an alt attribute.

			  <img src="example.jpg" width="100" height="50" alt="This image is an example of
			  an image with alternate text" />
			 

Alternate text for images should describe the contents of the image as succinctly but fully as if you were describing the same image to a friend over the phone. If you are using an image solely for a decorative purpose (such as a drop shadow border or a spacer image), then you should specify an empty alt attribute. As much as possible, it's better to use CSS to apply decorative images that do not directly relate to the content of your pages.

Image maps & alt attributes

You can add alternate text to individual hotspots within image maps

			  
			   <img src="example.jpg" usemap="#exampleMap" alt="This text describes the overall image map" width="200" height="200">

			   <map name="exampleMap">

           <area coords="1,1,100,100" shape="rect" href="link1.html"

             alt="The first hotspot">

           <area coords="100,1,200,100" shape="rect" href="link2.html"

             alt="The second hotspot">

           <area coords="1,100,200,200" shape="rect" href="link3.html"

             alt="The third hotspot">

         </map>

As mentioned in the section above, try to limit your use of image maps to content-related material. Whenever possible, use text and CSS to mark up the primary navigation for your website.

Embedded content & `<noembed>`

Whenever you embed video content or interactive multimedia like Flash or Shockwave, you should also provide alternate content using the <noembed> tag. We suggest that you use your alternate content to 1) describe the content that your user would see if they have the plugin, and 2) provide a link to where the user can download any plugins that your content might require.

			  
			   <object width="600" height="300">

           <param name="movie" value="example.swf">

           <embed src="example.swf" alt="Our introductory Flash slideshow" width="600" height="300">

             <noembed>

               This Flash slideshow cycles through several images of various staff

               members at work. If you'd like to see it, you can

               <a href="http://get.adobe.com/flashplayer/">download the Flash plugin</a>.

             </noembed>

           </embed>

         </object>

Accessible forms

The most basic way to improve the accessibility of your forms is to use <label> tags to provide context for your form elements. Labels should describe what you expect within a particular form field.

			  
			   <form action="/cgi-bin/mailto" method="post">

			     <label for="name">Your Name</label>

			     <input type="text" name="name" id="name" />

			     <label for="email">Your Email</label>

			     <input type="text" name="email" id="email" />

			     <p>Do you want a response?</p>

			     <input type="radio" name="response" value="yes" id="response-yes" />

			     <label for="response-yes">Yes</label>

			     <input type="radio" name="response" value="no" id="response-no" />

			     <label for="response-no">No</label>

			     <label for="message">Your message</label>

			     <textarea id="message" name="message"></textarea>

			     <input type="submit" value="Submit" />

			   </form>

Accessible frames

Frames can be a tricky as many screen readers can only access one frame at a time. It's important therefore to distinguish the purpose for each frame and to provide alternate navigation in the case that the user's browser doesn't support frames.

			  
			   <frameset cols="20%,80%">

			     <frame src="nav.html" title="Site Navigation" name="nav" />

			     <frame src="content.html" title="Main Content" name="content" />

			     <noframes>

			       <p>This document contains the following frames:
			       <ul>

			         <li><a href="nav.html">Site Navigation</a></li>

			         <li><a href="content.html">Main Content</a></li>

			       </ul>

			     </noframes>

			   </frameset>

When using inline frames, you can simply place your alternate frame content within the <iframe> tag.

			  
			   <iframe src="inline.html" width="200" height="100">

           <p>If you can see this text, your browser does not support iframes.

           <a href="inline.html">View the content of this inline frame</a> within

           your browser.</p>

         </iframe>

VCU Web Standards & Guidelines