presentation-role-conflict
Un rol presentacional no debe entrar en conflicto con un atributo ARIA global ni con la enfocabilidad
Comprueba que role="presentation"/"none" (incluido el rol presentacional implícito de <img alt="">) no se combine con un atributo ARIA global (aria-label, aria-hidden, aria-describedby, ...) ni con la enfocabilidad (tabindex/nativa).
Ámbito de aplicación. Se aplica a elementos cuyo atributo role se resuelve en presentation o none (el primer token que nombra un rol conocido, sin distinguir mayúsculas de minúsculas, por lo que role="foo none" y role="NONE" cuentan), O a un <img alt=""> que no tenga un rol explícito propio (un alt vacío le otorga a un <img> un rol presentacional implícito según HTML-AAM, incluso sin ningún atributo role explícito: img[alt=''], [role~="none" i], [role~="presentation" i]).
Resultado esperado. El elemento no lleva además un estado/propiedad global de WAI-ARIA (aria-label, aria-hidden, aria-describedby, aria-live, aria-current, ...; el conjunto completo de atributos globales, no solo los de nombrado), Y no es enfocable. Según la sección de resolución de conflictos de roles presentacionales de la especificación WAI-ARIA, un rol presentacional se "restaura" al rol semántico implícito del elemento cuando se cumple cualquiera de las dos condiciones: el rol presentation/none deja de funcionar silenciosamente, contradiciendo la intención evidente del autor de ocultar el elemento del árbol de accesibilidad.
Qué informa un hallazgo.
role: el rol presentacional en vigor:presentationonone. Un <img alt=""> sin rol propio notificapresentation.conflictingAttrs: los atributos ARIA globales que lleva el elemento, sea cual sea su valor. Cada elemento es un nombre de atributo, comoaria-label. Vacío cuando el elemento tienearia-hidden="true"o solo entra en conflicto su capacidad de recibir el foco.focusable:truecuando el elemento puede recibir el foco, lo que también restaura su rol.
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
<div role="presentation">Decorative</div>
No hay ningún atributo de nombrado en conflicto junto con el rol presentation.
<div role="presentation" aria-label="Conflicting">Content</div>
role="presentation" pide a la tecnología de asistencia que omita este elemento, pero aria-label proporciona un nombre: según la resolución de conflictos de WAI-ARIA, el atributo global prevalece y el rol presentation se descarta, por lo que el elemento (y su nombre) vuelven al árbol de forma inesperada.
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.
PRESENTATION_ROLE_CONFLICT
- Localizar el elemento que indica el informe; tiene role="presentation" o "none", o es un img con alt="".
- Anotar los atributos aria-* en conflicto que enumera el informe, y si dice que el elemento puede recibir el foco.
- Abrir el panel Accesibilidad de las herramientas para desarrolladores y ver qué rol y qué nombre expone realmente el elemento.
- Decidir qué se pretendía: si es decorativo, quitar el atributo aria-* y la capacidad de recibir el foco; si tiene significado, quitar el rol presentacional (o dar a la imagen un texto alternativo real).
Se cumple. El elemento es puramente decorativo, sin atributos aria-* globales y sin foco, o conserva su rol real a propósito.
No se cumple. El elemento debería estar oculto, pero su atributo aria-* o su capacidad de recibir el foco le devuelven el rol, así que las tecnologías de apoyo lo exponen de todos modos (buena práctica, resolución de conflictos de los roles presentacionales de WAI-ARIA).