1. Getting Started
  2. Installation: Preline UI

Accessibility

ARIA dialog and alertdialog nodes must have an accessible name

Screen reader users are not able to discern the purpose of elements with role="dialog" or role="alertdialog" that do not have an accessible name.

Fixing the problem

Correct markup solutions

The aria-dialog-name rule has three markup patterns that pass test criteria:

<div role="dialog" id="alb" aria-labelledby="labeldiv"></div>
<div role="alertdialog" id="combo" aria-label="Aria Name">Name</div>
<div role="dialog" id="title" title="Title">
</div>

Ensure that each element with role="dialog" or role="alertdialog" has one of the following characteristics:

  1. Non-empty aria-label attribute.
  2. aria-labelledby pointing to element with text which is discernible to screen reader users.

Incorrect markup solutions

The aria-dialog-name rule has four markup patterns that fail testing criteria:

<div role="dialog" id="empty"></div>
<div role="alertdialog" id="alempty" aria-label=""></div>
<div role="dialog" id="albmissing" aria-labelledby="nonexistent"></div>
<div role="dialog" id="albempty" aria-labelledby="emptydiv"></div>
<div id="emptydiv"></div>