Acabamos de actualizar nuestros servidores de validación A11Y a la última versión de axe-core, 4.2.0, que incluye nuevas reglas y mejoras, por lo que es recomendable que revises tus sitios web para obtener los resultados más actualizados.
Nuevas reglas de accesibilidad en Axe Core 4.2
La última actualización de Axe Core, versión 4.2.0, incluye 4 nuevas reglas, lo que hace un total de 95 reglas de accesibilidad que se comprueban. Axe Core está integrado en el verificador por lotes de Rocket Validator - no necesitas instalar nada en tu servidor, todo está incluido en nuestro validador web automatizado.
Asegura que los encabezados de tabla tengan texto perceptible
Los elementos de encabezado de tabla deberían tener texto visible que describa el propósito de la fila o columna tanto para usuarios videntes como para usuarios de lectores de pantalla.
Por ejemplo:
<table>
<tr>
<th>Student Name</th>
</tr>
</table>Aprende más en Deque University - empty table header.
Asegura que los elementos <frame> e <iframe> con contenido enfocable no tengan tabindex=-1
Cuando un frame tiene un tabindex negativo, el navegador no puede redirigir el foco al contenido dentro de ese frame. Esto hace que todo su contenido se omita en la navegación por teclado, y si el frame es desplazable también impide que el foco alcance cualquier elemento desde el cual el frame pueda ser desplazado con el teclado.
Aprende más en Deque University - frame focusable content.
Los controles interactivos anidados no son anunciados por lectores de pantalla
Los elementos de control interactivo no deberían tener descendientes enfocables. Los elementos enfocables con un ancestro de control interactivo (cualquier elemento que acepta entrada del usuario como botones o elementos de enlace) no son anunciados por lectores de pantalla y crean una parada de tab vacía. Es decir, podrías tabular al elemento pero el lector de pantalla no anunciaría su nombre, rol o valor.
Por ejemplo, esto es incorrecto:
<button>
<a rel="nofollow" href="https://www.w3.org/">The W3C</a>
</button>Aprende más en Deque University - nested interactive.
Asegura que “role=text” se use en elementos sin descendientes enfocables
El atributo role=”text” debería ponerse en un elemento sin descendientes enfocables. Cuando un nodo de texto está dividido por marcado (por ejemplo,
<h1>Hello <span>World</span></h1>) VoiceOver lo tratará como dos frases separadas en lugar de solo una. Añadir role=”text” alrededor de los elementos soluciona el problema. Sin embargo, también anula el rol del elemento y todos los descendientes y los trata a todos como nodos de texto. Si uno de los elementos descendientes también es enfocable crearía una parada de tab vacía. Es decir, podrías tabular al elemento pero VoiceOver no anunciaría su nombre, rol o valor.
Aprende más en Deque University - aria text.
Registro de cambios de Axe Core 4.2.0
Características
- add axe.frameMessenger with configurable allowedOrigins
- aria-allowed-attr: add ARIA 1.2 prohibited attrs check
- empty-table-header: new rule to flag empty table headers
- frame-focusable-content: new rule to test iframes with tabindex=-1 do not have focusable content
- locale: missing translations for DE
- locale: Polish translation
- nested-interactive: new rule to flag nested interactive elements
- role-text: add role-text rule
- setup/teardown: add functions to setup and teardown axe-core internal data, deprecate axe._tree
- standards: add graphics roles
- standards/aria-roles: add presentational children property
- utils.getRule: add function to get rule by id
- utils/matches: support selectors level 4 :not and :is
- virtual-node: add attrNames property which returns list of attribute names
Correcciones de errores
- aria-allowed-attr: error when generic elements use aria-label and aria-labelledy
- aria-required-children: allow group and rowgroup roles
- aria-required-children: only match for roles that require children
- aria-valid-attr-value: pass for aria-errormessage when aria-invalid is not set or false
- aria-valid-attr-value: report when aria-labelledby ref is not in DOM
- aria-valid-attr-value: return false when int type attribute uses invalid values
- bypass: mark as needs review rather than failure
- focus-order-semantics: allow role=tooltip to pass
- heading-order: handle iframe as first result
- respondable: Avoid message duplication with messageId
- respondable: work on iframes in shadow DOM
- avoid ‘undefined’ showing in check messages
- properly translate checks when building axe.js using –lang
- aria-required-parent: only match for roles that require parents
- color-contrast: account for text client rects that start outside the parent container
- color-contrast-matches: do not pass empty string to getElementById
- frame-title: update rule description to be more descriptive
- heading-order: allow partial context to pass
- landmark-complementary-is-top-level: allow aside inside main
- metadata: consistenct use of ‘must’ and ‘should’
- region: allow role=alertdialog as region
- select-name: fix typo in accessible name help
- to-grid/get-headers: work with rowspan=0
- types: Add noHtml option
- utils: fix warning thrown by Webpack
- utils: remove attributes from source string
- add noHtml to axe.configure
- do not allow postMessage with axe version of x.y.z
Conjunto actual de reglas de accesibilidad
Consulta la lista completa de reglas de accesibilidad que están siendo verificadas actualmente por nuestro rastreador web
Reglas de accesibilidad verificadas por Rocket Validator