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. 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.

Laws relating to UNI's websites

Accessible Web design at UNI

Important Web accessibility notes

How to implement basic website accessibility

Summary: Creating accessible websites

Web accessibility resources

Laws Relating to the Accessibility of UNI's Web Space

The Rehabilitation Act of 1973 (Federal law)

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

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.

[Note: Section 508 was written to pertain to the Federal government, however, Iowa states that "In order to meet the standards set by Iowa, websites must comply with Section 508 standards." Also, in January 2018, Section 508 was revised to incorporate Web Content Accessibility Guidelines (WCAG) 2.0 Level AA as its Success Criteria and Conformance Requirements for websites as well as non-web electronic documents and software.]

The Americans with Disabilities Act (Federal law)

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.

Accessible Web Design at UNI

At UNI, many websites are created inside a Web Content Management System (CMS) called Drupal. A CMS 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.

UNI's Web Team 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, faculty, staff and visitors 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:

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

Important Web Accessibility Notes

Many Web users with 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 accessible 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. 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. Drupal automatically makes the words you type in the title field the page title.

Use descriptive alternative text

Alternative text (some Drupal sites call this feature 'Image Description') is read out loud to people that use screen readers, including users that are blind. 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

A heading describes the content that follows it, much like a news headline. When arriving at a new page, sighted users gravitate toward headings to quickly find what they want on the page. Screen reader and other assistive technology users can also skip from heading to heading. Use headings in the proper hierarchy, like an outline. Heading 1 is most important, heading 6 is least important. There should only be one heading 1 so screen readers and search engines can find it first. 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 and/or bold. Search engines use the headings (and other content) of your web page to index and display relevant results. Heading levels should not be skipped (that is, you shouldn't have a series of headings in the order Heading 2, Heading 3, Heading 5- which skips Heading 4 entirely).

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).

Ensure links make sense out of context

Link descriptive words instead of URLs (web addresses). Also, don't link phrases such as "click here" or "Read more". All users will benefit from knowing what is going to happen when they select 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 select that link. If you are linking to a file or document, put the document type in parentheses after the linked words, ie: Meeting agenda (PDF). 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. Using descriptive text for links that makes sense out of context is also good for search engine results lists- if your linked text matches what someone types in a search engine, your page will come to the top of the search results.

Provide headers for data tables

Tables that are used to organize tabular data should have appropriate table headers. Data cells should be associated with their appropriate headers, making it easier for screen reader users to navigate and understand the data table. Generally, a table caption should be used as well. Drupal, under Table Properties, offers a choice of column headers, row headers, or both. Also under Table Properties, Drupal offers a way to create a caption for your table.

Make Video and Audio Content Accessible

Video needs to be close captioned for many reasons. People with hearing impairments need the captions to make sense out of the video. Other users that benefit from closed captions are:

People who are learning English
People who are in a noisy place and can't hear the audio
People who are in a quiet place (like your office!) and don't want to disturb others

YouTube provides automatically generated closed captions that can be edited manually for clarification. You should NOT rely on YouTube's automatically generated captions-edit them or have a captioning service create a new caption file. Panopto also creates automatically generated closed captions. Get help with closed captions.

To make video accessible to people who are Deaf/blind, create a transcript. There is assistive technology called "refreshable braille" that will generate braille for these users.

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 creating a Web page for your information instead or, at the very least, provide an accessible alternative. Microsoft Word 2016 has tools to make Word documents more accessible, as does Microsoft PowerPoint. The best way to make PDFs accessible is to implement accessibility features in the authoring tool (Microsoft Word, InDesign, etc.). That accessibility usually transfers to the PDF when you convert the document. PDF documents can be made more accessible by including a series of tags using Adobe Acrobat Pro. WebAIM has accessibility instructions for older versions of Microsoft Word and Adobe Acrobat Pro.

Flash content should be avoided. 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. To check color contrast on the Web, you can sample colors using Colorzilla, an extension for Chrome and Firefox, then check the contrast with the WebAIM color contrast checker. For a tool to check color contrast on both web and other documents (anything you can see onscreen), download the Colour Contrast Analyser. 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 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.

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 provide text transcripts for audio content.
Motor disabilities: Provide a way for users to skip repetitive content, such as skip links.
Cognitive disabilities: Use headings to outline the important points of content.