Inert Polyfill -- A11ycasts #02

Опубликовано 4 августа 2016, 20:15

Keyboard focus is crucially important for both motor impaired users, and visually impaired users relying on a screen reader. One common UI mistake is to leave elements in the DOM that are offscreen but still contain focusable children. A responsive side nav is a classic example.

So in today's episode we'll look at how we can solve this common gotcha with a new proposed HTML attribute: inert! Using the inert attribute you can take an entire tree of elements out of the tab order and the accessibility tree. It's an awesome feature that's totally missing from the web platform today, but we're working to change that!

In the upcoming episodes we'll take a step back and explore the underlying concepts around focus and how it works in the platform, but if you're eager to play around with inert today you can find the polyfill up on GitHub. Enjoy!

WICG inert polyfill
github.com/wicg/inert

Watch all A11ycasts episodes: goo.gl/06qEUW

Subscribe to the Chrome Developers YouTube channel for updates on new episodes of A11ycasts: goo.gl/LLLNvf