mdn/content

Live Regions accessibility considerations

Open

#11,863 opened on Jan 9, 2022

View on GitHub
 (1 comment) (0 reactions) (0 assignees)Markdown (22,427 forks)batch import
Content:Accessibilityaccepting PReffort: mediumhelp wanted

Repository metrics

Stars
 (8,900 stars)
PR merge metrics
 (Avg merge 7d 3h) (147 merged PRs in 30d)

Description

URL: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions

This is a suggestion to potentially add an "Accessibility considerations" section to make authors aware of the following caveats when using Live Regions:

  1. HTML semantics are (usually) not conveyed in Live Regions (authors should be mindful of this)

    Screen readers announce live regions by taking their child content and announcing it as a single text string. This means that if there are any links, buttons, or other elements with semantics that are typically exposed by screen readers, that information will not be conveyed in the live announcement. That’s not to say that, if navigated to, the elements won’t expose themselves as expected.

    https://www.scottohara.me/blog/2019/07/10/the-output-element.html

  2. The Live Region element (<output>, role="status|alert" etc, aria-live) should be included in the initial markup

    Assistive technology will initially scan the document for instances of the aria-live attribute and keep track of elements that include it. This means that, if we want to notify users of a change within an element, we need to include the attribute in the original markup. In other words, we should not use Javascript to add the aria-live attribute to elements dynamically.

    https://bitsofco.de/using-aria-live/#considerationswhenusingarialive

Contributor guide