WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Modal dialogs and page titles

for

From: Dean.Vasile@outlook.com
Date: Apr 24, 2024 5:37AM

Expected Behavior:
The ideal behavior is for screen readers to announce the dialog title when focus enters the modal. This provides context and helps the user understand the purpose of the newly opened content.
Reasons for Inconsistency:
* Browser/Screen Reader Differences: How screen readers and browsers interact with dialogs can vary, leading to inconsistent reading of titles.
* Implementation Issues: Even with proper ARIA roles (role="dialog") and labeling (aria-labelledby or aria-label), errors in the code can prevent screen readers from announcing the title correctly.
Developer Argument:
While technically correct that a modal is part of the original page, focusing on the page title when a modal is open is unhelpful for screen reader users. It disrupts the user's flow and doesn't convey the change in context.
Recommendations:
* Prioritize Dialog Title: Ensure that the dialog title (aria-labelledby or aria-label) is announced when focus enters the modal.
* Test Thoroughly: Use a combination of screen readers and browsers to verify that the titles are read as expected.
* Educate Developers: Explain to your developer colleagues why reading the dialog title is crucial for screen reader users. Reference W3C accessibility guidelines for support.
Resources:
* ARIA Dialog Role: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/dialog_role
Let me know if you'd like more clarification!
* https://github.com/jessarcher/jessarcher.com

Dean Vasile


617-799-1162

> On Apr 24, 2024, at 4:58 AM, Geethavani.Shamanna < <EMAIL REMOVED> > wrote:
>
> Hi all,
>
> I noticed some inconsistent screen reader behaviour when reading the titles of modal dialogs. On accessing the Add Delivery Address dialog on
> https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/examples/dialog/
> On pressing insert-t, Jaws says 'add delivery address Dialog'. NVDA however reads the page title 'Modal Dialog Example|APG|WAI|W3C' whilst within the dialog.
>
> What is the standard behaviour expected here? Since modals are part of the original page, the developers I am working with argue that the page title should be read out, even when the focus is within the dialog. However, as a screen reader user, I would find it useful if the dialog title is read out whilst the focus is within the dialog.
>
> Insights appreciated.
>
> Many thanks.
> Geetha