sl-design-system
Improve accessibility of inline message
According to Michael's question from Sprint review (05.03.2024) we need to improve accessibility of the inline message component.
First we need to make some research again.
The main problem is when using 'role' in the component all the content is read by default by a Screen Reader, even a close button, which ideally should be written only when it gets focus - when user navigates to it, not by default.
More details: https://sanoma.slack.com/archives/C03SA9HUUA3/p1709649841422769
### Tasks
Maybe some helpful information can be found here: https://carbondesignsystem.com/components/notification/accessibility#how-it-works
- Try with moving role to the 'content' element - there might be a problem with Screen Readers and shadow DOM
- Maybe we will need a kind of Announcer https://dev.to/steady5063/aria-live-in-javascript-frameworks-4f9p that people can use in their apps
We need to finish the discussion next time.
I've review this component and currently I see following issues:
- the message is not announced to the screen reader, because live region (role="alert", role="status", aria-live attribute ) is injected into the page when the message appears. It should be added to the container before the message appears.
- Live region doesn’t handle rich text. so the "button" element won't be announced. only the Label of the button.
- I didn't find option to not announce a part of the element injected to the live region. For sure some trick can be use but I'm not sure if we should heading the tricky way.
- The next important question: does notification message should have the "Close" button (or any other action)?
According to the ARIA specification:
Authors SHOULD ensure an element with role status does not receive focus as a result of change in status. […] Neither authors nor user agents are required to set or manage focus to an alert in order for it to be processed. Since alerts are not required to receive focus, authors SHOULD NOT require users to close an alert. If an author desires focus to move to a message when it is conveyed, the author SHOULD use alertdialog instead of alert.
If we remove the "Close" button, and it disappears after for example ~500ms, will it be still accessible for users with cognitive limitation who need more time to access the information?
If we move focus, how we can ensure that user go back to the previous action after closing the message?
I feel like it requires more discussion to find the best usable solution for all users (mouse, keyboard, assistive technologies etc).
I share here 2 great articles with complex explanation what is live region how and when to use it:
- Accessible notifications with ARIA Live Regions (Part 1)
- Accessible notifications with ARIA Live Regions (Part 2)
