How to provide accessible description to the HTML button list? - html

Question

I have a lengthy list of buttons that I want to make WCAG compliant. Many of the items have endnotes (marked with an asterisk) as below. What is the proper way to provide the accessible description for these endnotes?
As far as I know, some browsers are not reading aria-describedby on not focusable elements.
<ul aria-describedby="list_description">
<li><button>Element **</button></li>
<li><button>Element</button></li>
<li><button>Element *</button></li>
<li><button>Element</button></li>
<li><button>Element *</button></li>
<li><button>Element *</button></li>
<li><button>Element **</button></li>
<li><button>Element</button></li>
<li><button>Element</button></li>
<li><button>Element *</button></li>
<li><button>Element **</button></li>
</ul>
<p id="list_description">
* - Important element <br>
** - Very important element
</p>
I was thinking about the solution described here: Accessibility and asterisks end notes, but placing <a> inside <button> doesn't seem right.
Another way is to provide duplicated descriptions for every list item.
What would you suggest to approach it?

Answer 1

placing <a> inside <button> doesn't seem right
Not only does it not feel right, it's not valid html :-) If you look at the <button> spec, under "content model", it says "there must be no interactive content descendant". An <a> is interactive so is not allowed inside a button.
Since you already have the text on the page that documents what * and ** mean, I would put IDs on those elements and then refer to them in the aria-labelledby attribute on each button.
I would also "hide" the * and ** in the button text from the screen reader since the user doesn't need to hear "star" or "star star". You do this with aria-hidden.
The final solution would be:
<ul>
<li>
<button id='b1' aria-labelledby='b1 vimportant'>Element
<span aria-hidden="true">**</span>
</button>
</li>
<li>
<button id='b2' aria-labelledby='b2'>Element</button>
</li>
<li>
<button id='b3' aria-labelledby='b3 important'>Element
<span aria-hidden="true">*</span>
</button>
</li>
<li>
<button id='b4' aria-labelledby='b4'>Element</button>
</li>
<li>
<button id='b5' aria-labelledby='b5 important'>Element
<span aria-hidden="true">*</span>
</button>
</li>
</ul>
<p id='important'><span aria-hidden="true">* - </span>Important element</p>
<p id='vimportant'><span aria-hidden="true">** - </span>Very important element</p>
Note, for consistencies sake, I put IDs on all the buttons and used aria-labelledby on all the buttons even though the buttons without a footnote don't really need them. It kind of makes for some silly code to have a button labeled by itself but it makes it easy to add other footnotes or have some simple text that is applied to the "not important" elements. If that's not likely, then you can remove the IDs and aria-labelledby on the simple buttons:
<ul>
<li>
<button id='b1' aria-labelledby='b1 vimportant'>Element
<span aria-hidden="true">**</span>
</button>
</li>
<li>
<button>Element</button>
</li>
<li>
<button id='b3' aria-labelledby='b3 important'>Element
<span aria-hidden="true">*</span>
</button>
</li>
<li>
<button>Element</button>
</li>
<li>
<button id='b5' aria-labelledby='b5 important'>Element
<span aria-hidden="true">*</span>
</button>
</li>
</ul>
<p id='important'><span aria-hidden="true">* - </span>Important element</p>
<p id='vimportant'><span aria-hidden="true">** - </span>Very important element</p>