searchbox-name-present
Los cuadros de búsqueda tienen un nombre accesible
Comprueba que los elementos con role="searchbox" expongan un nombre accesible no vacío.
Ámbito de aplicación. Se aplica a elementos cuyo atributo role se resuelve en searchbox (el atributo es una lista de reserva: su primer token conocido y no abstracto, sin distinguir mayúsculas de minúsculas, es el rol, por lo que role="foo searchbox" cuenta y role="link searchbox" no) que están incluidos en el árbol de accesibilidad. Un elemento con el rol implícito correspondiente pero sin atributo role queda fuera del alcance. También entra en el alcance un elemento personalizado cuyos ElementInternals le dan ese rol (this.attachInternals().role), sin un atributo role que nombre otro: es su rol por defecto, y ninguna otra regla lo comprueba.
Resultado esperado. El elemento tiene un nombre accesible no vacío procedente de aria-label, de un aria-labelledby que resuelve a texto no vacío, o de title. role="searchbox" obtiene su nombre solo del autor (name-from-author-only), así que el texto del subárbol nunca se acepta: el texto que está dentro de un widget searchbox personalizado no se expone de forma fiable como su nombre. En un elemento etiquetable (<input role="searchbox">) un <label> asociado también cuenta. En un <input> de tipo texto o en un <textarea>, el placeholder cuenta en último lugar (la última fuente de nombre de HTML-AAM): una etiqueta que solo es placeholder es una cuestión de 3.3.2, no un nombre ausente. Un elemento nombrado únicamente por aria-placeholder falla: accname no le da ningún nombre, y solo algunos navegadores lo nombran a partir de aria-placeholder.
Ejemplos
<div role="searchbox" tabindex="0" aria-label="Search the site"></div>
aria-label nombra el cuadro de búsqueda.
<div role="searchbox" tabindex="0"></div>
Sin nombre accesible procedente de ningún mecanismo compatible.
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.
name_internals
- Inspeccionar el cuadro de búsqueda que indica el informe, un elemento personalizado, y anotar su rol.
- Abrir el panel Accesibilidad de las herramientas para desarrolladores del navegador y leer el nombre accesible del elemento.
- Con un lector de pantalla, desplazarse hasta el elemento y escuchar el nombre que se anuncia.
Se cumple. El árbol de accesibilidad muestra un nombre para el cuadro de búsqueda, establecido mediante sus internals o de otro modo, y el lector de pantalla lo anuncia.
No se cumple. El cuadro de búsqueda no tiene nombre en el árbol de accesibilidad y el lector de pantalla solo anuncia su rol, lo que incumple WCAG 4.1.2.