Icon VoiceOver Tests

The goal is that you can turn on VoiceOver on this page and arrow-key to the header and have it only read the header out loud, nothing else.

With Span Only

<h2><span aria-hidden="true" class="icon">A</span> ... </h2>

A Mapped to Normal Letter

<h2><span aria-hidden="true" class="icon">&#xe000</span> ... </h2>

 Mapped to PUA

Notes: Semantically bogus, but perfect with VoiceOver.

With Pseudo Only

<h2 data-icon="A"> ... </h2>

Mapped to Normal Letter

<h2 data-icon="&#xe000;"> ... </h2>

Mapped to PUA

Notes: Semantically perfect, but bogus with VoiceOver. WTF thing with WebKit -- need to force redraw to get them to show up in Chrome 21 or Safari 6.

With Span and Pseudo

<h2><span aria-hidden="true" class="icon-spades"></span> ... </h2>

Mapped to Normal Letter

<h2><span aria-hidden="true" class="icon-clubs"></span> ... </h2>

Mapped to PUA

Notes: Slightly better semantically (no actual content), perfect with VoiceOver.