As long as we use the following pattern for markup, we should be good accessibility-wise. The aria-hidden attribute hides the icon glyph from screen readers.
<style> .icon-star:before { content: "★ "; } </style> <span><span class="icon-star" aria-hidden="true"></span>Favorite</span>
<a class="mw-ui-button mw-ui-quiet"No aria-hidden, but Brion said
href="/w/index.php?title=Topic:S08b4fijnlkf1n5s&action=edit-title&topic_revId=s08b4fil7q02dtvk"
title="Edit title"
...
>
<span class="wikiglyph wikiglyph-pencil"></span>
Edit title
</a>
.wikiglyph {
display: inline-block;
font-family: 'WikiFont-Glyphs';
...
}
.wikiglyph-pencil:before {
content: "\e800";
}
The characters themselves are in the Unicode private use range and shouldn't be read out;