6/26/2023 0 Comments Flaticon classes changed namesIf we combine the markup technique and pseudo element technique, we can insert the icon with no VoiceOver weirdness. One more dash of bad news, even with aria-hidden on the markup surrounding the icon, VoiceOver on OS X will announce “HTML Content” when in focus. The good news is that if we use a bit of markup, we can use aria-hidden attribute to prevent it from being spoken. Pseudo elements just aren’t in the DOM and thus that probably makes it harder for third-party apps to do. ( reference 1, reference 2) Well, perhaps “fortunately” as if I’m reading the spec correctly that’s what it is supposed to do. Unfortunately, VoiceOver on OS X does read the content of pseudo elements. ![]() Using a pseudo element is tempting because 1) they aren’t read by most screen readers 2) we don’t need dedicated markup for the icon which is a semantic ideal. So to get that icon in there (remember we’re talking font icons here, we can’t just pad the left and use a background) we’ll need to insert some content. Let’s say we have a header like “Stats” and we want to set it apart from other headers on the page and emphasize it’s meaning. This ground has been treaded before, but I think the following techniques are a small step forward. ![]() As little awkwardness for screen readers as possible.You want the icon to stand alone but still be functional or informational.Where are we at right now in terms of the best markup for using icon fonts? Let’s cover some options I think are currently the best.
0 Comments
Leave a Reply. |