Label dialog elements clearly

***This document provides helpful tips to improve your site's accessibility. While it doesn’t guarantee 100% compliance, it’s a great starting point to make your website more inclusive and user-friendly.***

Identification

ARIA dialog and alertdialog elements must have an accessible name (Rule ID: aria-dialog-name)

Applicable Standards

• Deque Best Practice

• ARIA 1.1 Authoring Practices

Impact

Serious level impact affecting:

• Blind users

• Low vision users

• Users with mobility impairments

Proper Implementation

• Provide descriptive accessible names for dialogs

• Use either aria-label or aria-labelledby

• Ensure referenced labels exist and contain text

• Make sure labels are discernible to screen readers

• Use meaningful and clear descriptions

Examples of Correct Usage

1. Using aria-labelledby to Reference a Visible Heading:
   The aria-labelledby attribute references a visible heading (h2), ensuring the dialog has a clear and descriptive accessible name.

2. Using aria-label for an Accessible Name:
   The aria-label attribute provides a concise and meaningful name ("Settings Dialog") for the dialog element.

3. Providing a Name for an alertdialog:
The alertdialog uses both aria-labelledby (for the title) and aria-describedby (for the message) to provide a clear and comprehensive accessible name and description.

4. Dialog with a Close Button:
   The aria-labelledby references the visible title, while the close button has an aria-label to make its purpose clear.

5. Combining aria-labelledby and aria-describedby:
The combination of aria-labelledby and aria-describedby ensures the dialog has both a title and a detailed description for screen reader users.

Common Errors to Avoid

1. Missing Accessible Name:
   

   The dialog element lacks an aria-label or aria-labelledby, leaving screen reader users unable to identify its purpose.

2. Referencing a Non-Existent Label:
   

   The aria-labelledby references an invalid id, causing the dialog to have no accessible name.

3. Generic or Non-Descriptive Name:
   The aria-label ("Dialog") is too generic and does not provide meaningful context about the dialog's purpose.

4. Using Placeholder Text as a Label:
   A hidden title is not programmatically associated with the dialog, leaving it without an accessible name.

5. Missing aria-describedby for Important Context:
   Without aria-describedby to reference the message, screen readers may not announce the detailed context of the alertdialog

Rationale

• Enables screen reader users to understand dialog purpose

• Provides context for modal interactions

• Improves navigation and comprehension

• Ensures clear communication of dialog content

• Maintains proper dialog identification

Evaluation Method

1. Inspect the Code

   • Check that:

     • Each dialog or alertdialog has a descriptive accessible name using aria-label or aria-labelledby.

     • Titles or labels referenced by aria-labelledby exist and are meaningful.

     • Additional context is provided using aria-describedby when necessary.
       
       

2. Test with Assistive Technology

   • Use a screen reader (e.g., NVDA, JAWS, or VoiceOver) to confirm:

     • The dialog's purpose is announced clearly.

     • Both the title (aria-labelledby) and description (aria-describedby) are read.

     • Interactive elements (e.g., close buttons) are accessible and labeled.

Evaluation Checklist