The goal here is to maximize both User’s Experience (UX) for internationalization of the interfaces (Ui). Concretely it means using very short text labels on CTA while adding contextualized informative text to explain to a new user either (1) what will happens AFTER clicking or (2) instructions on how to use a particular control or (3) definition of technical abbreviations or acronyms.

HTML attribute	title	aria-label
Protocol	HTML 2.0 (1995)	HTML5 (2014)
HTML code	title=""	aria-label=""
UX for mouse device users
Event on Mouse Hover	Browser native tooltip	None
Supported by Screen Readers (SR)	Yes	Yess
Supported content	Any plain text string	A predefine list of ARIA role types

Since HTML 1.0, published by the W3C back in 1993, the HTML image tag has the « alt » attribute that stands for « Alternative Text ». The purpose of the Alternative Text is to provide a textual description of the image for primarily as an accessibility feature for visually impaired person in the case of visual contents.

The title is first published in 1995 as a valid HTML 2.0 attribute. The main use of this attribute was initially to label <iframe> elements for assistive technology. But it evolved as a very important tool for organic Search Engine Optimization (SEO). These contents use to be crawl by Search Engine bots in the early years of the World (and very) Wide Web.

If an element does NOT have a title attribute, then it inherits it from its parent node, which in turn may inherit it from its parent, and so on. If this attribute is set to the empty string « title="" », it means its ancestors’ titles are irrelevant and should NOT be displayed as a tooltip for this element.

— mdn (Mozilla Developer Network)

Since HTML5 (2014) and the emerging of mobile touchscreen devices, because these devices don’t support the « hover » event, it as been decided as a good practice by the « Web Accessible Rich Internet Applications (ARIA) of the Web Accessibility Initiative (WAI) », commonly named « WAI-ARIA », to replace the usage of title attributes by the new aria-label attribute.

aria-label can be used in cases where text that could label the element is not visible. If there is visible text that labels an element, use aria-labelledby instead.

The purpose of aria-labelledby is the same as aria-label. Both provide an accessible name for an element. If there is no visible name for the element you can reference, use aria-label to provide the user with a recognizable accessible name. If label text is available in the DOM and it's possible to reference it for an acceptable user experience, prefer to use aria-labelledby. Don't use both on the same element because aria-labelledby will take precedence over aria-label if both are applied.

— mdn (Mozilla Developer Network)

Because of the controlled nature of a web application (SaaS), since it is designed for logged in operators and NOT a public website, we use ✅ « title » attribute instead of the modern ❌ « aria-label » for designing « Alt text tooltips » feature.

This vintage global attribute offers a better ROI since title comes with the benefit of a native tooltip for our mouse device users while enhancing accessibility for the one who needs it.

/* arrow pointing to the element */
[aria-label]::before {
  content: '';
  opacity: 0;
  pointer-events: none;
  position: absolute;

  /* customize this yourself */
  bottom: -0.2rem;
  left: 2.5rem;
  border-right: 0.5rem solid transparent;
  border-bottom: 0.5rem solid rgb(48, 64, 81);
  border-left: 0.5rem solid transparent;
  transition: opacity 0.2s;
}
/* tooltip text container */
[aria-label]::after {
  content: attr(aria-label);
  z-index: 1;
  opacity: 0;
  pointer-events: none;
  position: absolute;

  /* customize this yourself */
  bottom: 0;
  left: 0;
  display: flex;
  padding: 0.25rem 0.375rem;
  border-radius: 0.25rem;
  transition: opacity 0.2s;
  transform: translateY(100%);
  background-color: rgb(48, 64, 81);
  color: white;
}
/* only show the tooltip on hover */
[aria-label]:hover::after,
[aria-label]:hover::before {
  opacity: 1;
  pointer-events: auto;
}

Source : Accessibility! aria-label vs. title attribute | Alchemauss