# Using aria-label to provide an invisible label where a visible label cannot be used

ID: ARIA14

Technology: aria

Type: Technique

## When to Use

Technologies that support Accessible Rich Internet Applications (WAI-ARIA).

## Description

For sighted users, the context and visual appearance of an element can provide sufficient cues to determine the purpose. An example is the 'X' often used in the top right corner of pop-up `div`s (light boxes) to indicate the control for closing the div.

In some situations, elements can be given the attribute `aria-label` to provide an accessible name for situations when there is no visible label due to a chosen design approach or layout but the context and visual appearance of the control make its purpose clear.

In other situations, elements can be given the attribute `aria-label` to provide an accessible name when the native HTML labeling element is not supported by the control - for example, when a `div` set to `contentEditable` is used instead of native form elements such as `input type="text"` or `textarea` in order to provide a richer text editing experience.

## Examples

### A close button in a pop-up box

On a page, a link displays a pop-up box (a `div`) with additional information. The 'close' element is implemented as a `button` containing merely the letter 'X'. The property `aria-label="close"` is used to provide an accessible name to the `button`.

    <div id="box">
       This is a pop-up box.
       <button aria-label="Close">X</button>
    </div>

Working example: Close button example.

### A phone number with multiple fields

    <div role="group" aria-labelledby="groupLabel">
      <span id="groupLabel">Work Phone</span>
      +<input autocomplete="tel-country-code" type="number" aria-label="country code">
      <input autocomplete="tel-area-code" type="number" aria-label="area code">
      <input autocomplete="tel-local" type="number" aria-label="subscriber number">
    </div>

## Tests

### Procedure

For elements that use `aria-label`:

1. Check that the value of the `aria-label` attribute properly describes the purpose of an element where user input is required

### Expected Results

- #1 is true.

## Related Techniques

- ARIA6
- ARIA16

## Resources

- WAI-ARIA Authoring Practices Guide
- HTML Accessibility API Mappings