Enfoque

Los elementos interactivos, incluidos los controles de formulario, los vínculos y los botones, de forma predeterminada, enfocable y con tabulador. Los elementos con tabulación forman parte del orden de navegación de enfoque secuencial del documento. Otros elementos están inertes, es decir, no son interactivos. Con los atributos HTML, es posible inertar elementos interactivos y hacer que los elementos inertes sean interactivos.

De forma predeterminada, el orden del enfoque de la navegación es el mismo que el orden visual, que es el orden del código fuente. Hay HTML atributos que pueden alterar este orden, y las propiedades de CSS que pueden alterar el orden visual del contenido. Cómo cambiar el tabulador orden con HTML o el orden de renderización visual con CSS puede perjudicar la experiencia del usuario.

No alteres el orden de tabulación percibido y real con CSS y HTML. Como demuestran los dos ejemplos siguientes, los pedidos de tabulación que difieren del orden visualmente esperado son confusos para los usuarios y malos para la experiencia del usuario.

En este ejemplo, el valor del atributo tabindex ha hecho que el orden de tabulación sea caótico:

En este ejemplo, CSS creó una divergencia entre el orden de tabulación y el orden visual del contenido:

La declaración de flex-flow: row-reverse; revirtió el orden visual. Además, la propiedad order de CSS se aplicó a la sexta palabra, "This", que movió visualmente esa una palabra. La secuencia de tabulación es el orden del código, que ya no coincide con el orden visual, lo que crea una desconexión para los usuarios del teclado.

Cómo hacer que los elementos inertes sean interactivos

Los atributos contenteditable y tabindex, que son atributos globales, se pueden agregar a cualquier elemento, lo que los hace enfocables. en el proceso. Los elementos enfocables también se pueden enfocar con un mouse o un puntero si usas el ícono autofocus. configurado por atributos o por secuencia de comandos, como con element.focus().

El atributo tabindex

El atributo global tabindex, que se introdujo en atributos, habilita que los elementos que, de otro modo, no podrían recibir el foco con la tecla Tab. De ahí su nombre.

El atributo tabindex toma como valor un número entero. Un valor negativo hace que un elemento sea enfocable, pero no tabulable. R El valor de tabindex de 0 permite que el elemento sea enfocable y se pueda usar tabulaciones, lo que agrega el elemento en el que se aplica al elemento secuencial enfocar el orden de navegación en el orden del código fuente. Un valor de 1 o más hace que el elemento sea enfocable y se pueda usar tabulaciones. pero lo agrega a una secuencia de tabulación priorizada y, como vimos antes, se debe evitar.

En esta página, el botón para compartir, <share-action>, es un elemento personalizado. tabindex="0" agrega este elemento que no se puede enfocar normalmente en el orden de tabulación predeterminado del teclado:

<share-action authors="@front-end.social/@estellevw" data-action="click" data-category="web.dev" data-icon="share" data-label="share, mastodon" role="button" tabindex="0">
  <svg aria-label="share" role="img" xmlns="http://www.w3.org/2000/svg">
    <use href="#shareIcon" />
  </svg>
  <span>Share</span>
</share-action>

Hay otro elemento personalizado en esta página: la navegación local tiene un elemento elemento con un valor tabindex negativo:

<web-navigation-drawer type="standard" tabindex="-1">

Un atributo tabindex con un valor negativo hace que el elemento se pueda enfocar, pero no se pueda usar tabulación. El elemento puede recibir enfoque, como a través de HTMLElement.focus(), pero no es parte del orden de la navegación de enfoque secuencial. La convención para los elementos enfocables que no admiten pestañas es usar tabindex="-1". Ten en cuenta que Si agregas tabindex="-1" a un elemento interactivo, ya no se podrá usar Tab.

Se puede usar el método element.focus() para establecer el foco en elementos enfocables. Ten en cuenta que los navegadores desplazan los elementos enfocados hasta la vista. Por este motivo, evita el uso de element.focus({preventScroll:true}), ya que enfocarse en un elemento no visible generará una mala experiencia del usuario.

Si quieres consultar el documento para averiguar qué elemento se enfoca actualmente, usa la propiedad de solo lectura Document.activeElement.

Los elementos con una tabindex de 1 o superior se incluyen en una secuencia de pestañas separada. Como notarás en el CodePen, El tabulación empieza en una secuencia separada, en orden del valor más bajo al valor más alto, antes de pasar por los valores en la secuencia regular. (sin tabindex establecido o tabindex="0") en el orden de la fuente:

tabindex con un valor positivo coloca el elemento en una secuencia de enfoque priorizada, lo que puede generar un caos en el orden de enfoque. Evita modificar el orden del DOM con tabindex. Los órdenes de tabulación alterados no solo pueden generar malos usuarios experiencias, son difíciles de administrar y mantener para los desarrolladores.

El atributo contenteditable

El atributo contenteditable se analizó anteriormente. Configurar contenteditable="true" en cualquier elemento permite que se pueda editar. enfocable y forma parte del orden de tabulación. El comportamiento del enfoque es similar al de la configuración de tabindex="0", pero no es el mismo. Anidados Los elementos contenteditable son enfocables, pero no tabulables. Para que un elemento contenteditable anidado se pueda usar con tabulador, agrega tabindex="0". lo que lo agregará al orden de navegación de enfoque secuencial.

Enfocar elementos interactivos

El atributo autofocus

Mientras que el booleano autofocus es un atributo global que se puede configurar en cualquier elemento, no hace que un elemento inerte sea interactivo. Cuando se carga la página, el primer elemento enfocable Con el atributo autofocus configurado, recibirá el foco, siempre que se muestre ese elemento y no esté anidado en una <dialog>.

Establecer automáticamente el enfoque en el contenido puede ser confuso. Si configuras autofocus en un control de formulario, el control de formulario se desplazará a la vista cuando se cargue la página. Es posible que todos tus usuarios, incluidos los de lectores de pantalla y los que tienen viewports pequeños, no "ver" las instrucciones del formulario, posiblemente incluso más allá de la etiqueta normalmente visible del control del formulario. El autofocus no altera el orden de la navegación de enfoque secuencial del documento. Los elementos de la secuencia que anteceden al los elementos de este tipo simplemente se omiten. Por estos motivos, no se recomienda incluir el atributo autofocus.

La excepción a la opción "no usar autofocus" La recomendación es incluir el atributo autofocus en elementos <dialog>. Cuando se abra un diálogo, el navegador se enfocará automáticamente en el primer elemento interactivo enfocable dentro de <dialog>. lo que significa que autofocus para un elemento no es necesario. Si quieres asegurarte de que un elemento interactivo específico del diálogo reciba cuando se abra el diálogo, agrega el atributo autofocus a ese elemento.

<dialog open>
  <form method="dialog">
    <button type="submit" autofocus>close</button>
  </form>
</dialog>

El atributo autofocus establecido en el <button> de cierre garantiza que reciba el foco cuando se abra el diálogo. Como primer elemento en el cuadro de diálogo, habría recibido el enfoque de todas formas. De forma predeterminada, cuando se abre un diálogo, el primer elemento enfocable dentro El diálogo se enfocará, a menos que otro elemento dentro del diálogo tenga configurado el atributo autofocus.

Cómo hacer que los elementos interactivos sean inertes

También hay atributos HTML que pueden quitar elementos interactivos de la secuencia de tabulación. Incluir un tabindex negativo a elementos enfocables, agregando el atributo disabled a los controles de formulario compatibles y el atributo global inert en un contenedor hacen que los elementos no se puedan Tab. Estos tres atributos NO son intercambiables.

Valor tabindex negativo

Como vimos anteriormente, un atributo tabindex con un valor negativo hace que un elemento se pueda enfocar, pero no se pueda usar tabulador. Al agregar tabindex="0" en un elemento enfocable de forma predeterminada, incluidos vínculos, botones, controles de formulario y elementos contenteditable no es necesario; Incluir una tabindex con un valor negativo quita los elementos que normalmente admiten tabulaciones del enfoque secuencial. y el orden de navegación.

Un valor tabindex negativo evita que los usuarios del teclado se enfoquen en los elementos interactivos, pero no inhabilita el elemento. Pointer los usuarios aún pueden enfocarse en el elemento. Para inhabilitar un elemento, usa el atributo disabled.

Inhabilitado

El atributo booleano disable hace que los controles del formulario estén en la que se aplica y sus elementos subordinados, si los hay, no pueden enfocarse. Los controles de formulario inhabilitados no se pueden enfocar. No se obtienen eventos de clic. y no se envían al enviar el formulario. Ten en cuenta que disabled no es un atributo global. Se aplica a <button>, <input> y <optgroup>, <option>, <select>, <textarea>, elementos personalizados asociados con el formulario y <fieldset>. Cuando se configuran en <optgroup> o <fieldset>, se inhabilitan todos los controles de formulario secundarios, excepto el contenido del primer <legend> de <fieldset>.

Los mismos elementos que admiten disabled también se pueden orientar con :disabled. y :enabled. Los elementos que se inhabilitan con el Por lo general, el atributo disabled se define en gris claro a través de la hoja de estilo del usuario-agente, incluso si un elemento accent-color esté establecida.

Dado que es un atributo booleano, la presencia del atributo inhabilita el elemento que, de lo contrario, se hubiera habilitado. no puedes configurarlo en false. Para volver a habilitar un elemento inhabilitado, se debe quitar el atributo, por lo general, mediante Element.removeAttribute('disabled').

La propiedad HTMLInputElement.disabled te permite verificar si una entrada está inhabilitada. Como disabled no es un atributo global, no se hereda del HTMLElement, pero sí todos los atributos de elementos de Kubernetes, como HTMLSelectElement, HTMLTextareaElement, tiene la misma propiedad de solo lectura.

El atributo disabled no se aplica a los elementos inert que normalmente se pueden enfocar mediante tabindex o contenteditable. Tampoco se aplica al elemento <form> en sí. Para inhabilitarlos, se puede usar el atributo global inert.

El atributo inert

Cuando se agrega el atributo booleano global inert a un elemento, ese elemento y todo el contenido anidado se inhabilitan. en el que se puede hacer clic ni usar tabulaciones, y se quitan del árbol de accesibilidad. Si bien inert se puede aplicar a cualquier elemento, en general, usarse para secciones de contenido, como contenido fuera de pantalla o oculto

Cuando se aplica disabled a los controles de formulario, el navegador proporciona un estilo predeterminado y es posible modificar ese estilo con :disabled. seudoclase. El atributo inert no proporciona indicadores visuales ni tiene una pseudoclase que coincida (aunque el selector de atributos de [inert] sí lo hace).

El uso de inert en contenido visible sin estilos que indiquen la inercia puede generar una mala experiencia del usuario. Como contenido inerte no está disponible para los usuarios de lectores de pantalla, puede generar confusión cuando los usuarios de lectores de pantalla videntes ven contenido en la pantalla que no está disponible para las herramientas de accesibilidad. Haz que la inercia sea muy evidente con CSS.

Asegúrate de que el enfoque nunca se traslade a contenido no visible. Cualquier elemento renderizado fuera de la pantalla que no se muestre automáticamente que se vean cuando la enfoque esté enfocada debe volverse inert. Si el contenido está oculto, pero que se ve cuando se enfoca, como el vínculo de ir al contenido de esta página no es necesario que sea inerte.

Verifica tus conocimientos

Verifica tus conocimientos

Pon a prueba tus conocimientos sobre el enfoque.