List items with @aria-label

Native list items (<li>)

The first item has an @aria-label attribute. The latter two do not.

1. ;-)
2. :-(
3. See IBM's home page for more information.

ARIA list items (role="listitem")

The first item has an @aria-label attribute. The latter two do not.

Resulting Accessibles

Adding an @aria-label declares that the name property is different from the content of the list item, here, "winking smile" vs. the smiley text ";-)". Without an @aria-label, there is no declared name, and only content.

• FF: With @aria-label, exposes "winking smile" as the name, and the smiley text as the content. Without, the name and content are both the smiley text. In particular, the accessible name is a flat unstructured string version of the content. For the third list item, it is "See IBM's home page for more information."
• IE9: With, the name is "winking smile", and the text child is the smiley text. Without, the name and the text child are both the smiley text.
• Safari/OSX: With, the name is exposed in the AXDescription property of the accessible (AXGroup) for the list item, and the smiley text as the AXValue of one of its children. Without, there is no accessible name and only the smiley text as an AXValue.