Stephen F. Austin State University

Accessibility Checklist

Writing, Coding and Structuring Web Pages

Headings

HTML heading tags (<h1>...<h6>) should be used to separate Web site content into sections. When used properly, heading tags can greatly improve the ability of someone using a screen reader to efficiently find information they need.

Links

Make sure that the text of a link describes the page that the link will direct the user. Avoid using terms like "click here" for links as this does not provide any insight as to the nature of the new page.

Tables

Data Tables

When presenting data with tables, use <th scope="..."> tags to indicate row and column headers. Do not use spanned rows or columns in data tables.

Section 508 - Row and column headers shall be identified for data tables.

Layout Tables

When using tables to layout pages, keep in mind that cells are read left to right, top to bottom by screen readers. If one of the columns is used for navigation, create a "skip navigation" link that allows users to move to the content of the page.

Section 508 - A method shall be provided that permits users to skip repetitive navigation links.

Fonts and Type

Real Text vs. Text Within Graphics

Avoid creating images of text solely for the purpose of using an uncommon font. Real text can be enlarged by users without any loss of quality unlike text within a graphic.

Font Faces

When choosing fonts for web pages, keep in mind that a visitor can only use fonts that are available on their computer* and not all computers have the same fonts installed. There are several commonly available fonts that have been specifically designed for on-screen use including:

*Note: the @font-face CSS declaration will allow you to use uncommon and non-standard fonts on web pages. However, due to the complexity of using it properly (differing levels of browser support, legibility, legal and license issues) it is probably best to avoid unless you are 100% sure you understand and can address all potential problems.

Font Size

When specifying sizes, use relative font sizes so that users are fully able to resize text. It is best not to use values below 75% of the original font size.

Font Color

Text is easier to read when there is a high degree of contrast between the text and the background. Remember to avoid using color as the only means of conveying information.

Italics, Bold and Underline

When it is necessary to use italics or bold text, use <em>...</em> or <strong>...</strong>, respectively. Avoid italicizing or bolding large blocks of text as the benefits of these techniques is diminished when overused. Also, avoid using <u>...</u> altogether since underlined text often indicates a hyperlink.

Lists

Use the various types of lists (<ul>...</ul>, <ol>...</ol>, <dl>...</dl>) when appropriate. Avoid using multiple <br> or <p>...</p> tags to create lists. Assistive technologies like screen readers handle lists in special ways which allows users to move up and down the list quickly and let them know when they've reached the end of a list. When <br> or <p>...</p> tags are used, this advantage is lost.

Forms

  1. Use the <label>...</label> tag to identify a field with its label.
  2. When the TAB key is pressed, users should be taken to the next logical form field. Use the TABORDER attribute if necessary.
  3. Remember to not denote required fields using color alone.

Section 508 - When electronic forms are designed to be completed on-line, the form shall allow people using assistive technology to access the information, field elements, and functionality required for completion and submission of the form, including all directions and cues.

Accessible Images

Using the ALT attribute

  1. Anytime you use an image, include an ALT attribute with text alternative to that image. The ALT attribute must be used on all images. If the ALT attribute is omitted, site visitors using screen readers will hear "image" with no additional information. ALT text should let the user know what it is and convey its purpose.
  2. If you use an image as a link, such as a button, the ALT text should describe the destination of the link, not the image itself.
  3. Acronyms in ALT text should be written with spaces between each letter of the acronym. Example: <img alt="Vista Drive, the main entrance to S F A S U" />
  4. Some browsers incorrectly display ALT text as a tooltip when users mouseover an image. If you want some text to be displayed as a tooltip, use the TITLE attribute.
  5. Decorative images, spacer images and separators should use <img alt="" />

Section 508 - A text equivalent for every non-text element shall be provided (e.g. via "alt", "longdesc", or in element content).

Charts, graphs, formulas and equations

When using charts or graphs, make sure that color coding is not the only method by which information is represented. Use clear labels and/or differences in shape so that information is accessible to color blind users. Also, provide a summary of the content with the ALT attribute.

When providing a formula or equation as a graphical image, the ALT attribute should spell out symbols as words. For example, the quadratic formula could be represented by: <img alt="X equals negative B, plus or minus the square root of B squared minus four times A times C all divided by two times A">

Section 508 - Web pages shall be designed so that all information conveyed with color is also available without color, for example from context or markup.

Animation

Animation should only be used when it is required by the nature of the content on the web page. In addition to supplying adequate ALT attribute text for screen reader users, avoid using blinking or continuously looping animations as these can not only be distracting, but can cause epileptic seizures or headaches for some users.

Section 508 - Pages shall be designed to avoid causing the screen to flicker with a frequency greater than 2 Hz and lower than 55 Hz.

Using Audio and Video

Captioning and Transcripts

When making use of video or audio files that contain spoken words, you must provide an accessible text version of the content. This text can be on the same page as the video or audio file or available via a link placed near the multimedia element.

Section 508 - A text equivalent for every non-text element shall be provided (e.g., via "alt", "longdesc", or in element content). Equivalent alternatives for any multimedia presentation shall be synchronized with the presentation. A text-only page, with equivalent information or functionality, shall be provided to make a web site comply with the provisions of this part, when compliance cannot be accomplished in any other way. The content of the text-only page shall be updated whenever the primary page changes.

Including PowerPoint and Word Documents

Graphics and images used in PowerPoint, Word and other similiar document types must be properly labeled and appropriately described.

Be aware that some users may not have the necessary applications installed on the computer or device they are using to open certain types of files. Consider converting files to PDF when possible as a greater percentage of users have PDF reading software.

Section 508 - When a web page requires that an applet, plug-in or other application be present on the client system to interpret page content, the page must provide a link to a plug-in or applet.