abdullah/til
1
0
Fork 0
mirror of https://github.com/jbranchaud/til synced 2026-01-03 23:28:02 +00:00
Code Issues Projects Releases Wiki Activity

Add Make Elements Non-Interactive With Inert as an HTML TIL

Browse Source
This commit is contained in:
jbranchaud
2024-04-12 11:54:52 -06:00
parent c2f30615c3
commit b6c8192a04
2 changed files with 27 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
html/make-elements-non-interactive-with-inert.md Normal file
View File

@@ -0,0 +1,25 @@
# Make Elements Non-Interactive With Inert
The [`inert`
attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inert)
global attribute is a boolean that can be applied to an element or section of
content in an HTML document. When it is `true`, that elements and anything
nested within it will not be interactive.
```html
<div class="fancy-animation" inert>
<!-- ... -->
</div>
```
This has a couple different implications:
1. Click events are not fired on these elements.
2. These elements will not be able to gain focus.
3. These elements and content are hidden from assistive technology.
This is useful for a variety of things. In particular, it is good for
accessibility when a portion of the document, like a fancy animation, isn't
meant to be traversed by assistive technology.