UIC ARG - Accessibility Reference Guide

This online reference guide is designed for Illinois Information Technology Accessibility Act (IITAA) compliance evaluation training. It combines the headers from the IITAA implementation guidelines with hard-coded examples of state web accessibility violations and instructions for identifying them in the wild.* Automated and manual procedures are documented. Automated results were achieved using UIUC's Functional Accessibility Evaluator (FAE), the W3C HTML Validator, and the W3C CSS validator.

To get the most out of this guide, enter this web page's url (the one you're viewing right now) into the FAE and match the error report with the notes below. Manual checks will often require viewing the source code.

To aid with your own site's IITAA compliance evaluation, use of the UIC Web Accessibility Checklist is recommended.

*The developers of this guide, the UIC Web Accessibility Committee, make no claim as to the comprehensive nature of the examples of possible Illinois state web accessibility law violations and are not responsible for any web site's compliance or noncompliance as a result of the use of this guide.

  IITAA Rule FAE check Manual check
Coding

1.1 - Use valid, standard web programming code.

 

The FAE does check for W3C specs (under HTML Standards on the Summary Report), but it only looks for doctype, language, and character set.

Results are under "HTML Standards" in the FAE Summary Report.

You must test all of the code for valid markup. Test using the W3C HTML Validator and the W3C CSS validator.

If you test run this page through those validators, you will find it does not have valid HTML or CSS markup.

  1.2 - Use appropriate markup to convey document structure.

The FAE checks for the following inappropriate document structure markup: FONT, CENTER, B (bold), I (italic), U (Underline), BLINK, MARQUEE.

Results can be found under "Styling."

None required.
  1.3 - Provide meaningful page titles.

The FAE checks for a variety of TITLE and H1 requirements, including the requirement that the H1 should match at least part of the TITLE.

This page has no H1, which sets off several flags.

Results are in "Titles" under "Navigation & Orientation."

Use your best judgment to determine whether or not a page title is "meaningful." A reasonable approach would be to ask yourself if the page title is informative and accurately describes the page content.
  1.4 - Use headings to introduce sections and sub-sections, and use them in the correct order.

The FAE accurately detects incorrect heading order.

For example, the one of the subheading errors on this page's Summary Report is because of the following improperly nested subheaders:

HEADER 4

HEADER 3

HEADER 2

Results are in "Subheadings" under "Navigation & Orientation."

None required.

  1.5 - Use lists to identify series of related items, including navigation menus.

The FAE checks for list requirements, especially for lists that don't have subheaders preceding them (like the list below).

  • list item 1
  • list item 2
  • list item 3

Results are in "Subheadings" under "Navigation & Orientation."

None required.
Text 2.1 - Use text to display text, unless formatting that cannot be achieved with CSS is required. No FAE check.

Look for images that represent text (like this one)

Test by selecting all the text on the page (e.g., CTRL-A or equivalent) and look for non-selected areas of text, which may indicate text generated in an image. Use of an image for a logo/branding is acceptable.

  2.2 - Use relative sizes for fonts. No FAE check.

Test by using the 'zoom text' feature of your browser (in Firefox, View -> Zoom -> Zoom text only); then use ctrl-+ or equivalent.

You may also use a debugger (e.g. - the Firefox plugin, Firebug) to examine CSS source code.

  2.3 - Identify the language of text.

The FAE checks for the default language code specified at the top of the page. This page does not specify a langauge, so it fails.

Results are in "Default Language" under "Navigation & Orientation."

The FAE cannot match a web page's language code with the language used on the page. Check manually by viewing the source code (CTRL-U in Firefox) .

If different languages are used on the page, view the source to see if they are tagged with language code, e.g. <p lang="es"> or <span lang="es">

The language code for English is "en"

The language code for U.S. English is "en-US"

  2.4 - Use images instead of "ASCII art." Test by manual examination of the page. No FAE check.

This requires a manual check.

:)

Colors 3.1 - Do not convey information with color alone. Test by manual examination of the page; check how the required fields for forms are denoted. No FAE check.

Manual check rfequired. Required fields for forms sometimes do this, which is a definite violation.

Example:

Fill out the form below.
All fields in red are required!


  3.2 - Use contrasting foreground and background colors. No FAE check. Use the Firefox Accessibility Extension (Style -> Colour Contrast ... higher luminosity numbers mean greater visibility), or by using other color contrast analyzers available on the Web.
Images 4.1 - Provide appropriate "alternate text" for all images.

The FAE checks all images for ALT tags and text.

The image below is smaller than 8 pixels length/width-wise, so it is flagged with a warning by the FAE.

Results are in "Informative Images" and "Decorative Images" under "Text Equivalents."

None required.
  4.2 - Provide full descriptions for graphs, diagrams, and other meaningful images.

No FAE check.

 

Graphs and diagrams, etc. need text descriptions.

Test by manually examining the properties (via right-click contextual menu) or viewing the page source.

Image Maps 5.1 - Provide alternate text for each area in client-side image maps.

The FAE checks image maps for ALT attributes in AREA elements.

Results are in "Image Maps" under "Text Equivalents."

None required.
  5.2 - Use client-side image maps instead of server-side image maps unless areas cannot be defined with available shapes. No FAE check.

Screen readers may have difficulty reading server-side image maps. Check the source code.

Sounds 6.1 - Do not convey information with sound alone. No FAE check. Check page and/or page source for embedded multimedia. Speakers/headphones required.
  6.2 - Do not automatically play audio. No FAE check.

Check page and/or page source for embedded automatically playing audio. Speakers/headphones required.

Out of courtesy for those with computer speakers who may be viewing this page, auto-playing music/sound has not been embedded in this page's source code.

  6.3 - Provide text transcripts for audio containing speech when it is provided to the public and/or required to be viewed by employees. No FAE check. Check page and/or page source for text transcripts.
Multimedia 7.1 - Provide synchronized captions for all multimedia that contains essential auditory information when it is provided to the public and/or required to be viewed by employees. No FAE check. Check page and/or page source for text transcripts/captions.
  7.2 - Provide audio descriptions for all multimedia that contains essential visual information when it is provided to the public and/or required to be viewed by employees. No FAE check. Check page and/or page source for audio descriptions.
Animation 8.1 - Provide a means of pausing any moving, blinking, scrolling, or auto-updating information. No FAE check.

Test by examing page for blinking, scrolling, auto-updating elements (e.g., rotating news feeds).

This includes, but is not limited to the BLINK and MARQUEE tags.

  8.2 - Do not include content that flashes faster than 3 times per second. Test by examing page and / or page source for animated content.

The FAE only checks for BLINK and MARQUEE tags. It iss not able to evaluate video files for low framerates.

Results can be found under "Styling."

Manual check may be required.
Links 9.1 - Ensure that links are understandable out of context. No FAE check.

Test by examining hyperlinks on the page; note use of conventions such as click here or more...

When "more..." is used, a title attribute should be present (this should be visible when hovering with a pointing device); title attributes are read by screen readers and provide sufficient context.

  9.2 - Provide a means of skipping past repetitive navigation links. No FAE check.

View the page source; use the tab key to to check for a 'skip navigation' link; or disable stylesheets.

The UIC home page and UIC Accessweb are examples of good skip nav implementations.

  9.3 - Avoid using small links. No FAE check. Check manually; this depends upon the evaluator's judgment. A link using text such as "UIC" may be acceptable if rendered in reasonably-sized text.
  9.4 - Ensure that same-page links move keyboard focus as well as screen focus. No FAE check.

Test using Internet Explorer versions 5,6, 7, or 8.

Jump to the anchor below, then tab to test the keyboard focus.

Forms 10.1 - Provide labels or titles for all form fields.

The FAE checks for form labels and titles. The form below fails because its input element lacks an attribute that matches the form label. Adding id="email" to the input tag would fix this.



Results are in "Form control Labels" under "Navigation & Orientation."
None required.
  10.2 - Provide legends for groups of form fields.

The FAE does not require legend tags if fieldsets are involved, but it does check for text if legend tags are used. Empty legend tags are used below, which triggers a failure in the FAE results.


Results are in "Form control Labels" under "Navigation & Orientation."

Manual check required. View the source code. If <fieldset> tags are used, they must also enclose <legend> tags.

The order should go:
<fieldset>
<legend>Description</legend>

  10.3 - Ensure that form fields are in a logical tab order. No FAE check. Test by manually tabbing through the form fields.
  10.4 - Avoid placing non-focusable text between form fields. No FAE check. Manual check required. Test manually by tabbing and examining the content and layout of the form.
  10.5 - Ensure that text in form fields can be enlarged. No FAE check. Manual check required. Test using IE ; use ctrl-+ to zoom the text.
Tables 11.1 - Identify a header cell for each column and row in simple data tables.

The FAE classifies a data table as any table that has a TH element. It looks for a TH element in the first column and every row.

In the example below, each row does not have a TH element, and therefore fails.

Month Savings
January $100
February $75

Results are in "Data Tables" under "Navigation & Orientation."

 

Manual check may be required. If the table contains data, it must have TH tags in each column and row.
  11.2 - Identify relationships in complex data tables using id and headers attributes.

The FAE checks complex data tables for unique ID and HEADER attributes. According to Section 508, complex data tables use more than a simple row/column structure.

The table below is complex but does not have the appropriate ID and header markup. It fails.

Tasks Days of the Week
Tue Wed
School CS111 qwerty
Work blah blah
None required.
  11.3 - Provide summary attributes for data tables.

The FAE checks for unique summary attributes.

The table below has no such summary attribute, and therefore fails.

Month Savings
January $100
February $75
None required.
Frames 12.1 - Provide concise, unique, and understandable titles for frames. The FAE tests for unique title attributes in frame elements. Out of courtesy for the viewer, frames were not coded onto this page. None required.
  12.2 - Avoid using hidden, empty, or non-essential frames. The FAE tests for the presence of frames. Out of courtesy for the viewer, frames were not coded onto this page. Manual check required. Test manually be examining the page source for hidden frames. Frames should be rare for sites coded since 2000.
Scripts 13.1 - Ensure that scripted functions are usable with assistive technologies. No FAE check. Test completely by using adaptive technologies; some limited testing can be done by tabbing through the page (e.g., ensure flyout menus are keyboard accessible).
  13.2 - Ensure that significant interactions can be performed with both keyboard and mouse.

The FAE checks for onclick, onmouseover and onmouseout requirements.

Manual check is also required. Use the tab and arrow keys to check for any navigation issues.
  13.3 - Avoid changing focus unexpectedly. No FAE check. Manual check required. Use the mouse and keyboard to test for unexpected elements such as pop-up menus, advertisements,, or other fly-out menus.
  13.4 - Avoid changing content unexpectedly. No FAE check.

Manual check required. Check for dynamically changing content (e.g. - revolving headlines).

Embedded Objects 14.1 - Use accessible embedded objects whenever possible. No FAE check. When bringing up other documents such as Word, PDF, Powerpoint, Flash programs, etc. make sure these objects also follow accessibility standards. Visit UIC Accessweb for more information.
 

14.2 - If an inaccessible embedded object must be used, provide an accessible alternative that includes the same content and functionality.

No FAE check. Manual check required. If a web page contains an inaccessible embedded object (.e.g. - an inaccessible Flash file), check for an accessible alternative.
Downloadable Documents 15.1 - Provide natively accessible downloadable documents whenever possible. No FAE check.

Manual check required. If a web page contains a link to downloadable non-html document, download the document and check it for accessibility.

  15.2 - If a downloadable document cannot be made natively accessible, provide an accessible alternative that includes the same content and functionality. No FAE check.

Manual check required. If a web page contains a link to an inaccessible document, check to see if it has an accessible alternative available.

Timing 16.1 - Notify users of time limits and provide a means to extend time if possible. No FAE check. Manual check required. If there is a time limit such as a page timing out, there should be accessible notification close to the top of the site and (hopefully) a link or information on how a user may adjust this time. At minimum there should be information about the timing out process that is accessible.
  16.2 - Do not automatically refresh the current page. No FAE check.

Manual check required.

Automatic refresh does not work with many assistive technologies. Check for a link at the top of the page that will allow the user to turn it off.

Page Layout 17.1 - When using tables for layout, ensure that reading order is logical. No FAE check. Manual check required. View the source code. If tables are used for layout, make sure the reading order is consistent with the actual code order.
 

17.2 - When using style sheets for layout, ensure that reading order is logical.

No FAE check.

Manual check required. View the source code. If css is used for layout, make sure the reading order is consistent with the actual code order.

Tip: use the Firefox Accessibility Extension to turn off style sheets.

  17.3 - Avoid horizontal scrolling. Make sure the browser is set at 800x600 and see if there is any need to horizontal¬† scroll to get to information on the right side of the screen.¬† If there is information then further analysis needs to be made on the page. No FAE check.

Manual check required. Resize your browser to 800x600. Measure using the image below:

Scrolling should not be necessary to access or read page content. Exceptions may be made for content of lesser importance (e.g. -sidebars).

Alternate Accessible Versions 18.1 - Use separate accessible versions only as a last resort. No FAE check.

Manual check required. If a separate accessible version of a site is made available, it must also adhere to IITAA guidelines.

This is the anchor for the example in 9.4 (same-page links). Please test in IE. If you reached this area by clicking the link in 9.4, test by hitting the TAB button. The keyboard focus will fail and will send you to the first link at the top of the page instead of the link below. Adding tabindex="-1" to the target should fix this.

test