From 754bbf7a25a8dda49b5d08ef0d0443bbf5af0e36 Mon Sep 17 00:00:00 2001 From: Craig Jennings Date: Sun, 7 Apr 2024 13:41:34 -0500 Subject: new repository --- devdocs/html/global_attributes%2Finert.html | 66 +++++++++++++++++++++++++++++ 1 file changed, 66 insertions(+) create mode 100644 devdocs/html/global_attributes%2Finert.html (limited to 'devdocs/html/global_attributes%2Finert.html') diff --git a/devdocs/html/global_attributes%2Finert.html b/devdocs/html/global_attributes%2Finert.html new file mode 100644 index 00000000..c416cb3a --- /dev/null +++ b/devdocs/html/global_attributes%2Finert.html @@ -0,0 +1,66 @@ +

inert

+

The inert global attribute is a Boolean attribute indicating that the browser will ignore the element. With the inert attribute, all of the element's flat tree descendants (such as modal <dialog>s) that don't otherwise escape inertness are ignored. The inert attribute also makes the browser ignore input events sent by the user, including focus-related events and events from assistive technologies.

Specifically, inert does the following:

+

html

+
<body inert>
+  <!-- content -->
+</body>
+
+

The inert attribute can be added to sections of content that should not be interactive. When an element is inert, it along with all of the element's descendants, including normally interactive elements such as links, buttons, and form controls are disabled because they cannot receive focus or be clicked.

The inert attribute can also be added to elements that should be offscreen or hidden. An inert element, along with its descendants, gets removed from the tab order and accessibility tree.

Note: While inert is a global attribute and can be applied to any element, it is generally used for sections of content. To make individual controls "inert", consider using the disabled attribute, along with CSS :disabled styles, instead.

+
+

Accessibility concerns

+
+

Use careful consideration for accessibility when applying the inert attribute. By default, there is no visual way to tell whether or not an element or its subtree is inert. As a web developer, it is your responsibility to clearly indicate the content parts that are active and those that are inert.

While providing visual and non-visual cues about content inertness, also remember that the visual viewport may contain only sections of content. Users may be zoomed in to a small section of content, or users may not be able to view the content at all. Inert sections not being obviously inert can lead to frustration and bad user experience.

+
+

Specifications

+
+ + +
Specification
HTML Standard
# the-inert-attribute
+

Browser compatibility

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on IOSSamsung Internet
inert102102112No8815.51021021127015.519.0
+

See also

+
+

+ © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
+ https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inert +

+
-- cgit v1.2.3