Web Accessibility Basics

Universal Web Accessibility Guidelines

THE BASICS

IMAGES (e.g., photos, drawings, image buttons, graphs, charts, animations)

For all images: Provide Alternative Text
Tip:	Create succinct, alternative text to describe the function of all visual elements. Use alt="" for images that have no communicative function (e.g., image spacers, bullets, decoration)
Example:	alt="SMC logo"
Rationale:	People who cannot see the images will hear the alternative text. People who are multimodality learners will see the image and read the text. Voice recognition software recognizes alternative text.

Use a D-link for more complex images
Tip:	Create a d-link or the HTML longdesc attribute to provide a longer text description for complex, significant images. To do this put a d (for description) to the right of an image, and link the letter to a separate page which would contain a longer description of the page and a link back to the original page. [Or include the text description on the same page as the image.]
Example:
Rationale:	Significant complex images (e.g., charts) cannot be summarized in a few words.

COLOR

Tip:	Avoid using color alone to convey information. Maximize color contrast.
Example:	Do not include directions like, “Required readings are listed in red.”
More Information:	See webaim.org -color tutorials

AUDIO CONTENT

Tip:	Provide synchronous captions for audio content.
Example:
Rationale:	Audio content will be available to people who are hearing impaired. Multi-modality learners will be able to see and hear content.
Support:	SMC’s alternate media specialist can provide this service for you.

LINKS

Text Links
Tip:	Use text that makes sense when read out of context.
Example:	SMC Bookstore or Click here for SMC Bookstore [Preferred ways] Vs. Click here for Library of Congress [Incorrect].
Rationale:	People who listen to web pages often hear the links out of context

Buttons
Tip:	Design large buttons.
Example:	[to be added]
Rationale:	Small buttons can be difficult for users with mobility impairments .

TABLES

For simple data tables
Tip:	Design tables so that the headings are in the first row and the first column, and identify them using <th>
Rationale:	Unless tables are marked-up properly, they will not provide assistive technology users with appropriate information to be able to navigate among table cells.
Information:	See webaim.org - tables tutorial

For issues of accessibility related to more complicated tables and other web-page features please see the Complex Tips page or the Resources page.