2: Web Accessibility Basics: 10 Questions On How & Why To Create Accessible Content

In this section you will learn about the legal standards, basic accessibility principles, and practical techniques necessary to create course materials accessible to all. To navigate this section please scroll down the page or select the questions from the right hand side of the screen.

What is web accessibility?

The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.

-Tim Berners-Lee, Inventor of the World Wide Web

Web accessibility refers to the underlying principles and practical techniques that make information on the web accessible to everyone regardless of disability.

Web accessibility is a broad term that refers to access of not only the content, but also to the structure and functional elements of a web site. This means that the site itself, the content created within the site, and the content uploaded to a site must all be accessible to persons with disabilities. As an added benefit, the techniques necessary to make a web page accessible to individuals with disabilities improve the web experience for all users.

Web accessibility enables full access to the web for everyone.

Standards

Since 2001, web and online application designers have had to take accessibility guidelines into account when developing products for the California higher education market. However, it's up to the individuals who create information for the web to distribute accessible content whether it's destined for a campus homepage, portal, or course management system.

The standards that define web accessibility have been established by Section 508 of the Rehabilitation Act Amendments of 1998 and the Americans with Disabilities Act (ADA) of 1990, which mandate equal access for individuals with disabilities. These standards are also based on the World Wide Web Consortium's (W3C) Web Accessibility Initiative (WAI) Web Content Accessibility Guidelines (WCAG) which explain how to make content on a site accessible.

For more information please visit:

Go to top of page

Why should I care about web accessibility?

  1. Web AccessibilityIt's the law. That's right, California community colleges are required by state and federal law make materials distributed on the web accessible to all. Web accessibility, like physical ramps instead of stairs, ensures equal access to web-based information regardless of ability or technology used.

    Since 2001, when Section 508 of the Rehabilitation Act went into effect, federally funded institutions, including colleges and universities, have had the legal obligation to make electronic information accessible to people with disabilities. In California, Senate Bill (SB) 105 applies Section 508 standards to all state agencies, regardless federal funding status.

  2. It's the right thing to do. Standards based, accessible web design not only benefits all users, it is the means by which barriers to instructional web access can be removed.

Accessibility Law & California Community Colleges

Section 504 of the Rehabilitation Act - 1973
Persons with disabilities must have an equal opportunity to participate in and benefit from any services or programs that are offered at California Community Colleges.

Americans with Disabilities Act - 1990
California Community Colleges are required to provide students with disabilities access to education.

Title 5, California Code of Regulations - 1995
Requires post secondary institutions in California receiving state funding ensure the accessibility of distance education courses.

Section 508 of the Rehabilitation Act - 1986 (Amended 1998)
Section 508 requires that federally funded agencies, such as community colleges, who develop, procure, maintain, or use electronic and information technology must ensure that it is accessible to students with disabilities

California Senate Bill 105 - 2002

Requires that state governmental entities, in developing, procuring, maintaining, or using electronic or information technology, comply with the accessibility requirements of Section 508 of the federal Rehabilitation Act of 1973.

For more information please visit:

How do people with disabilities use the web?

Disabilities that challenge users of the web include vision, hearing, motor, cognitive, seizure and age-related disorders. Access to web based information relies on assistive technologies like screen readers, zooming displays and adapted hardware as well as on good information design.

Take a look at this online video from the University of Wisconsin to learn how screen readers help people use the web: Introduction to the Screen Reader.

For more information please visit:

Go to top of page

What are the Cypress College web accessibility & distance education requirements?

At Cypress College we have a legal and ethical commitment to provide access to web based course materials to all students, including students with disabilities. To ensure access to content on a portal, a course management system or a web site all course materials must be accessible to all students according to the Section 508 guidelines.

To provide basic web accessibility keep the following content guidelines in mind. Web content must be:

  1. Perceivable: Users must be able to perceive the information being presented (it can't be invisible to all of their senses). Content creators must provide text alternatives for any non-text content so that it can be changed into other forms people need such as speech, symbols or simpler language. Content creators must also provide synchronized alternatives for multimedia (for example captioning for video, transcripts for audio).
  2. Operable: Users must be able to operate the interface (the interface cannot require interaction that the user can not perform). Content creators must provide users with disabilities enough time to read and use content, not create content that is known to cause seizures (for example images causing flickering, blinking, flashing on the screen), and provide ways to help users with disabilities navigate, find content and determine where they are.
  3. Understandable: Uusers must be able to understand the information as well as the operation of the user interface (the content or operation cannot be beyond their understanding).Content creators must make text content readable and understandable, make web pages appear and operate in predictable ways, and help users avoid and correct mistakes that do occur.
  4. Robust: Content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies. This means that users must be able to access the content as technologies advance (as technologies and user agents evolve, the content should remain accessible).

NOTE: This is abridged information quoted from the W3C A guide to understanding and implementing WCAG 2.0 Working Draft 2007 and the Web Content Accessibility Guidelines 2.0.

For more information please visit:

Go to top of page

How does Section 508 impact the Cypress College portal, CMS, and the web site?

...

a Web page is whatever you find at the end of a Web address that you visit. It includes Web applications, Webcasts, multimedia objects and other types of interactive content to which the word page may not typically apply.

- WCAG 2.0 Definition

While the developers of tools like portals and course management systems are responsible for making their products accessible; ensuring access to the information that resides on the web lies in the hands of the content creators. An instructor is creating web based content whether developing information for distribution on a portal, a course management system or a web site.

Content accessibility in a web based platform refers to the accessibility of all the content an instructor puts on the web, including text, hyperlinks, images, audio, video, and multimedia. It also includes content created outside a web authoring tool but destined for distribution on the web such as Microsoft Word documents or PowerPoint files. And of course, content created within text editors available inside a portal or course management system must also follow accessibility guidelines.

For more information please visit:

Go to top of page

How  do I create accessible web content in a portal or CMS?

Keep accessibility in mind as you design and develop course materials to create a fully accessible experience for all your students. For a quick introduction to some of these design considerations take a look at these brief videos on Screen Readers and the Web video from the University of Wisconsin. Of special interest are the reasons why using ALT text and document headers aid persons with disabilities. Once you're done with the videos please review the basic techniques for content accessibility that follow.

Screen Readers and the Web, the University of Wisconsin

Basic Techniques For Images

Always add ALT tags

Describe all images on the page using a textual equivalent, or ALT tag. An ALT or alternative text tag is a textual description of an image and should convey the function, purpose or meaning of the image. An ALT tag is read by the screen reader and is what a person with visual disabilities hears instead of see. If an image is purely decorative and conveys no meaning leave the ALT tag blank and the screen reader will ignore it. When adding an image to the Photos section of MyGateway the Title field becomes the ALT tag.

Avoid visual distractions

Think of images as visual content. Avoid using purely decorative images such as blinking text or animated graphics (animated gifs) that detract from the content of the web page.

Basic Techniques For Text

Create a logical page structure

Use headings to create a page that is visually and structurally sound. Headings create a structure for the text that can be "seen" by screen reading software and its users. In Microsoft Word headings can be chosen from the Styles menu.


How to Apply Heading Styles in MS Word (MS Word, 1,016 KB)
How to Apply Heading Styles in MS Word (PDF, 340 KB)

Don't depend on color

Never rely on color to convey information. Users with color blindness (protanopia, dueteranopia, tritanopia) may not see the color you intended and miss out on key information. Use text colors sparingly as too many will distract from the content itself.

Rely on high contrast

Use text colors that are easily distinguishable from the background. Avoid having users try to differentiate between the common color deficits: green-yellow-red (protanopia, dueteranopia) or blue-yellow (tritanopia).

Keep fonts simple

Use fonts that are easily readable on the screen such as Verdana, Tahoma, Trebuchet MS, and Georgia. Use very few fonts to eliminate text that is in competition with the content and to create a professionally designed look.

Depend on default sizes

Do not specify font sizes if using HTML to format text. Users can choose View > Text Size > Increase in Firefox or View > Text Size in Internet Explorer to change text size and retain control over their viewing experience. If designing a style sheet use relative sizes (no smaller than 85%) that allow users to scale font size.

Format Lists

Format list properly using numbered or bulleted lists to make lists readable to screen readers.

Don't blink

Avoid blinking or moving text to convey meaning. It distracts from the content of the page and may cause seizures in some users.

Basic Techniques For Links

Never click here

Never title a link click here, instead use unique and clear descriptive link titles so all users know what to expect when they click. Screen reader users often tab from link to link and if they hear click here or download the purpose and destination of the link is a mystery.

Ban pop-ups

Avoid opening links in a new window. If this is unavoidable provide a clear warning to users that following the link will cause the page to be displayed in a new window. Unless warned, screen readers cannot distinguish between the originating window and a newly created (pop-up) window causing confusion for users. In MyGateway the file name often becomes the hyperlink itself, so always create readable file names following accepted conventions.

Describe downloads

Provide clear information when linking to file ( text document, audio, video, etc...) that describes the size and type of file. This provide users the choice of downloading depending on their time limit and connection speed.

For more information please visit:

Go to top of page

How do I create accessible content for web download?

Rename Your Files For Web Download

File names for a web site are very important because they become part of the address that specifies the location of that file on the web. For example, web servers are case-sensitive and consider mypage.html a different page from MyPage.html. To keep things simple, be consistent when naming your files and use lower-case file names.

When naming web pages, files, or folders that will reside on the web:

  • Begin with a letter
  • Keep file names short
  • Use only lower-case letters, numbers and if needed, the underscore ( _ )

You should also make sure that each file has the proper extension, for example:

  • For a web page: .html or .htm
  • For images: .gif or .jpg
  • For Microsoft Word: .doc or .docx (Word 2007)
  • For Adobe Portable Document format files: .pdf

You should not:

  • Put spaces in file names or folder names, or some browsers might not find the page or image
  • Put symbols, extended characters (tildes, umlauts, accents), or non alphanumeric characters other than the underscore

PDFs

PDF files are only accessible if they are tagged with appropriate accessibility markup. You can only do this with the newest Acrobat software and your users can only read your tagged pdfs with the latest versions of the Acrobat reader. If you cannot create an accessible PDF, the easiest and quickest way to ensure accessibility is to provide an alternate accessible HTML version or text version.

What to do:

  • Provide a link to a PDF viewer on every page with PDF file.
  • Create an accessible PDF.
  • Provide an alternate accessible version (HTML, text) with every PDF file.

For more information please visit:

MIcrosoft Word

Just like a PDF file, a word-processed file is not accessible and usable with a screen reader without the appropriate tags.

What to do:

  • Provide a link to a Word viewer on every page with a Word document.
  • Create an accessible Word document by using headings (Header 1, Header 2, Header 3, etc...) to create a logical structure and adding ALT tags to the images.
  • Provide an alternate accessible HTML version by saving the Word document as a web page.

For more information please visit:

MIcrosoft Powerpoint

PowerPoint presentations in their original format or in the Save as Web page format are inaccessible.

What to Do:

  • Post the original version with a link to a PowerPoint viewer for students who do not have a compatible version of the software.
  • Provide an accessible HTML version of your slide presentation including headings for page structure and ALT tags for images.
  • Provide a text version of the presentation by choosing File > Send To > Microsoft Word.

For more information please visit:

Good Tools

LecShare
Create accessible, online, narrated presentations from Microsoft PowerPoint.
Microsoft Office 2007 compatible

Accessible Web Publishing Wizard
The Accessible Web Publishing Wizard for Microsoft Office (does not currently work with Office 2007)

Go to top of page

How do I create accessible Multimedia?

How to create accessible multimedia is beyond the scope of this workshop, however it's important to know the accessibility requirements of all media before you create it. It's much easier to integrate accessibility from the start of the design than to retrofit a media object once it is finished.

When providing audio or video resources for your students:

  • Provide a link for users to download appropriate helper application to run the media file.
  • Caption audio. Captions are a text version of the dialogue and should be synchronized and offered in an accessible text format.
  • Provide a transcript. Always provide a link to a transcript which includes a transcription of the spoken content. Transcripts also help students who can't download the audio file due to lack of time or bandwidth. For enhanced podcasts where images form part of the content, the transcript should include textual description of the images. The transcript format is accessible HTML or text.

For more information please visit:

Go to top of page

How can I tell if I know the basics?

Take this self check quiz to review some web accessibility basics. Also, don’t forget to take the assessment quiz at the end of this workshop which includes more questions on this topic.

Open large Accessibility Self Check Quiz in a new window

Accessibility Self Check Quiz (MS Word, 664 KB)
Accessibility Self Check Quiz (PDF, 144 KB)

Go to top of page

What other resources are available?

Laws, Standards, Guidelines

The Access Board
http://www.access-board.gov/

Section 508 of the Rehabilitation Act of 1973 as amended 1998
http://www.section508.gov/index.cfm?FuseAction=Content&ID=12

508 Checklist
http://www.webaim.org/standards/508/checklist.php

Web Content Accessibility Guidelines 1.0 (WCAG 1.0, 1999 - Current Standard)
http://www.w3.org/TR/WAI-WEBCONTENT/

Web Content Accessibility Guidelines 2.0 (WCAG 2.0, 2007 - Draft of Future Standard)
http://www.w3.org/TR/WCAG20/

Checklist of Checkpoints for Web Content Accessibility Guidelines 1.0
http://www.w3.org/TR/WCAG10/full-checklist.html

Web Accessibility How To Guides

University of Texas at Austin How Tos & Demos
http://www.utexas.edu/research/accessibility/resource/how_to/index.html

Accessibility in Distance Education
University of Maryland University College
http://www.umuc.edu/ade/

Information Technology Technical Assistance and Training Center (ITTATC)
Web Accessibility Course 2006
http://www.ittatc.org/training/webcourse/WAWCCourseIndex.php?prevpage=/training/webcourse/WAWCSection2.php

Accessible Digital Media Design Guidelines for Electronic Publications, Multimedia and the Web
The Carl and Ruth Shapiro Family National Center for Accessible Media (NCAM)
http://ncam.wgbh.org/publications/adm/index.html

Jim Thather's Web Accessibility Tutorial
http://jimthatcher.com/webcourse1.htm

High Tech Center Training Unit
http://www.htctu.fhda.edu/divisions/webaccess/main.htm

CMS Accessibility

Blackboard and Accessibility
http://www.blackboard.com/company/accessibility.aspx
Blackboard Accessibility FAQs
http://www.blackboard.com/company/accessfaqs.htm

Blackboard's 508 Implementation
http://www.blackboard.com/company/accessimplement.htm

Moodle & Accessibility
http://docs.moodle.org/en/Accessibility

Operating Systems

Microsoft Accessibility
http://www.microsoft.com/enable/

Apple Accessibility
http://www.apple.com/accessibility/

Go to top of page

Continue to Part 3: Copyright Basics: How To Stay Legal

or

Return to Part 1: What is Web Enhanced, Hybrid & Online Education?