<button> with aria-label test

← Index page

To determine if aria-label should be applied to the <button> or icon inside the <button>.

Example 01: aria-label and aria-hidden applied to the icon

Code

<button>
  <i aria-label="Open calendar" aria-hidden="true"></i>Dummy
</button>

Dummy link between

Example 02: aria-label applied to the icon

Code

<button>
  <i aria-label="Open calendar"></i>Dummy
</button>

Dummy link between

Example 03: aria-label applied to the <button>

Code

<button aria-label="Open calendar">
  <i aria-hidden="true"></i>Dummy
</button>

Dummy link after

Results

The first method fails as the aria-label is not announced to assistive technologies. This is due to the icon also having aria-hidden applied.

← Index page