diff --git a/README.md b/README.md index 86ed620..b38047e 100644 --- a/README.md +++ b/README.md @@ -10,7 +10,7 @@ pairing with smart people at Hashrocket. For a steady stream of TILs, [sign up for my newsletter](https://crafty-builder-6996.ck.page/e169c61186). -_1407 TILs and counting..._ +_1408 TILs and counting..._ --- @@ -397,6 +397,7 @@ _1407 TILs and counting..._ - [Adding Alt Text To An Image](html/adding-alt-text-to-an-image.md) - [Determine Which Button Submitted The Form](html/determine-which-button-submitted-the-form.md) - [Disable Auto-Completion For A Form Input](html/disable-auto-completion-for-a-form-input.md) +- [Make Elements Non-Interactive With Inert](html/make-elements-non-interactive-with-inert.md) - [Prevent Search Engines From Indexing A Page](html/prevent-search-engines-from-indexing-a-page.md) - [Render Text As Superscript](html/render-text-as-superscript.md) - [Submit A Form With A Button Outside The Form](html/submit-a-form-with-a-button-outside-the-form.md) diff --git a/html/make-elements-non-interactive-with-inert.md b/html/make-elements-non-interactive-with-inert.md new file mode 100644 index 0000000..423c56f --- /dev/null +++ b/html/make-elements-non-interactive-with-inert.md @@ -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 +
+ +
+``` + +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.