4 ms·
Consider an icon font where "E" is a little "edit" pencil- to a screen reader it just looks like an "E". Of course you could just put `aria-label="edit"` on it
by evan_ 5y ago
Consider an icon font where "E" is a little "edit" pencil- to a screen reader it just looks like an "E".
Of course you could just put `aria-label="edit"` on its container the same way you would an SVG.
The icon font is also a problem if the font doesn't load and the browser uses a fallback, now you have a weird "E" in the middle of your document. They're harder to get aligned just right in my experience as well.
Someone's probably done this already but it would be cool to have an icon font that uses ligatures- so you'd type "Edit" and it would turn into the Edit icon. Wouldn't solve the other issues but it would be neat.
- fuzzy2 5y agoI would expect modern icon fonts to exclusively use the Unicode Private Use Area. Fallback fonts would then not have glyphs for these code points. Screen readers would hopefully ignore them.
- WorldMaker 5y agoScreen readers ignoring them is a problem when it is UI the user needs to interact with. How does the use know that U+E9AF is the Edit icon they are looking for versus say maybe U+E9AE is the Delete icon?
- fuzzy2 5y agoThey don't. That's is why icon-only items (links, buttons, …) must always be explicitly annotated, using aria- attributes. You can do this with any icon technology. You wouldn't annotate the icon itself.
- WorldMaker 5y agoFont Awesome 5+ supports ligatures in that way, though my understanding is that it was intended for ease of use in design apps like InDesign more than for accessibility, but I suppose it can help accessibility too. (Though Font Awesome suggests SVGs over icon fonts for actual usage on the web.)