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, visit:
Understand 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:
- Alternative text for images.
- Captions for video, transcripts for audio.
- Web content with structure, using headings, lists, and other semantic elements.
- Text, not images with text.
- Tab order and read order for forms.
- Labels for form fields.
- Sufficient contrast between text and background.
- Scalable text (up to 200%).
- Titles to web pages and documents that describe its topic.
- Link text that is meaningful or names the title of the page it links to.
Avoid these:
- 'Click here' text; reference the page title instead.
- Use of color or visual references to communicate information.
- Images with text not referenced in an alt tag; include text in html instead.
- Flashing or flickering content.
Create Accessible Web 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 and provide sufficient contrast between foreground text and background color. Use the WebAIM Color Contrast Checker to achieve a contrast ratio of at least 4.5:1.
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."
Create Accessible Documents & Files
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 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:
For captioning YouTube, Canvas, or Panopto video, contact eLearning or the Teaching & Learning Center.
The Case for Web Accessibility
- The Case for Web Accessibility
- The Four Principles of Accessibility
- How People with Disabilities Use the Web
- Accessibility Principles & Standards
- Web Accessibility Initiative (WAI)
The ADA & Section 508
- ADA.gov – Americans with Disabilities Act
- ADA Best Practices for State & Local Governments
- Section508.gov
- Adobe's 508 Accessibility Standards
Create Accessible Web Content
- Write for Accessibility
- Design for Web Accessibility
- Develop for Web Accessibility
- W3C Web Content Accessibility Guidelines (WCAG)
- WCAG Overview
Create Accessible Documents
- 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
- WebAim Microsoft Word Accessibility
- Microsoft Accessibility
Tips, Techniques & Guidelines
- W3C Accessibility Checklist
- W3C WAI Guidelines & Techniques
- W3C Accessibility Evaluation Resources
- WebAIM
Usable Content & Writing for Web
- 'Plain Talk' Guidelines
- How to Write for the Web (Nielsen's landmark article)
- Writing for the Web (Nielsen's blog)
- Usability Guidelines for Accessible Web Design (Nielsen's report)
Users & Usability Standards
- How Users Read on the Web
- Jakob Nielsen's Evidence-Based User Experience
- Steve Krug's Advanced Common Sense
- Webcredible usability articles