Skip to main content

Verificador de acessibilidade atualizado para Axe Core 4.2.0, incluindo 4 novas regras

por Jaime Iniesta

Acabámos de atualizar os nossos servidores de validação A11Y para a versão mais recente do axe-core, 4.2.0, que inclui novas regras e melhorias, pelo que pode querer verificar novamente os seus sites para obter os resultados mais atualizados.

Axe Core 4.2.0 JSON Output

Novas regras de acessibilidade no Axe Core 4.2

A mais recente atualização do Axe Core, versão 4.2.0, inclui 4 novas regras, perfazendo um total de 95 regras de acessibilidade a serem verificadas. O Axe Core está integrado no verificador em lote do Rocket Validator - não precisa de instalar nada no seu servidor, tudo está incluído no nosso validador web automatizado.

Garante que os cabeçalhos de tabela têm texto discernível

Os elementos de cabeçalho de tabela devem ter texto visível que descreva o propósito da linha ou coluna tanto para utilizadores videntes como para utilizadores de leitores de ecrã.

Por exemplo:

<table>
  <tr>
    <th>Student Name</th>
  </tr>
</table>

Saiba mais em Deque University - empty table header.

Garante que elementos <frame> e <iframe> com conteúdo focalizável não têm tabindex=-1

Quando uma frame tem um tabindex negativo, o browser é impedido de redirecionar o foco para o conteúdo dentro dessa frame. Isto faz com que todo o seu conteúdo seja ignorado na navegação por teclado e, se a frame for rolável, também impede que o foco alcance qualquer elemento a partir do qual a frame possa ser rolada com o teclado.

Saiba mais em Deque University - frame focusable content.

Controlos interativos aninhados não são anunciados pelos leitores de ecrã

Os elementos de controlo interativo não devem ter descendentes focalizáveis. Os elementos focalizáveis com um ancestral de controlo interativo (qualquer elemento que aceite entrada do utilizador como elementos button ou anchor) não são anunciados pelos leitores de ecrã e criam uma paragem de tabulação vazia. Ou seja, você poderia tabular para o elemento mas o leitor de ecrã não anunciaria o seu nome, papel ou valor.

Por exemplo, isto está incorreto:

<button>
  <a rel="nofollow" href="https://www.w3.org/">The W3C</a>
</button>

Saiba mais em Deque University - nested interactive.

Garante que “role=text” é usado em elementos sem descendentes focalizáveis

O atributo role=”text” deve ser colocado num elemento sem descendentes focalizáveis. Quando um nó de texto é dividido por marcação (por exemplo, <h1>Hello <span>World</span></h1>) o VoiceOver tratá-lo-á como duas frases separadas em vez de apenas uma. Adicionar role=”text” em torno dos elementos resolve o problema. No entanto, também substitui o papel do elemento e todos os descendentes e trata-os todos como nós de texto. Se um dos elementos descendentes também for focalizável, criaria uma paragem de tabulação vazia. Ou seja, você poderia tabular para o elemento mas o VoiceOver não anunciaria o seu nome, papel ou valor.

Saiba mais em Deque University - aria text.

Registo de alterações do Axe Core 4.2.0

Funcionalidades

  • 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

Correções de erros

  • 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 atual de regras de acessibilidade

Veja a lista completa de regras de acessibilidade que estão atualmente a ser verificadas pelo nosso crawler web

Regras de acessibilidade verificadas pelo Rocket Validator

Pronto para validar os seus sites?
Comece o seu teste gratuito hoje.