Web Templates

Usability and accessibility

Several coding techniques have been used in the templates to assist persons with a 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 for templates, see the accessibility.umn.edu website.

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: Two invisible “anchor” links let screen readers skip to either the main navigation or the main content. The links are in the top left corner of the template header, on the same line as the campus links. See campus links for more information.

The mainnav anchor should be set at the beginning of your site's primary navigation, which is typically the left navigation.

The maincontent anchor should be the first element in the body area of the page. On a home page, it should appear before the main title graphic. On interior pages, it should appear before the first text in the content area.

Do not delete these anchors. If either is missing or mislabeled, the mainnav and maincontent links will not work.

For more information, see WebAIM.

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 let screen reader users jump from heading to heading within a page. Each page on your site should use only one <h1>. On the main (or index) page, the <h1> should be on the title graphic. On other pages, the <h1> should be with the main text heading. See the HTML in the templates for examples.

For more about use of heading tags, see the University's guidelines for heading tags, WebAIM, and this example of proper nesting.

Text size

Accessibility standard: Use relative rather than fixed text sizing.

Template solution: The XHTML templates use relative text sizing (ems and percentages) to allow users to make the text on their screens larger or smaller.

For more about text sizing for HTML and graphics, see WebAIM.

Rollover colors and underlines for links

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

Template solution: The templates include a rollover state for text links. When a cursor is placed over a text link, the link will change color and, for lists, will be underlined. The colors for link states can be modified to suit your site. The maroon links in the templates passed red/green colorblind testing for accessibility.

The links in the template’s left navigation draw a light colored line underneath the text on rollover.

Use of underlines should be maintained for links within body content or for any section of your page where it might not be readily apparent that you are making a link.

Proper link naming

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

Template solution: Text browser and screen reader users can jump from link to link. It is important, therefore, that link names be self-descriptive.

Avoid link names such as "continue" or "more" as stand-alone links. Be specific, even if the name duplicates surrounding information. "Click here for information about academics" is more descriptive than "click here." If you must use one word or stand-alone links, create them as images and include a full description in the alt tag.

Use your full unit name at the bottom of the left navigation as a link back to your home page.

For more about link use and accessibility, see WebAIM.

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" could be given the alt tag "Welcome to the English Department."

Images that contain text should repeat that text in the alt tag. Images of objects or charts should have a description of what the image looks like or is for. An easy way to verify that all images have alt tags is to test your pages with images turned off.

For more about alt tags, visit WebAIM.

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 have no embedded objects. Many of these objects are difficult or impossible to make accessible. If you choose to use embedded objects, do so in the body of the page.

Frames that divide a browser screen into two or more "windows" may be inaccessible to persons using screen-readers, screen magnification applications, or some hand-held devices. If you want to use frames, follow W3C guidelines.

For more about making javascript accessible, see WebAIM. Also see WebAIM for more about accessible frames.