"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. Now think of how frustrated you would be if you wanted to do a Web search, and couldn't. These are the things that Web designers think about when they are trying to make websites accessible for the whole of society.
Federal Law Covering UNI's Web Space
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.
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.
Section 508 directed the Access Board (The Architectural, and Transportation Barriers Compliance Board) to create binding, enforceable standards that clearly outline and identify specifically what the federal government means by "accessible" electronic and information technology products.
The Access Board enlisted the help of government, academic, industry, and disability advocacy groups to create the EITAAC, or Electronic and Information Technology Access Advisory Committee. With the help of this committee the Access Board was able to create the first set of accessibility standards for Federal E&IT and publish them December 21, 2000.
The Americans with Disabilities Act (ADA)
The Americans with Disabilities Act (ADA), passed in 1990, is civil rights legislation governed by the Department of Justice. The goal of this law is to make sure that people with disabilities can have an equal opportunity to participate in programs, services, and activities. It is important to note that the ADA does not deal directly with the accessibility of the Internet. This may be due to the fact that the Internet was just emerging as a widespread tool around the same time as the passage of the ADA. There are, however, two major sections in the ADA that may apply to web accessibility. These are:
Title II, which states that communications with persons with disabilities must be "as effective as communications with others" [28 C.F.R. ss 35.160 (a)] and
Title III, which deals with public accommodation of people with disabilities.
- Copyright © WebAIM
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:
- Low vision
- Inability to use a mouse
- Limited fine motor control
- Learning disabilities
- Inability to remember or focus on large amounts of information
Important Web Accessibility Notes
Web users with physical disabilities can still access websites by using assistive technologies (AT).
Assistive technology is a broad term used to describe tools and aids that help people with disabilities to perform everyday tasks independently. In regards to the Web, AT might help a user to perceive, operate, or understand the technology.
Examples of assistive technology for computer users include screen reader software (screen readers), magnification software, speech-to-text software, touch screens, Braille displays, and other alternative input and display options. For example, a blind user might use a screen reader to listen to the content of an online article they cannot see. Screen readers present information to blind and low-vision users by gathering accessibility information built into a website, application, or other technology. With a screen reader, a user can read content, operate interface elements and widgets, and perform tasks by hearing, rather than by sight.
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.
How to implement basic website accessibility
Create a short but descriptive page title
It's very important that a Web page's title is as descriptive as possible because this is the first thing most 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 short but descriptive alternative text
Alternative text (some Drupal sites call this feature 'Image Description') is read out loud to people that use screen readers, including blind users. FOR INSTITUTIONS LIKE UNI RECEIVING FEDERAL FUNDING, THIS IS A LEGAL REQUIREMENT. Bonus: The alternative text (image description) also helps search engines like Google Images display relevant results to users. Add alternative text (image description) to all images. Alternative text should be descriptive but brief. Don't use images with text in them, unless it is a logo or wordmark. If there are words in your logo, type those exact words in the alternative text/image description field.
Use heading elements properly
When encountering a lengthy web page, sighted users often scroll the page quickly and look for big, bold text (headings) to get an idea of the structure and content of the page. Many people that utilize screen readers also skim a long page of text by using a keyboard to tab from heading to heading. Use headings in the proper hierarchy. Heading 1 is most important, heading 6 is least important. Most Drupal sites at UNI reserve heading 1 for the title, so you won't see it in the text-formatting menu. Don't use headings just to make text BIG or bold. Search engines use the headings (and other content) of your web page to index and display relevant results. There should only be one heading 1 so screen readers and search engines can find it first. Heading levels should not be skipped (that is, you shouldn't have a series of headings in the order Heading 1, Heading 2, Heading 4- which skips the h3 entirely).
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).
Ensure links make sense out of context
Link descriptive words instead of a URL or web address. All users will benefit from knowing what is going to happen when they click on a link. For instance, if you link to a large document file, users with a slow internet connection might like to know what is going to happen when they click on that link. If the linked text is something like "View and/or download a pdf of the meeting minutes", 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.
Provide headers for data tables
Tables are used online for layout and to organize data. Tables that are used to organize tabular data should have appropriate table headers (the <th> element). Data cells should be associated with their appropriate headers, making it easier for screen reader users to navigate and understand the data table.
Make Video and Audio Content Accessible
Caption and/or provide transcripts for video and audio. YouTube provides a caption service that can be edited manually for clarification. For content that is audio only, a transcript will usually suffice.
Make Non-HTML Content Accessible
Ensure accessibility of non-HTML content, including PDF files, Microsoft Word documents and PowerPoint presentations. PDF documents and other non-HTML content must be as accessible as possible. If you cannot make it accessible, consider using HTML instead or, at the very least, provide an accessible alternative. Microsoft Word has tools to make Word documents more accessible, as does Microsoft PowerPoint. PDF documents can be made more accessible by including a series of tags.
Flash content is not generally recommended. 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.
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. Another is the Snook Colour Contrast Checker Tool. Adobe Photoshop has a color blindness filter under View> Proof Setup> Color Blindness.
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.
Use short, front-loaded paragraphs
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".
Ensure users can complete and submit all forms
Ensure that every form element (text field, checkbox, dropdown list, etc.) has a label and make sure that label is associated to the correct form element using the <label> element. Also make sure the user can submit the form and recover from any errors, such as the failure to fill in all required fields.
Thanks to WebAIM for much of the above content.
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.
Web Accessibility Resources
These links are resources to help you create accessible web pages.
Web Accessibility In Mind (WebAIM) Resources
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
Snook Colour Contrast Checker Tool
Designing Web Pages to Standards
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.
If you have questions about creating an accessible website in the UNI web space, contact: