3 ms·

Attributes can be added to make screen readers ignore certain html elements like icons for exactly this reason. <

Attributes can be added to make screen readers ignore certain html elements like icons for exactly this reason.

cloverich 10y ago
This is a good point. There is additionally ligatures used by the Google material icons. These let you put an actual textual representation of the icon and only replace it with an icon if the browser supports it: http://google.github.io/material-design-icons/ http://google.github.io/material-design-icons/
zeveb 10y ago
Or, y'know, one could just use an image instead of abusing HTML: <img src="pizza.png" alt="" />
- et-al 10y ago
 Except that would require multiple web requests unless you were using an image sprite. Font Awesome and Glyphicons solve this by using a font file or sprite. I do wish they didn't overwrite the traditional tag, but I guess we're supposed to be using for semantic HTML.
 - zeveb 10y ago
 > Except that would require multiple web requests unless you were using an image sprite. So … it can be made to work with a single request then.
 - et-al 10y ago
 Yup, and Glyphicons does that.
- deleted 10y ago
 [deleted]
vanadium 10y ago
Why FA insists on abusing the Italics tag (repurposing it as "Icon") instead of leveraging the appropriate is...specious at best.
- albedoa 10y ago
 is not the "Italics tag": In earlier versions of the HTML specification, the tag was merely a presentational element used to display text in italics, much like the tag was used to display text in bold letters. This is no longer true, as these tags now define semantics rather than typographic appearance. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/i https://developer.mozilla.org/en-US/docs/Web/HTML/Element/i
- dragonwriter 10y ago
 The tag in modern HTML does not mean "italics", though the examples given to illustrate its new semantics are all things conventionally set in italics. "The i element represents a span of text in an alternate voice or mood, or otherwise offset from the normal prose in a manner indicating a different quality of text, such as a taxonomic designation, a technical term, an idiomatic phrase from another language, transliteration, a thought, or a ship name in Western texts." [0] Its use for text-as-icon is arguably, despite obviously not being a use classically set in italics, within the defined semantics of the tag. EDIT: Though FAs use isn't actually text-as-icon, it uses empty tag as an icon. That's not consistent with the semantics of the tag. [0] https://html.spec.whatwg.org/multipage/semantics.html#the-i-element https://html.spec.whatwg.org/multipage/semantics.html#the-i-...
- Scottopherson 10y ago
 You can use whatever <element> you want with FA. It's the class names that are important.

Attributes can be added to make screen readers ignore certain html elements like icons for exactly this reason.

cloverich 10y ago

This is a good point. There is additionally ligatures used by the Google material icons. These let you put an actual textual representation of the icon and only replace it with an icon if the browser supports it: http://google.github.io/material-design-icons/ http://google.github.io/material-design-icons/

zeveb 10y ago

Or, y'know, one could just use an image instead of abusing HTML: <img src="pizza.png" alt="" />

et-al 10y ago
Except that would require multiple web requests unless you were using an image sprite. Font Awesome and Glyphicons solve this by using a font file or sprite. I do wish they didn't overwrite the traditional tag, but I guess we're supposed to be using for semantic HTML.
- zeveb 10y ago
 > Except that would require multiple web requests unless you were using an image sprite. So … it can be made to work with a single request then.
 - et-al 10y ago
 Yup, and Glyphicons does that.
deleted 10y ago
[deleted]

vanadium 10y ago

Why FA insists on abusing the Italics tag (repurposing it as "Icon") instead of leveraging the appropriate is...specious at best.

albedoa 10y ago
 is not the "Italics tag": In earlier versions of the HTML specification, the tag was merely a presentational element used to display text in italics, much like the tag was used to display text in bold letters. This is no longer true, as these tags now define semantics rather than typographic appearance. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/i https://developer.mozilla.org/en-US/docs/Web/HTML/Element/i
dragonwriter 10y ago
The tag in modern HTML does not mean "italics", though the examples given to illustrate its new semantics are all things conventionally set in italics. "The i element represents a span of text in an alternate voice or mood, or otherwise offset from the normal prose in a manner indicating a different quality of text, such as a taxonomic designation, a technical term, an idiomatic phrase from another language, transliteration, a thought, or a ship name in Western texts." [0] Its use for text-as-icon is arguably, despite obviously not being a use classically set in italics, within the defined semantics of the tag. EDIT: Though FAs use isn't actually text-as-icon, it uses empty tag as an icon. That's not consistent with the semantics of the tag. [0] https://html.spec.whatwg.org/multipage/semantics.html#the-i-element https://html.spec.whatwg.org/multipage/semantics.html#the-i-...
Scottopherson 10y ago
You can use whatever <element> you want with FA. It's the class names that are important.

Attributes can be added to make screen readers ignore certain html elements like icons for exactly this reason. <i class="fa fa-pizza" aria-hidden="true"><

Attributes can be added to make screen readers ignore certain html elements like icons for exactly this reason. <i class="fa fa-pizza" aria-hidden="true"><