How to make Modal Accessible

WAI-ARIA

  • Roles: define what an element is or does.
    1. role=” dialog” to set a dialog for model..
    2. role=” content” set the entire content for the dialog.
  • Properties: it’s used to give them extra meaning or semantics.
    1. aria-label: to describe label for non-text content (close icon).
    2. aria-labelledby: provides the user with a recognizable name of the tab.
    3. aria-describedby: to describe the content for the dialog.
  • States: define the current conditions of elements.
    1. aria-hidden: to indicates that the element and all of its descendants are not visible or perceivable.