Understanding SC 4.1.2: Name, Role, Value (Level A)
In Brief
- Goal
- People using assistive technology understand all components.
- What to do
- Give components correct names, roles, states, and values.
- Why it's important
- Assistive technology only works well when code is done properly.
Success Criterion (SC)
For all user interface components (including but not limited to: form elements, links and components generated by scripts), the name and role can be programmatically determined; states, properties, and values that can be set by the user can be programmatically set; and notification of changes to these items is available to user agents, including assistive technologies.
Note
This success criterion is primarily for Web authors who develop or script their own user interface components. For example, standard HTML controls already meet this success criterion when used according to specification.
Intent
The intent of this Success Criterion is to ensure that Assistive Technologies (AT) can gather appropriate information about, activate (or set) and keep up to date on the status of user interface controls in the content.
When standard controls from accessible technologies are used, this process is straightforward. If the user interface elements are used according to specification the conditions of this provision will be met. (See examples of Success Criterion 4.1.2 below)
If custom controls are created, however, or interface elements are programmed (in code or script) to have a different role and/or function than usual, then additional measures need to be taken to ensure that the controls provide important and appropriate information to assistive technologies and allow themselves to be controlled by assistive technologies.
What roles and states are appropriate to convey to assistive technology will depend on what the control represents. Specifics about such information are defined by other specifications, such as WAI-ARIA, or the relevant platform standards. Another factor to consider is whether there is sufficient accessibility support with assistive technologies to convey the information as specified.
A particularly important state of a user interface control is whether or not it has focus. The focus state of a control can be programmatically determined, and notifications about change of focus are sent to user agents and assistive technology. Other examples of user interface control states are whether or not a checkbox or radio button has been selected, or whether a collapsible tree view or accordion is expanded or collapsed.
Note
Success Criterion 4.1.2 requires a programmatically determinable name for all user interface components. Names may be visible or invisible. Occasionally, the name needs to be visible, in which case it is identified as a label. Refer to the definition of name and label in the glossary for more information.
Benefits
- Providing role, state, and value information on all user interface components enables compatibility with assistive technology, such as screen readers, screen magnifiers, and speech recognition software, used by people with disabilities.
Examples
- Accessible APIs
- A Java applet uses the accessibility API defined by the language.
Related Resources
Resources are for information purposes only, no endorsement implied.
Techniques
Each numbered item in this section represents a technique or combination of techniques that the WCAG Working Group deems sufficient for meeting this Success Criterion. However, it is not necessary to use these particular techniques. For information on using other techniques, see Understanding Techniques for WCAG Success Criteria, particularly the "Other Techniques" section.
Sufficient Techniques
Select the situation below that matches your content. Each situation includes techniques or combinations of techniques that are known and documented to be sufficient for that situation.
Situation A: If using a standard user interface component in a markup language (e.g., HTML):
- ARIA14: Using aria-label to provide an invisible label where a visible label cannot be used
- ARIA16: Using aria-labelledby to provide a name for user interface controls
-
G108: Using markup features to expose the name and role, allow user-settable properties to be directly set, and provide notification of changes using technology-specific techniques below:
Situation B: If using script or code to re-purpose a standard user interface component in a markup language:
-
Exposing the names and roles, allowing user-settable properties to be directly set, and providing notification of changes using one of the following techniques:
Situation C: If using a standard user interface component in a programming technology:
Situation D: If creating your own user interface component in a programming language:
-
G10: Creating components using a technology that supports the accessibility … notification of changes using technology-specific techniques below:
Failures
The following are common mistakes that are considered failures of this Success Criterion by the WCAG Working Group.
- F59: Failure of Success Criterion 4.1.2 due to using script to make div or span a user interface control in HTML without providing a role for the control
- F15: Failure of Success Criterion 4.1.2 due to implementing custom controls that do not use an accessibility API for the technology, or do so incompletely
- F20: Failure of Success Criterion 1.1.1 and 4.1.2 due to not updating text alternatives when changes to non-text content occur
- F42: Failure of Success Criteria 1.3.1, 2.1.1, 2.1.3, or 4.1.2 when emulating links
- F68: Failure of Success Criterion 4.1.2 due to a user interface control not having a programmatically determined name
- F79: Failure of Success Criterion 4.1.2 due to the focus state of a user interface component not being programmatically determinable or no notification of change of focus state available
- F86: Failure of Success Criterion 4.1.2 due to not providing names for each part of a multi-part form field, such as a US telephone number
- F89: Failure of Success Criteria 2.4.4, 2.4.9 and 4.1.2 due to not providing an accessible name for an image which is the only content in a link
Key Terms
- accessibility supported
supported by users' assistive technologies as well as the accessibility features in browsers and other user agents
To qualify as an accessibility-supported use of a Web content technology (or feature of a technology), both 1 and 2 must be satisfied for a Web content technology (or feature):
-
The way that the Web content technology is used must be supported by users' assistive technology (AT). This means that the way that the technology is used has been tested for interoperability with users' assistive technology in the human language(s) of the content,
AND
-
The Web content technology must have accessibility-supported user agents that are available to users. This means that at least one of the following four statements is true:
-
The technology is supported natively in widely-distributed user agents that are also accessibility supported (such as HTML and CSS);
OR
-
The technology is supported in a widely-distributed plug-in that is also accessibility supported;
OR
-
The content is available in a closed environment, such as a university or corporate network, where the user agent required by the technology and used by the organization is also accessibility supported;
OR
-
The user agent(s) that support the technology are accessibility supported and are available for download or purchase in a way that:
- does not cost a person with a disability any more than a person without a disability and
- is as easy to find and obtain for a person with a disability as it is for a person without disabilities.
-
Note
The Accessibility Guidelines Working Group and the W3C do not specify which or how much support by assistive technologies there must be for a particular use of a Web technology in order for it to be classified as accessibility supported. (See Level of Assistive Technology Support Needed for "Accessibility Support".)
Note
Web technologies can be used in ways that are not accessibility supported as long as they are not relied upon and the page as a whole meets the conformance requirements, including Conformance Requirement 4 and Conformance Requirement 5.
Note
When a Web Technology is used in a way that is "accessibility supported," it does not imply that the entire technology or all uses of the technology are supported. Most technologies, including HTML, lack support for at least one feature or use. Pages conform to WCAG only if the uses of the technology that are accessibility supported can be relied upon to meet WCAG requirements.
Note
When citing Web content technologies that have multiple versions, the version(s) supported should be specified.
Note
One way for authors to locate uses of a technology that are accessibility supported would be to consult compilations of uses that are documented to be accessibility supported. (See Understanding Accessibility-Supported Web Technology Uses.) Authors, companies, technology vendors, or others may document accessibility-supported ways of using Web content technologies. However, all ways of using technologies in the documentation would need to meet the definition of accessibility-supported Web content technologies above.
-
- 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
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
Assistive technologies often communicate data and messages with mainstream user agents by using and monitoring APIs.
Note
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.
- conformance
satisfying all the requirements of a given standard, guideline or specification
- 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
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
The term label is not limited to the label element in HTML.
- mechanism
process or technique for achieving a result
Note
The mechanism may be explicitly provided in the content, or may be relied upon to be provided by either the platform or by user agents, including assistive technologies.
Note
The mechanism needs to meet all success criteria for the conformance level claimed.
- name
text by which software can identify a component within Web content to the user
Note
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
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
- process
series of user actions where each action is required in order to complete an activity
- 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
- programmatically set
set by software using methods that are supported by user agents, including assistive technologies
- relied upon
the content would not conform if that technology is turned off or is not supported
- role
text or number by which software can identify the function of a component within Web content
- sign language
a language using combinations of movements of the hands and arms, facial expressions, or body positions to convey meaning
- structure
- technology
mechanism for encoding instructions to be rendered, played or executed by user agents
Note
As used in these guidelines "Web Technology" and the word "technology" (when used alone) both refer to Web Content Technologies.
Note
Web content technologies may include markup languages, data formats, or programming languages that authors may use alone or in combination to create end-user experiences that range from static Web pages to synchronized media presentations to dynamic Web applications.
- 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
- user interface component
a part of the content that is perceived by users as a single control for a distinct function
Note
Multiple user interface components may be implemented as a single programmatic element. "Components" here is not tied to programming techniques, but rather to what the user perceives as separate controls.
Note
User interface components include form elements and links as well as components generated by scripts.
Note
What is meant by "component" or "user interface component" here is also sometimes called "user interface element".
- 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
Although any "other resources" would be rendered together with the primary resource, they would not necessarily be rendered simultaneously with each other.
Note
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.
- ARIA attribute is defined in WAI-ARIA
- ARIA state or property has valid value
- Button has non-empty accessible name
- Element with aria-hidden has no content in sequential focus navigation
- Element with presentational children has no focusable content
- Form field has non-empty accessible name
- Image button has non-empty accessible name
- Link has non-empty accessible name
- Menuitem has non-empty accessible name
- Role attribute has valid value
- ARIA required ID references exist
- ARIA state or property is permitted
- Element with role attribute has required states and properties
- Iframe element has non-empty accessible name
- Iframe elements with identical accessible names have equivalent purpose