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

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.

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)

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

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.

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%);
}

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

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

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"

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

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

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.

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.