E-mail List Archives

You are here: Home > Community > E-mail List Archives > View Message

From: Birkir R. Gunnarsson
Date: Sep 7, 2023 3:26AM

Next message: Nick Bromley: "Re: Providing accessible names with "</a></li> <li><strong>Previous message:</strong> <a href="mail_message?id=49397">Steve Green: "Re: Providing accessible names with <title>"</a></li> <li><strong>Next message in Thread:</strong> <a href="mail_message?id=49399">Nick Bromley: "Re: Providing accessible names with <title>"</a></li> <li><strong>Previous message in Thread:</strong> <a href="mail_message?id=49397">Steve Green: "Re: Providing accessible names with <title>"</a></li> <li><a href="mail_thread?thread=10860">View all messages in this Thread</a></li> </ul> <hr> I have found some combination of browsers/screen readers to still<br /> treat the title attribute as accessible description, even if it is the<br /> only source of accessible name. E.g.:<br /> They announce the title value after the word "button" but not before,<br /> so for an instance you think the button is not labeled<br /> when you are exploring in browse mode with arrow keys the title value<br /> does not always show up, you need to focus the button to hear it<br /> Granted I last tested this a year or two ago so it may have changed.<br /> And, on the other hand it could be argued that using title is better<br /> for some users because it naturally shows up, at least for mouse users<br /> who hover over the button, whereas aria-label is purely intended for<br /> assistive technology users.<br /> <br /> The final and most semantic argument is that the intended use of the<br /> title attribute is to provide information about the element, not to<br /> name it, but that's all pretty theoretical.<br /> <br /> Last and least, I personally just don't like it (which is a pretty<br /> weak argument).<br /> <br /> On 9/7/23, Nick Bromley < <EMAIL REMOVED> > wrote:<br /> > I'm testing a site that has a whole load of icon-based buttons that are<br /> > named only with the <title> attribute. I know this isn't considered a good<br /> > method of providing an accessible name, but it works across multiple<br /> > browsers, devices, screen readers, and voice control software (although all<br /> > reasonably modern, it has to be said). So when the W3C states in its<br /> > <https://www.w3.org/WAI/ARIA/apg/practices/names-and-descriptions/><br /> > 'Providing Accessible Names and Descriptions' authoring practice guidance<br /> > that fallback mechanisms (of which <title> is one) "typically yield low<br /> > quality accessible names that are not effective", is there anything I'm<br /> > missing? Perhaps some more niche assistive technologies that I haven't<br /> > verified it with? Or does it date back to a time when support was more<br /> > patchy?<br /> ><br /> > I'm minded to log a best practice recommendation to use aria-label instead,<br /> > but could do with a bit more specific justification, if any exists.<br /> ><br /> ><br /> ><br /> > - - -<br /> ><br /> > Nick Bromley<br /> ><br /> > Director & Accessibility Consultant<br /> ><br /> > Red Kite Digital Accessibility Ltd<br /> ><br /> > > > > ><br /> <br /> <br /> -- <br /> Work hard. Have fun. Make history. <hr> <ul> <li><strong>Next message:</strong> <a href="mail_message?id=49399">Nick Bromley: "Re: Providing accessible names with <title>"</a></li> <li><strong>Previous message:</strong> <a href="mail_message?id=49397">Steve Green: "Re: Providing accessible names with <title>"</a></li> <li><strong>Next message in Thread:</strong> <a href="mail_message?id=49399">Nick Bromley: "Re: Providing accessible names with <title>"</a></li> <li><strong>Previous message in Thread:</strong> <a href="mail_message?id=49397">Steve Green: "Re: Providing accessible names with <title>"</a></li> <li><a href="mail_thread?thread=10860&id=49398#49398">View all messages in this Thread</a></li> </ul> </div> <script> document.title = "WebAIM List: Re: Providing accessible names with <title>"; document.querySelector("#maincontent > h1").textContent="WebAIM List: Re: Providing accessible names with <title>"; </script> </article>  <aside id="articlemeta"> </aside> </main> <footer> <div id="footerresources"> <div class="footerblock"> <h2 id="copyright">©2025 WebAIM</h2> <p id="contact"> Utah State University<br> 6807 Old Main Hill<br> Logan, UT 84322-6807<br> <a class="phone" href="tel:4357977024">435.797.7024</a></p> <div id="checkpage"> <h2>Check Your Accessibility</h2> <form action="https://wave.webaim.org/report" novalidate> <label for="waveurl">Web site address:</label> <input type="url" id="waveurl" name="url" title="Web site address"> <input type="submit" value="WAVE"> </form> </div> </div> <div class="footerblock"> <h2 id="blog">From the Blog</h2> <ul><li><a href="/blog/up-and-coming-aria/">Up and Coming ARIA </a></li><li><a href="/blog/salary-survey-results/">Global Digital Accessibility Salary Survey Results</a></li><li><a href="/blog/join-the-discussion/">Join the Discussion—From Your Inbox</a></li><li><a href="/blog/severity-ratings/">Using Severity Ratings to Prioritize Web Accessibility Remediation</a></li></ul> </div> <div class="footerblock"> <h2 id="popular">Popular Resources</h2> <ul> <li><a href="/training/virtual">WebAIM Training</a></li> <li><a href="/standards/wcag/checklist">WCAG 2 Checklist</a></li> <li><a href="/newsletter">WebAIM Monthly Newsletter</a></li> <li><a href="/resources/contrastchecker">Color Contrast Checker</a></li> <li><a href="/resources/designers/">Web Accessibility for Designers</a></li> <li><a href="http://wave.webaim.org/">WAVE Web Accessibility Evaluation Tool</a></li> </ul> </div> <div id="footerlinks"> <ul> <li><a id="footercontact" href="/contact">Contact</a></li> <li><a id="footerabout" href="/about">About</a></li> <li><a id="footerrss" href="/community/rss">RSS Feeds</a></li> <li><a id="footertwit" href="http://twitter.com/webaim">Twitter</a></li> <li><a id="footercopyright" href="/copyright">Copyright & Terms of Use</a></li> </ul> </div> <div class="clear"></div> </div> </footer> </body> </html>