Web Accessibility

• The Four Principles of Accessibility:
  Perceivable, Operable, Understandable, Robust
• The Case for Web Accessibility

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.

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.

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.

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.

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.

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.

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."

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:

• What makes PDFs accessible
• Create and verify PDF accessibility in Acrobat Pro
• Adobe's steps to create accessible PDFs
• Webaim's PDF Accessibility
• Adobe Acrobat PDF Creator

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.

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:

• Amara.org
• DotSub.com
• Subtitle Horse

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