How can we improve the Microsoft Edge developer experience?

Support the `inert` attribute

Trapping focus in modal dialogs or preventing focus in background layers in modern web applications is extremely difficult and error-prone. Developers either have to walk the DOM and disable every focusable control with tabindex="-1" and `aria-hidden="true"` on a parent element, or do some tricky JavaScript to maintain focus inside of an element. Many developers get this wrong or they don't do it at all, creating horribly inaccessible experiences for keyboard and screen reader users.

The inert attribute currently being explored in the WICG solves this problem by providing a mechanism to disable entire subtrees in HTML. By setting `inert` on an HTML element, it renders every interactive control non-focusable and removes it from the accessibility tree.

https://github.com/WICG/inert

Inert means no more walking of the DOM to set and restore tabindex, and forgetting to set `aria-hidden="true"` on a parent element (it happens all the time). The inverse also commonly occurs–developers set `aria-hidden="true"` on a parent element, and forget to modify tabindex on links and buttons, causing "ghost controls" with no accessibility information. Like I said, it's extremely error-prone. We need `inert` to make these scenarios much easier. It's a breeze in comparison! Set it on a sibling element to the one that remains visible, and you can handle focusability and AT access in one go.

241 votes
Vote
Sign in
Check!
(thinking…)
Reset
or sign in with
  • facebook
  • google
    Password icon
    Signed in as (Sign out)
    You have left! (?) (thinking…)
    Marcy Sutton shared this idea  ·   ·  Flag idea as inappropriate…  ·  Admin →

    0 comments

    Sign in
    Check!
    (thinking…)
    Reset
    or sign in with
    • facebook
    • google
      Password icon
      Signed in as (Sign out)
      Submitting...

      Feedback and Knowledge Base