- Campuses :
- Twin Cities
- Crookston
- Duluth
- Morris
- Rochester
- Other Locations
The University of Minnesota is committed to providing Web pages that are accessible by all persons, including those with disabilities. Many accessibility solutions also provide good usability solutions.
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.
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 two invisible links that will allow screen readers to skip to either the main navigation or the main content. The links are located in the top left corner of the template header on the same line as the campus links. [see Campus links for more information].
The positioning of the "mainnav" and "maincontent" anchors is important. 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 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 first text in the content area.
As pages are developed, be careful not to delete these anchors. If either of these anchor tags are missing or mislabeled, the mainnav and maincontent links in the header will not work.
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. Each page on your site should use only one <h1>. On the main, or index, page of your site, that <h1> should be on the title graphic. Remaining pages should use the <h1> with the main text heading for the page, then continue with other heading tags as necessary and appropriate.
Using correct heading tags will also make your site more semantically correct. 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. (You'll need to comment out the "mainnav" and "maincontent" anchor links for the extractor to work properly.)
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.
Accessibility standard: Use relative rather than fixed text sizing.
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 sizing.
For information about text in graphics, see Fonts for graphics.
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: 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 change color. Template links are set to change to maroon (#7a0019); this can be modified to suit your site. The maroon links passed red/green colorblind testing for accessibility.
Use of underlines with links is no longer a necessity unless the links are used within body content.
The template links in the header and footer use a css underline style that draws a light colored line below the text and acts as a visual cue to people who might not expect the text to link.
Left navigation is common, so links in that area no longer need underlines. The templates are coded to underline the links on hover.
Any links within body content should use underlines unless that content is formatted as a clear list of links.
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. 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, be specific, 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, select text that best describes the link. For example, "Click here for information about academics" is more descriptive than "click here."
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."
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.
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: To make them easier to implement as well as more accessible
to all, the templates were developed without
embedded objects. If you choose to use embedded objects, do so in the body of
the page. Many of these objects are difficult or impossible to make accessible.
Frames used to 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. Developers
who want to use frames should follow the W3C
guidelines.
The University's Computer Accessibility Program provides resources and tools to address online accessibility issues.
The templates have been tested by the University's Usability Services and Disability Services units. Many adjustments in code have been made since the last release of the templates. If you have questions about how decisions were made for any section of code, please let us know.
To test the accessibility of your Web site using a screen reader, download the demonstration version of JAWS.