a11y is a common shortening of the term accessibility because there are 11 letters in between the "A" and the "Y"
The inert attribute
Webpage elements offer various interactive features, including the ability to receive focus, respond to clicks, support editing, and allow selection. These interactions are also important for assistive technologies like screen readers. But what if you needed to deactivate all these interactions for a specific section of your webpage? This is where the "inert" attribute comes into play.
Check out the below video to understand why it's necessary to use inert attribute.
The inert attribute serves two main purposes:
1. When an element is a part of the DOM tree, but offscreen or hidden.
Example:
2. When an element is a part of the DOM tree, but should be non-interactive.
Example:
<button inert>You can't click me!</button>When the inert attribute is added to a button element in HTML, it essentially makes that button non-interactive. This means the button won't respond to user interactions like clicks, keyboard presses, or focus events.
Try out the Codesandbox.
Here's what happens when you add the inert attribute to a button:
Clicks: Clicking the button won't trigger any associated actions or events. For example, if the button is supposed to submit a form or open a modal when clicked, these actions won't occur.
Keyboard Focus: The button won't be able to receive keyboard focus, so users won't be able to navigate to it using the keyboard's Tab key.
Accessibility Tools: As the button is not interactive, Screen readers and other assistive technologies skip or ignore those elements. This behavior is intended to prevent users with disabilities from focusing on or attempting to interact with elements that are not meant to be interacted with. In other words, the button is hidden from assistive technology.