Revise advice on `region_role` page for handling a11y for non-interactive content that overflow visually
- Dominant language
- Markdown
- Stars
- 11k
- Forks
- 23.2k
- Avg merge
- 2d 9h
- Merged PRs (30d)
- 331
Description
### 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](https://w3c.github.io/aria-practices/#aria_lh_region) 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 `table`s and `pre`s (perhaps using a `ResizeObserver` to do it dynamically). Out of necessity, the `aria-label`s 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-label`s, 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](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/group_role) (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
Page report details
* 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
Contributor guide
Assessment
This issue has not been assessed yet.