3 ms·

Just today, I was making a product landing page and wanted it to be accessible. Since we have Instagram, YouTube, and GitHub, I wanted to get the icons from th

Just today, I was making a product landing page and wanted it to be accessible. Since we have Instagram, YouTube, and GitHub, I wanted to get the icons from those sources. I looked at how to ensure that with SVG and found this SO [1]. While YouTube does not supply SVGs, the SVGs from Instagram [2] and GitHub [3] did not include any a11y metadata. I was really surprised by this, given the massive user bases thereof, both consumer and developer. Maybe that's because it's not universal what should be there? So I had to insert it myself. I was scared to make a repo sharing these changes, but I will drop the GitHub one here: In `<svg>` element I added: role="img" aria-label="[title + description]" Nested inside I put: <title>GitHub Octocat Logo</title> <desc>An Octocat shadow in front of a white circle</desc> [1] https://stackoverflow.com/questions/4697100/accessibility-recommended-alt-text-convention-for-svg-and-mathml https://stackoverflow.com/questions/4697100/accessibility-re... [2] https://about.meta.com/brand/resources/instagram/instagram-brand/ https://about.meta.com/brand/resources/instagram/instagram-b... [3] https://github.com/logos https://github.com/logos

madeofpalk 3y ago
You don't really need to do that. The point of putting alt text on images is to users who use screen readers can still understand your website. Tabbing through in a screen reader hearing detailed descriptions of each social logo is probably a poor user experience. Probably just "Github logo" or even "Github" would do just as well. If the image/logo is purely presentational (that is - if you remove the image do you remove information from the site?), just blank it out with an empty string.
- neomantra 3y ago
  Thanks for that feedback, I appreciate it. The road to bad UX is paved with good intentions. Is the issue specifically the aria-label being too verbose? Like it's OK for the other metadata or even that's overkill?
  - madeofpalk 3y ago
    It's probably overkill. The other way of looking at it is that if you put all that content in the visible text, does the page still read correctly? If the image is only used to convey the word "Github", then that's probably all your alt tag needs to be. The best way to figure it out is to use the screen reader in your operating system. It's hard to judge usability without actually using it. Aria-label, and the rest of the HTML (like just the text content, or label attributes, etc) all build up the accessibility tree which is what screen readers read out. All browser dev tools should have a way to view this. If putting a <title> inside an SVG doesn't result in that showing up in the accessibility tree, it's next to useless.
    - neomantra 3y ago
      Thanks for taking the time to give this guidance =)

madeofpalk 3y ago

You don't really need to do that. The point of putting alt text on images is to users who use screen readers can still understand your website. Tabbing through in a screen reader hearing detailed descriptions of each social logo is probably a poor user experience. Probably just "Github logo" or even "Github" would do just as well. If the image/logo is purely presentational (that is - if you remove the image do you remove information from the site?), just blank it out with an empty string.

neomantra 3y ago
Thanks for that feedback, I appreciate it. The road to bad UX is paved with good intentions. Is the issue specifically the aria-label being too verbose? Like it's OK for the other metadata or even that's overkill?
- madeofpalk 3y ago
  It's probably overkill. The other way of looking at it is that if you put all that content in the visible text, does the page still read correctly? If the image is only used to convey the word "Github", then that's probably all your alt tag needs to be. The best way to figure it out is to use the screen reader in your operating system. It's hard to judge usability without actually using it. Aria-label, and the rest of the HTML (like just the text content, or label attributes, etc) all build up the accessibility tree which is what screen readers read out. All browser dev tools should have a way to view this. If putting a <title> inside an SVG doesn't result in that showing up in the accessibility tree, it's next to useless.
  - neomantra 3y ago
    Thanks for taking the time to give this guidance =)