Skip to content

Accessibility

Cheat Sheet

List of aria

html
<!-- aria-hidden -->

<!-- The aria-hidden state indicates whether the element is exposed to an accessibility API. ([MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-hidden)) -->
<!-- In other terms, It removes the element from the accessibility tree. -->

<!-- Ex with overlays -->
<div aria-hidden="true" class="overlay modal-background">
  <div role="dialog">
    <button>Close</button>
  </div>
</div>

ARIA roles

ARIA: button role

The button role is for clickable elements that trigger a response when activated by the user. Adding role="button" tells the screen reader the element is a button, but provides no button functionality. Use <button> or <input> with type="button" instead.

MDN

  • The Ultimate Guide to ARIA: A Comprehensive Look at Web Accessibility - Medium Julio Leiva