Skip to content

Design Pattern: Use Clear Visible Labels

User Need

I need clear labels, step-by-step instructions, and clear error messages.

What to Do

Use clear labels. Labels should:

  • use common words and easy to understand language,
  • be visible and next to the relevant control, and
  • be readable by assistive technologies, including those used by people with cognitive and learning disabilities.

How it Helps

When labels are missing or unclear, users often do not know that the feature is available or what the control is. Although many users can guess what a control is for users with cognitive and learning disabilities with impaired memory or executive function are less likely to be able to remember the design pattern or work out what it is. A clear label that uses familiar terms and is located next to the control, helps people with cognitive and learning disabilities.

Similarly, if a label is not next to a control it is confusing for some users. When a label cannot be next to a control, there should be clear visual indicators that visibly and unambiguously associate the label with the control. This will need user testing with users who have learning and cognitive and learning disabilities to ensure it is usable.

For example, a user living with early stage dementia is using an application. Some controls do not have visual labels. A caregiver shows them what the control is for and they can use the application. The next day they try to use it again, but cannot remember what the control is for. This application is not usable for them.

In another example, the label disappears when the focus is removed. The user cannot remember what the control is and does not know how to make it reappear.

Labels need to be visible, readable by assistive technology, and be nearby the labeled content.

More Details

Many people with cognitive and learning disabilities use web extensions and simple text-to-speech. These assistive technologies often do not read WAI-ARIA [[wai-aria-1.2]] or titles. Until that changes, or an extension displays them, labels should not rely on these attributes for people with cognitive and learning disabilities.

Examples

Use:

  1. Visible labels that use simple common words and are next to the control. For example:
    • first name ____________________

Avoid:

  1. Hidden labels or labels that use uncommon words that are not easy to understand. It is unclear what action is needed. For example:
    • given name ___________________

Related Information

User Story

Personas

Reference

Back to Top

This is an unpublished draft preview that might include content that is not yet approved. The published website is at w3.org/WAI/.