Accessibility

The University of Minnesota is committed to providing Web pages that are accessible by all persons, including those with disabilities.

Several coding techniques have been used in the templates to assist persons with variety of accessibility challenges. The techniques employed also benefit users of text-only browsers and browsers with style sheets disabled.

For more information about general accessibility standards beyond those used in the templates, see the Accessibility of Information Technology Web site.

Skip to main content

Accessibility standard: A method shall be provided that permits users to skip repetitive navigation controls and jump to the main content of a page.

Template solution: The templates include an option to skip to the main content by using a link in the gold M graphic in the template header that links to an anchor labeled "BodyContent," positioned at the beginning of the content area of the page [see XHTML for the template header and XHTML for the breadcrumbs for more information].

The positioning of the "BodyContent" anchor is important. The anchor looks like this: <a name="BodyContent"></a>. It should be the very first element in the body area of the page. On a site's home page, it should appear before the main title graphic. On interior pages, it should appear before the page headline, unless the page has breadcrumbs. On pages with breadcrumbs, the anchor should appear before the first breadcrumb. As pages are developed, be careful not to delete the anchor by mistake. If the anchor tag is missing or mislabeled, the "Skip to Main Content" link will not work.

Use of heading tags

Accessibility standards: Heading tags shall be used to convey structural information about an HTML document. Heading tags shall not be used to manipulate font size or other text attributes.

Template solution: Heading tags allow screen reader users to jump from heading to heading within a page. Two <h1> tags have been included in key positions on the template pages. The first is the "What's inside" graphic heading in the left navigation, the second is the first element in the body content area.

On a site's home page, the <h1> tag should be applied to the header graphic since the title of the site is also the title of the page. Remaining headings on your home page would begin with <h2> tags and continue with appropriate heading tags as necessary. (A style called <homehead> can be applied to <h2> tags on home pages to make them the same size as an <h1> tag.)

On interior pages, the <h1> tag should be applied to the page headline rather than the header graphic. Please note: breadcrumbs should never be tagged as <h1>.

The W3C's Semantic Data Extractor allows you to view an outline of your page based on your heading tags. It's a helpful way to make sure that you've used the correct heading tags based on the content of the page.

For more resources about the proper use of heading tags, see the University's guidelines for heading tags and an example of proper nesting from the W3C.

Text size

Accessibility standard: Specify font sizes in relative rather than absolute units.

Template solution: The XHTML templates use relative text sizing to allow users to make the text size on their screens larger or smaller.

The first release of the templates used fixed text sizes to control the text size for layout purposes. A "Trouble seeing the text?" link in the footer directed users to instructions for changing the text size. This workaround was not totally accessible or convenient. All University Web sites should update their style sheets to use relative rather than fixed text sizes.

For information about text in graphics, see Fonts for graphics.

Rollover colors for links

Accessibility standard: Rollovers that change the appearance of a link or cause additional information to be displayed GENERALLY do not cause a problem for screen-reader users and may provide useful feedback for users with learning disabilities or mobility impairments.

Template solution: As an added feature for users, the templates include a rollover state for text links. When a cursor is placed over a text link, the link will highlight and change color. Template header and footer links change to gold (#FFCC66), and left-hand navigation links and body text links change to maroon (#7A0019). This change in rollover color, coupled with lines under links, provides an extra visual cue for people with mobility impairments.

Developers have the option to change the color of the body text rollover. To ensure consistency among sites, the template header and footer rollover colors should not be changed.

Proper link naming

Accessibility standards: Avoid the use of single word links. Links shall be clear, descriptive, and able to stand alone.

Template solution: As previously mentioned, text browser and screen reader users have the ability to jump from link to link to navigate pages more easily. It is important, therefore, to name links so that they are self-descriptive when not supported by explanatory content.

The templates advocate using your full unit name at the bottom of the left navigation as a link back to your home page. Simply using the word "Home" is not recommended. Also, avoid using words such as "continue" or "more" as stand-alone links. Instead, try to be as specific as possible, even if it seems like the link name duplicates surrounding information. If you must use stand-alone links, you should create them as images, including a full description of the link in the "alt" tag.

When linking from content within sentences or paragraphs, try to select text that best describes the link. For example, "Click here for information about academics" is a more descriptive link than "click here."

Proper "alt" tags

Accessibility standards: Include alternative text for all graphics. Do not use acronyms and abbreviations in the alternative text for images or other non-text elements.

Template solutions: Text browsers and screen readers use "alt" tags to identify images that would otherwise be described by their file name. For example, an image named "img_ttl_welcome.jpg" would be more obvious to users if it were given an "alt" tag of "Welcome to the English Department."

The "What's Inside" graphic should include your site's name, e.g., alt="What's Inside Web Templates 2.0." The addition of your site's name is beneficial for any search engines that display the content of <h1> tags in search results.

Images that contain text should reiterate that text in the "alt" tag. Images of objects or charts should have a description of what the image looks like or what it is for. An easy way to verify that all images have "alt" tags is to test your pages in a text-only browser, such as Lynx.

Single pixel spacer images that are invisible or intentionally hidden should remain hidden in text and screen readers by using a special "alt" description. The only way to completely hide an image is to use alt=" " in the <img> tag (with a space between the quotation marks). Screen readers will read this property as a space and ignore it.

Embedded objects (multimedia, javascript, flash, etc.) and frames

Accessibility standards: Multimedia presentations shall be accompanied by text or audio descriptions of visual content. Ensure that pages are usable when scripts, applets, or other programmatic objects are not supported or have been disabled. Avoid the use of frames.

Template solutions: The templates were developed without embedded objects to make them easier to implement as well as more accessible to all. If you choose to use embedded objects, please do so in the body of the page. Many of these objects are difficult or impossible to make accessible, and this should be taken into consideration when developing.

Frames used to divide a browser screen into two or more "windows" may be inaccessible to persons using screen-readers, screen magnification applications, or users of some hand-held devices. Not all browsers support frames. Developers who want to use frames should follow the W3C guidelines.

Tools and resources

The University's Computer Accessibility Program provides several resources and tools to help developers understand and address online accessibility issues.

Test using a screen reader

To test the accessibiity of your Web site using a screen reader, download the demonstration version of JAWS.