Accessibility

[dweldon]

This is a really useful library, but I'm concerned that when I use a screen reader I don't hear any of the messages. At a minimum, would it be possible to render messages to a live region?

[shakee93]

can i see an example where this is implemented ?

[dweldon]

There's a complete example in the linked MDN article, along with a fiddle. The key section of the example is this:

<div role="region" id="planetInfo" aria-live="polite">
  <h2 id="planetTitle">No planet selected</h2>
  <p id="planetDescription">Select a planet to view its description</p>
</div>

The trick is that the region has to exist on the page before it get's altered. So we'd need a live region that always exists to write to. I'd recommend the visuallyhidden class from here:

.visuallyhidden { 
  position: absolute; 
  overflow: hidden; 
  clip: rect(0 0 0 0); 
  height: 1px; width: 1px; 
  margin: -1px; padding: 0; border: 0; 
}

Finally, you can hear the results by installing a screen reader. If you are using chrome, you can try ChromeVox. For a live region you shouldn't need to do anything other than enable the extension.

[dweldon]

A detailed explanation can also be found here: https://inclusive-components.design/notifications/