E-mail List Archives

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

Re: Providing accessible names with <title>

From: Jeremy Echols
Date: Sep 7, 2023 7:20AM

Next message: Yeti: "Re: Providing accessible names with "</a></li> <li><strong>Previous message:</strong> <a href="mail_message?id=49400">Nick Bromley: "Re: Providing accessible names with <title>"</a></li> <li><strong>Next message in Thread:</strong> <a href="mail_message?id=49402">Yeti: "Re: Providing accessible names with <title>"</a></li> <li><strong>Previous message in Thread:</strong> <a href="mail_message?id=49400">Nick Bromley: "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> One thing I've run across recently with NVDA and Firefox is when people use title too much, they start putting it on things that already have text just because they get in the habit of adding a title to every last thing. With Firefox and NVDA, a link with a title will double up the announcement. For instance, this markup results in "Next - Setup and Installation link Setup and Installation":<br /> <br /> <a href="somewhere" title="Setup and Installation">Next - Setup and Installation</a><br /> <br /> This is still probably not a WCAG conformance issue, but it can be confusing, and is just one more reason to try to push people away from using it. Note that I hear similar issues when there's both a title and another accessible name, such as "aria-label".<br /> <br /> I'm not sure why NVDA and/or Firefox are using both values instead of ignoring the title here, but it's definitely sub-par. And once devs get in the habit of using it, they seem to just love to put it on everything. The example above is from a documentation project I'm working on, and it's got titles in some of the weirdest places.<br /> <br /> -----Original Message-----<br /> From: WebAIM-Forum < <EMAIL REMOVED> > On Behalf Of Nick Bromley<br /> Sent: Thursday, September 7, 2023 02:47<br /> To: 'WebAIM Discussion List' < <EMAIL REMOVED> ><br /> Subject: Re: [WebAIM] Providing accessible names with <title><br /> <br /> Can you remember what combination generated that result and did it differ if another naming mechanism was used?<br /> <br /> NVDA, for example, always states "button" followed by the name when browsing with arrow keys, regardless of how the name is provided (nested text label, aria-label, or title). By contrast, JAWS always announces the name of the button first, again regardless of how that name is provided.<br /> <br /> I agree that semantically <title> isn't great but clients often don't care about that argument (understandably) if ultimately it works.<br /> <br /> -----Original Message-----<br /> From: WebAIM-Forum < <EMAIL REMOVED> > On Behalf Of Birkir R. Gunnarsson<br /> Sent: Thursday, September 7, 2023 10:27 AM<br /> To: WebAIM Discussion List < <EMAIL REMOVED> ><br /> Subject: Re: [WebAIM] Providing accessible names with <title><br /> <br /> I have found some combination of browsers/screen readers to still treat the title attribute as accessible description, even if it is the only source of accessible name. E.g.:<br /> They announce the title value after the word "button" but not before, so for an instance you think the button is not labeled when you are exploring in browse mode with arrow keys the title value does not always show up, you need to focus the button to hear it 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 for some users because it naturally shows up, at least for mouse users who hover over the button, whereas aria-label is purely intended for assistive technology users.<br /> <br /> The final and most semantic argument is that the intended use of the title attribute is to provide information about the element, not to name it, but that's all pretty theoretical.<br /> <br /> Last and least, I personally just don't like it (which is a pretty 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 <br /> > are named only with the <title> attribute. I know this isn't <br /> > considered a good method of providing an accessible name, but it works <br /> > across multiple browsers, devices, screen readers, and voice control <br /> > software (although all reasonably modern, it has to be said). So when <br /> > 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 <br /> > guidance that fallback mechanisms (of which <title> is one) "typically <br /> > yield low quality accessible names that are not effective", is there <br /> > anything I'm missing? Perhaps some more niche assistive technologies <br /> > that I haven't verified it with? Or does it date back to a time when <br /> > support was more patchy?<br /> ><br /> > I'm minded to log a best practice recommendation to use aria-label <br /> > instead, 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 /> > > > archives at <a href="http://webaim.org/discussion/archives">http://webaim.org/discussion/archives</a><br /> > ><br /> <br /> <br /> --<br /> Work hard. Have fun. Make history. <hr> <ul> <li><strong>Next message:</strong> <a href="mail_message?id=49402">Yeti: "Re: Providing accessible names with <title>"</a></li> <li><strong>Previous message:</strong> <a href="mail_message?id=49400">Nick Bromley: "Re: Providing accessible names with <title>"</a></li> <li><strong>Next message in Thread:</strong> <a href="mail_message?id=49402">Yeti: "Re: Providing accessible names with <title>"</a></li> <li><strong>Previous message in Thread:</strong> <a href="mail_message?id=49400">Nick Bromley: "Re: Providing accessible names with <title>"</a></li> <li><a href="mail_thread?thread=10860&id=49401#49401">View all messages in this Thread</a></li> </ul> </div> </article>  <aside id="articlemeta"> </aside> </main> <footer> <div id="footerresources"> <div class="footerblock"> <h2 id="copyright">©2024 WebAIM</h2> <p id="contact">Institute for Disability Research, Policy, and Practice<br> 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/2024-campaign-site-accessibility/">Web Accessibility in the 2024 Presidential Campaigns</a></li><li><a href="/blog/screen-reader-user-survey-10-results/">Screen Reader User Survey #10 Results</a></li><li><a href="/blog/webaim-and-browserstack/">WebAIM and BrowserStack: Allies for Digital Accessibility Excellence</a></li><li><a href="/blog/an-evolution-in-microsoft-office-accessibility/">An Evolution in Microsoft Office Accessibility</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>