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.
I won't go through every single criterion on this site. If you are curious about the more detailed contents of WCAG, hop over to my WCAG site!
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.
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):
Requirements for pre-recorded video-only:
Requirements for pre-recorded audio-only:
Requirements or live multimedia (video and audio):
Requirements for live video-only:
Requirements for live audio-only:
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.
Create content that can be presented in different ways without losing information or structure.
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.
When the sequence in which content is presented affects its meaning, a correct reading sequence can be programmatically determined.
In practice:
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:
Help users see and hear content. Help them separate the foreground from the background.
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.
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.
For the visual presentation of blocks of text, a mechanism is available to achieve the following:
- Foreground and background colors can be selected by the user.
- Width is no more than 80 characters or glyphs (40 if CJK).
- Text is not justified (aligned to both the left and the right margins).
- 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.
- 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.
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.
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:
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".