Module: HTML, Universally Designed (Page 12 of 19)

Contents

  1. Purpose
  2. Universally Designed Web Pages
  3. HTML and CSS
  4. Images
  5. Fonts
  6. Links
  7. Layout
  8. Color and contrast
  9. Tables and frames
  10. Mouseless navigation
  11. Forms
  12. JavaScript
  13. Multimedia
  14. Plug-ins
  15. Validate before you replicate
  16. Footnotes
  17. Resources
    1. At CSU
    2. Books and Online Resources
  18. Feedback

Purpose

Are you in the mood for a challenge? If so, give this a try:

  1. Go to your favorite website.
  2. Without clicking the mouse anywhere on the page, identify a link, button, or form element. This will become your “target.”
  3. Set your mouse aside.
  4. Using only the Tab key, navigate to the target you identified.

    (As you tab down the page, you should see a box with a dashed border appear around links and form elements. The box indicates that an item has the “focus” of the browser and can be activated by pressing the Enter key.)

Did you find this exercise difficult or cumbersome? If so, it may be worth considering that blind users do this—and far more complex operations—every day!

Fortunately, assistive technologies like audio screen readers and speech recognition software make the Web a more accessible medium for people with visual impairments. These same technologies, according to experts, may soon become popular with sighted users because they allow Internet access in hands-free environments (picture Googling a dinner recipe while driving to the supermarket[1]). However, for such technologies to work effectively, the web content they read must be “universally designed.”

What can you do to implement Universal Design for Learning principles in the web content you publish? The answer depends on how you create that content. If you simply save Word documents as web pages, your options are limited (see the tutorial Preparing for Conversion to Accessible HTML and PDF for suggestions). However, if you are willing to learn a Web authoring program like Adobe Dreamweaver, with its wealth of advanced tools and features, your options increase significantly.

This module is designed for people who understand (or are learning) the nuts and bolts of web page design and who seek guidance about how to create accessible, universally designed web publications. The material presented here is an adaptation of the CSU Web Accessibility Standards and the Web Access Checklist. The tutorial Creating Accessible Web Pages with Dreamweaver offers step-by-step instructions for the creation of a universally designed, accessible website using the techniques presented in this module. Links to additional resources on a variety of related topics are included at the end of this module.

Universally Designed Web Pages

Universal Design for Learning (UDL) is a set of principles and techniques for creating inclusive classroom instruction and accessible course materials, including web pages. Universally designed web pages are compatible with a wide range of technologies, including multiple computer platforms, web browsers, and assistive technologies.

Universally designed web pages can be read as easily on a cell phone as a large computer display, and are easily interpreted by text-to-speech software. Universally designed web media contain captions that convey content as effectively to viewers in a noisy airport as in a quiet computer lab. Captioned videos offer the added benefit of sharing their text-based content with internet search engines.

The importance of UDL in the creation of web publications was recently underscored by Marla Roll, Director of Colorado State University’s Assistive Technology Resource Center, who believes that applying UDL to the creation of online course materials greatly improves their accessibility:

“By adhering to well-established guidelines for web accessibility, our web content becomes easier for everyone to access. Information can be easily translated into a variety of formats. Students with disabilities benefit, and so do users of older technology and those using the latest portable devices.”

HTML and CSS

Perhaps the most critical element of accessible web design is the principle of separating content (document structure) from its visual presentation. A well-built web publication is thus a combination of HyperText Markup Language (HTML) tags that define the structure and function of page elements, and Cascading Style Sheet (CSS) rules that control the appearance of those elements. See web articles Separate Content and Presentation and Creating Semantic Structure for a more complete discussion of this principle.

Keep the following tips in mind as you create web content:

  1. HTML tags define document structure.
    1. Examples of structural markup include headings <h1> to <h6>; paragraphs <p>; logical divisions <div>; lists <ul>, <ol>, <dl>; images <img>, table cells and headers <td> and <th>, etc.
    2. Tags are also called “markup,” from the name HyperText Markup Language (HTML).
  2. Cascading Style Sheets (CSS) control the appearance and behavior of page elements.
    1. Here's a simple example of a CSS rule that sets all level 1 headers to red: h1 {color: red;}
    2. A more complex rule might set the location of a block of content (contained in a <div> tag with an ID of “content”) to the top left corner of the screen: #content {position: absolute; left: 0px; top: 0px;}
  3. Avoid outdated or “deprecated” tags like <font> and <b>, which confuse structure with presentation.
  4. Wrap sections of content in <div> tags (div stands for “division”), which can be assigned an ID and/or class. CSS rules can then be written for these IDs and classes to control their appearance. See the tutorial Creating Accessible Web Pages with Dreamweaver for an example of laying out a web page using <div> tags.
  5. Practice a “structure-first” approach to web design in which structural markup takes place before visual formatting. A structural focus ensures that web pages can be understood when styles are turned off. Well structured web pages are more flexible for both users and designers.
  6. Migrate from HTML to XHTML for greater device interoperability.

Images

Images are without a doubt an important source of information in most documents, but their value is limited if their meaning is conveyed only visually. Adding alternative text descriptions to images allows users to understand their significance even when the images cannot be seen.

Consider the following when adding images to your documents:

  1. Include the alt attribute (“alternative text”) for all images.
  2. Alt text should describe the meaning of an image rather than its appearance. For example:
    1. Poor: <img src=" lab_sign.gif" alt="Sign hanging on lab door.">
    2. Better: <img src="lab_sign.gif" alt="Each laboratory has safety policies posted on the door.">
  3. Purely decorative images (graphics that convey no information), require a “null” or “empty” alt attribute. The null attribute is a signal to screen reader software that the image is unimportant and can be skipped.
    1. Example: <img src="spacer.gif" alt="">
  4. Remember that some users won’t see your web page at all; they’ll hear it! Imagine hearing your content through their ears.
  5. Use animated graphics as needed to enrich content, but never gratuitously.

More information about alternative text descriptions is available in the tutorial Adding Alt Text to Images in Microsoft Word.

Fonts

Web publications are unlike their printed counterparts in several respects. One key difference is the unpredictable nature of web page display. Variations in browser software, as well as users’ expectations for having flexible viewing options, mean that web designers can’t and shouldn’t attempt to exert total control over elements such as page width, page breaks, and text size.

To provide users the flexible viewing options they expect (options that users with certain disabilities require), follow these guidelines when working with text:

  1. Use cascading style sheets (CSS) to control the appearance of text and all page elements.
  2. Specify font sizes in “relative” units like “ems” or percentages, not “fixed” units like pixels or points. You can also specify font size using keywords like small, medium, and large. Relative sizes allow users to scale text as needed for legibility. (One “em” is equal to the point size of the font. For 12 point text, one em equals 12 points.)
  3. Line spacing should also be specified in relative sizes using ems or percentages. Use fonts that are widely available (Arial and Times New Roman), and those designed specifically for on-screen legibility (Verdana, Georgia, Trebuchet, and Tahoma).

Hyperlinks are the essence of the World Wide Web, yet despite their ubiquity web links can be confusing to users. Consider these tips when creating links:

  1. Hyperlinks should describe where they will take the user.
  2. Links should make sense when read out of context.
  3. If the page is likely to be printed, links should include the destination URL. Examples illustrating each of the three principles above:
    1. Poor: Click here to visit the Colorado State University home page. Better: Visit the Colorado State University home page (http://www.colostate.edu/).
  4. Provide a method that allows users to skip over repetitive navigation links and go straight to the main content. See the Skip Navigation Techniques in the Resources section of this module for more information.
  5. Make navigation buttons large enough for ease of use.
  6. Server-side image map links should be duplicated as text links elsewhere on the page to ensure accessibility.
  7. If a link opens a new window, this should be indicated in the text or with a graphic. For tips on how to accomplish this using CSS, see Showing Hyperlink Cues with CSS

Layout

Sometimes little things make a big difference. Such is the case with page layout, where less is often more, and simple is generally better. Keep the following tips in mind when laying out a page:

  1. Keep page layout and navigation simple and consistent.
  2. Web pages should be easy of use. Usability studies provide guidelines for avoiding confusing layouts. For suggestions, see the Software Usability Research Laboratory website.
  3. A good design typically leaves generous “white space” around content.

For a discussion of flexible page layout options, see “Liquid Layouts” in the tutorial Creating Accessible Web Pages with Dreamweaver.

Color and Contrast

It is commonly assumed that a web page will appear to users just as it did to its designer, but in fact any number of factors—technological and physiological—can alter the way web publications are perceived. One such factor is color perception. For those who are “color blind,” important information in a document may be lost if it is conveyed using color alone.

Consider the following when designing with color:

  1. Remember that not all users will view your site in color. In fact, some hand-held devices use single-color displays.
  2. Many people, especially men, have difficulty distinguishing red from green or blue from yellow. Check your website using the Colorblind Web Page Filter.
  3. Make sure content can be understood when viewed or printed in black and white.
  4. Avoid creating user selections that rely on color as the primary distinguishing feature.
    1. For example, indicate required form fields using an asterisk or other symbol in addition to setting the text color to red.
  5. Provide strong contrast between page background and text for maximum legibility.

Tables and Frames

A table is capable of presenting information in a way that is uniquely clear and succinct—at least when viewed visually. To make table data accessible to all users, including those who need to hear the information using text-to-speech software, follow these guidelines:

  1. Use tables for tabular data only, not as a framework for page layout. See the tutorial Creating Accessible Web Pages with Dreamweaver for information about designing a page with <div> tags instead of tables.
  2. Keep tables as simple as possible, and try to avoid nesting tables inside one another.
  3. Add captions to tables using the <caption> tag. A caption will typically provide an adequate summary of the table’s contents. Complex tables may need a more detailed explanation using the <table> tag’s “summary” attribute.
  4. In the header row of the table, replace <td> (table data) tags with <th> (table header) tags to indicate the special function of those cells as column labels.

HTML frames pose several obstacles to accessibility. Fortunately, nearly every benefit of frames can be duplicated using other design techniques. If you choose to design with frames, consider the following:

  1. Use the “title” attribute of the <frame> tag to describe the purpose of each frame and its relationship to other frames.

Mouseless navigation

A web page should be navigable using only the Tab and Enter keys. Why? Because some users prefer to navigate using just the keyboard, while others may need to navigate your site without the use of a mouse.

To facilitate keyboard navigation, consider the following:

  1. Set the tab order of links and form elements so that each can be accessed in a logical, sequential order. See W3C form specifications under Tabbing Navigation for more information.
  2. Test your document in the browser. Try to access each link and form element using only the Tab key.

Forms

Online forms can be made more navigable by organizing related elements using the <fieldset> and <legend> tags. It is also important to clarify the relationship between labels and form elements using the <label> tag and its for attribute.

Consider the following when working with forms:

  1. Make sure form elements can be navigated from the keyboard. The Tab key should move focus sequentially through the form.
  2. Add labels to form elements, and use the <label> tag’s for attribute to point to the ID of the associated form element.
    1. The for attribute keeps labels and form elements linked, regardless of where they appear on the page.
      1. Example using the form <input> element: <label for="emailfield">Your email address:</label><input name="email" type="text" id="emailfield" size="45" maxlength="60"/>
  3. Group related form elements using a combination of <fieldset> and <legend> tags, which facilitate both visual comprehension and tabbing navigation for non-visual users.
  4. No matter how well you design your forms, some users may not be able to use them. Always provide a contact number or address for requesting a paper copy.

JavaScript

Client-side scripting can add tremendous functionality and interactivity to your web pages. Remember, however, that not everyone can take advantage of JavaScript’s added features. For example, many handheld devices do not support JavaScript, and there will always be some users who prefer to turn it off.

Keep in mind the following considerations when adding JavaScript features to your web pages:

  1. Web pages should still function when JavaScript is turned off. Think of JavaScript behaviors as “icing on the cake”—nice, but not required to use the page. Add <noscript> tags to tell users what they’re missing if JavaScript isn’t available. For example: <script type="text/javascript">   document.write("This page was last updated " + showDate() + ". "); </script><noscript>   <p>Page modification date displays here when JavaScript is enabled.</p></noscript>

Multimedia

Multimedia, including many types of video and Flash animation, can add valuable content and interest to your website. However, multimedia content often requires some additional preparation before it can be considered accessible to a wide range of users.

Consider the following tips when adding multimedia to your website:

  1. To make video broadly accessible, add captions and video descriptions. Captions are used not only by people with disabilities, but by students in noisy computer labs and quiet libraries.
  2. At a minimum, provide a text equivalent (usually a transcript) of the audio or video content. Transcripts of video and audio offer additional benefits: they can be printed and searched. (See the transcript and audio description options available for the ACCESS video, Best Practices through Universal Design for Learning.

Plug-ins

When a plug-in is required to view web content, it is considered good practice to provide a link to the download for the required software. For example:

*Note: You will need version 9 or higher of the Adobe Reader to view and print this document.

Validate before you replicate[2]

You’ve designed a web page and now you’re ready to use it as a template to create the remaining pages of your site... Stop right there!

If there are errors in your HTML or CSS code, you will duplicate them over and over again. Check your code using the following free online validation tools. You may save yourself many hours of recoding. Validating your code also ensures compatibility with current and future browser technologies.

  1. To check HTML: http://validator.w3.org/
  2. To check CSS: http://jigsaw.w3.org/css-validator/
  3. To check web accessibility: http://wave.webaim.org/

Footnotes

1The Car: Just a Web Browser with Tires
IEEE Spectrum, January 2001
2A phrase coined by web accessibility expert Cath Stager-Kilcommons
ACCESS Project, Colorado State University

Books

  • Cascading Style Sheets: The Definitive Guide, 2nd Edition. Eric Meyer. O’Reilly Media, 2004.
  • Cascading Style Sheets: Designing for the Web, 3rd Edition. Håkon Wium Lie and Bert Bos. Addison-Wesley, 2005.

Online Resources

General principles and techniques of web accessibililty

Skip navigation techniques

Liquid layout/multiple columns

Multi-column layout

CSS menus and other techniques

W3C Code Validators

HTML validator

Color blindness

Usability studies:

Please give us your feedback!

HTML, Universally Designed
Was the information in this module helpful?