WCAG 2.0 - Perceivable

1.1.1 Non-text Content

Non-text information (e.g., photos, illustrations, charts, graphs, Flash objects, some scanned PDFs) must be accompanied by an accessible text equivalent, whether that be an ALT attribute on an <img> element, other HTML text on the page, or an accessible MS Word or other document. (Note: Not all MS Word or other documents are necessarily accessible, in which case they do not qualify as a text alternative.)

How to test?

Review all non-text content on the page and check that accessible text alternatives are provided. If some non-text information does not have a text alternative, check “No,” describe the issue, and move on.

You can check “Yes” if there are accessible alternatives to all non-text content.

1.2 Audio and Video

If you publish an audio-only file, the information it communicates aurally (including important sounds) must be provided through a text transcript.

If you publish a video-only file, the information it communicates visually must be provided either through a voice-over track (i.e., audio description) or a comprehensive text transcript that describes what is being shown.

If you publish a synchronised audio-video file, the information it communicates aurally (including important sounds) must be displayed via captions in the video AND captured in a text transcript. The information communicated visually must also be captured in the text transcript, or alternatively, can be provided through a voice-over track (i.e., audio description).

Note: any agency publishing live video should contact the Web Standards team at web.standards@dia.govt.nz.

How to test?

Review any audio and/or video content on the page and check that it has the appropriate alternatives (e.g., text transcript, captions, audio description).

If you don’t publish video and/or audio, check the applicable “Yes” button because you’re not in violation of the standard.

1.3.1 Info and Relationships

The visual presentation of content structure and relationships must equally be present in the HTML markup. For example, headings are normally presented visually using larger font sizes and bold text, but they must also be marked up as well-ordered <h1> to <h6> elements. Similarly, lists must be actually marked up as list elements, paragraphs as <p> elements, etc.

Note that this requirement also applies to content such as MS Word documents: structures such as headings, lists, tables, etc. should be applied using the facilities in Word rather than through the application of visual text effects.

How to test?

This test requires strong HTML knowledge.

Review all content structure and relationships, e.g., what's a heading, a list, a paragraph, a blockquote, a form control, a link, etc., and check that the same structure and relationships are present in the HTML markup.

1.3.2 Meaningful Sequence

The order of content must make sense, independent of the way it is styled visually with CSS. One way to do this is to make sure that the content’s sequence is the same in the HTML source code as it is when presented visually on the screen using CSS. When the content’s sequence in the HTML markup does not match its visual order on the screen, it can cause problems for some users, especially screen reader and keyboard-only users.

How to test?

A good way to check for this is to disable Cascading Style Sheets (CSS) in the browser to remove any visual styling. Check to see that the content on the page still makes sense. Even if sections of the page, e.g., the site menu, main content, sidebar, are in different relative positions, as long as their meaning, and the meaning of the page overall, are unaffected, then this Success Criterion is met. If the meaning of the page’s content is changed or does not make sense, you need to check “No” and provide a description.

1.3.3 Sensory Characteristics

Don’t rely on things like position, size or shape to provide information.

Note: The related concern with using colour to provide information is dealt with separately in requirement 1.4.1 Use of Color

How to test?

Look and read through the page and note any directions or information whose meaning relies on its relative position, size or shape.

The most likely things to watch out for are instructions such as “See the link in the smaller box on the left side of this page.” This would be a failure as users who are unable to see the page will not find meaning from that statement.

Certain improperly constructed tag or word clouds, where the relative importance of each word is indicated by its size only, are other examples of information being provided through sensory characteristics only. In this case, when CSS is disabled in the browser, if there is no indication of the words’ relative importance, this constitutes a failure.

1.4.1 Use of Color

Don’t rely solely on colour to convey information.

Any information whose meaning is available only through colour-coding is likely to be problematic. In the case of charts and graphs, consider using visual patterns, e.g., stripes or cheques, in addition to or instead of colour.

How to test?

Check particularly for forms with error messages or mandatory field indicators, and make sure these would still work if you were seeing it in black and white.

Another area of concern is graphs and charts, where different series are differentiated through colour coding. Check that they are accompanied by a text description that sufficiently describes the information that is conveyed through the colour differences.

1.4.2 Audio Control

How to test?

If audio content on a page plays automatically for more than three seconds, there must be a facility for the user to turn the audio off. Best practice, however, is simply not to have audio that starts playing automatically.

Check all audio content on the page and verify that, if it starts automatically, it stops after three seconds, or a way to pause or stop the audio is provided.

1.4.3 Contrast (Minimum)

How to test?

This is easy to test but requires a bit of care and time. You’ll most likely want to use a tool like the Colour Contrast Analyser from the Paciello Group and Web Accessibility Tools Consortium; or the one that comes with the Juicy Studio Accessibility Toolbar add-on for Firefox.

There are also online contrast checkers, e.g.,

• http://webaim.org/resources/contrastchecker/
• http://juicystudio.com/services/luminositycontrastratio.php

Note: A number of tools exist for testing colour contrast. Use what suits you, but ensure that it is measuring colour contrast in accordance with WCAG 2.0.

1.4.4 Resize text

How to test?

Please note that this requirement concerns text resizing or text zoom, as opposed to the full page zoom functionality offered by more recent browsers.

To test this, it is important to use both Internet Explorer and another browser such as Firefox.

Using Internet Explorer: Under the “View” menu, select “Text Size > Largest”. Make sure that all of the text on the page increases in size without obscuring any content or removing functionality on the page. Note, however, that the “Largest” setting in Internet Explorer is not a 200% increase in text size as required by this WCAG Success Criterion. Also, Internet Explorer does not resize text that is set in pixels (“px” units) in the CSS. Instead, “em” units or percentages should be used.

Using Firefox: Under the “View” menu, select “Zoom” and make sure that “Zoom Text Only” is checked. Then, press “Ctrl++” six times to increase the font size to 200% its default. Again, ensure that no content or functionality on the page is obscured or prevented.

Enlarging text may introduce a horizontal scroll. While this is less than ideal, as long as the page content is still readable and usable, that’s okay. It does suggest that the site could be better constructed for device independence though; if you get the chance, check it on an iPhone or Android.

1.4.5 Images of text

How to test?

In general, don’t use images to present text: Some users need to be able to adjust colour, size, etc.

Text in logos is permitted, as are advertising tiles or banners where text is presented as part of an image. These should have good, descriptive ALT attributes.

If you come across the use of text in images that appears to be largely for the purposes of preserving typographic style, the site may be in violation of this requirement. You should read and understand the previous web standards before entering your assessment.

Back to top