Using aria-label on heading tags

Question

Is it wrong to use aria-label on heading tags? h1, h2, h3 etc.

I'm working on a frontend, most titles are reasonable in length roughly 80 characters in length, the longest title is 480 characters. So some sort of text-overflow ellipsis or truncation is needed. I'm vouching for programatic truncation as it gives us control over where to truncate (css will chop a word truncation can chop to closest word) and while we aim for max 3 lines the designers are fine with it overflowing to 4.

A question was raised around this is a worse experience for screen readers. Which I didn't think about because it'd be the same experience as a non screen reader experience. But in this case is it better to enrich a heading tag with an additional aria-label with a complete title.

Answer 1

Yes that is a possible solution, see: https://www.w3.org/TR/wai-aria/#aria-label:

Used in Roles: All elements of the base markup

Also make it more accessible for others by providing the full title in a clear way. You can create a tooltip for it that shows the contents of the aria-label attribute, however you have to be sure users know they have to hover or click. Browsers already have this functionality natively so you could still consider using the proper css properties.

Even better is to drop the truncation and use line breaks. It requires a flexible layout that allows the element to grow with each line added. The best option, of course, is to keep a copywriter in charge of the content and hold design responsible for how it looks.