3 ms·
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
by 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 agoThanks 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 agoIt'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 agoThanks for taking the time to give this guidance =)