dialog-name-present
Los diálogos tienen un nombre accesible
Comprueba que los diálogos (elementos con role="dialog" o role="alertdialog", y elementos <dialog> nativos) expongan un nombre accesible no vacío.
Ámbito de aplicación. Se aplica a los elementos incluidos en el árbol de accesibilidad cuyo rol es dialog o alertdialog: un elemento cuyo atributo role resuelve a uno de esos roles (gana el primer token que nombra un rol ARIA concreto, así que role="alertdialog dialog" es un alertdialog), y un <dialog> nativo cuyo atributo role falta o no nombra ningún rol concreto (su rol implícito es dialog). Un <dialog> cerrado está oculto y por tanto fuera del alcance. Un elemento personalizado cuyos ElementInternals le dan uno de esos roles (this.attachInternals().role), sin un atributo role que nombre otro, cuenta como lo hace un elemento nativo con ese rol.
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. Ambos roles son name-from-author-only, por lo que el encabezado o el texto del cuerpo dentro del diálogo no se acepta como su nombre a menos que aria-labelledby apunte a él. La falta de nombre se informa como cantTell, no como fail. WAI-ARIA lo exige ("Authors MUST provide an accessible name for a dialog"), pero un diálogo no es en sí mismo un componente de interfaz de usuario en el sentido de WCAG, "un único control para una función distinta": lo son sus controles, y cada uno lo nombra su propia regla. Así que la falta de nombre demuestra la infracción de WAI-ARIA, no un fallo del SC 4.1.2. Aun así puede ser un fallo de WCAG cuando el diálogo muestra un título visible que no está vinculado a él (esa relación no puede determinarse entonces mediante programación, SC 1.3.1); eso lo decide una persona.
Ejemplos
<div role="dialog" aria-label="Confirm deletion"><p>Are you sure?</p></div>
aria-label nombra el diálogo.
<div role="dialog"><p>Body text only.</p></div>
No hay nombre accesible, que WAI-ARIA exige; el texto visible del cuerpo no cuenta como nombre de un diálogo. Un diálogo no es un único control, así que que falle un criterio de WCAG depende de si muestra un título que no está vinculado a él.
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 diálogo 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 diálogo, establecido mediante sus internals o de otro modo, y el lector de pantalla lo anuncia.
No se cumple. El diálogo no tiene nombre en el árbol de accesibilidad y el lector de pantalla solo anuncia su rol. Eso incumple WAI-ARIA; incumple WCAG solo si el diálogo muestra un título que no está vinculado a él (WCAG 1.3.1).
name_missing
- Inspeccione el diálogo que indica el informe y anote su rol (dialog o alertdialog).
- Busque un título o encabezado visible en la parte superior del diálogo.
- Si lo hay, compruebe si el diálogo lo referencia con aria-labelledby.
Se cumple. El diálogo no muestra ningún título, así que no falta nada visible en el árbol de accesibilidad. Aun así, dele un nombre: WAI-ARIA lo exige.
No se cumple. El diálogo muestra un título que no está vinculado a él, así que la relación entre el diálogo y su título no se puede determinar mediante programación (WCAG 1.3.1).