中改院院长迟福林专著《赢在转折点》荣获“2016..
In Brief
- Goal
- A page's content is described in headings and labels
- What to do
- Provide descriptive headings and labels
- Why it's important
- People can orient themselves, especially those with cognitive or visual disabilities.
Success Criterion (SC)
Intent
The intent of this success criterion is to help users understand what information is contained in web pages and how that information is organized. When headings are clear and descriptive, users can find the information they seek more easily, and they can understand the relationships between different parts of the content more easily. Descriptive labels help users identify specific components within the content.
Labels and headings do not need to be lengthy. A word, or even a single character, may suffice if it provides an appropriate cue to finding and navigating content.
Labels of form controls are usually text-based. In some cases, images can serve as descriptive labels without additional text. In these cases, authors should ensure that the image and its use as a label (in context) are widely understood.
Note that the same image can be interpreted differently in different contexts. However, it can still be considered descriptive if its use is commonly understood in each context. For example, when accompanying a text field, a loupe or magnifying glass icon with text alternative of "Search" is commonly interpreted as indicating the field is for entering and submitting a search query.
Placed on or near another image, a loupe or magnifying glass icon is commonly interpreted as a means to view a magnified version of the image (for instance, acting as a mechanism to zoom into the image, or opening a full-sized image in a new window).
This success criterion requires that if headings or labels are provided, they be descriptive. This success criterion does not require headings or labels; labels for inputs are covered separately by 3.3.2 Labels or Instructions. This success criterion also does not require that content acting as a heading or label be correctly marked up or identified — that aspect is covered separately by 1.3.1: Info and Relationships. It is possible for content to pass this success criterion (providing descriptive content that acts as headings or labels) while failing Success Criterion 1.3.1 (if the headings or labels aren't correctly marked up/identified). Conversely, it is also possible for content to pass Success Criterion 1.3.1 (with headings or labels correctly marked up or identified), while failing this success criterion (if those headings or labels are inaccurate or insufficiently clear).
Further, in the case of labels, this success criterion does not take into consideration whether or not
alternative methods of providing an accessible name for form controls and inputs have been
used — that aspect is covered separately by 4.1.2: Name, Role and Value. It is possible
for controls and inputs to have an appropriate accessible name (e.g. using aria-label="…")
and therefore pass Success Criterion 4.1.2, but to still fail this success criterion (if the label is inaccurate or insufficiently clear or descriptive).
This success criterion does not require the use of labels; however, it does require that if labels are present, they must be accurate and sufficiently clear or descriptive. Please see 3.3.2: Labels or Instructions for more information on the use of labels.
Benefits
- Descriptive headings are especially helpful for users who have disabilities that make reading slow and for people with limited short-term memory. These people benefit when section titles make it possible to predict what each section contains.
- Form input controls with labels that clearly and accurately describe the content that is expected to be entered helps users know how to successfully complete the form.
- When headings and labels are also correctly marked up and identified in accordance with 1.3.1: Info and Relationships, this success criterion helps people who use screen readers by ensuring that labels and headings are clearer when presented in a different format — for example, in an automatically generated list of headings, a table of contents, or when jumping from heading to heading within a page.
Examples
- A news site
- The home page of a news site lists the headlines for the top stories of the hour. Under each heading are the first 35 words of the story and a link to the full article. Each headline gives a clear and accurate idea of the article's subject.
- A guide on how to write well
- A guide on writing contains the following section titles:
How To Write Well
,Cut Out Useless Words
,Identify Unnecessary Words
, and so on. The section headings are clear and concise and the structure of the information is accurately reflected in the structure of the headings. - Consistent headings in different articles
- A website contains papers from a conference. Submissions to the conference are required
to have the following organization:
Summary
,Introduction
, [other sections unique to this article],Conclusion
,Author Biography
,Glossary
, andBibliography
. The title of each web page clearly identifies the article it contains, creating a useful balance between the uniqueness of the articles and the consistency of the section headings. - A form asking for the name of the user
- A form asks for the name of the user. It consists of two input fields to ask for the first
and last name. The first field is labeled
First name
, the second is labeledLast name
. - A search field labeled by a magnifying glass icon
- A search text input is followed by a button containing a magnifying glass icon that activates the search function. The icon has the string "search" as programmatically determinable label.
Related Resources
Resources are for information purposes only, no endorsement implied.
- How Users Read on the Web A study showing that most users scan web pages rather than reading them word by word.
- Applying Writing Guidelines to Web Pages A report on the effects of making websites concise, easy to scan, and objective.
Techniques
Each numbered item in this section represents a technique or combination of techniques that the Accessibility Guidelines Working Group deems sufficient for meeting this Success Criterion. A technique may go beyond the minimum requirement of the criterion. There may be other ways of meeting the criterion not covered by these techniques. For information on using other techniques, see Understanding Techniques for WCAG Success Criteria, particularly the "Other Techniques" section.
Sufficient Techniques
Note
Headings and labels must be programmatically determined, per Success Criterion 1.3.1.
Key Terms
- ASCII art
picture created by a spatial arrangement of characters or glyphs (typically from the 95 printable characters defined by ASCII)
- assistive technology
hardware and/or software that acts as a user agent, or along with a mainstream user agent, to provide functionality to meet the requirements of users with disabilities that go beyond those offered by mainstream user agents
Note 1
functionality provided by assistive technology includes alternative presentations (e.g., as synthesized speech or magnified content), alternative input methods (e.g., voice), additional navigation or orientation mechanisms, and content transformations (e.g., to make tables more accessible).
Note 2
Assistive technologies often communicate data and messages with mainstream user agents by using and monitoring APIs.
Note 3
The distinction between mainstream user agents and assistive technologies is not absolute. Many mainstream user agents provide some features to assist individuals with disabilities. The basic difference is that mainstream user agents target broad and diverse audiences that usually include people with and without disabilities. Assistive technologies target narrowly defined populations of users with specific disabilities. The assistance provided by an assistive technology is more specific and appropriate to the needs of its target users. The mainstream user agent may provide important functionality to assistive technologies like retrieving web content from program objects or parsing markup into identifiable bundles.
- screen magnifiers, and other visual reading assistants, which are used by people with visual, perceptual and physical print disabilities to change text font, size, spacing, color, synchronization with speech, etc. in order to improve the visual readability of rendered text and images;
- screen readers, which are used by people who are blind to read textual information through synthesized speech or braille;
- text-to-speech software, which is used by some people with cognitive, language, and learning disabilities to convert text into synthetic speech;
- speech recognition software, which may be used by people who have some physical disabilities;
- alternative keyboards, which are used by people with certain physical disabilities to simulate the keyboard (including alternate keyboards that use head pointers, single switches, sip/puff and other special input devices.);
- alternative pointing devices, which are used by people with certain physical disabilities to simulate mouse pointing and button activations.
- content
information and sensory experience to be communicated to the user by means of a user agent, including code or markup that defines the content's structure, presentation, and interactions
- human language
language that is spoken, written or signed (through visual or tactile means) to communicate with humans
Note
See also sign language.
- label
text or other component with a text alternative that is presented to a user to identify a component within web content
Note 1
A label is presented to all users whereas the name may be hidden and only exposed by assistive technology. In many (but not all) cases the name and the label are the same.
Note 2
The term label is not limited to the label element in HTML.
- name
text by which software can identify a component within web content to the user
Note 1
The name may be hidden and only exposed by assistive technology, whereas a label is presented to all users. In many (but not all) cases, the label and the name are the same.
Note 2
This is unrelated to the name attribute in HTML.
- non-text content
any content that is not a sequence of characters that can be programmatically determined or where the sequence is not expressing something in human language
Note
This includes ASCII art (which is a pattern of characters), emoticons, leetspeak (which uses character substitution), and images representing text
- presentation
rendering of the content in a form to be perceived by users
- programmatically determined
determined by software from author-supplied data provided in a way that different user agents, including assistive technologies, can extract and present this information to users in different modalities
- sign language
a language using combinations of movements of the hands and arms, facial expressions, or body positions to convey meaning
- structure
- text
sequence of characters that can be programmatically determined, where the sequence is expressing something in human language
- text alternative
Text that is programmatically associated with non-text content or referred to from text that is programmatically associated with non-text content. Programmatically associated text is text whose location can be programmatically determined from the non-text content.
Note
Refer to Understanding Text Alternatives for more information.
- user agent
any software that retrieves and presents web content for users
- web page
a non-embedded resource obtained from a single URI using HTTP plus any other resources that are used in the rendering or intended to be rendered together with it by a user agent
Note 1
Although any "other resources" would be rendered together with the primary resource, they would not necessarily be rendered simultaneously with each other.
Note 2
For the purposes of conformance with these guidelines, a resource must be "non-embedded" within the scope of conformance to be considered a web page.
Test Rules
The following are Test Rules for certain aspects of this Success Criterion. It is not necessary to use these particular Test Rules to check for conformance with WCAG, but they are defined and approved test methods. For information on using Test Rules, see Understanding Test Rules for WCAG Success Criteria.