4.1.2 Name, Role, Value Level A

[View on W3C.org]

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.

*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.

Testing & Remediation

How to test: To test your site for this particular Success Criterion, you will need to perform 2 separate tests. Test to see if role, state & name are exposed properly
  • With Web Developer Tools, check for ARIA roles on relevant elements
  • With the Web Accessibility Toolbar, use the Display ARIA Roles functionality
  • Use the aViewer tool for Windows to check ARIA values
Test to see how screen readers handle your content Open your site in one of the popular screen readers (JAWS, NVDA, VoiceOver for Mac, etc) and navigate the entire page. Verify that the following info is provided:
  • Proper role of the UI element
  • Correct announcement of the action that can be taken
  • The displayed label text is announced properly
How to remediate: Standard UI component in a markup language
  • Use aria-label to provide an invisible label where a visible label cannot be used
  • Use aria-labelledby to provide a name for UI controls
  • Use markup features to expose the name and role, allow user-settable properties to be set & provide notification of changes
    • HTML form controls & links
    • Label elements to associate text labels with form controls
    • Title attributes
Script or code to re-purpose a standard UI component in a markup language
  • Use aria-labelledby to provide a name for UI controls
Standard UI component in a programming technology
  • Use the accessibility API features of a technology to expose names & the notification of changes
    • Auto labeling to associate text labels with form controls
    • Setting label property for form components
    • Specifying accessible names for image buttons
If creating your own UI component in a programming language
  • Use aria-role to expose the role of a UI component
  • Use aria state & property attributes to expose the state of a UI component
  • Use aria-labelledby to provide a name for UI controls
Please see the W3C link above for more information and techniques related to this Success Criterion.

Questions and Answers

What is the difference between legend and label elements?

Legend is a broad label used for a group of objects. Label is used for labeling specific elements.

How is CSS pseudo content treated by screen readers?

Generally speaking, web content should be included in HTML files, in a database or coming from an API. It should not be in CSS. However, sometimes CSS is used to add non-text content such as font icons or special characters. This content WILL be read by screen readers and can cause confusion with AT (assistive technology) users. If the content that the CSS is generating is purely presentational, you must make sure to hide it from assistive technology. This can be completed by using the aria-hidden property.

What are landmark roles and how can they be used?

ARIA landmark roles (also known as landmarks) are used to programmatically identify sections of a page. They help assistive technology (AT) users navigate the different sections of the page, as well as keep them oriented to where they are on the page. They can provide a way for AT users to skip specific sections of the site, enabling a faster, more intuitive user experience. Landmarks can also help sighted users who keyboard navigate the web. Landmarks are inserted into a page using role attribution on elements of the page. The role values are:
  • banner
  • complementary
  • contentinfo
  • form
  • main
  • navigation
  • search
  • application
For more information, see the W3C's resource for ARIA landmarks.

How do you find a page element’s accessible name?

In Chrome, right-click on the element you are interested it and select "Inspect". Under the "Elements" tab in Chrome Developer Tools, click the "Accessibility" tab. Scroll down to the "Computed Properties" section and view the "Name" property. In Firefox, right-click anywhere on the page and select “Inspect Element” to open Firefox Developer Tools. Click on the “Accessibility” tab. Turn On the accessibility features option. Once the accessibility features have been turned on, right-click on the element you're interested in and select "Inspect Accessibility Properties".

Do I need to add a ‘role’ attribute to html 5 tags like nav aside, main, etc.?

While the whole point of HTML5 elements is to provide more semantics to the page without providing 'role' attributes, it can still be a good idea to add ARIA roles to elements like 'buttons' to explain their purpose further.

Does my site need to be usable if the CSS and javascript doesn’t load?

Not necessarily, but there are a few things that you need to make sure of:
  • The page should be using the proper semantic elements. This means things like header, nav, aside, etc.
  • All headings and page content should flow in a logical order. H1 > H2> etc.
  • Without styling, elements should still be in the order they are intended to be read or listened to.

Do logos need to follow the accessibility guidelines?

No, logos do not need to follow website accessibility guidelines. It is always good practice to do your best to make sure they do though.

Is there a form element meant to provide instruction?

There are many form specific elements that can be used to describe what's going on. As you've already mentioned, each input requires that it has a corresponding label. If you would like to further organize and give meaning to your form, you can use the 'fieldset' element to group related inputs.   Within each fieldset, you can create a 'legend' that describes the inputs. For instance, let's say we have a form that asks a user for their personal information, and details about an order. The source code could look something like this. 
<form>
  <fieldset>
    <legend>Enter Your Information</legend>
    <label for="first">First Name</label>
    <input type="text" name="first">
    <!-- etc -->
  </fieldset>
  <fieldset>
    <legend>Order Details</legend>
    <label for="size">Size</label>
    <select name="size">
      <!-- sizes -->
    </select>
    <!-- etc. -->
  </fieldset>
</form>

How long does the accessibliity process take?

This question depends on a number of factors including size of site, desired level of conformance, your developer's understanding of accessibility techniques, etc. Accessible Web is here to help. Reach out and we can discuss your site specifically.