Should we use aria-label or title attributes to label things?

[Jane Sandberg]

Different interfaces throughout the OPAC and Staff client label inputs and other UI elements using either the title attribute or the aria-label property. I think we should choose one and stick with it, and be able to provide that guidance to developers.

I've been more favorable to aria-label, because of title's history/reputation of not being treated consistently on different assistive technologies (see https://www.w3.org/WAI/tutorials/forms/labels/#using-the-title-attribute, and a bunch of tests that come up when you Google "title attribute vs aria-label accessibility"). However, many of those tests are old; does anybody have recent information on how consistently screen readers use the title element?

And of course, having a visible <label> is the best solution, when possible.

[Bill Erickson (berick)]

There are cases where having the tooltip generated by a title attribute is helpful, especially when describing icons, buttons, etc. that don't have visible text. As I understand it, making aria-label's do the same thing would require some additional CSS.

[Jane Sandberg (sandbergja)]

Very true, Bill! And also a note that the tooltip generated by the title attribute is only visible on mouse hover, not on keyboard focus, so it provides that benefit only to users who navigate using a mouse and happen to hover their mouse over the icon, button, etc. (unless we, again, include additional CSS like this: http://pauljadam.com/demos/title-keyboard.html)

[Jane Sandberg (sandbergja)]

Also, sending this to the lib4a11y email list to get their feedback.

[Shula Link (slink-g)]

I favor using the title attribute over aria-label specifically because of the tooltip. That said, I'm all for testing how modern screen readers handle title vs. aria-label to verify which option is better for accessibility.

[Jane Sandberg (sandbergja)]

A message from Amy Drayer on the lib4a11y email list:

I recommend using aria-label, although I'm hesitant to say so without seeing the specific instances in context. I rarely recommend using the title attribute though.

Anything can be made a "tooltip", so that's less problematic. aria-label is treated more consistently than title. I've recently borrowed from Scott Vinkle (https://svinkle.me/) his elegantly written "aria-label tooltip on hover" feature.

Summarized, the HTML would be:
<a href="https:/web.site" class="tooltip" aria-label="WebSite">
 [icon]
</a>

And the CSS (styling can be easily modified):
.tooltip {
  position: relative;
}

.tooltip::before {
  background-color: black;
  border-radius: 0.188rem;
  color: white;
  content: attr(aria-label);
  font-size: 0.8rem;
  opacity: 0;
  padding: 0.5rem;
  position: absolute;
  text-align: center;
  transition: all 0.25s ease;
}

.tooltip:hover::before {
  opacity: 1;
  transform: translateY(-110%);
}

[Jane Sandberg (sandbergja)]

Some interesting threads from the WebAIM email list:

* For labeling buttons: https://webaim.org/discussion/mail_thread?thread=8593
* For labeling form fields: https://webaim.org/discussion/mail_thread?thread=7129

[Jane Sandberg (sandbergja)]

A screed against the title attribute, with some interesting considerations for screen magnifier users: https://axesslab.com/title-texts-suck/

[Jane Sandberg (sandbergja)]

And one more note: bootstrap makes it really easy to make the tooltips generated by the title attribute keyboard-accessible: https://getbootstrap.com/docs/4.1/components/tooltips/

Assuming the element is something focusable (like a button), all you have to do is add

data-toggle="tooltip"

[Jane Sandberg (sandbergja)]

Another interesting article on providing accessible labels to buttons: https://www.sarasoueidan.com/blog/accessible-icon-buttons/

[Jane Sandberg (sandbergja)]

Specific case where aria-label provides a better accessible name than title does: https://bugs.launchpad.net/evergreen/+bug/1833726

[Eva Cerninakova (ece)]

I believe we should also think about using landmarks to identify page regions. I have looked at the issue in the Bootstrap OPAC a bit. There are only navigation Landmark present (see the attachment), but I think at least "form" and "main" landmark should be used too (or maybe any other, I am not an Aria landmark expert).

For example, in the search result page, it is possible to navigate to search results using headings, but It is not straightforward to jump directly to the results, as the header "Search results list" is the last (fourth) header  title in the third level of the hierarchy.

I have found similar situation on other pages too, e.g., record detail page or My account etc.

[Shula Link (slink-g)]

Coming back to this: after more thought (like, a couple years since I last touched on this), I think aria-label is a better idea, especially with Bootstrap simplifying tooltips.

Also, marking as confirmed, because the lack of consistency is a problem presently.