Revise advice on `region_role` page for handling a11y for non-interactive content that overflow visually

MDN URL

https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/region_role

What specific section or headline is this issue about?

Scrolling content areas with overflow text

What information was incorrect, unhelpful, or incomplete?

It's good advice to give tabindex="0" and a generic role to non-interactive elements that overflow visually, but I think role="group" is usually a better choice than role="region", as the latter creates a landmark (when used in conjunction with an accessible name) and should only be used for "a perceivable section of the page containing content that is sufficiently important for users to be able to navigate to the section."

Further, consider a JS function that takes care of this on the fly for elements like tables and pres (perhaps using a ResizeObserver to do it dynamically). Out of necessity, the aria-labels the function applies to the visually overflowing elements are going to be generic ones like "Table that overflows visually" and "Preformatted text that overflows visually", and if you use role="region" then you may well end up with several region landmarks with the same name, which the W3C link above explicitly forbids. And if the user resizes the window, then the landmarks-list may change (as some elements start or stop overflowing), which strikes me as undesirable.

Speaking of aria-labels, this section of the page should probably also advise that these visually overflowing non-interactive elements be given an accessible name.

What did you expect to see?

Assuming that I'm right and that you agree with me, then I'd recommend moving this section from the region_role page to the group_role page (with an appropriate rewrite). Perhaps it would make sense to keep a revised version of this section on the region_role page, but if so then it should stress that landmarks should only be used when they're actually warranted, and that multiple landmarks of the same type should have unique names (i.e., it should encourage the user to use group instead of region).

I also recommend that the section(s) make explicit that an accessible name should be provided to such elements.

Do you have any supporting links, references, or citations?

• https://w3c.github.io/aria-practices/#aria_lh_region
• https://w3c.github.io/aria/#group

Do you have anything more you want to share?

I might be able to find time to help with this, but it's significant enough work that it seemed prudent to report it as an issue first.

MDN metadata

• Folder: en-us/web/accessibility/aria/roles/region_role
• MDN URL: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/region_role
• GitHub URL: https://github.com/mdn/content/blob/main/files/en-us/web/accessibility/aria/roles/region_role/index.md
• Last commit: https://github.com/mdn/content/commit/7d2071f78f38f8be38888a32c599aebba348941b
• Document last modified: 2022-09-13T12:22:39.000Z