Information Technology Systems and Services.
ITSS home

Compliance Sheriff: Easy Visual Checks

Compliance Sheriff can identify numerous items that require "Visual Checks." The following are a few procedures that tie back to WCAG techniques and are fairly easy to perform to help get you started in visual checking. They are organized as:

Easy Visual Checks for Perceivable Content

C17: Scaling form elements which contain text

Does the page contain a form input box? If it doesn't, mark the technique not applicable i.e., "N/A [lcarlson] No input elements on page." If it does:

  1. Type some text into the input box.
  2. Incrementally increase text-only zoom.
    • In Windows, press Ctrl+[+] (the control key and the + key at the same time) 4 times.
    • On Mac, press command+[+] (the Command key and the + key at the same time) 4 times.
  3. If the text increases, it passes the check. Mark it pass i.e., "Pass [lcarlson] Manual check: 1.) Entered text into search box. 2.) Increased the text size 200%. 3.) Checked that the text in form controls increased by 200% without loss of content or functionality.
  4. If the text does not increase without loss of content or functionality, it fails the check. Mark it fail i.e., "Fail [lcarlson] Manual check: 1.) Entered text into search box. 2.) Increased the text size 200%. 3.) Checked that the text in form controls increased by 200%.

C30: Using CSS to replace text with images of text and providing user interface controls to switch

1. Check that the Web page includes a control that allows users to select an alternate presentation.

2. Check that if the page has such a control that when it is activated the resulting page includes text (programmatically determined text) wherever images of text had been used.

F14: Failure of Success Criterion 1.3.3 due to identifying content only by its shape or location

Read the page content. If page does not not use shape or location to explain instructions it is a "Pass".

Example comment: "Pass [lcarlson] Manual check. Page does not use shape or location to explain instructions"

G14: Ensuring that information conveyed by color differences is also available in text

The objective of this technique is to ensure that when color differences are used to convey information, such as required form fields, the information conveyed by the color differences are also conveyed explicitly in text.

Example comment: "Pass [lcarlson] Manual Check. Color is not used to communicate information."

Example comment: "Fail [lcarlson] Manual Check. Color is used to communicate information."

H42: Using h1-h6 to identify headings

Using the Web Developer Toolbar FireFox extension, which you used in the Accessibility 101 eClass, select the "Show element Tag Names when outlining" and "Outline Headings test under "Outline" and make sure all visually displayed headings are really marked up as such. It should be a logical outline. Headings help users understand the structure of the content and how sections are nested in one another. When presented efficiently, headings help users figure out the organization of the content, allowing them to navigate by blocks, rather than as a whole. Real HTML heading elements must to be used for the headings to truly convey the semantics required to create a document outline.

Analyze which elements of content play a heading role. These heading the correspond to H1, H2, H3, H4, H5 or H6 element in order to create an outline for the document. Assistive technologies will then be able to reliably transform the semantics into an outline for end users, allowing them to quickly go from one section to the next. For more information consult: Structure: Coding, Writing, and Testing.

Example comments:

Easy Visual Checks for Operable Content

G130: Providing descriptive headings

Use the WAVE FireFox Toolbar or the WAVE to check the content of each heading. Anything that is a functional heading should be real heading. Anything that is a not functional heading should not be a heading. Check if the headings:

Example comments:

H4: Creating a logical tab order through links, form controls, and objects

First, make sure you have keyboard access enabled in your browser. Then, perform the following checks on the page.

Tab to all
Check that you can tab to all the elements, including links, form fields, buttons, and media player controls.
Tab order
Check that the tab order follows the logical reading order (e.g., for left-to-right languages top to bottom, left to right) in sequence.
Tab away
Check that you can tab away from all elements that you can tab into. (A common problem is the keyboard focus gets caught in media controls and you cannot get out; it's called the "keyboard trap".) Sometimes YouTube requires HTML5 enabled.
All functionality by keyboard
Check that you can do everything with the keyboard; that is, you don't need the mouse to activate actions, options, visible changes, and other functionality. (A common problem is that some functionality is available only with mouse hover, and is not available with keyboard focus.)
Drop-down lists
Check that after you tab into a drop-down list, you can use the arrow keys to move through all the options without triggering an action. (A common problem for drop-downs used for navigation is that as soon as you arrow down, it automatically selects the first item in the list and goes to a new page — you cannot get to other items in the list.)
Image links
Check that when images are links, they have clear visual focus and can be activated using the keyboard (usually by pressing the Enter key).

Sample comments:

SCR1: Allowing the user to extend the default time limit

  1. On a Web page that uses time limits, wait until the time limit has expired.
  2. Determine if an option was provided to extend the time limit. Example comments:

Easy Visual Checks for Understandable Content

F66: Failure of Success Criterion 3.2.3 due to presenting navigation links in a different relative order on different pages

Verify that the page is consistent in the presentation of site navigation, position on page, link colors etc. between all pages on site. If page contains no site navigation mechanisms repeated on additional pages or you are only checking one homepage on a site, mark N/A. Example comments:

G89: Providing expected data format and example

Check any forms for restrictions. If the only form present is a simple search form that has no restrictions on data, mark N/A.

Example comment: "N/A [lcarlson] Manual Check. No restrictions on the format of data that users enter into the search form. "

G98: Providing the ability for the user to review and correct answers before submitting

Check any forms for irreversible transactions. If the only form present is a simple search form that has no restrictions on data, mark N/A.

Example comment: "N/A [lcarlson] Manual Check. No irreversible transactions are present on this page."

H58: Using language attributes to identify changes in the human language

Read the page. If language does not change on the page, mark N/A. If it does change, it should be marked up properly: any changes in language on a page should use the lang or xml:lang attribute, as appropriate for the HTML or XHTML version in use.

Easy Visual Checks for Robust Content

G134: Validating Web pages

Validate page with the W3C Validator.

  1. Go to theW3C Validator (detailed interface with options). Under options be sure to check:
    • Show Source
    • Show Outline
    • List Messages Sequentially
    • Verbose Output
  2. In the Address field enter the page URL
  3. Validate the page by clicking or activating the "Validate this page" button.
  4. Note if the page is valid.

Example comment: "Warning [lcarlson] HTML validity is not specifically required for WCAG2. However, Significant HTML/XHTML validation/parsing errors should be avoided. (X number) HTML Validation errors exist. Consult : Validation URL"