3 ms·

I like the idea of making a commitment to accessibility, simplicity, and universality. <svg> may not work for people like me who disable javascript. It introdu

by bo1024 10y ago

I like the idea of making a commitment to accessibility, simplicity, and universality. <svg> may not work for people like me who disable javascript. It introduces potential security issues (in my understanding). It's complex, meaning it's hard to guess how it will interact with tools that want to access the page (like for visually impaired or for other purposes). I don't like these things, so I'll try to make a stand and not use it. Of course, I only have that luxury because I don't make websites for a living.

madeofpalk 10y ago
svg is no more accessible or simple than an icon font. 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.
- nailer 10y ago
  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.
  - acdha 10y ago
    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.
    - biztos 10y ago
      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 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]
      - acdha 10y ago
        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.
        biztos 10y ago
        Yes but shouldn't a <span> also always have content? Am I missing something here?
        spicyj 10y ago
        There's nothing that requires it to have content, no. Absent other styles, an empty <span> would be invisible and have no effect though.
      - joshuacc 10y ago
        It has text content, merely inserted by CSS `content` instead of living in the HTML itself.
manarth 10y ago
> "<svg> may not work for people like me who disable javascript. It introduces potential security issues" SVG works for me with JS disabled (using Firefox on OS-X). Do you have any pointers on when/why SVG wouldn't work without JS?
- bo1024 10y ago
  I looked into it further and I think I'm mostly wrong about <svg>. You can embed javascript into it, but if you don't, then as far as I can tell it works fine for me. Sorry!
  - manarth 10y ago
    That makes sense…and I think that's where the potential security vulnerability comes into play - if you allow untrusted users to upload SVGs, then they could potentially be uploading javascript to your site, offering a vector for XSS. As far as I can tell, adding your own SVGs to your site doesn't open up any novel security issues.

by bo1024 10y ago

madeofpalk 10y ago

svg is no more accessible or simple than an icon font. 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.

nailer 10y ago
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.
- acdha 10y ago
  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.
  - biztos 10y ago
    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 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]
    - acdha 10y ago
      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.
      - biztos 10y ago
        Yes but shouldn't a <span> also always have content? Am I missing something here?
        spicyj 10y ago
        There's nothing that requires it to have content, no. Absent other styles, an empty <span> would be invisible and have no effect though.
    - joshuacc 10y ago
      It has text content, merely inserted by CSS `content` instead of living in the HTML itself.

manarth 10y ago

> "<svg> may not work for people like me who disable javascript. It introduces potential security issues" SVG works for me with JS disabled (using Firefox on OS-X). Do you have any pointers on when/why SVG wouldn't work without JS?

bo1024 10y ago
I looked into it further and I think I'm mostly wrong about <svg>. You can embed javascript into it, but if you don't, then as far as I can tell it works fine for me. Sorry!
- manarth 10y ago
  That makes sense…and I think that's where the potential security vulnerability comes into play - if you allow untrusted users to upload SVGs, then they could potentially be uploading javascript to your site, offering a vector for XSS. As far as I can tell, adding your own SVGs to your site doesn't open up any novel security issues.