diff --git a/files/en-us/web/svg/reference/attribute/autofocus/index.md b/files/en-us/web/svg/reference/attribute/autofocus/index.md new file mode 100644 index 000000000000000..970b8ddc3721daf --- /dev/null +++ b/files/en-us/web/svg/reference/attribute/autofocus/index.md @@ -0,0 +1,54 @@ +--- +title: autofocus +slug: Web/SVG/Reference/Attribute/autofocus +page-type: svg-attribute +browser-compat: svg.global_attributes.autofocus +sidebar: svgref +--- + +The **`autofocus`** global SVG attribute defines a focusable element to be focused after it's connected to a document. The attribute has no effect if the element is not already focusable. + +The `autofocus` attribute has an HTML counterpart: [`autofocus`](/en-US/docs/Web/HTML/Reference/Global_attributes/autofocus). No more than one element in the document may have the `autofocus` attribute. If applied to multiple elements, the first one will receive focus. + +## Usage notes + + + + + + + + + + + + + + + + +
Value + boolean attribute +
Default value(none)
AnimatableNo
+ +For a description of the values, please refer to the [HTML `autofocus`](/en-US/docs/Web/HTML/Reference/Global_attributes/autofocus) attribute. + +## Accessibility concerns + +Automatically focusing an SVG can confuse visually-impaired people using screen-reading technology and people with cognitive impairments. When autofocus is assigned, screen-readers "teleport" their user to the focusable element without warning them beforehand. + +Use careful consideration for accessibility when applying the `autofocus` attribute. Automatically focusing on an element can cause the page to scroll on load. The focus can also cause dynamic keyboards to display on some touch devices. While a screen reader will announce the {{glossary("accessible name")}} of the element receiving focus, the screen reader will not announce anything before the element that may provide more context, and the sighted user on a small device will equally miss the context created by the preceding content. + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- SVG {{SVGAttr("tabindex")}} attribute +- HTML [`autofocus`](/en-US/docs/Web/HTML/Reference/Global_attributes/autofocus) attribute +- {{domxref("SVGElement.autofocus")}} diff --git a/files/en-us/web/svg/reference/attribute/index.md b/files/en-us/web/svg/reference/attribute/index.md index f17036d2a0c5c98..4b201bd4fcd37d4 100644 --- a/files/en-us/web/svg/reference/attribute/index.md +++ b/files/en-us/web/svg/reference/attribute/index.md @@ -20,6 +20,7 @@ Below is a list of all of the attributes available in SVG along with links to re - {{SVGAttr("amplitude")}} - {{SVGAttr("attributeName")}} - {{SVGAttr("attributeType")}} +- {{SVGAttr("autofocus")}} - {{SVGAttr("azimuth")}} ### B @@ -298,6 +299,7 @@ Below is a list of all of the attributes available in SVG along with links to re - {{SVGAttr("style")}} - {{SVGAttr("lang")}} - {{SVGAttr("tabindex")}} + - {{SVGAttr("autofocus")}} - {{SVGAttr("xml:lang")}} - {{SVGAttr("xml:space")}}