Making WVU Websites Accessible

a photo of a young guy with a laptop using a wheelchair

Download a PDF of this document

Under the Americans with Disabilities Act (ADA), people with disabilities are guaranteed access to all post-secondary programs and services. Online programs and services should be easily accessible to students with disabilities. If university websites are inaccessible, people with disabilities are not gaining the equal access they are guaranteed by law. West Virginia University (WVU) will benefit its current and future students and employees with disabilities by making the institution's websites accessible.

The purpose of this study was to evaluate the current status of the universities' web accessibility. We wanted to develop a guide for future improvement in website accessibility. The results indicated that in 2011 only 51 percent of 509 WVU webpages (sample) passed automated web accessibility tests with Cynthia Says for Section 508 compliance. Only 35 percent passed using the WAVE Accessibility Tool for WCAG Priority 1 compliance, which is a more rigorous evaluation level. The stricter the level of testing, the more WVU webpages failed. This note is of particular importance provided stricter web accessibility requirements may be legally imposed instead of Section 508 in the future.

This web repair guide is intended to serve as a guide for future improvement in website accessibility. By assessing the accessibility of online materials now, WVU may avoid legal problems in the future and possibly recruit more students with disabilities.

Introduction

People with disabilities can have difficulties browsing the Internet because they commonly use assistive technology devices such as screen readers (software that reads text aloud as it appears on the computer screen); refreshable braille displays (devices that convert the text of websites to braille); and screen magnifiers to interpret website content. People who are blind or have low vision use keyboards to browse navigation, sort through lists, select links and press form buttons.

Website developers can design websites to be accessed more easily by individuals with disabilities. Faculty members are encouraged to become familiar with barriers to meeting the needs of people with disabilities in terms of making websites accessible.

The 1990 Americans with Disabilities Act (ADA), which requires federally funded institutions to provide accommodations, and thus equal access, for students with disabilities, was passed prior to the blossom of online-based education. Since the ADA, additional legislation has emerged concerning accommodations for students with disabilities. In 1998, the U.S. Congress amended the Rehabilitation Act of 1973. According to Section 508 of the Rehabilitation Act, federal agencies are required to make their electronic and information technology accessible to people with disabilities (Section 508, n.d.).

Section 508 of the Rehabilitation Act is relevant for federally funded organizations; however, the matter of website inaccessibility brought lawsuits against other agencies and businesses. Such companies as America Online (AOL), Barnes and Noble, Inc., Claire's stores, Metropolitan Atlanta Rapid Transport Authority (MARTA), Priceline.com, Ramada.com, Southwest Airlines, and Target Corporation were sued for failing to make their websites accessible (Parmanto & Hackett, 2011). Perhaps the 2006 Target vs. the National Federation of the Blind (NFB) litigation that focused on corporate social responsibility and website accessibility has prompted other companies and organizations to improve the accessibility of their websites (Frank, 2008).

There are three levels of web accessibility, and a set of checkpoints for each level. The W3C provides that Priority 1 guidelines must be satisfied; Priority 2 guidelines should be satisfied; and Priority 3 guidelines may be satisfied. To be considered minimally accessible, a webpage must satisfy all Priority 1 checkpoints.

Verifying a site's accessibility can be a time consuming task. A number of free accessibility tools, such as the automated accessibility evaluators for scanning a set of webpages and automatically evaluating their compliance with WCAG, exist.

Evaluating Website Accessibility

The first step to ensuring your website is accessible is to evaluate its current accessibility. It is recommended to first review the most important or frequently viewed webpages. Manual testing by a group of professionals (e. g., web developers, webmasters and content managers) is necessary in combination with using multiple automated validation tools for accessibility. For example, there are such online tools as WAVE, tenon.io, or Cynthia Says. Manual checklists are presented by WebAIM (http:// webaim.org/standards/wcag/checklist). Ideally, you can also include testing involving persons with disabilities.

Consider Someone with Vision Problems

People with vision problems can use such products as Job Access with Speech, JAWS for short, available from (http://www.freedomscientific.com) or Window Eyes (e.g., a screen reader for Microsoft Windows). In order to learn how a screen reader for a person with vision loss would present text orally from a website, developers can use Fangs Screen Reader Emulator, for example (https://addons.mozilla.org/en-US/firefox/addon/fangs-screen-reader-emulator/).

Screen readers navigate from heading to heading; therefore, proper heading levels (heading 1, heading 2, heading 3, body text, etc.) should not be misplaced. If there is a skip navigation function, screen readers can skip navigation sections and go straight to the page content. Each page should have some option to pass over the navigation section.

The best way to ensure keyboard navigation is to have a logical and consistent navigation and page structure consisting of semantic mark-up. If the design calls for the user to step outside of the page structure with a pop up window or dynamic content change, the screen reader user needs to be notified prior to the change with a text note or another method. If screen reader only content is needed, and screen space is a concern, it should be rendered off screen and not hidden with CSS.

Screen readers cannot interpret images, animations or movies. Non-textual elements on the webpage should be with text-only alternatives. A significant image is intended to convey content, while an insignificant image is used for page decoration or spacing. Empty ALT-tags for images that do not convey content will fail validation tests. To allow screen readers to skip the image if that image has no meaning (e.g., bullet), a null ALT attribute should be assigned as ALT="" (quote quote without any space between the quotes).

Consider Someone with Color Blindness and Low Vision

A photo of an older gentleman struggling to read something ona  tablet

For individuals who have color vision deficiency (CVD), or color blindness, known as "Daltonism," it is difficult to differentiate between some colors and shades (e. g., reds, greens, blues and yellows). The color contrast between the background and the foreground with text should be sharp and distinct. There should be other ways to convey information without reliance on color alone to signify meaning. Section 508 states, "Color coding shall not be used as the only means of conveying information, indicating an action, prompting a response, or distinguishing a visual element."

Individuals with low vision can use screen magnifiers, which enlarge areas of the screen to make text and images bigger and easier to see. They often use screen readers as well. Web designers should make sure that the user has the ability to increase the text size.

Italics and serif font should be avoided because they are difficult to read on computer screens because of limited resolution (Crow, 2008). Using a sans-serif font is recommended.

As for color brightness, the W3C recommends a standard of 125 brightness or greater, ((Red value X 299) + (Green value X 587) + (Blue value X 114)) / 1000. Regarding color contrast, the W3C recommends a standard of 500 or greater, (maximum (Red value 1, Red value 2) - minimum (Red value 1, Red value 2)) + (maximum (Green value 1, Green value 2) - minimum (Green value 1, Green value 2)) + (maximum (Blue value 1, Blue value 2) - minimum (Blue value 1, Blue value 2)). Color combinations can be checked online at www.etre.com/tools/colourcheck/. The Color Blindness Simulator is also available online: http://www.colblindor.com/coblis-colorblindness- simulator/.

Consider Someone who is Deaf

A photo of an older man using a hearing aid

Users with hearing impairments should be provided with text captioning for all audio, video, and multi-media materials or, offered printed text transcripts of audio content, provided copyright protections are preserved. Closed Captioning (CC) should use at least 16 point font, white or yellow font on black background as well as indicating whether the narrator is male or female. Indications of non-speaking elements (e.g., if music is playing) are recommended. Crow (2008) pointed out that under Section 508, a printed version of the text does not replace real-time captioning.

For QuickTime, Real, Windows Media player or Flash presentations, consider using MAGpie 2 for manual transcription or Docsoft: AVS to generate an automated transcript that you can edit for accuracy. YouTube also offers closed captioning services for videos uploaded to their site. After uploading the video, you can then request the video to be captioned. YouTube will generate a transcript of the spoken content. You can then download this video; correct any mistakes; and upload it back to the YouTube site. YouTube will then inject the captions into the videos.

Consider Someone with Motor Disabilities

If high degrees of motor dexterity are required to perform certain tasks on the computer such as chat, games, simulations, people with various forms of motor impairments may have difficulties because he or she may have difficulty using computer keyboards and a mouse. Rollovers and dropdown menus are difficult to use without a mouse.

Someone with a motor disability may be using assistive technology, such as a mouth stick or a puff and sip device. These devices are dependent on the structure of the webpage for navigation. Heading structure, simple page layout and logical navigation with skip links will help someone with a motor disability engage with the content. Include visual cues when a user has added focus onto a link or other selectable content so that the user understands his or her peripheral's location on the page.

Consider Someone with Cognitive Disabilities

Cognitive disabilities include intellectual disabilities, autism, traumatic brain injury, aphasia, dyslexia, learning disabilities, Alzheimer's disease, attention deficit disorder and attention deficit hyperactivity disorder. Individuals with these disabilities have problems with memory, perception and attention. Web-related difficulties include reading comprehension, complexity, slower learning, limited motor control and spatial perception.

Minimizing problems with orientation, distractibility, perception, consistency and predictability are the key concepts for web design from page to page. Friedman and Bryen (2007) published four top recommendations to be used:

  1. Pictures, graphics, icons, symbols along with text
  2. Clear and simple text
  3. Consistent navigation and design on every page
  4. Headings, titles and prompts
For more information, contact:

Phone: 304-293-4692
Email: jmbock@hsc.wvu.edu

WVATS is funded by the U.S. Department of Education, Rehabilitation Services Administration Contract #H224A100047

This project was funded by the Higher Education Access: A Universal Design Demonstration Project, Office of Postsecondary Education, U.S. Department of Education.