Os atributos aria-braille devem ter um equivalente não-braille

Os atributos aria-braillelabel e aria-brailleroledescription foram introduzidos para dar aos autores um controlo detalhado sobre como o conteúdo é apresentado em displays braille atualizáveis. Por exemplo, uma classificação visual de “4 estrelas” pode ser representada como **** em braille para poupar espaço e melhorar a legibilidade num display de células limitadas. Da mesma forma, uma descrição de função personalizada como “slide” pode ser abreviada para “sld” para saída braille.

No entanto, estes atributos específicos do braille são projetados como substituições, não valores independentes. Eles modificam como um nome acessível existente ou descrição de função é renderizada em braille. Se não existir nome acessível ou descrição de função, não há nada para o atributo braille substituir. A especificação WAI-ARIA estabelece que os atributos braille sem os seus equivalentes não-braille devem ser ignorados, mas as tecnologias de apoio podem não lidar com isto de forma consistente. Alguns leitores de ecrã podem mostrar o texto apenas-braille enquanto outros o ignoram completamente, levando a uma experiência imprevisível.

Quem é afetado

Esta questão afeta principalmente utilizadores que são cegos ou surdocegos e dependem de displays braille atualizáveis. Também pode afetar utilizadores com deficiências motoras que usam tecnologias de apoio que interpretam atributos ARIA. Quando os atributos braille carecem das suas contrapartes não-braille, estes utilizadores podem encontrar etiquetas em falta ou informação de função confusa, tornando mais difícil — ou impossível — compreender e interagir com o conteúdo.

Critérios de sucesso WCAG relacionados

Esta regra mapeia para o Critério de Sucesso WCAG 4.1.2: Name, Role, Value (Nível A), que requer que todos os componentes da interface do utilizador tenham um nome acessível e função que possam ser determinados programaticamente. Usar aria-braillelabel sem um nome acessível adequado, ou aria-brailleroledescription sem aria-roledescription, significa que o nome ou descrição de função do elemento não é comunicado de forma fiável às tecnologias de apoio. Isto aplica-se ao WCAG 2.0, 2.1, e 2.2 no Nível A, bem como à diretriz EN 301 549 9.4.1.2.

Como corrigir

• Adicione um equivalente não-braille. Se um elemento tem aria-braillelabel, certifique-se de que também tem um nome acessível — via aria-label, aria-labelledby, conteúdo de texto visível, ou o atributo alt em imagens. Se um elemento tem aria-brailleroledescription, certifique-se de que também tem aria-roledescription.
• Verifique a colocação do atributo. O atributo aria-braillelabel ou aria-brailleroledescription pode estar no elemento errado. Verifique se está no mesmo elemento que tem o nome acessível ou descrição de função correspondente.
• Remova atributos braille desnecessários. Se o atributo braille não está a servir um propósito significativo (por exemplo, se o texto braille seria o mesmo que o nome acessível), remova-o completamente.

Exemplos

Incorreto: aria-braillelabel sem nome acessível

A imagem tem um atributo alt vazio, portanto não tem nome acessível. O aria-braillelabel não tem nada para substituir.

<img alt="" aria-braillelabel="****" src="stars.jpg">

Correto: aria-braillelabel com nome acessível

O botão tem um nome acessível do texto alt da imagem. O aria-braillelabel substitui como esse nome aparece num display braille.

<button aria-braillelabel="****">
  <img alt="4 estrelas" src="stars.jpg">
</button>

Incorreto: aria-brailleroledescription sem aria-roledescription

O elemento tem uma descrição de função braille mas não tem aria-roledescription para servir como equivalente não-braille.

<div
  role="article"
  aria-labelledby="slideheading"
  aria-brailleroledescription="sld">
  <h1 id="slideheading">As minhas férias em Roma</h1>
</div>

Correto: aria-brailleroledescription com aria-roledescription

Tanto aria-roledescription como aria-brailleroledescription estão presentes, portanto o display braille pode usar a versão abreviada enquanto os leitores de ecrã usam a descrição de função completa.

<div
  role="article"
  aria-labelledby="slideheading"
  aria-roledescription="slide"
  aria-brailleroledescription="sld">
  <h1 id="slideheading">As minhas férias em Roma</h1>
</div>

Incorreto: aria-braillelabel no elemento errado

O aria-braillelabel está num <span> que não tem nome acessível, mesmo que o botão pai tenha.

<button aria-label="Fechar">
  <span aria-braillelabel="fch">X</span>
</button>

Correto: aria-braillelabel no elemento com nome acessível

O aria-braillelabel está colocado no mesmo elemento que tem aria-label.

<button aria-label="Fechar" aria-braillelabel="fch">
  <span>X</span>
</button>

Learn more:

Deque Reference

Deque University - How To Fix

→