Sanna Kramsi - I would if I could a guide to web accessibility

WCAG tips: Perceivable

The first principle of the Web Accessibility Guidelines is Perceivable. Present information and user interface components must in ways that users can perceive. Provide text alternatives for non-text content, such as images and media. Make sure the content is distinguishable.

Guideline 1.1 - Text Alternatives

The first guideline is all about providing text alternatives to the non-content.

A part of that is recognizing what makes an image a decorative one. This part is very much subjective. Some of your users might like to be aware of even the decorative images. And there are a lot of different opinions on what makes a good image alternative text. I wrote some instructions for image alternatives.

Guideline 1.2 - Time-based Media

This section is all about providing alternatives for time-based media, like videos. There are criteria for each of the conformance levels.

The requirements include captions, audio descriptions and media alternatives. If these concepts are not familiar to you, read more about them on the video and audio accessibility page.

Requirements for pre-recorded multimedia (video and audio):

  • Captions
    • Must have on all levels
  • Media alternative
    • Recommended on the A and AA levels
    • Must have on the AAA level
  • Audio descriptions
    • Must have on all levels
  • Sign language
    • Nice to have
    • Must have on the AAA level

Requirements for pre-recorded video-only:

  • Captions
    • Not required
  • Media alternative
    • On A level you must have either a media alternative or an audio description
    • Required on AAA level
  • Audio descriptions
    • On A level you must have either a media alternative or an audio description
    • Required on AA level
  • Sign language
    • Not required

Requirements for pre-recorded audio-only:

  • Captions
    • Not required
  • Media alternative
    • Must have on all levels
  • Audio descriptions
    • Not required
  • Sign language
    • Nice to have

Requirements or live multimedia (video and audio):

  • Captions
    • Recommended for the A level
    • Must on AA level (there is an exception for this in the Finnish law)
  • Media alternative
    • Nice to have
    • Must have on the AAA level
  • Audio descriptions
    • Nice to have
  • Sign language
    • Nice to have

Requirements for live video-only:

  • Captions
    • Not required
  • Media alternative
    • Nice to have
    • Must have on the AAA level
  • Audio descriptions
    • Nice to have
  • Sign language
    • Not required

Requirements for live audio-only:

  • Captions
    • Nice to have
    • Must have either captions or a media alternative on the AAA level
  • Media alternative
    • Nice to have
    • Must have either captions or a media alternative on the AAA level
  • Audio descriptions
    • Not required
  • Sign language
    • Nice to have

In some requirements, you might notice that either one thing or another is required. In those cases, the author can choose which one they want to provide. For the best results, the author should always provide both. But WCAG criteria only require one of those.

Guideline 1.3 - Adaptable

Create content that can be presented in different ways without losing information or structure.

1.3.1 Info and Relationships (Level A)

Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text.

You often see a warning "The heading structure is not logically nested. This h2 element appears to be the primary document heading, so should be an h1 element." This is an interesting one. You always get this warning when you, for example, have heading content above the page main h1. You are allowed to have the logical heading level reflect its importance in relation to the main content, though, like in the example below.

<div class="top-nav"> <h2>Site Navigation</h2> </div> <div class="main"> <h1>Page main heading</h1> </div>

But I wouldn't recommend this. Keeping the heading structure logical improves usability for everyone.

1.3.2 Meaningful Sequence (Level A)

When the sequence in which content is presented affects its meaning, a correct reading sequence can be programmatically determined.

In practice:

  • Use semantic HTML, don't modify the visual layout of the content only with CSS. For example, if you need a list element, use a list element instead of styling a set of spans or divs to look like a list.
  • Adopt a left-justified approach for languages that read from left to right (e.g. English), and right-justified for languages that read right to left (e.g. Arabic).
  • Make the DOM order always match the visual order when possible.
  • Often navigational elements may change place in relation to the content in comparison to the view created by CSS. This does not necessarily make the reading order illogical.
  • Place paragraphs of content in a meaningful and correct order.
  • Use section headings or sub-headings to highlight importance.
  • Don't use whitespace characters to position content.
  • Allocate the appropriate listing type (such as order and nesting) to content.

1.3.5 Identify Input Purpose (Level AA)

The purpose of each input field collecting information about the user can be programmatically determined when:

  • The input field serves a purpose identified in the Input Purposes for User Interface Components section; and
  • The content is implemented using technologies with support for identifying the expected meaning for form input data.

In practice:

  • Appropriate visible labels
  • Correct input types
  • Correct use of autocomplete attributes.

List of input purposes

Guideline 1.4 - Distinguishable

Help users see and hear content. Help them separate the foreground from the background.

1.4.1 Use of Color (Level A)

Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.

Red and pink are the same color (hue) but they have different lightness (which is not color ). So red and pink would pass the requirement for "not distinguished by color (hue) alone" since they differ by lightness (which is not color) - as long as the difference in lightness (contrast) is 3:1 or greater. For example, if the surrounding text is red and the link is pink it would pass. Similarly, light green and dark red differ both by color and by lightness so they would pass if the contrast (lightness) difference is 3:1 or greater before focus or pointing.

If the non-color cue only happens when the mouse hovers over the link or when the link receives focus, it is still a failure.

If the link is a different color and bold it won't fail because the boldness is not color dependent.

1.4.4 Resize text (Level AA)

Except for captions and images of text, text can be resized without assistive technology up to 200 percent without loss of content or functionality.

This is talking about text-only zooming, as it says in the criterion.

1.4.8 Visual Presentation (Level AAA)

For the visual presentation of blocks of text, a mechanism is available to achieve the following:

  1. Foreground and background colors can be selected by the user.
  2. Width is no more than 80 characters or glyphs (40 if CJK).
  3. Text is not justified (aligned to both the left and the right margins).
  4. Line spacing (leading) is at least space-and-a-half within paragraphs, and paragraph spacing is at least 1.5 times larger than the line spacing.
  5. Text can be resized without assistive technology up to 200 percent in a way that does not require the user to scroll horizontally to read a line of text on a full-screen window.

If you theme the website normally, the browsers should be able to override the site styles. This can be tested at least with Firefox: Change the fonts and colors websites use on Mozilla's support site.

1.4.10 Reflow (Level AA)

Content can be presented without loss of information or functionality, and without requiring scrolling in two dimensions for:

  • Vertical scrolling content at a width equivalent to 320 CSS pixels;
  • Horizontal scrolling content at a height equivalent to 256 CSS pixels;

Except for parts of the content which require two-dimensional layout for usage or meaning.

Notice the word "equivalent" here. On the understanding page of that criterion, there is useful extra information:

320 CSS pixels is equivalent to a starting viewport width of 1280 CSS pixels wide at 400% zoom. For web content which is designed to scroll horizontally (e.g., with vertical text), 256 CSS pixels is equivalent to a starting viewport height of 1024 CSS pixels at 400% zoom.

1.4.13 Content on Hover or Focus (Level AA)

Where receiving and then removing pointer hover or keyboard focus triggers additional content to become visible and then hidden, the following are true:

  • Dismissible: A mechanism is available to dismiss the additional content without moving pointer hover or keyboard focus, unless the additional content communicates an input error or does not obscure or replace other content;
  • Hoverable: If pointer hover can trigger the additional content, then the pointer can be moved over the additional content without the additional content disappearing;
  • Persistent: The additional content remains visible until the hover or focus trigger is removed, the user dismisses it, or its information is no longer valid.

Exception: The visual presentation of the additional content is controlled by the user agent and is not modified by the author.

Examples of failures for this criterion:

  • A pop-up opens on pointer hover. Due to the chosen screen magnification, the content is only partially visible. However, as soon as the pointer is moved away from the trigger towards the pop-up content so it can be read, the pop-up automatically closes.
  • Hovering over a chart with data points, pop-ups open to show details of the respective data point, somewhat offset from the data point itself. When moving the pointer towards the pop-up so it can be fully read with magnification, the pointer travels over other data points that cause the appearance of other pop-ups that replace the particular pop-up the user wanted to see.

The pointer needs to be able to be moved over the new content without the additional content disappearing and the appearance of the additional content is controlled by the user agent, not the author.

Remember the ARIA role "tooltip".

Source material