Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Improving accessibility on Alert and Modals

See original GitHub issue

I was wondering if we should change role="alert" to role="alertdialog" on dismissible alerts since W3C alert role specs read:

If an alert requires focus to close the alert, then content authors SHOULD use alertdialog instead. https://www.w3.org/TR/wai-aria/roles#alert

And according to MDN on role=“alert”:

If an alert also provides interactive controls (such as form controls that allow the user to rectify a problem, or an “OK” button that discards the alert) the alertdialog role should be used instead. https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_alert_role

This would mean wrapping the text with a div with an id and adding an aria-describedby which I don’t quite like but on modals we have plenty of hooks to make it more accessible.

This was also mention here #22429

What do you think? Should I introduce this idea as a PR?

Issue Analytics

State:
Created 6 years ago
Reactions:1
Comments:6 (3 by maintainers)

Top GitHub Comments

1reaction

andresgalantecommented, Aug 28, 2017

Yeap. sorry 😦 autofill kills me sometimes, sorry Pablo.

1reaction

andresgalantecommented, Aug 25, 2017

@pablocrivella Let’s rethink this. After re reading: https://www.w3.org/TR/wai-aria/roles#alertdialog

I don’t think that:

Content authors SHOULD make alert dialogs modal by ensuring that, while the alertdialog is shown, keyboard and mouse interactions only operate within the dialog.

Is not accurate to an alert since the rest of the page should still be clickable, an alert is definitely not a modal.

I’ve also read strong opinion against using alertdialog: https://www.marcozehe.de/2015/02/05/advanced-aria-tip-2-accessible-modal-dialogs/

Should we just close this issue for now?

Top Results From Across the Web

Modals | Accessibility Guidelines

The following best practices discuss an instance where, when the modal is open, a screen reader cannot interact with the modal overlay and...

How can we make modals usable and accessible? | by H Locke

The modal needs a header, which makes it clear what the modal is for and/or what the user can now do. Whether this...

Technique: Accessible modal dialogs

Modal dialogs can enhance usability by focusing attention on a specific message that requires a user action to continue. An accessible modal dialog...

Building an Accessible Widget: WAI-ARIA Modal Alert Dialogs

In part 2 of his a11y support series, Paul Adam details how to build an accessible widget with ARIA Modal Alert Dialogs.

Accessible Modals, Part 1 - Its Issues and the Solutions

Modals are a pretty common pattern in UI/UX design and most people will understand how to interact with a modal due to its...