down arrowMenu

UNI Webtools: Resources for Web Developers

Web Accessibility

"The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect."
    - Tim Berners-Lee, W3C Director and inventor of the World Wide Web

Can you imagine going about your life without the use of the Internet? Try to imagine how you would feel if you suddenly lost your sight or the use of your hands. Now think of how frustrated you would be if you wanted to search the Web for a certain piece of information. These are the things that Web designers think about when they are trying to make websites accessible for the whole of society.


Accessible Web Design at UNI

Important Web Accessibility Notes

Basic Website Accessibility: How-To

Summary: Creating accessible websites

Federal Law Covering UNI's Web Space

Web Accessibility Resources

Accessible Web Design at UNI

If you have any questions, please contact Carolyn Dorr in University Relations.

At UNI, many websites are created inside a Web Content Management System (WCMS) called Drupal. A WCMS is a software system that provides website authoring tools designed to allow users with little knowledge of web programming languages or markup languages to create and manage website content with relative ease.

University Relations creates Drupal websites that have the tools within them to help make the sites accessible.

It is nearly impossible to make all web pages accessible for all users, but we need to try to make web pages work for as many users as possible. Indeed, legislation makes it mandatory for us to do our best to make our web pages accessible to all students/staff at UNI. Here are the major categories of disability types that could interfere with being able to use the Web if accessibility isn't optimized:

  1. Visual
    1. Blindness
    2. Low vision
    3. Color-blindness
  2. Hearing
    1. Deafness
  3. Motor
    1. Inability to use a mouse
    2. Limited fine motor control
  4. Cognitive
    1. Learning disabilities
    2. Distractibility
    3. Inability to remember or focus on large amounts of information

Back to top

Important Web Accessibility Notes

Can you imagine going about your life without the use of the Internet? Try to imagine how you would feel if you suddenly lost your sight or the use of your hands. Now think of how frustrated you would be if you wanted to search the Web for a certain piece of information. These are the things that responsible Web designers think about when they are trying to make websites accessible for the whole of society.
Web users that cannot use a mouse due to physical disabilities can still access websites by using assistive technologies that include screen reader software, mouth sticks, and voice control software. Generally when people think of a disability that would prevent a user from using the Web, they think of vision impairment. For a user with vision impairment, the assistive technology most commonly used is some sort of screen reader software.

Screen reader software

Screen reader software converts Web content into synthesized speech. The software uses the HTML code on the Web to announce the content to the user. People who are blind can listen to content on the Web using screen reader software.
Most screen reader users don't use a mouse to navigate because they either can't see where to click with a mouse or can't use a mouse for some other reason. They use the keyboard to navigate websites. Keep this in mind as you design your website to be accessible.
In general, designing your site to make it accessible for screen reader users will help all users find your site and navigate its contents. Search engines such as Google or Yahoo can more efficiently find and display information to users if a website has been designed with accessibility in mind.

Back to top

Basic Website Accessibility: How To

A descriptive page title is vital

It's very important that a Web page's title is as descriptive as possible because this is the first thing screen reader users hear. As an added benefit, most search engines display the title of a page in their search results. Drupal automatically makes the words you type in the title field the page title. If a user types the same words (in a Google search box, for instance) as you put in the title, your web page will float to the top of the search results.

Use heading elements properly

The proper use of HTML headings on the Web is one of the most important usability features for screen reader users.

Headings use a hierarchy. There are six levels of the heading hierarchy: heading 1- heading 6. Heading 1 tells the screen reader (and search engine) "The following information is the most important thing on this page". To sighted users, heading 1 is normally the biggest and boldest heading and heading 6 the smallest. Every Web page should have one heading 1, and ideally there would be only one as it indicates the most important idea on the page. Most Drupal sites at UNI present the editor with a drop-down menu where you can pick from heading 2-heading 6, because Drupal has reserved heading 1 for the title you give your page. Using headings in the correct hierarchy (page begins with heading 1, progresses to heading 2, etc.) helps screen reader users, sighted users and search engines make sense of websites. Many screen reader users skim a Web page by tabbing from header to header.

Many Web designers use a WYSIWYG (What You See Is What You Get) type editor (like the toolbars in Microsoft Word) to style regular paragraph text bigger and/or bolder so that it appears as a heading to sighted users. Screen reader software will not differentiate text styled this way. A screen reader user would not be able to tab from heading to heading.

Use short but descriptive alternative text

Alternative text (ALT text) is the image description that screen reader users SHOULD hear when their software encounters an image or graphic on a web page. Alternative text also helps search engines (like Google) find and display images on the web. When inserting an image into most Drupal websites at UNI the dialog box that opens has an option called "Image description", and if you don't type in words that describe your image or photo, Drupal prompts you with a reminder. If the alternative text (Image description) is not added to images, the screen reader software might read out "IMAGE" or worse yet, something like IMG_0089. Avoid using text in an image. If you must use text in an image (for instance a logo), type that exact text into you image description/alternative text field.

Use descriptive link text

Link descriptive words instead of just a URL (http://www. etc...). All users will benefit from knowing what is going to happen when they click on a link. For instance, if you link to a document, users with a slow internet connection would like to know what is going to happen when they click on that link. If the linked text is "View and/or download a pdf of the agenda", users can opt out of visiting that link. Screen reader users often browse Websites by tabbing from one link to the next. By listening to just the link description (linked words) on a page, screen reader users can browse through pages and choose the link in which they're most interested. 'Click here' is NOT descriptive link text- it makes no sense out of context and should be avoided.

Use color with care

If you use ONLY color to impart meaning on your website, you are holding back information from many vision impaired users-including the estimated 6-9 percent of men in the U.S. who are color deficient or color blind. The most common broad category of color-blindness is often called red-green color-blindness. For someone who is color-blind, a website that uses a green button to signify "Go" and a red button to signify "Stop" could be very confusing.

Color contrast is also important to sighted users and users with low vision: the eye must work harder (and therefore becomes tired more easily) if low-contrast background colors are used, for example, to separate columns in a page. Red text on a green background is low contrast, as is purple text on a black background. Black text on a white background is high contrast. There are online tools available to help you determine good color contrast. One is WebAIM's color contrast checker at http://webaim.org/resources/contrastchecker/

Use lists

Using lists (bulleted or numbered) is very useful for screen reader users, as many screen readers announce the number of items in each list before reading out the list items. This helps these users know what to expect when hearing a list of items (such as site navigation).

Use logical linearization

Important information should always be placed towards the top of the page, so screen reader users hear this information first. Doing this actually benefits everyone, as the important information is now in the place where sighted users look first - the top of the page. Many search engines search the top of the page first also.

Short, front-loaded paragraphs are best

Front-loading means placing the summary of the paragraph first, followed by a more detailed explanation. This benefits everyone, as users no longer have to search around for the main idea of each paragraph.

Provide a way for users to skip repetitive content

One way to help users to skip repetitive content is to use heading elements in the proper hierarchy: see "Use heading elements properly". Also, there is HTML (code) that allows screen reader software to skip menus. This is especially useful when a menu is repeated at the top of every page on a site.

Avoid using Flash as the only means to access content

Flash content can be a problem on the Web. It will not play at all on iOS devices (iPad, iPhone, iPod Touch) and Adobe has discontinued Flash development for ALL mobile devices. Many users with disabilities, including those that use screen readers, have problems with Flash. Some search engines have problems finding Flash websites.

HTML5 is a better alternative to Flash. It is an open standard, uses less bandwidth and is more accessible than Flash. HTML 5 now even has the ability to embed video.

Avoid linking to documents in lieu of creating a Web page

If you have a PDF or a Word document that is mainly text, you can link to it, but unless the document itself is already accessible, it may be inaccessible to some users. If your document is mainly text, it is just as easy to copy and paste that text into a Web page as it is to make sure your document is accessible. If you must link to a document, there are tools to make PDFs and Word documents accessible. Contact Carolyn Dorr in University Relations for more information.

Back to top

Summary

Here are some things we can do to make it easier for people with disabilities to use our websites:

  • Visual disabilities: Create web pages with proper formatting such as headings and alternative text for screen reader software ease of use.
  • Hearing disabilities: Caption video and/or provide text transcripts for audio content.
  • Motor disabilities: Provide a way for users to skip repetitive content, such as proper use of headings.
  • Cognitive disabilities: Use headings to outline the important points of content.

Back to top


Federal Law Covering UNI's Web Space

From WebAim:

The Rehabilitation Act of 1973

was the first major legislative effort to secure an equal playing field for individuals with disabilities. This legislation provides a wide range of services for persons with physical and cognitive disabilities. Those disabilities can create significant barriers to full and continued employment, the pursuit of independent living, self-determination, and inclusion in American society. The Rehabilitation Act has been amended twice since its inception, once in 1993 and again in 1998. The Rehabilitation Services Administration (RSA) administers the Act. Two sections within the Rehabilitation Act, as amended, have impact on accessible Web design. These are Sections 504 and 508.

Section 508 of the act, as now amended, provides for us a blueprint of just what is intended in Section 504. Thus, Section 504 provides the context of the law and Section 508 provides the direction.

Section 504 of the Rehabilitation Act

is a civil rights law. It was the first civil rights legislation in the United States designed to protect individuals with disabilities from discrimination based on their disability status. The nondiscrimination requirements of the law apply to employers and organizations that receive federal financial assistance. This statute was intended to prevent intentional or unintentional discrimination based on a person's disability. Included as an amendment to the Rehabilitation Act of 1973, the message of this section is concise; Section 504, 29 U.S.C.794, states:

No otherwise qualified individual with a disability in the United States... shall, solely by reason of her or his disability, be excluded from participation in, be denied the benefits of, or be subjected to discrimination under any program or activity receiving Federal financial assistance.

Therefore, programs receiving federal funds may not discriminate against those with disabilities based on their disability status. All government agencies, federally-funded projects, K-12 schools, postsecondary entities (state colleges, universities, and vocational training schools) fall into this category.

Section 508

The Reauthorized Rehabilitation Act of 1998 included amendments to Section 508 of the Act. This section bars the Federal government from procuring electronic and information technology (E&IT) goods and services that are not fully accessible to those with disabilities. This would include the services of Web design since the Internet was specifically mentioned.

- Copyright © WebAIM

Back to top


Web Accessibility Resources

These links are resources to help you create accessible web pages.

Web Accessibility In Mind (WebAIM) Resources

Introduction to Web Accessibility
Web Accessibility Evaluation Tool (WAVE)
Color Contrast Checker

Color Blindness

WebAIM Article on Color blindness
Wickline Color Filter-How the web looks to color blind people
ColorZilla for Firefox -Firefox browser extension to identify colors on a web page
ColorZilla for Chrome
WebAIM Color Contrast Checker

Code Validation

Why Validate?
HTML  Validator
Cascading Style Sheets (CSS) Validator

Designing Web Pages to Standards

W3C Web Content Accessibility Guidelines (WCAG) 2.0
WAI Introduction to Web Accessibility
Accessible Rich Internet Applications [http://www.w3.org/WAI/intro/aria]

In 2012, University Relations purchased Siteimprove software, which is used to test sites for errors, usability and accessibility. This software is made available to departments to use and, in fact, a number have already taken advantage of this resource. Contact DeWayne Purdy if you want to use UNI's Siteimprove software.

Back to top


April 18, 2011 Web Accessibility Presentation   (PDF)

If you have questions about creating an accessible website in the UNI web space, contact:
Carolyn Dorr
University Relations
273-2761

Back to top