This page covers techniques that can be used to make accessible websites. Because this page uses basic HTML, these code snippets can be applied to nearly any HTML editor or website builder, including popular programs such as Adobe Dreamweaver and WordPress.
Alternative text, also known as alt text, is hidden text that describes what is happening in an image. Alt text allows those that are visually impaired to use a screen reader to understand the content of an image. Do not begin the alt text description with “This is an image of...” because images are identified to the user as images by the screen reader.
Be sure to include an alt attribute for every image.
<img src="calpolylogo.gif" alt="Cal Poly logo">
Purely decorative images, or images that don’t help with the understanding of the content, should include an alt attribute with an empty description.
<img src=”imagename.gif” alt=” ">
Images that are used for navigational purposes should include an alt attribute that describes the link destination.
<a href="http://www.cpp.edu"> <img src=”calpolyimage.gif” alt=”Cal Poly Pomona home page”> </a>
Headings are used to help users understand the structure of the webpage. Headings give visual cues as well as cues to a screen reader, allowing users to quickly jump to the section of the webpage that they are interested in.
Avoid simply bolding or enlarging the text to look like headings. Be sure to use actual heading tags (<h1> - <h6>) for all of the headings. Headings are used in ascending order with (<h1>) being the most important heading and (<h6>) being the least important heading.
<h1>Heading using H1</h1>
<h2>Heading using H2</h2>
<h3>Heading using H3</h3>…
When using lists, be sure to use an ordered list (<ol>) if the order matters, otherwise use an unordered list (<ul>).
<p>How to tie your shoes</p>
How to tie your shoes
When creating a hyperlink, make sure to provide a clear description of the destination of the link, do not simply provide the URL. It should be clear to users where the link will be taking them before even clicking on it.
Links should be able to make sense when taken out of context. Avoid using link text such as “Click here” or “Link to…”
<a href=”http://www.cpp.edu">Cal Poly Pomona home page</a>
Captions and Transcripts
Captions and transcripts allow hearing impaired users, as well as non-native speakers, the opportunity to receive the same content from audio and video that a hearing user would receive.
Captions should be included for all video materials. While closed captions (can be turned on or off) are most commonly used, open captions (always visible) are perfectly acceptable for videos. These captions should be synchronized with the audio so that the captioned text will appear at approximately the same time as the audio is delivered.
Transcripts are textual representations of audio clips that describe what is happening and offer explanations. While captions must be verbatim of what is spoken, transcripts do not have to be. Transcripts are most commonly used with audio clips rather than with videos. Because transcripts are not embedded into videos, they can easily be scanned by computers and read by screen readers.
For more help with creating accessible websites, please contact Accessibility Technology Initiative (ATI).