aria-label and aria-labelledby examples

Introduction

This web page demonstrates the use of the aria-label and aria-labelledby attributes. It is meant to be used for screen reader testing.

Table Cell

In the following table element the various td elements use the tabindex global attribute to cause them to be focusable in sequential keyboard navigation. Each of the td elements also use the aria-label to override the accessible name of the td element.

Item 1

Item 2

Item 3

Item 4

Item 5

Table Row

In the following table element the various tr elements use the tabindex global attribute to cause them to be focusable in sequential keyboard navigation. Each of the tr elements also use the aria-label to override the accessible name of the tr element.

Item 1

Item 2

Item 3

Item 4

Item 5

ASCII art

The following example demonstrates the use of the aria-label attribute to make ASCII art accessible.

  o           .'`/
    '      /  (
  O    .-'` ` `'-._      .')
      _/ (o)        '.  .' /
      )       )))     ><  <
      `\  |_\      _.'  '. \
        '-._  _ .-'       '.)
    jgs     `\__\

Joan G. Stark, “fish”. October 1997. ASCII on electrons. 28×8.

Math

Below is an example of a MathML function, using the math role, appropriate label, and MathML rendering.

$\frac{6}{4} = 1.5$

Source: Example 3: Providing a label for Math from the ARIA6: Using aria-label to provide labels for objects page.