How to make lightBox Accessible

WAI-ARIA

  • Roles: define what an element is or does.
    1. role=” dialog” to set a dialog for modal.
    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-describedby: to describe the content for the dialog.
    3. aria-live: to announce the active region.
  • 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.