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.


Universal Web Design

Four Major Categories of Disabilities That Hinder Web Usability

Designing for Users with Visual Disabilities

Other Web Accessibility Issues

Four Tips for Creating Accessible Web Pages

Federal Law Covering UNI's Web Space

Web Accessibility Resources

Universal Web Design

There are many disabilities that prevent users from accessing web content, but in most cases there are some very simple fixes that make websites easier for ALL users to access. For instance, many of the design methods that allow people with disabilities to access your website also make it easier to access on a smartphone or tablet. This method of designing is called universal design. Universal web design makes the Internet more accessible to all users.

There are four major categories of disabilities to be considered when aiming for web accessibility:

  1. Visual
  2. Hearing
  3. Motor
  4. Cognitive

Designing for Users with Visual Disabilities

For a user with vision impairment, the assistive technology most commonly used is a screen reader.

Screen readers convert text into synthesized speech. A screen reader uses the HTML code on the Web to announce the content to the user. People who are blind can listen to text on the Web using a screen reader.

Most screen reader users don't use a mouse to navigate because they can't see where to click with a mouse. They use the keyboard to navigate websites. There are many other users that for a variety of reasons use only a keyboard for navigation. 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.

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.

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: H1, H2, H3, H4, H5 and H6. H1 tells the screen reader (and search engine) "The following information is the most important thing on this page". Every Web page must have one H1 heading, and ideally there would be only one as it indicates the most important idea on the page. You can still use CSS to style your headings- you could have two different colors of H3 headings, for instance, but the screen reader will announce both as equally important.

Using headings 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 to style regular paragraph text bigger and/or bolder so that it appears as a heading to sighted users, but a screen reader can't "see" this so the heading will not be announced any differently than normal paragraph text.

Use short but descriptive ALT text

ALT text is the alternative text for images that gets read out to screen reader users. ALT text also helps search engines find and display Web content.

Use descriptive link text

Screen reader users often browse Websites by tabbing from one link to the next. Also, by calling up a list of on-page links, 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 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.

Use lists

Using lists within the HTML code is extremely useful for screen reader users, as 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).

Provide a way for users to skip repetitive content

One very efficient way to to accomplish this is by using a "skip to main content" or "skip nav" link. If you use skip nav links, keep them visible and at the top of the page. Skip nav links allow people using screen readers to move from the top of the page to the beginning of the "main content" of the page.  This also benefits keyboard only users- imagine having to use a stick in your mouth to tab through a multi-level navigation menu.

Another way to help users to skip repetitive content is to use heading elements in the proper hierarchy: see Use heading elements properly.

Use "Go" or "Submit" buttons with select lists

Place a "Go" or "Submit" button immediately after select lists to avoid sending the screen reader or keyboard user to the first option in the list. Otherwise, the choice that is first encountered by a screen reader in a select list will be activated before the user can see what the other options are.

Include a well-positioned label for each field on a form

The linearized view that the screen reader uses may not help the user understand whether a form label applies to the field before it or the field after it. Label each field and place the label close to the field, usually immediately to the left or immediately to the right (although left is preferred) of the field to be filled in. Using the <label> tag and the title attribute for form elements solves the problem of not knowing which field the text label applies to.

Avoid using Flash as the only means to access content

In May 2012, WebAIM conducted a survey of preferences of screen reader users. The survey asked respondents to select their most, second most, and third most problematic items from a list. The most difficult/frustrating barrier to screen reader users was the presence of inaccessible Flash content.

Flash will not play at all on iOS devices (iPad, iPhone, iPod Touch) and Adobe has discontinued Flash development for all mobile devices. 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.

Use Color with Care

If you use only color to impart meaning on your website, you are holding back information from vision impaired users. One form of vision impairment is color-deficiency, or what is commonly called color blindness. One might expect the percentage of affected people to be relatively constant in all countries; however, this is far from the truth. In most Caucasian societies up to 1 in 10 men suffer, but only 1 in 100 Eskimos are 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 square to signify "Go" and a red square 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. To check for color contrast issues, use the WebAIM contrast checker at http://webaim.org/resources/contrastchecker. To sample any colors in Firefox, use the ColorZilla extension at http://www.colorzilla.com/firefox/. ColorZilla is now available for the Chrome browser as well: http://www.colorzilla.com/chrome/.

Back to top


Other web accessibility issues

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. In fact, there is legislation that makes it mandatory for us to do our best to make our web pages accessible to all users. Here are the major categories of disability types that could interfere with Web usability:

Visual

Blindness
Low vision
Color-Blindness

Hearing

Deafness

Motor

Inability to use a mouse
Limited fine motor control

Cognitive

Learning disabilities
Distractibility
Inability to remember or focus on large amounts of information

Four Tips for Creating Accessible Web Pages

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

More information at the Web Accessibility In Mind (WebAIM) website:

http://webaim.org/

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