SVG is considered more accessible because it's an image, not text. 'f' doesn't mean aeroplane (even though it looks like an aeroplane in a 2010-style graphical font) but img alt="plane" does.
That's an argument for not using an icon font which remaps normal characters but the most common ones use private-use characters which are ignored by screen readers. In which case are these not equally accessible?
<i class="fa fa-globe" aria-label="Picture of a globe"></i>
<img svg="globe.svg" alt="Picture of a globe">
Accessibility is more about process and testing than any particular technology since they all can be done poorly.Apologies if this is a massively ignorant question, but isn't the <i> tag an inline text span? In which case, isn't it wrong to have it be empty?
The i element represents a span of text offset from its
surrounding content without conveying any extra emphasis or
importance, and for which the conventional typographic
presentation is italic text; for example, a taxonomic
designation, a technical term, an idiomatic phrase from
another language, a thought, or a ship name.
http://www.w3.org/TR/html-markup/i.htmlUsing it without text strikes me as a hack, and one that is hostile to usability, among other problems. I understand why it would work, but it's abusing the technology as far as I can tell.
Since I've seen this in at least two comments now, can somebody explain to me why it's not considered an anti-pattern in 2016?
[edit: formatting]
I would agree with that – it's a convention which the FontAwesome project uses for reasons I haven't looked into (I'm assuming not wanting to type 6 more characters).
I use <span> on all of my projects.
Yes but shouldn't a <span> also always have content? Am I missing something here?
There's nothing that requires it to have content, no. Absent other styles, an empty <span> would be invisible and have no effect though.
You have the same resources and APIs (can you call HTML attributes an 'API'?) available to make the usage of icon fonts friendly for screen readers.