Nsaa – Hand-woven Basket; Click for meaning Web Accessibility
Designing Web Pages for All Users
line separator

Contents

line separator

Below are suggestions, concepts, resources, and links to materials for designing and producing web pages that allow access to the entire population of potential users regardless of disability or computer model. These are based on two important documents: Section 508 Standards for Accessible Web Content, and Web Content Accessibility Guidelines 1.0. These are rules for creating pages with accessible content. For additional documents on various aspects (i.e., XML coding for accessibility) see the section below on Guidelines, and in particular the W3C section.

Links in this document showing the W3C logo symbol represent key resources from The World Wide Web Consortium (W3C), especially links to the Web Accessibility Initiative (WAI) pages. W3C and WAI are the organizations that develop and maintain standards for HTML coding, Web accessibility, and related matters. Web pages that meet the WAI requirements are allowed to show the WAI accessibility level 1 icon symbol, with links to what this means.

line separator

Introduction to Web Accessibility

According to a National Council on Education annual survey of college freshmen (2001), at least 9% of college students have a disability of some sort. It is believed that a higher percentage have a disability but are not making this known to their schools. (see report). Later studies place the rate much higher, with trends showing this figure is increasing.

Starting Point

A good place to start: Getting Started: Making a Web Site Accessible. World Wide Web Consortium logo -- click link to access W3C Initial introduction to resources for people new to Web accessibility (Español). This includes a link to: How People with Disabilities Use the Web, which explains some of ways that people with disabilities access and use web pages.

Also see:

The major categories of disability types are

  • Visual blindness, low vision, color-blindness
  • Hearing deafness
  • Motor inability to use a mouse, slow response time, limited fine motor control (includes persons with orthopedic disabilities, or who have Repetitive Strain Injuries (RSI) such as Carpal Tunnel Syndrome, Myofascial Pain Syndrome, and others
  • Cognitive learning disabilities, distractibility, inability to remember or focus on large amounts of information.

These can be divided into two groups: visible and invisible disabilities.

Red Asterisk: This is a good site to visitWhy accessible web design is important

  • Web pages should be made accessible to EVERYONE regardless of their physical or mental impairment (e.g., Albert Einstein, Stephen Hawking)
  • Web pages should be made accessible to EVERYONE regardless of their computer equipment (age, speed, and connection)
  • More resources are moving onto the Web or computing environment (with less resources being added in print or other non-electronic formats)
  • More services are being added to Web and computing environment creating a greater dependence on computer use
  • It makes for higher quality page design
  • The purpose of a web page is TO PROVIDE DATA AND INFORMATION while not confusing or challenging the user (in other words if the site is too hard to navigate, the user will not use it or will not get the intended message or data). An unfriendly page will not be used
  • Good page design increases page use
  • Good page design makes you and your constituents look better to users
  • Good page design is morally right. Create pages for others as you would like to have others create pages for you
  • It's the LAW!

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

Go to Top of Page

Red Asterisk: This is a good site to visitImportant Things to Remember When Designing a Page

Key Points

  • Accessible web pages are not plain, text-only pages.
  • Accessible web pages do not have to be boring.
  • Accessible web pages should contain the same level and quality of content that any other pages contain.
  • Accessible web pages require as much human attention as any other pages.
  • Accessible web pages usually are adaptable to more browsers, displays, equipment, and connection speeds.
  • If you design all your pages as accessible web pages, then you only need to create one page for everyone.
  • If you design all your pages as accessible web pages, then everyone will benefit.

The following are a selection of ways that you can improve your pages to be more accessible. Not all are going to be available and you may not have time to do all of them, however, the more that you can afford to do, the better your pages will be found and used. First, several key points must be stated:

  • Consider the content of your page. What is its message? What are the essential elements of the message?
  • Be clear, concise when writing text and arrange the content on the page in a logical, easy to follow fashion. Less text is easier to read and comprehend, and will more likely be read.
  • Use fonts, type sizes, consistently throughout a page/site and prefer using one or possibly two type faces only. This makes the pages easier to read and to follow.
  • Think about how your page might be used, and by whom. Be as EMPATHETIC as possible (for a real challenge, put on a blindfold and try to read your page)
  • Create pages that help users, not pages, in which FORM is more important than CONTENT. Avoid trying to impress users with your "creativity" and "knowledge" of fancy effects and gimmicks.
  • Be consistent with terms, HTML tags/coding, and with how you label page elements (e.g., images)
  • Learn about the HTML commands that will display your data correctly to screen readers or text readers. In particular learn about:
    • META tags to describe content, to identify content features
    • HTML codes and how THEY ARE SUPPOSED TO BE USED
    • ALT tags and how to create descriptive ones. There are ALT tags to use for defining acronyms, alternative, long text descriptions, and others
    • CSS style sheets can be used to control text elements (size, font, layout) as long as CCS does not affect or prohibit access. [See: Roselli, Adrian].
    • Various format tags, such as <ACRONYM title=""> and <ABBR title=""> that will display in text-only or to screen readers with the description (Acronym or Abbreviation). These help to "describe" in a non-visual way
    • Form-related tags and codes. Provide LABELS for input fields
    • Tags for quotes in foreign languages (e.g., <span lang ="de"></span> for a German language quote). (See more: HTML for Translators; LC Language Codes).
  • Use the <html lang=""> tag in the <head> tags to state the language used on the page
  • When coding, use code as efficiently as possible and only use elements such as tables or color when they are necessary.
  • If you use tables, code them in PERCENTAGES rather than PIXELS so that text and other elements can be adjusted by the user
  • Format text blocks using formatting tags (e.g., use <text align:center> rather than <center>. Use <blockquote> for quotes, not to indent.
  • Use graphics, sound and video files sparingly and only if these will provide information that enhances the content. Avoid adding animations and sounds if they do not add to the content. Whenever, in doubt, do not use it.
  • If you create buttons using image files and image maps, make the buttons large enough to select without hitting an exact target (in other words, bigger selection areas are easier for people to click on).
  • If you use radio buttons or other FORM related selection devices, use them sparingly or only when needed. Small buttons (or target areas) to select are difficult for some people to click on.
  • When offering a choice or any form of response-required element (e.g., button, link), make this obvious to any user.
  • When working with color on a page (backgrounds, text, links, etc.) make sure to choose colors that truly contrast (in brightness) or that do not become hard to read when viewed. Printing the page out in black and white will show some problems, but other situations can only be judged by researching. View the color chart to see how colors appear on screen displays. [see also: Arditi].
  • When using color for text be sure that the information is also described using <heading..> tags or a border. You can also offer an alternate description in your text. [see also: Arditi].
  • If you create a page that automatically updates data by refreshing the screen, make sure to provide a user option to stop this
  • Learn how to write scripts that work with adaptive technologies
  • Create device-independent pages. Remember that not all users are using a mouse, or a scroll wheel, etc. Allow the user to determine which device to use by making sure to not create codes that are device-dependent (i.e., "on click")
  • Check your work using validators and also by performing several simple steps:
    • Print your finished page in Black and White (grayscale) to see how it might appear to someone with visual difficulties
    • Use validators to find coding errors or deficiencies
    • Turn off the graphics on your browser and view the page as TEXT ONLY. You can see if the page can be "read" well or if it is confusing
    • View the page with the style sheet setting turned OFF
    • Change the text size on your browser to see how the page looks
    • Try to navigate your page using the TAB key to move about the page. How well does it move through the document?
    • Try turning on text-to-speech and listen to how your page is spoken
    • Have people test your page, especially those who might have difficulties with access.

Accept that no matter how hard you work at it, more can always be done. This also means that you need to decide how much can reasonably be done with your page. The Guidelines have different levels of compliance and each is progressively more complete. The minimum levels however may be more than enough for your needs.

"Do the best that you can to make your website as accessible as is possible."

Refer also to: Quick Tips To Make Accessible Websites.

Go to Top of Page

Guidelines, Standards, and Laws

Federal

Section 508 requires that electronic and information technology that is developed or purchased by the Federal Government is accessible by people with disabilities. It concludes with a summary section pegged to the sixteen Section 508 Standards (non-governmental site).

Another useful site is Web Accessibility for Section 508. This online course provides an overview of Section 508 and the specifics of making a web page accessible.

Also useful is the Section 508 Checklist (non-governmental site).

Guidelines For Accessibility

World Wide Web Consortium logo -- click link to access W3CWeb Accessibility Initiative (WAI) W3C (World Wide Web Consortium). In addition to the guidelines, this site provides extensive help on the entire process of providing access to web pages. Also included on the site are:

New York State

University at Buffalo

Web Accessibility at UB. The University at Buffalo has compiled guidelines and resources to describe how to comply with official web pages.

The University at Buffalo Libraries developed the following guides to assist in meeting the Priority 1 requirements. These work within the framework of the State requirements:

Canada

The Canadian Charter of Rights and Freedoms "guarantees the rights and freedoms set out in it subject only to such reasonable limits prescribed by law as can be demonstrably justified in a free and democratic society." Under: Equality Rights:

15. (1) Every individual is equal before and under the law and has the right to the equal protection and equal benefit of the law without discrimination and, in particular, without discrimination based on race, national or ethnic origin, colour, religion, sex, age or mental or physical disability

This document is the basis for legal rights of Canadians with disabilities. The Canadian government has adopted the document Common Look and Feel for the Internet as its requirements for accessibility. This is a good reference for American web designers as well.

Other Countries

Go to Top of Page

Evaluating Page Accessibility

Validating Software

  • World Wide Web Consortium logo -- click link to access W3CValidate Your Markup. A good place to start. Enter your URL and see a summary of how your page fares [documentation online helps to understand the results]. See also Validators in the QA Toolbox W3C page with validation tools for all sorts of Web pages. See additional W3C validators:
  • WAVE 3.0 Accessibility Tool
  • STEP508 page. (the Simple Tool for Error Prioritization for Section 508 compliance). You can download this WINDOWS application for free and use it to clean up pages for accessibility. Additional web-checking applications links on page.
  • WebXACT (formerly WebBobby). Free service (there is also a pay application) that allows you to test web pages, to identify and fix barriers to accessibility. Also assists in encouraging compliance with existing accessibility guidelines. Enter a URL and WebXACT shows accessibility problems and offers suggestions on fixing the page. Also gives concepts to explain why something may need to be explained using alternate text (e.g., color background).
  • UsableNet offers industry-leading information and expertise in the form of simple, easy-to-use software tools that automate website usability and accessibility testing. UsableNet develops Web productivity solutions that target Web designers, Web developers, Web masters, and IT professionals in the Corporate, Government, Education, and Graphic Arts markets. Available in the form of software applications and online services, UsableNet products enable users reduce website development and maintenance time, improve the Web experience for site visitors, and standardize Intranet and Internet content across development teams by helping them to incorporate usability and accessibility principles.
Other checking systems (and resources) include:
  • Page Valet. Checks accessibility with W3C WCAG and Section 508.
  • Using Opera to Check for Accessibility
  • What does your HTML look like in Lynx? Allows web authors to see what their pages will look like (approximately) when viewed with Lynx, a text-mode web browser.
  • Web Page Backward Compatibility Viewer. See how your page looks on older browsers/equipment
  • WebTV/MSN TV Viewer. WebTV Viewer simulates the TV browser on a PC. It can tell you if your Web content is appropriate for the receiver. It has tools to show you how content is altered to look the best on a television screen. There is a special window that shows how tables and images are scaled, information that is not available on a standard receiver. It even contains utilities for creating triggers and sequencing them into a file for use when your links are incorporated into a broadcast.

Other products to test websites of all sizes for accessibility issues are found in the accessibility section on www.watchfire.com. In addition, the following provides help on implementing and maintaining a compliant website:

Validators are not perfect either. See my score on this page. Most "problems" are in the URLs, which use a variety of non-standard conventions. Or view the UB Libraries page, or

Go to Top of Page

Key Websites

The following is a selection of the more useful websites advocating for, or relating to, accessibility issues.

Organizations & Government Agencies

Go to Top of Page

Websites On Accessibility and For People with Disabilities

Pages of Related Links

Go to Top of Page

Products for Web and Computer Access

  • Accessibility Training CD-ROM
  • Arkenstone. Scanning, reading machines, and other computer add-ons for accessibility, especially to sight-impaired users.
  • Sensory Tools. Computing and other devices built specifically for blind, sight-impaired, and color blind users. Some are quite innovative and unique to the field. Includes: reading machines, color readers, PCs for the blind, braille calculators and compasses, and the Aria PDA talking assistant.
  • Freedom Scientific. Makers of hardware and software providing access for a variety of disability situations. Includes products:
    • JAWS® for Windows, a powerful screen reader software that outputs through speech synthesizer and to refreshable Braille displays.
    • MAGic, screen magnification with true low vision screen reading and speech option.
    • OpenBook, converts printed documents or graphic based text into an electronic text format using accurate optical character recognition and quality speech.
    • Connect Outloud, designed for blind or low vision computer users to access the Internet through speech and Braille output.
    • Hardware includes: Braille keyboards, readers, printers (embossers), and other devices.
  • GW Micro (Window-Eyes). Screen enlarging for vision-impaired.
  • IBM Home Page Reader 3.0.4. Powerful Web access tool for blind and low vision users.
  • Assistive Technology. Listings of products and links, for users, resource selectors, and lab site planners.
  • WebABLE - A provider of Web accessibility technology, consulting, and training.
  • Apple Accessibility page. Assistive technology products and resources.
  • Microsoft Accessibility page. Assistive technology products and resources.

Bibliography & Reading Materials

See also Additional Resources. To keep up with the changes in this topic use a Google search for Web accessibility (also try: website accessibility and accessible web pages). You may also wish to search various journal databases, such as: Ergonomics Abstracts Online. However, there will be articles published in many fields that relate to Web design, and accessibility issues, including: Communication, Computer Science, Informatics, Library Science, and Business among others.

Go to Top of Page

 
line

David J. Bertuca, Arts & Humanities Librarian
This page was designed as a presentation to LIS 518 class.


Last Modified: 10 July 2013
URL: http://www.buffalo.edu/~dbertuca/ada/web-access.html

Go to: UB Libraries

Welcome to UB! Click here for Main UB Page
Nsaa – Hand-woven Basket

Nsaa (Adinkra (Sub-Saharan African) language) = Hand-woven Basket
Symbol of Excellence, Genuineness, and Authenticity.
“ This symbol extols excellence and eschews satisfaction with mediocrity.”

Adinkra design adapted from West African Wisdom: Adinkra Symbols and Meanings