Electronic Media: Accessibility

The following is a checklist of accessibility guidelines, listed by the common name of the HTML element. You may also want to consult WebAIM's Section 508 Checklist, or the University of Texas Guidelines for Accessibility. Our checklist includes all of the elements required by Section 508, as well as some further elements, in keeping with the Library's mission of "providing access to the records of civilization, the sources of our humanity, and the variegated strivings for new knowledge."

When an HTML element or attribute is mentioned by name, it is linked to its description in the W3C HTML 4.01 Specification.

Element Look for: How/Details
animation low speed (less than 2 cycles per second) Define the time between frames in your animation program.
b <strong> (rendered visually as bold) is used instead of <b>  
blockquote used only for quotations, not for layout Use the css margin-left and margin-right properties instead for blocks of text that need to be indented, but that aren't quotations.
data multiple presentations for multiple learning styles Ideally a set of data can be displayed in many different forms (e.g. pie charts, data tables, verbal descriptions), and each form has a strength. Using all the forms possible adds strength to your presentation and allows multiple ways to access the data.
dl, dd, dt used only for glossary-type definitions <dt> indicates the term, and <dd> indicates the definition
dynamic content elements generated by scripts/databases adhere to all the standards described here If your content is truly dynamic (i.e. a page displays differently in different circumstances) then check every possible permutation of the page.
em <em> is used to indicate structure and content, not presentation  
font color high color contrast; navigation or emphasis clues other than color Turn the contrast dial on your monitor lower and squint at the monitor. Use the Internet Options or Preferences in your browser to override the existing color scheme.
font size defined by a style sheet; relative sizes instead of absolute: em, % or {largest, larger, medium, small, smallest} Test by changing the default font size of your browser and viewing your page. Every element should increase or decrease relative to each other, i.e. H2s that were slightly bigger than paragraph text should stay slightly bigger than paragraph text when you view the page with larger fonts.
form prompts are physically next to form elements (prompts to the left or above edit fields and select menus, prompts to the right of checkboxes and radio buttons, value attributes for buttons) and either an id attribute for each input and a matching <label for> element, or a title attribute for each form element; similar form fields are grouped using the <fieldset> element; form is described by a <legend>

In the following example, please enter your name is the text label or prompt, and [text field] is the form element:

Please enter your name: [text field]

Ideally the code for text labels or prompts should be right next to the code for their corresponding form elements. However, the id and <label for> for will match up the corresponding elements even if they're not in close proximity. If assigning a unique id to each form element is cumbersome, use a title attribute for each form element instead.

Examples: WGBH forms guideline and an example
An example of a fieldset on the UT library pages

form element: list/menu first list item contains directions or a hint of what the list choices are; javascript not triggered by an onChange handler also see form, above
form element: telephone number if you ask for a user's telephone number, a way is provided to indicate that the number might be associated with a Telecommunication Device for the Deaf (TDD), or the user is allowed to choose email or another preferred method of communication  
frame frame titles Make sure each document in a frameset has a title that helps the user understand the document's purpose when navigating between frames.
H1, H2... etc. titles and subtitles indicated by markup (H1-H6) instead of by images or by paragraph text forced into a bigger size Open page in JAWS (the usability lab has a copy) and view list of heads.
i <em> (rendered visually as italic) is used instead of <i>  
image alt tags; small size (low download time) Check your page with LIFT, a code validator which will list all the images on your page without alt tags, along with their line numbers, which makes the offending images easier to find. Decorative images should have alt="". Text in the graphic must be reproduced in the alt tag. Complex images such as those used in coursework need longdesc tags, or a link to a description. For charts, see data, above.
image map alt tags on hotspots Check your page with LIFT, a code validator which will list all the hotspots on your page without alt tags, along with their line numbers, which makes the offending code easier to find.
jump menu a go button Make sure that you have to press the go button before the jump menu takes you anywhere
link link text is descriptive of the link destination and is longer than a few characters Open page in JAWS (the usability lab has a copy) and view list of links.
multimedia alt description; synchronized captions; synchronized auditory description of visual action; a link to the free downloadable plug-in or software In some cases, embedded multimedia using a plug-in is less accessible than the same content, downloaded and launched in the standalone product.
PDF PDF documents created electronically or scanned documents that have been captured; a link to the free downloadable Acrobat Reader If you can use the text-select tool in Acrobat Reader (The capital T button) and highlight a string of text on your web page, then it's accessible to assistive technologies.
pop-up windows used sparingly; titled appropriately; not triggered by onLoad; user is warned of new windows when appropriate Test with the Mozilla browser, which will allow you to disable pop-up windows triggered by onLoad.
rollovers no important information is revealed using an onMouseover trigger; if a navigational menu uses onMouseover to trigger additional menu items, those exact same menu items appear as text links on the next set of pages Open up your page in a browser and tab through the links. Make sure the page is still navigable without the clues provided in the rollovers.
strong <strong> is used to indicate structure and content, not presentation  
table summary attribute describing how a data table is organized and how to find information; a <caption> element for the title of a data table  
table row and column headers

for simple data tables: <th> elements instead of <td> in the row and column headers and scope=col or scope=row to associate row and column headers with data cells

for complex data tables: <thead> and <tbody> elements describing the table head and body of a table; id attributes for <th> elements matched with headers attributes for <td> elements to associate data with the relevant headers.

A simple data table is one where one row and/or one column contains the header information, i.e. one cell can be accurately labeled with one column header, one row header, or both (e.g. a bus leaving the station at 12:45 arrives at 1st street at: 1:05). A complex data table is one in which rows or columns have been grouped together into subgroups so that one cell needs to be described with more than 2 labels (e.g. a bus leaving the station at 12:45 heading downtown arrives at 1st street at: 1:05).

Examples: view the source for this table (very simple table)
A simple table: helpdesk statistics
A complex table: library hours

text correct spelling and grammar; explanations of acronyms or specialized terms; specialized elements in appropriate markup (e.g. captions or headers) see b; blockquote; dl, dd, dt; em; font color; font size; H1, H2..etc.; i; link; strong; ul, ol. The spellcheck in Dreamweaver is located in the Text menu.
timing when a timed response is required, a warning is given and a way is provided to ask for more time; links to databases that time out after a period of inactivity list the timeout period  
ul, ol used for all lists except for definition lists see dl, dd, dt, above


If your pages are on the template for the library secondary pages, then the elements above are all you have to worry about. If you own pages on a different template, then you also want to take these elements into account:

Element Look for: How
navigational menus a way to skip over menus or lengthy lists of links; consistency across every page of a site; a site map or table of contents Open up your page in a browser and tab through the links. See how long it takes you to tab through the navigation that appears on every page before you get to the content of the page.
style sheets HTML source documents don't contain presentation elements; presentation is controlled with style sheets; documents are readable without style sheets Some browsers allow you to disable style sheets, or provide your own style sheet as an alternative. View your page using another style sheet and make sure it's navigable and readable.
text-only pages or site alternative text-only pages are provided for sites/pages that cannot be made accessible; text-only pages provide as much of the same information as the original as possible; text-only pages are kept up to date in tandem with the original pages Use an alternate text-only site only as a last resort, or if it provides significant benefit (e.g. low download time to off-campus users).