Site bug: Use alt attribute *only* for accessibility

Hi. ============================= TL;DR ============================= Please do what the subject says; otherwise screen readers on all platforms will spew out things you don't want them to. Thanks! :) ================================================================= On (at least) start.fedoraproject.org, you have the following: <a href="https://www.redhat.com/">A Red Hat-Sponsored Community Project&nbsp;&nbsp;<img src="/static/images/sponsors/redhat-community.png" alt="Project-Id-Version: Fedora Websites Report-Msgid-Bugs-To: EMAIL@ADDRESS POT-Creation-Date: 2012-10-16 16:59+0200 PO-Revision-Date: 2012-10-17 19:17+0000 Last-Translator: Kévin Raymond <shaiton(a)fedoraproject.org&gt; Language-Team: LANGUAGE <LL(a)li.org&gt; MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Generated-By: Babel 0.9.6 Language: en Plural-Forms: nplurals=2; plural=(n != 1); "></a> This is a recentish change. If you look at this W3C spec [1], you'll note that failing the use of an aria-label or aria-labelledby attribute, the accessible name of the 'img' element should be the content of the attribute. And the Accessible Name is what a screen reader SHOULD present (speak and display in braille) to users. Furthermore, if you look in that same spec for the 'a' element [2], you'll notice that the name should come from the element subtree. This means the accessible name of the link, that all screenreaders are expected to speak and display in braille when that link gets focus or is otherwise read, is: "A Red Hat-Sponsored Community Project Project-Id-Version: Fedora Websites Report-Msgid-Bugs-To: EMAIL@ADDRESS POT-Creation-Date: 2012-10-16 16:59+0200 PO-Revision-Date: 2012-10-17 19:17+0000 Last-Translator: Kévin Raymond <shaiton(a)fedoraproject.org&gt; Language-Team: LANGUAGE <LL(a)li.org&gt; MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Generated-By: Babel 0.9.6 Language: en Plural-Forms: nplurals=2; plural=(n != 1);]" I've attached two screen shots of Accerciser illustrating that the above really is the accessible name of the link for both Gecko (using Firefox, but SeaMonkey shows it too) and WebKitGtk (using Epiphany). That name is what Orca speaks when the user Tabs to that link. (That's how I discovered this issue.) I have also attached a screenshot taken using Apple's VoiceOver screenreader (with the spoken output display enabled) in OS X using Safari. What is displayed is what VoiceOver speaks when you Tab to that link. Mind you, it says more than what is displayed; the "..." at the end merely indicates what is to be spoken exceeds the space allocated by the container. From the aforementioned spec references, you'll note that one way to work around this is through the use of ARIA attributes. HOWEVER, that strikes me as a hack, not to mention additional work, that wouldn't be necessary if you only used the alt attribute for accessibility. If the value really needs to be in the element, please put it in some other data attribute. That would solve the problem without ARIA. All of this said, my guess is some authoring tool is responsible for this. In which case, it might be worth filing a bug against that authoring tool. Regardless, if you could fix this img's alt value and, if applicable, search the rest of the Fedora Project content for this issue and fix any other instances, that would be awesome. Please let me know if you have any questions. And thanks for your time and attention to this issue! --joanie Orca maintainer, ARIA spec editor, Fedora user -- and recommender [1] https://rawgit.com/w3c/aria/master/html-aam/html-aam.html#img-element [2] https://rawgit.com/w3c/aria/master/html-aam/html-aam.html#a-element