Universal Design of Web Pages in Class Projects

file type icon UD-Web-Pages-Class-Projects.pdf
By: 
Burgstahler, Sheryl, Ph.D.
Adding value to web instruction

The World Wide Web has the potential to make information accessible to everyone. However, this potential cannot be realized unless content is designed so that all Internet users can access the full range of resources this tool delivers. The use of web content that is accessible to everyone in our schools is consistent with No Child Left Behind legislation and state standards for the learning of all students.The web has become an essential tool for educational activities at all levels. Students both learn from web resources and create web content. As students develop web pages as part of class assignments, they should keep in mind that some visitors to their websites

  • cannot see graphics because of visual impairments;
  • cannot hear audio because of hearing impairments;
  • cannot operate a mouse;
  • use slow Internet connections and modems or equipment that cannot easily download large files;
  • have difficulty navigating sites that are poorly organized with unclear directions because they have learning disabilities;
  • speak English as a second language, or are younger than the average user; are senior citizens.

The Americans with Disabilities Act of 1990 (ADA) and Amendments of 2008 require that covered entities provide access to programs and services to people with disabilities. The U.S. Departments of Justice and Education have issued rulings and statements that support the position that web content is covered by the ADA. Section 508 of the Rehabilitation Act requires that web pages and other information technology procured, developed, or used by federal agencies adhere to accessibility standards. Clearly, accessible website design is an essential skill for all web content developers. It is critical that students developing websites for class projects apply accessible design principles so that as they move on to careers and community service, they will be able to meet legal and ethical obligations regarding the accessibility of information resources.

This publication is designed to give guidance to instructors of precollege and postsecondary web design courses as well as to those who, as an activity in their classes, have students create web pages. It describes options for integrating accessibility content within any course. References are made to ready-to-use publications online in PDF and alternate formats for duplication as handouts for your class. Video presentations referenced may be freely viewed online, or purchased in DVD format. These materials can be used to develop the knowledge and skills of both instructors and students. Permission is granted to modify and duplicate all DO-IT materials for noncommercial purposes, as long as the source is acknowledged.

Choose some or all of the following suggestions, depending on the goals, objectives, and duration of a specific course. You will find it easier to link to the websites listed in the following paragraphs if you are using the electronic form of this document.

Objective: Students will be able to describe how individuals with different types of disabilities access information technology, including web pages.

People use a variety of technologies to access the web. For example, someone who is blind may use a speech output system that reads aloud the content of the computer screen. A person with a mobility impairment may be unable to use a mouse and may rely on a standard or alternative keyboard alone for web browsing. To help you and your students understand how individuals with disabilities access web and other electronic resources, read the publication and view the video presentation at the following location:

For more detailed information about assistive technology for individuals with specific disabilities, read the publications and view the video presentations listed below:

More information about assistive technology can be found by searching the AccessSTEM Knowledge Base.

Objective: Students will be able to define "universal design" and describe how it can be applied in the design of web pages.

To create resources that can be used by the widest spectrum of potential visitors rather than an idealized "average," universal design principles can be applied. Routinely ask students to think about the broad range of characteristics their site visitors might have and design their resources to be accessible to as many people as possible. This includes individuals with disabilities, senior citizens, people for whom English is a second language, and those using outdated hardware and software. You and your students can read the following publication for more information about general principles and specific applications of universal design:

Ask your students to come up with examples of how universal design might be applied to products used in the school or in the home to make them easily used by more people. Applying universal design strategies to the creation of websites is not difficult, but it does require learning about typical web access challenges and solutions. You and your students can gain an overview of accessible website design by reading the following publication and viewing the video:

Objective: Students can describe two widely used web accessibility guidelines and standards.

The World Wide Web Consortium (W3C) develops and maintains the protocols used on the web to insure interoperability and universal access. As Tim Berners-Lee, Director of the W3C, puts it:
"The power of the web is in its universality. Access by everyone regardless of disability is an essential aspect."

The W3C's Web Accessibility Initiative (WAI) develops Web Content Accessibility Standards (WCAG). The WAI is in the process of updating its standards; the draft of WCAG version 2.0 includes guidelines grouped under four qualities of accessible websites: perceivable, operable, understandable, and robust. You and your students can learn more about the WCAG:

In 2001, the U.S. Architectural and Transportation Barriers Compliance Board (Access Board) developed accessibility requirements for web pages of federal agencies. The list of guidelines for accessibility provides a good model even for organizations that are not covered entities. You and your students can learn more by reading the following publications:

Consider using AccessIT's Accessible University Mock Site to demonstrate accessible design using the Section 508 standards.

Many states, schools, and other organizations have adopted the W3C WCAG or the Access Board standards; some have developed their own guidelines or standards.

Talk to your students about the difference between a "guideline" and a "standard." Find out if your school district or state has adopted these or other web accessibility guidelines or standards. If so, discuss ways that your class can promote their use. If not, consider taking on a class project to develop and promote web accessibility policies and procedures that could be adopted by your school district or state. Consider having your students complete an online tutorial about web accessibility, such as one of the following:

Objective: Students will be able to describe and apply several design strategies that promote web accessibility and usability for everyone.

Well-organized web content helps visitors navigate through the information presented. To encourage your students to create websites that are easy to use by everyone, provide them with general guidelines such as the following adapted from the publication and video presentation World Wide Access: Accessible Web Design. Consider giving students a list of general website design guidelines that they MUST incorporate in their website projects (and that are considered as grades are assigned), and encourage them to address additional accessibility issues (perhaps for extra credit).

Maintain a simple, consistent page layout throughout your site. A consistent design and look makes it easier for website visitors to locate the specific information they seek. A feature presented on every page, such as a standard navigation menu or logo for the site, should always appear in the same place. A clear, consistent presentation will especially assist people with visual impairments or learning disabilities who have difficulty using disorganized navigation schemes.

Keep backgrounds simple. Make sure there is enough contrast. People with low vision or color blindness and those using black and white monitors can have difficulty reading information at sites with busy backgrounds and dark colors. Some background images and colors obscure text and make reading difficult. Make sure that there is enough contrast between your text and the background of the page. Choose background, text, and link colors carefully, and always test a site by viewing it at different resolutions.

Use standard HTML. Hypertext Markup Language (HTML) was developed by W3C to be a universal format for creating websites. Using standard HTML ensures that your students' web content can be accessed by all browsers. Use the most current version of HTML and avoid tags, features, and plug-ins that are available to only one brand or version of a browser. An HTML validation program can be found online.

Make link text descriptive so that it can be understood out of context. Visitors who are blind sometimes navigate a page by using a list of links generated by their text-to-speech software. For this reason, links should provide enough information when read out of context. For example, use link text that describes the link destination, instead of "Click here."

Include a note about accessibility. Include a statement about accessibility that encourages site visitors to notify the author if they encounter accessibility barriers. For example, the following statement might be included: "The developers of this website strive to make its content accessible to everyone, including those with disabilities. Please report accessibility barriers to [email address]."

Objective: Students will be able to describe and include in web design several accessibility features for individuals who are blind.

A major barrier to web content for individuals who are blind is created when text alternatives are not provided for nontext elements. These individuals may be using text-to-speech software or a refreshable Braille display, neither of which describe graphic content unless text alternatives are provided. If your students are not sure how critical a particular image is to the content of a page, have them temporarily remove it and consider the impact of its loss. Or have them turn off the image display capability of their web browser and see if they can access the content of a website that includes graphical images.

The first Section 508 standard for accessible web design is

  1. A text equivalent for every nontext element shall be provided (e.g., via "alt", "longdesc", or in element content).

Rather than deal with all accessibility issues at once, consider having your students focus on techniques to support this one standard. The following three options are adapted from the publication and video presentation World Wide Access: Accessible Web Design.

Include appropriate ALT or LONGDESC attributes for graphical elements on your page. If a web page includes images that some visitors are unable to see, these users depend on alternate text to provide them with the same information communicated by those images. In HTML, one common technique for providing alternate text is to use the ALT attribute, which accompanies the IMG and other graphic elements. The alternate text included within an ALT attribute is accessible to people who are blind and to others who are using a text- or speech-based interface.

The ALT attribute works well for short text but was not intended for lengthy descriptions of complex graphs or charts. A detailed description of these graphs or charts could be provided on a separate web page and linked with the HTML LONGDESC attribute.

Use a null value for unimportant graphics. Some graphical elements may add no content to a page or are used for positioning and can be bypassed from viewing by using an ALT attribute with no value (i.e., ALT=""). This technique has emerged as a standard for identifying insignificant images, and most screen readers know to simply ignore images with null ALT attributes.

Include descriptive captions or transcriptions to make the content of graphical features accessible. Adding descriptive captions to pictures and other images provides content access to visitors who cannot see web pages because they are using a text-based browser or have turned off the image display capability of their browser. This includes people who are blind. Use captions instead of ALT or LONGDESC attributes when this descriptive text is of value to those who can see the image as well. Be sure, however, that the text makes sense to those who cannot see the image. Similarly, if students present information in image formats, such as a scanned-in image of a page of a manuscript or PDF document, they should be sure to also provide a transcription of the materials in a text format. This alternative is useful for site visitors who are blind.

Objective: Students will be able to describe several strategies for designing video and multimedia products that are accessible to people with sensory impairments.

Video and audio are often used on websites. However, audio content is not accessible to people who are unable hear it. Also, some visual content may be inaccessible to blind users if the message that is being communicated is not readily apparent through the presentation's audio. If your students are including multimedia products on their web pages, they should include captions on video presentations and transcripts for audio clips so that they can be accessed by individuals who are deaf. For a video presentation, they could also consider adding a separate audio track on which a narrator describes key visual content through a process called "audio description." Both captioning and audio description can be performed using free software. Even if videos are captioned, text transcriptions should also be available, since they provide searchable content and provide access for visitors whose computer systems are not capable of presenting video files.

The following publications provide more detailed information on this topic for you and your students:

Specific strategies and tools for making multimedia accessible can be found by searching the DO-IT Knowledge Base. Here are examples of the questions answered there:

Objective: Students will be able to conduct web accessibility tests.

Students should test their websites with a variety of web browsers, including at least one text-based browser (e.g., Lynx or IBM's Home Page Reader) or a standard browser with graphics turned off and sound muted. This way they will see their web resources from the many perspectives of their site visitors, including those who are blind or deaf. They should also view the resources at their sites using a variety of computing platforms, monitor sizes, and screen resolutions. Students should make sure they can access all of the features of their websites with the keyboard alone, simulating the experience of web users who cannot use a mouse. They should also use their browser to test if the user can adjust font sizes on their web pages, a useful feature for web users who have visual impairments. In summary, require that your students test the accessibility of the content of their websites when they

  • turn off graphics using their browser "preferences,"
  • mute the sound,
  • change the display color to black on white,
  • use the keyboard alone (without a mouse),
  • use different browsers,
  • use different screen resolutions,
  • use different monitor sizes,
  • use different computer platforms,
  • enlarge the font size.

Consider having your students use accessibility-testing software that will point out elements in their websites that could be inaccessible. Have them also conduct accessibility tests on websites that they use in school. Tools that can be used to test web page accessibility are listed in the Web Accessibility Tools & Overview document.

More information about evaluation tools for you and your students can be found in the DO-IT Knowledge Base. Specifically, consult:

Objective: Students will be able to locate and apply accessibility features of a web authoring tool.

If your students use an authoring tool to create their web pages, require that they locate and apply accessibility features included with the tool. They can most likely find this information at the company's website. For more ideas, consult the DO-IT Knowledge Base. There you will find answers to questions such as the following:

Objective: Students will be able to create accessible content for specific technologies used on their websites.

Consider requiring your students to address accessibility issues for content presented with using specific tools or file formats. Consult articles in the AccessIT Knowledge Base for details. Here are examples:

Conclusion

Designing an accessible website is not difficult when accessibility is considered along with other design issues at the beginning of a project. Redesigning an inaccessible site can be very time-consuming, and costly in the business world. Teach your students accessible design techniques to help them to be prepared for the workforce and to make the world more inclusive. Encourage them to be forward thinking and design for everyone. Besides benefiting people with disabilities, accessible design benefits people using different web browsers and screen resolutions, handheld display devices, older technology, and cell phones and people for whom English is a second language. Accessible design is simply good design.

Additional Resources

Access the Web Design and Development I course for an example of a web design course (for grades 9-12) where accessibility is integrated throughout the curriculum.

The following websites provide a good place to start for further exploration of this topic. Consider creating a web accessibility resource website for your class or school that includes links to these and other resources included in this publication. For an example, look at the web accessibility website for faculty, students and staff at the University of Washington.

About DO-IT

DO-IT (Disabilities, Opportunities, Internetworking, and Technology) serves to increase the successful participation of individuals with disabilities in challenging academic programs such as those in science, engineering, mathematics, and technology. Primary funding for DO-IT is provided by the National Science Foundation, the State of Washington, and the U.S. Department of Education. DO-IT is a collaboration of UW Information Technology and the Colleges of Engineering and Education at the University of Washington.

Grants and gifts fund DO-IT publications, videos, and programs to support the academic and career success of people with disabilities. Contribute today by sending a check to DO-IT, Box 354842, University of Washington, Seattle, WA 98195-4842.

Your gift is tax deductible as specified in IRS regulations. Pursuant to RCW 19.09, the University of Washington is registered as a charitable organization with the Secretary of State, state of Washington. For more information call the Office of the Secretary of State, 1-800-322-4483.

To order free publications or newsletters use the DO-IT Publications Order Form; to order videos and training materials use the Videos, Books and Comprehensive Training Materials Order Form.

For further information, to be placed on the DO-IT mailing list, request materials in an alternate format, or to make comments or suggestions about DO-IT publications or web pages contact:

DO-IT
University of Washington
Box 354842
Seattle, WA 98195-4842
doit@uw.edu
www.uw.edu/doit/
206-685-DOIT (3648) (voice/TTY)
888-972-DOIT (3648) (voice/TTY)
206-221-4171 (fax)
509-328-9331 (voice/TTY) Spokane

Founder and Director: Sheryl Burgstahler, Ph.D.

DO-IT Funding and Partners

Acknowledgment

This publication is based upon work supported by the National Science Foundation under Grant # HRD-0227995. Any opinions, findings, and conclusions or recommendations expressed in this material are those of the author and do not necessarily reflect the views of the National Science Foundation.

Copyright © 2012, 2010, 2009, 2007, 2006, 2005, 2004, University of Washington. Permission is granted to copy these materials for educational, noncommercial purposes provided the source is acknowledged.

UD Citation: 
Article or Chapter
Copyright Year: 
2012