Hacker Newsnew | past | comments | ask | show | jobs | submitlogin

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.html

Using 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.


It has text content, merely inserted by CSS `content` instead of living in the HTML itself.




Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: