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 |
| 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 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) |
| 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). |
