Правила использования ARIA в HTML

[@kashey]

Вместо

<button aria-hidden="true" style="display: none;">Don't Click Me</button> 

Надо писать просто

<button hidden>Don't Click Me</button>

В том числе для любых скрытых через css элементов никаких aria-hidden писать не надо, так как элементы которые не присутствуют в render-tree так же не присутствуют в accessibility-tree.
Вообще по «разделению» role=«presentation» и aria-hidden были долгие споры в интернете, так как оба этих подхода в итоге делают одно и тоже.
Да и вообще 80% «правил» применений ARIA имеет под собой более философскую проблему, чем техническую.

[@Binjo]

Пример с кнопкой, как мне кажется, немного притянут.
Мне больше нравится пример, когда есть список ссылок на соц. сети, внутри которых лежат SVG.
То есть что-то такое:

<ul>
  <li>
    <a href="https://social.com" title="Подписывайтесь на нас в Social">
       <svg aria-hidden="true">
          <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/imgages/socials.svg#social"></use>
       </svg>
    </a>
  </li>
  ...

[@Kenya]

если элемент скрыт в данный момент, то это ж не обязательно значит, что он скрыт все время (табы, к примеру). Так что aria-hidden для всяких переключаемых состояний вполне оправдано