nested-interactive-controls-absent
Los controles interactivos no deben anidarse
Comprueba que un control interactivo (enlace, botón, control de formulario o rol de widget ARIA) no contenga otro control interactivo.
Ámbito de aplicación. Se aplica a elementos que coinciden con el conjunto de controles interactivos (a[href] nativo, button, input (no hidden), select, textarea; o un rol de widget ARIA explícito: button, link, checkbox, radio, switch, tab, textbox, combobox, listbox, menuitem, menuitemcheckbox, menuitemradio, option, slider, spinbutton, searchbox, treeitem, tomado del primer token del atributo role que nombra un rol conocido, sin distinguir mayúsculas de minúsculas, por lo que role="foo button" y role="BUTTON" cuentan y role="none button" no). El contenedor es aplicable independientemente de si él mismo es enfocable; la focalizabilidad solo se usa para decidir si un descendiente anida un control interactivo. Un elemento personalizado cuyos ElementInternals le dan uno de esos roles de widget (this.attachInternals().role), sin un atributo role que nombre otro, cuenta como lo hace un elemento nativo con ese rol.
Resultado esperado. El elemento no contiene, como descendiente, otro control interactivo operable (por ejemplo, un <button> que envuelve un <select>, o un enlace que contiene un checkbox). Los controles interactivos anidados no se anuncian ni se operan de forma fiable mediante tecnología de asistencia; activar el control externo y el interno se vuelve ambiguo, y algunas AT solo exponen uno de los dos. Devuelve fail donde el rol del control externo tiene hijos presentacionales (WAI-ARIA 1.2: button, checkbox, img, menuitemcheckbox, menuitemradio, meter, option, progressbar, radio, scrollbar, separator, slider, switch, tab): ahí se elimina el rol del control anidado, así que un control que sigue tomando el foco no tiene un rol que determinar (SC 4.1.2, como lo plantea ACT 307n5z). En los demás casos (un link, textbox, combobox, listbox, menuitem, searchbox, spinbutton o treeitem que contiene un control) ambos conservan sus roles; el modelo de contenido de HTML prohíbe el anidamiento, pero que se pierda un nombre, un rol o un valor depende de la página, así que se informa como cantTell.
Qué informa un hallazgo.
nestedElements: los controles anidados dentro de este, un nombre de etiqueta por control.
Estos campos de data.details ayudan a leer y reproducir un hallazgo. Salvo reasonCode y los pocos campos que Esquema de salida indica como estables, no son un contrato estable: un campo puede cambiar de nombre o desaparecer en una versión menor, así que no construyas sobre ellos.
Ejemplos
<button>Click me</button>
No hay ningún control interactivo anidado.
<button><input type="checkbox"> Accept</button>
Un <button> contiene anidado un <input type="checkbox">, otro control enfocable. Los hijos de un botón son presentacionales, así que la casilla pierde su rol.
Cómo comprobarlo
Cuando esta regla no puede decidir, informa cantTell y deja la pregunta a una persona. Cada pregunta que puede plantear aparece aquí bajo su código de motivo, con los pasos para responderla. Un hallazgo lleva los mismos pasos en howToCheck, en el idioma del análisis. Consulta Esquema de salida.
NESTED_INTERACTIVE_CONTROL
- Inspeccione el control que indica el informe, como un enlace, y anote el control anidado dentro de él.
- Con el teclado, vaya a cada uno de los dos y actívelo, y compruebe que cada uno hace su propia tarea y que activar el interior no activa también el exterior.
- Con un lector de pantalla, vaya a cada uno y anote si ambos se anuncian con su propio rol y nombre, o si el nombre del control exterior absorbe el del interior.
Se cumple. Ambos controles se pueden alcanzar y manejar por separado, cada uno con su propio rol y nombre. Aun así, saque el control interior: HTML no lo permite ahí.
No se cumple. El control interior no se puede alcanzar ni manejar por separado, o no se anuncia con su propio rol y nombre, así que su nombre, rol o manejo no están disponibles (WCAG 4.1.2, 2.1.1).