Bugzilla – Bug 4342
Accessibility: Add "alt" Tags to graphics
Last modified: 2009-12-11 03:08:15 UTC
I'm a blind user navigating squeezenetwork.com with a screen reader. To improove accessibility for me and other screen reader users (as well as browsers which don't display graphics), I ask to add "alt" attributes to some important graphics: 1) Frontpage - List of favorites: The "play" buttons are announced to me as "images/b_play"; the code looks like this: <code> <a href="javascript:play('[Url_To_Stream]')"><img src="/static/images/b_play.gif"/></a></code> Suggestion 1A: The 'Play' buttons would be announced as "Play". The code would look like this: <code> <a href="javascript:play('[Url_To_Stream]')"><img src="/static/images/b_play.gif" alt="Play"/></a></code> Suggestion 1B: The 'Play' buttens would be announced as 'Play [Name Of Station]' This would be great, especially for those browsing a site using a so called "Link list", which lists only the links on a web site. The code looks like this: <code> <a href="javascript:play('[Url_To_Stream]')"><img src="/static/images/b_play.gif" alt="Play [Name Of Stream]"/></a></code> [Name Of Stream] would have to be inserted dynamically; it could be done during the same function that creates the whole favorites list. 2) Frontpage - Overview of Site Sections: the 'Arrow' buttons are announced as 'images/arrow'. the code looks (for example) like this: <code> <a href="/user/account"><img class="arrow" src="/static/images/arrow.gif"></a> Suggestion 2: Add Alt Tags according to where the link goes. The code would, following the above example, look like this: <code> <a href="/user/account"><img class="arrow" src="/static/images/arrow.gif" alt="Accounts"></a> 3) All Pages: The 'Footer' ine at the bottom of the page is announced as: "Another fine service brought to you by [LINK] images/sd_logo_small" This sounds kind of weird. The Slim Devices Logo is missing an Alt Attribute as well. The code looks like this: <code><a href="http://www.slimdevices.com/"><img src="/static/images/sd_logo_small.gif"/></a></Code> Suggestion 3: Added an Alt Tag it looks like: <code><a href="http://www.slimdevices.com/"><img src="/static/images/sd_logo_small.gif" alt="SlimDevices"/></a></Code> 4) Favorites Page - List of favorites: The links for 'Play', 'Edit' and 'Delete' a favorite are missing alt attributes as well. Please follow suggestion 1a or (even better) 1b to create a similar solution for these. I think those are rather easy changes to be done and they might, to the bigest part, not influence the actual layout of the site as well. For users of software and hardware not able to display graphical content however, it is a great help. Best Regards, Ren�
I've added alt tags to all images on SN. Please let me know if there is anything else we can do to make it more accessible.
This bug has been fixed in the latest release of SqueezeNetwork! If you are still experiencing this problem, feel free to reopen the bug with your new comments and we'll have another look.
Well, I am glad to report that most of the graphical links have been correctly labelled for quite some time now. I'm not sure if the "latest version" of SN has reached the European Data Center yet. If it has, then I'd like to mention that there are still many "images/arrow" graphics around, missing an Alt-Text. As they are linked to different sites, it would be awesome to have them alt-texted as well. They can be found on the front page of SN and possibly (though I'm not sure) on other pages. Thanks for fixing those! :-)
Ren: Would it be possible to have you give us a list of what you found missing tags?
Punting to next release.
René - as we've completely redone the now mysqueezebox.com page, is this still an issue?