title: How to provide accessible description to the HTML button list?
body: <p>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?</p>
  <p>As far as I know, some browsers are not reading <code>aria-describedby</code> on not focusable elements.</p>
  <pre><code>&lt;ul aria-describedby=&quot;list_description&quot;&gt;
    &lt;li&gt;&lt;button&gt;Element **&lt;/button&gt;&lt;/li&gt;
    &lt;li&gt;&lt;button&gt;Element&lt;/button&gt;&lt;/li&gt;
    &lt;li&gt;&lt;button&gt;Element *&lt;/button&gt;&lt;/li&gt;
    &lt;li&gt;&lt;button&gt;Element&lt;/button&gt;&lt;/li&gt;
    &lt;li&gt;&lt;button&gt;Element *&lt;/button&gt;&lt;/li&gt;
    &lt;li&gt;&lt;button&gt;Element *&lt;/button&gt;&lt;/li&gt;
    &lt;li&gt;&lt;button&gt;Element **&lt;/button&gt;&lt;/li&gt;
    &lt;li&gt;&lt;button&gt;Element&lt;/button&gt;&lt;/li&gt;
    &lt;li&gt;&lt;button&gt;Element&lt;/button&gt;&lt;/li&gt;
    &lt;li&gt;&lt;button&gt;Element *&lt;/button&gt;&lt;/li&gt;
    &lt;li&gt;&lt;button&gt;Element **&lt;/button&gt;&lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;p id=&quot;list_description&quot;&gt;
    * - Important element &lt;br&gt;
    ** - Very important element
  &lt;/p&gt;
  </code></pre>
  <p>I was thinking about the solution described here: <a href="https://stackoverflow.com/questions/49061370/accessibility-and-asterisks-end-notes">Accessibility and asterisks end notes</a>, but placing <code>&lt;a&gt;</code> inside <code>&lt;button&gt;</code> doesn't seem right.</p>
  <p>Another way is to provide duplicated descriptions for every list item.</p>
  <p>What would you suggest to approach it?</p>