4.1.2 Name, Role, Value Level A

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.

[View on W3C.org]

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

Is there a form element meant to provide instruction?

I know how to add labels to form inputs to 'label' what they are. I am wondering if there is something similar for describing what a field is in more details? I want to there to be little text under a text field but don't...