¿Qué elementos HTML pueden recibir atención?
Estoy buscando una lista definitiva de elementos HTML que pueden enfocarse, es decir, ¿qué elementos se enfocarán cuando focus()se llame a ellos?
Estoy escribiendo una extensión jQuery que funciona con elementos que se pueden enfocar. Espero que la respuesta a esta pregunta me permita ser específico sobre los elementos a los que me dirijo.
No hay una lista definitiva, depende del navegador. El único estándar que tenemos es DOM Nivel 2 HTML , según el cual los únicos elementos que tienen focus()método son
HTMLInputElement, y . Esto omite notablemente y .HTMLSelectElementHTMLTextAreaElementHTMLAnchorElementHTMLButtonElementHTMLAreaElement
Los navegadores actuales definen focus()HTMLElement, pero un elemento no se enfocará a menos que sea uno de:
- HTMLAnchorElement/HTMLAreaElement con un href
- HTMLInputElement/HTMLSelectElement/HTMLTextAreaElement/HTMLButtonElement pero no con
disabled(IE en realidad te da un error si lo intentas), y las cargas de archivos tienen un comportamiento inusual por razones de seguridad - HTMLIFrameElement (aunque enfocarlo no hace nada útil). Otros elementos de incrustación también, tal vez, no los he probado todos.
- Cualquier elemento con un
tabindex
Es probable que haya otras excepciones sutiles y adiciones a este comportamiento según el navegador.
Aquí tengo un selector de CSS basado en la respuesta de bobince para seleccionar cualquier elemento HTML enfocable:
a[href]:not([tabindex='-1']),
area[href]:not([tabindex='-1']),
input:not([disabled]):not([tabindex='-1']),
select:not([disabled]):not([tabindex='-1']),
textarea:not([disabled]):not([tabindex='-1']),
button:not([disabled]):not([tabindex='-1']),
iframe:not([tabindex='-1']),
[tabindex]:not([tabindex='-1']),
[contentEditable=true]:not([tabindex='-1'])
{
/* your CSS for focusable elements goes here */
}
o un poco más bonito en SASS:
a[href],
area[href],
input:not([disabled]),
select:not([disabled]),
textarea:not([disabled]),
button:not([disabled]),
iframe,
[tabindex],
[contentEditable=true]
{
&:not([tabindex='-1'])
{
/* your SCSS for focusable elements goes here */
}
}
Lo agregué como respuesta, porque eso era lo que estaba buscando cuando Google me redirigió a esta pregunta de Stackoverflow.
EDITAR: Hay un selector más, que se puede enfocar:
[contentEditable=true]
Sin embargo, esto se utiliza muy raramente.
$focusable:
'a[href]',
'area[href]',
'button',
'details',
'input',
'iframe',
'select',
'textarea',
// these are actually case sensitive but i'm not listing out all the possible variants
'[contentEditable=""]',
'[contentEditable="true"]',
'[contentEditable="TRUE"]',
'[tabindex]:not([tabindex^="-"])',
':not([disabled])';
Estoy creando una lista SCSS de todos los elementos enfocables y pensé que esto podría ayudar a alguien debido a la clasificación de Google de esta pregunta.
Algunas cosas a tener en cuenta:
- Cambié
:not([tabindex="-1"])a:not([tabindex^="-"])porque es perfectamente plausible generarlo-2de alguna manera. Más vale prevenir que lamentar, ¿verdad? - Agregar
:not([tabindex^="-"])a todos los demás selectores enfocables es completamente inútil. ¡ Al usarlo[tabindex]:not([tabindex^="-"])ya incluye todos los elementos con los que estarías negando:not! - Lo incluí
:not([disabled])porque los elementos deshabilitados nunca se pueden enfocar. De nuevo, es inútil agregarlo a cada elemento.
La biblioteca de accesibilidad ally.js proporciona una lista no oficial basada en pruebas aquí:
https://allyjs.io/data-tables/focusable.html
(NB: su página no dice con qué frecuencia se realizaron las pruebas).
