- What is Web Accessibility?
- Benefits of Accessibility
- The Americans with Disabilities Act
- Designing an Accessible Site
An important, oft overlooked aspect of web design is the need for accessibility. This system is designed to assist by providing an accessible framework, and by including features like special access keys. (See http://plone.org/accessibility-info for more information.) However, it is still important to keep in mind the different types of users and devices that will be accessing your site.
What is Web Accessibility?
Accessibility involves allowing users who may be operating under a variety of capability contexts, to access information on your site one way or another. The World Wide Web Consortium (W3C), an organization that develops guidelines for the Web, lists several of these contexts in their Web Content Accessibility Guidelines (found at http://www.w3.org/TR/WAI-WEBCONTENT/). Users may have a variety of difficulties accessing a site:
- They may not be able to see, hear, move, or may not be able to process some types of information easily or at all.
- They may have difficulty reading or comprehending text.
- They may not have or be able to use a keyboard or mouse.
- They may have a text-only screen, a small screen, or a slow Internet connection.
- They may not speak or understand fluently the language in which the document is written.
- They may be in a situation where their eyes, ears, or hands are busy or interfered with (e.g., driving to work, working in a loud environment, etc.).
- They may have an early version of a browser, a different browser entirely, a voice browser, or a different operating system.
Thus, accessibility involves attention to users with visual, auditory, speech, physical, learning, cognitive and neurological disabilities. But accessible design can also assist a variety of other users as well.
Understanding this also means understanding the different devices your users might use to access the site, including screen readers, braille display, captioning software, and voice recognition software. Other users might access the site through mobile phones, PDA’s, and other small screen devices, or use keyboard navigation, enlarged font sizes and specialized color settings to assist them in viewing and navigating the Web.
Benefits of Accessibility
Accessible design brings a number of benefits. First, the Web provides an invaluable tool for people with disabilities because it provides greater access to information and increased opportunity for social interaction for many users. Second, making design accessible often leads to side benefits such as greater usability and download speed for all users. Third, making your website accessible means that your content can reach a wider audience, something that can be particularly important for sites featuring medical information for the general public. And lastly, having an accessible site improves perception of your department or organization as one that is receptive to the public interest.
The Americans with Disabilities Act (ADA)
Accessible site design is not just a good idea, it’s the law. According to the official ADA webpage, http://www.ada.gov:
“If a government entity receives Federal funding, The Americans with Disabilities Act (ADA) and the Rehabilitation Act of 1973, generally require that State and local governments provide qualified individuals with disabilities equal access to their programs, services, or activities unless doing so would fundamentally alter the nature of their programs, services, or activities or would impose an undue burden. One way to help meet these requirements is to ensure that government websites have accessible features for people with disabilities.”
“Section 508” is the name given to amendments to the Rehabilitation Act, enacted in the 1990s, that extended accessibility requirements to electronic and information technology. More information about Section 508 standards and how to comply with them is available at http://section508.gov/.
Designing an Accessible Site
Using Logical Markup
The basic buidling block of the typical web page is the HTML or XHTML element. The editor in the School of Medicine’s content management system handles coding for you. Even so, you must know how to format your content so that it is most accessible to users. Using proper headers (Heading 2, Heading 3, etc.) and paragraphs (Normal) make it possible for impaired users to follow the logical flow of your content. A screen-reading device can let them know what the main headings are, subheadings, etc. If you alternatively make a title big and bold, instead of using a format preset, a blind user would see it as a regular paragraph, and not a designated heading.
Although it is impossible to give an exhaustive list of all the elements of a perfectly accessible web page, there are a few guidelines to keep in mind. Most important in regards to images, dynamic content or multimedia, you must provide a text equivalent (ex: “alternative text” tag) to make the page more accessible. According to the W3C guidelines:
- “Text content can be presented to the user as synthesized speech, braille, and visually-displayed text. Each of these three mechanisms uses a different sense — ears for synthesized speech, tactile for braille, and eyes for visually-displayed text — making the information accessible to groups representing a variety of sensory and other disabilities.
- In order to be useful, the text must convey the same function or purpose as the image. For example, consider a text equivalent for a photographic image of the Earth as seen from outer space. If the purpose of the image is mostly that of decoration, then the text “Photograph of the Earth as seen from outer space” might fulfill the necessary function. If the purpose of the photograph is to illustrate specific information about world geography, then the text equivalent should convey that information. If the photograph has been designed to tell the user to select the image (e.g., by clicking on it) for information about the earth, equivalent text would be “Information about the Earth”. Thus, if the text conveys the same function or purpose for the user with a disability as the image does for other users, then it can be considered a text equivalent.”
While text equivalents may not be necessary for every image, animation, or video, they should be used in cases where these media provide necessary information or are used for navigation.
The easiest way to make your content accessible is through the use of the “alt” attribute (for alternative text) on your images, or putting a caption on your tables, etc. While the information stored within these attributes will not be visible to the average viewer, they will provide contextual information for those who are unable to view the page. More information on creating alternative text in the FCK text editor is also available under the section on text editing.
The W3C also suggests several other guidelines for good web design:
- “Don’t rely on color alone.” Many users, such as those with color-blindness, might not be able to follow directions like “Click the red circle to find out more.” This is another example of the importance of text equivalents for accessibility.
- “Tables can be trouble.” One common practice of web design is to build a page within an HTML table, for presentational purposes. Unfortunately, this can obscure the page’s content for users reliant on screen-readers. Many sites are improved through the use of Cascading Style Sheets (CSS), a technology thoroughly used in this system.
- Placing text within tables, www.usability.com.au/resources/tables.cfm particularly those that are large or complex, can make it difficult for blind or low-vision users to access them. Tabular data can be clarified by adding headings to each of the columns and/or rows in in the table. You can create accessible tables using the FCK text editor either by using the table button or by creating the source code. See http://www.usability.com.au/resources/tables.cfm for more information on making accessible tables for the web.
- “Ensure that documents are clear and simple.” Although all users value pages that are both precise and concise, readers who have difficulty reading may require additional help. One way to help insure that your content is getting through to a wider range of users is to check the readability of your site. There are free utilities available on the web (see ‘Resources’ below) that can assess a page’s vocabulary for its reading level, thus allowing you to adjust the site to reach users such as non-native English speakers and those with lower levels of education.
- “Think about how the page expands.” Users who have trouble reading small text may increase the size of the text in order to read it. Expanding the text in this way sometimes causes the page design to “break,” leading to unexpected consequences for the presentation of the page contents.
- Ensure that pages featuring new technologies transform gracefully. Make sure that your page would be accessible even when newer technologies are not supported or are turned off.
- “Provide context and orientation information.” Marking up text by explicitly defining page elements such as headings and paragraphs can lead to a much improved experience for many users who rely on alternate means of accessing web pages. Also, having link names that are descriptive is also a useful way to provide accessibility. Links called “read more” or “click here” are not as helpful as semantically meaningful link names, such as “2007 annual report” or “monthly calendar.”
For more information about web accessibility, check out the resources below.
Accessibility Standards and Information: W3C Web Content Accessibility Guidelines
This page features the accessibility guidelines of the World Wide Web Consortium, one of the central standards bodies for the Web.
NCSU’s ITD Web Accessibility Site
This page, hosted by NC State University, features an extensive overview of how to design web pages for accessibility. An excellent resource for further information.
UNC LinkedIn Learning Movie Library on Web Accessibility
This page provides a series of videos on Web accessibility. Though some of the videos require a paid membership, several useful videos are available here for free. The selection “Experiencing a website via a screen reader” is an excellent introduction to the way that blind users access the Web.
Utilities for Accessible Web pages
Colorblind Web Page Filter
This utility allows you to check your URL to see how it would look for users with a variety of different types of colorblindness. It also includes other helpful tools, such as viewing your page without images or stylesheets to see how the page would appear without these features.
Vischeck Colorblind Image Filter
This utility allows you to upload an image in order to see how it would be viewed by users with different types of color blindness.
Snook.ca Colour Contrast Check
This page features a dynamic utility that allows you to specify foreground and background colors to see if they provide enough of a contrast when viewed on a black and white screen or by those with color deficits.
Juicy Studio Readability Test
This site provides a way of testing the readability of your site by showing the reading level of your content.
Accessibility at UNC
Department of Disability Services
CB# 7214 SASB – Suite 2126
450 Ridge Road
Chapel Hill, NC 27599-7214
Telephone: (919) 962-8300 (V/T)
Fax: (919) 962-4748