Web Accessibility Checklist

Web Accessibility Checklist

Printer Friendly Version

This checklist will be used during an accessibility review of online (or hybrid) class materials. Section 508 rules are in the process of being updated. Until the governing agency, the Access Board releases the new rules, it is advisable to follow the WCAG 2.0 rules, level A and AA. This revised checklist includes WCAG 2.0 guidelines for level A and AA in addition to Section 508 rules.

Don't be discouraged by the length of this document

Many of the rules and guidelines may be automatically taken care of in the Moodle and CATE learning management systems and are indicated with a symbol. See also the Canvas Accessibility page that highlights issues that come up most often in accessibility reviews.

WCAG 2.0 = Web Content Accessibility Guidelines published by the World Wide Web Consortium (W3C)
508= Section 508 of the Rehabilitation Act

= Both CATE and Moodle take care of the rule automatically
M = Moodle takes care of the rule automatically
C = CATE takes care of the rule automatically

Web Accessibility Checklist
Rules Rule Description Explanations and Solutions
508 a

WCAG 2.0
1. Non-Text content, providing Alternate Text (ALT text)
  • All non-text elements such as images, applets or image maps have text equivalents.
  • ALT tags are descriptive of the image, etc.
    • Images that include text should have the text reflected in the ALT text (also see WCAG 2.0 1.4.5 about text in images)
  • Decorative images, redundant images, and images used for spacing have empty ALT text.
  • Charts, graphs, etc. that need long descriptions are described in surrounding text or provide a link to a separate page with description
    • If you write HTML, you may use the "LONG DESC" attribute to link to another page
In CATE, alternative text for images can be indicated at the bottom of the page where you choose the image to insert (except for nav bars - access the field for alternative text in the Edit Button configurations).

In Moodle, when placing an image using the Editor, put your alternative text in the Image description field.
WCAG 2.0
2. Images consisting of text
  • If the same visual presentation can be made using text alone, an image is not used to present that text.
Where possible, do not use an image of text, use the text placed in the HTML. When creating screen shots or other images with text, make sure the text is reflected in the ALT text or in the surrounding text.
508 b

WCAG 2.0
1.2.1, 1.2.2, 1.2.3, 1.2.4, 1.2.5, 1.4.2
3. Multi-media
  • Multi-media files with audio have synchronized captioning of the audio portion.
  • Audio only files have a text equivalent such as a transcript.
  • A silent web slide show presentation has text alternatives associated with the graphics.
  • Moving visual information have text equivalents of the auditory description of the movements or ALT text for short animations.
  • A mechanism is provided to stop, pause, mute, or adjust volume for audio that automatically plays on a page for more than 3 seconds.
There is help for faculty to get transcripts and captions for their own multimedia files. Contact Media Services.

See the Integrating Multimedia into Online Courses help document for extensive information on how to find, create, and implement multimedia in your course, including accessibility policies.
WCAG 2.0
4. Embedded multimedia is identified via accessible text
  • Embedded multimedia refers to the use of code to place multimedia on an HTML page rather than linking to it.
  • This rule includes the use of embed code from YouTube or Vimeo, or using the HTML embed or object tags.
This rule is satisfied if you have descriptive text placed before the embedded video.
508 e and f

WCAG 2.0
5. Image Maps
  • Image maps are client-side.
  • If a server-side image map is used, redundant text links for each hotspot are used.
CATE and Moodle users will not likely have an image map unless they link to a 3rd party site.

Those creating their own HTML pages and including an image map, need to provide the extra code of redundant text links.
508 i

WCAG 2.0
6. Frames
  • Each frame has sufficient information to determine the purpose and relationship to the other frames (e.g. appropriately titled)
  • The source of each frame is an HTML file.
CATE and Moodle users will not likely have frames unless they link to a 3rd party site. Inline frames that use the iframe tag (used by YouTube and Vimeo embed code) do not need the title attribute as frames do.
WCAG 2.0
1.3.1, 2.4.6
7. Semantic markup, Headings
  • Semantic markup is used to designate headings (<h1>), lists (<ul>, <ol>, and <dl>), emphasized or special text (<strong>, <code>, <abbr>, <blockquote>, for example), etc. Semantic markup is used appropriately.
  • Page headings and labels for form and interactive controls are informative. Avoid duplicating heading text (e.g., "More Details") or label text (e.g., "First Name") unless the structure provides
    adequate differentiation between them.
Both CATE and Moodle do much to satisfy this rule. Whenever possible, use the headings and list features where appropriate, rather than simulate a heading or list.

In CATE when creating a long page of content, place headings in the page by using blocks with heading text put in the "Heading for this block" field.

In Moodle when creating a long page of content, place headings in the page, by selecting the heading text and from the first drop down menu (says Paragraph by default) in the Editing Box, select a heading level.

When adding a Label in Moodle, be sure to set it to be a heading.
508 c

WCAG 2.0
1.4.1, 1.4.3
8. Color (508 c)
  • Color is not solely used to convey information or indicate an action
  • Foreground text and background colors have sufficient contrast of at least 4.5:1
  • Text that is over 18 point or 14 point and bold needs a contrast of at least 3:1
  • Color alone is not used to distinguish links from surrounding text UNLESS the contrast is at least 3:1, AND additional differentiation is provided (such as underline) when the link is hovered over or receives focus
In CATE, if you choose one of the preset color schemes in Layout and Colors, the colors have been set to be accessibility compliant.

In Moodle, the default SRJC theme has been vetted for accessible colors. Forcing a different theme will not allow the student to choose their own theme, and although the other themes available were vetted at one time, there have been changes and they may not necessarily be compliant anymore. Be especially mindful of light gray text.

When choosing colors for text in the editing routines in CATE or Moodle, be careful to select colors that will provide a strong contrast.

The last item on the list about link colors applies only to those choosing their own link colors in CATE, or those creating their own HTML sites.
WCAG 2.0
9. Text Resize
  • The page is readable and functional when the text size is doubled.
Both CATE and Moodle work well when text size is doubled.
508 d 10. Style Sheets
  • Correct order and structure of pages are intact when the style sheet is turned off.
Both CATE and Moodle read in the correct order when turning style sheets off.
WCAG 2.0
11. Meaningful Sequence
  • The reading and navigation order (determined by code order) is logical and intuitive.
CATE and Moodle users need not worry about this rule.

Those creating their own HTML pages should make sure that if they use a CSS scheme that ends up putting the code for columns or navigation in a different order than the desired reading order, that the reading order is maintained when accessed by screen readers.
WCAG 2.0
12. Sensory Characteristics
  • Instructions do not rely upon shape, size, visual location, or sound (e.g. "Click on the square icon" or "Follow the instructions in the right-hand column" or "Listen for the tone to continue".
Be mindful of creating instructions with visual cues that refer to shapes, colors, and location that will not be perceived by disabled users. Consider using a heading when referring to an area of the page.
508 g and h

WCAG 2.0
13. Tables used for data
  • Tables are used for tabular data.
  • TH tags are used for row and column headers.
  • ID and TH tags are used for data tables that have two or more levels of row or column headers.
  • Where necessary, data cells are associated with their headers by using the scope attribute.
  • Data table captions and summaries are used where appropriate.
In the CATE Schedule and Table Maker modules, there is an option in configurations to turn on the "Use TH tag in cells of first row". Turn this option on if creating a table or schedule that has a header row. In the Table Maker module, you can set the scope of a header cell in the cell configurations.

In the Moodle Editing box, right-click or control-click on the table and go to the Advanced tab to put in a table summary if you have a lengthy table. Right-click on a cell and choose Cell > Table cell properties. Set the Cell type to Header, and the Scope to Column or Row depending on the type of cell.
508 j

WCAG 2.0
2.2.2, 2.3.1
14. Moving, blinking, scrolling and auto-updating
  • Moving or auto-updating objects have a mechanism to freeze motion.
  • Automatically updating content can be paused, stopped, or hidden by the user or the user can manually control the timing of the updates. Alternatively, a second copy of the page is linked to where refresh happens only after a link is selected.
  • No elements on the page flicker at a rate of 3 times per second or more unless that flashing content is sufficiently small and the flashes are of low contrast and do not contain too much red.
  • Automatically moving, blinking or scrolling content that lasts longer than 3 seconds can be paused, stopped, or hidden by the user. Moving, blinking or scrolling can be used to draw attention to or highlight content as long as it lasts less than 3 seconds.
Do not use blinking animations unless the flash is less than 3 times per second, or is sufficiently small and of low contrast. Flashing content that has the color red should especially be avoided.
508 k 15. Text-only pages
  • If compliance cannot be accomplished in any other way, a text-only page, with equivalent information or functionality is provided to make the page accessibility compliant.
  • The text-only page contains equivalent information or functionality as the primary page.
  • The text-only page has been updated with any changes made to the primary page.
Both CATE and Moodle users do not need to be concerned with this rule. Offer a text-only page (in addition) if you cannot satisfy the accessibility rules.
508 l 16. Scripts
  • Any scripts that present critical information or functions, are readable by assistive technology or provide an alternative, equivalent presentation or mechanism.
Only of concern to those creating their own sites that use scripts, not CATE or Moodle users.
508 m 17. Applets, plug-ins and other applications (PDFs, QuickTime Movies, etc.)
  • A link is provided to download any applet, plug-in or other application needed to play or display the required content.
Most often used plug-ins:
508 n

WCAG 2.0
1.1.1, 1.3.1, 3.3.1, 4.1.2
18. Electronic forms
  • All form elements except for buttons use the <LABEL> tag and associated "FOR" attribute to indicate the type of form item it is.
  • Wherever possible, place labels adjacent to input fields, not in separate cells of a table. To better tie the form element to its associated label, use the "ID" attribute in the associated form element. Set this attribute to the identifier used in the "FOR" attribute of the associated <LABEL> tag.
  • Dynamic HTML scripting of the form does not interfere with assistive technologies and is keyboard accessible.
  • Related form elements are grouped with fieldset/legend.
  • Required form elements or form elements that require a specific format, value, or length provide this information within the element's label.
  • If utilized, form validation cues and errors (client - side or server - side) alert users to errors in an efficient, intuitive, and accessible manner. The error is clearly identified, quick access to the problematic element is provided, and user is allowed to easily fix the error and resubmit the form.
Those working in CATE and Moodle will have their forms within those learning management systems set to be accessible.

Instructors creating their own HTML forms should adhere to these guidelines. See the WebAim page on Creating Accessible Forms.

When choosing to require third-party sites, be careful of sites that require a log-in, yet the log-in form fields do not pass for accessibility compliance. Contact the DE Assistive Technology Specialist to test sites you want to require students to access, or use the WAVE tool to test on your own.
508 o

WCAG 2.0
19. Skip repetitive navigation
  • If there is a long list of navigation links, a link is provided to skip the navigation and jump to the beginning of the main content of the page.
  • If a page has a proper heading structure, this may be considered a sufficient technique instead of a "Skip to main content" link. Note that navigating by headings is not yet supported in all browsers.
M Moodle has a skip repetitive navigation feature implemented without any action needed by the instructor.

CATE has a skip repetitive navigation feature implemented by default in the Section and Schedule modules. In the Presentation module, turn on the Enable invisible "Skip to content" feature in Page configurations.

Those creating their own HTML sites see these instructions on the WebAim site on implementing skip repetitive navigation.
WCAG 2.0
2.4.3, 3.2.3
20. Navigation
  • The navigation order of links, form elements, etc. is logical and intuitive.
  • Navigation links that are repeated on web pages do not change order when navigating through the site.
M Moodle sets the navigation for you.

CATE is set up to mostly satisfy this rule. Be consistent when turning on the left hand navigation.

For instructors creating their own HTML sites, place navigation in the same place on each page with the same amount of links in the same order.
WCAG 2.0
21. Links
  • The purpose of each link (or form image button or image map hotspot) can be determined from the link text alone, or from the link text and it's context (e.g., surrounding paragraph, list item, table cell, or table headers).
  • Links (or form image buttons) with the same text that go to different locations are readily distinguishable.
When creating links, be sure to make the active hyperlink text be descriptive of where the link goes.

Do not use the same hyperlink text on a page that links to different locations.

Do not use long URLs as hyperlink text

See this article on hyperlink text
WCAG 2.0
22. Page Titles
  • The web page has a descriptive and informative page title.
M Moodle handles this for you.

In CATE in the Page Configurations, be sure to leave the Show Page title atop this page checkbox on.
WCAG 2.0
3.1.1, 3.1.2
23. Language
  • The language of the page is identified using the HTML lang attribute (<html lang="en">).
  • When appropriate, the language of sections of content that are a different language are identified, for example, by using the lang attribute <blockquote lang="es">
CATE or Moodle users, if using languages different than English, contact DE to get help putting in the necessary code shown here.

Instructors creating their own HTML sites need to put in the lang="en" attribute on the html tag.
WCAG 2.0
2.1.1, 2.1.2, 2.1.3, 2.4.7
24. Keyboard Accessible
  • All page functionality is available using the keyboard, unless the functionality cannot be accomplished in any known way using a keyboard (e.g., free hand drawing).
  • Page-specified shortcut keys and accesskeys (accesskey should typically be avoided) do not conflict with existing browser and screen reader shortcuts.
  • No Keyboard Trap - Keyboard focus is never locked or trapped at one particular page element. The user can
    navigate to and from all navigable page elements using only a keyboard.
  • Keyboard focus - It is visually apparent which page element has the current keyboard focus (i.e., as you tab through the page, you can see where you are).
CATE and Moodle users do not need to do anything.

Keyboard traps most commonly happen with plug-ins, such as Flash, or in some JavaScript slideshows. Placing a heading tag before and after can be helpful (links or form controls will also work).

Those creating their own sites, search your style sheet, find instances of a:hover and replace with a:hover, a:focus
508 p

WCAG 2.0
25. Timed responses
  • If a timed response is required, the user can be alerted and given options to turn off, adjust or extend the time limit.
C In CATE, timed tests don't disappear, so no action needed to satisfy rule.

In Moodle, you should put language in the page where you link to the timed test and alert the user what the experience will be.
15 26. Linked documents are accessible
  • Word documents are accessible
  • PDFs are accessible
  • PowerPoint files have HTML or PDF alternative
All linked documents that are required need to be reviewed by the DE Assistive Technology Specialist. In most cases, DE staff will help make them accessible.

See tutorials on creating accessible Word docs and PDFs, and accessible PowerPoint alternatives.