autofocus
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since February 2023.
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
. 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) |
Animatable | No |
For a description of the values, please refer to the HTML 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 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
Specification |
---|
Scalable Vector Graphics (SVG) 2> # autofocusattribute> |
Browser compatibility
Loading…
See also
- SVG
tabindex
attribute - HTML
autofocus
attribute SVGElement.autofocus