Web Accessibility

SPSCC is committed to complying with Section 508 of the Rehabilitation Act regarding accessibility standards for electronic information technology, and to follow the Web Content Accessibility Guidelines (WCAG) established by the World Wide Web Consortium (W3C) in the W3C Web Accessibility Initiative (WAI).

SPSCC Website

Based on the Drupal open source content management system and designed with Cascading Style Sheets (CSS), the SPSCC website is coded with accessibility in mind. We understand that accessibility is good usability amplified and work toward building in accessibility improvements incrementally. Ongoing efforts to generate accessible, standards-based web content continue. Please refer to Best Practices & Guidelines below.

Best Practices & Guidelines

Here are key actions you can take to make web content accessible. For more information, see resources listed and the Web Content Accessibility Guidelines and Checklist of Checkpoints defined by the W3C (World Wide Web Consortium).

Understand Web Accessibility

Consider the use of accessible technology.

Consider what will make sense to someone using a screen reader or other assistive device to access web content. A summary of key actions are:

Include these:

  1. Alternative text for images.
  2. Captions for video, transcripts for audio.
  3. Web content with structure, using headings, lists, and other semantic elements.
  4. Text, not images with text.
  5. Tab order and read order for forms.
  6. Labels for form fields.
  7. Sufficient contrast between text and background.
  8. Scalable text (up to 200%).
  9. Titles to web pages and documents that describe its topic.
  10. Link text that is meaningful or names the title of the page it links to.

Avoid these:

  1. 'Click here' text; reference the page title instead.
  2. Use of color or visual references to communicate information.
  3. Images with text not referenced in an alt tag; include text in html instead.
  4. Flashing or flickering content.

Create Accessible Web Content

Add alternative text to images.

Alternative text added to images provides a text description for those who have visual impairment. Alt tags are inserted into the html when text is entered in the Alternative Text field for uploaded images.

Alternative text should be meaningful and provide the same information that visual users see. For example, the alt tag below doesn't provide meaningful information, because those who can't see the logo don't know what department it refers to.
<img src="logo.png" width="200" height="150" alt="Department logo">

A better alt tag would be:
<img src="logo.png" width="200" height="150" alt="SPSCC Student Book Club logo">

Charts and graphs that are created using graphic files should provide alt tags that describe content:
<img src="enrollment.png" height="100" width="150" alt="Student enrollment has increased 10 percent in the last year.">

Provide text descriptions of charts and graphs to make them accessible to all readers. If information is too complicated to easily describe, include contact information for readers who want more information.

Alt tags don't need to describe everything in an image. It would be nearly impossible to accurately depict a photograph, for example. But alt tags need to convey the same information you intend the image to convey. A good test for alt tags is to pretend you are reading your document over the telephone.

Add meaningful text for hyperlinks.

Hyperlinks should have meaningful titles that give readers a clear idea of where they're going if they click. Titles like "click here" or "check this out" do little to help readers know where the link leads.

The problem becomes more acute for those who use speech readers, like Jaws, and often use the tab key rather than the mouse to move through the links on a web page. The speech reader reads out the links, ignoring other text on the page. Imagine navigating your web pages by "hearing" only the links. Would the site be understandable? Are there links that seem to duplicate the same idea?

Bad example:
Financial aid is available for qualifying students. Click here for more information.

Good example:
Financial aid is available for qualifying students.

Add titles to hyperlinks.

Titles added to hyperlinks provide a text description for where the link goes. Title tags can be added to any link to help clarify what's on the other side of the link. Title tags are particularly useful on images that are used as links. Title tags are inserted into the html when linking text, by entering the title in the Advisory Title field in the Advanced link settings.

Use alternatives to color.

Convey information with more than just color and make sure the colors you use are distinct from each other. Provide sufficient contrast between foreground text and background color.

Structure content with semantic elements.

Use of logical tags with structure provide additional meaning for screen readers. For example, head tags such as 'h1, h2, h3' — ordered by largest first — give order to a properly structured page; 'blockquote' for multi-line quotations, 'em' for emphasis, 'code' for programming code, and 'strong' for added emphasis are other logical tags that provide meaning to content.

Browsers that read text aloud use these tags to present material coherently. When combined with cascading stylesheets (CSS), logical tags provide a way to style a web page. Use logical tags the way they were meant to be used. For example, using blockquote to indent copy rather than indicate a quotation may undermine its purpose.

Use proportional font sizes.

On many browsers, fixed fonts remain fixed in size, even when readers select larger text size options. Proportional fonts respond accordingly when readers adjust the text sizes on their web pages, making them more accessible. Proportional or relative fonts use these kinds of size specifiers: "90%" or ".80em." Fixed fonts use these kinds of size specifiers: "14pt" or "24px."

Create Accessible Documents & Files

Make PDF files accessible.

VERIFY PDF ACCESSIBILITY IN ACROBAT PRO

Provide HTML or text versions of PDF content. When you use PDF files on the web, use tagged PDF files with appropriate markup. For more information on creating accessible PDF files, refer to Adobe Accessibility and WebAim's PDF Accessibility guidelines.

There are several online accessibility tools for helping people create and read PDF files:

Provide alternative to PowerPoint files.

Provide HTML or text versions of PowerPoint content. PPT files may not be accessible from a website unless the user's computer has a full version of the PowerPoint program, not just the PowerPoint viewer. Refer to WebAim's PowerPoint Accessibility guidelines.

Caption video and multimedia.

Provide captioned versions of video and transcripts of audio and other multimedia offered on web pages.

You can caption your own videos using one of several free online tools, including:

For captioning YouTube, Canvas, or Panopto video, contact eLearning or the Teaching & Learning Center.

SBCTC's ACCESS 101 COURSE

The Case for Web Accessibility

The ADA & Section 508

Create Accessible Web Content

Create Accessible Documents

VERIFY PDF ACCESSIBILITY

Tips, Techniques & Guidelines

Usable Content & Writing for Web

Users & Usability Standards

Web Standards