mdn / mdn/content

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

Open
#24,553 1 comment 0 reactions 0 assignees View on GitHub
Content:Accessibility help wanted
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.