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

Os atributos aria-braillelabel e aria-brailleroledescription foram introduzidos para dar aos autores controlo detalhado sobre como o conteúdo é apresentado em displays braille refrescá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. Similarmente, uma descrição de papel personalizada como “slide” pode ser abreviada para “sld” para saída braille.

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

Quem é afetado

Esta questão impacta principalmente utilizadores que são cegos ou surdocegos e dependem de displays braille refrescáveis. Pode também afetar utilizadores com deficiências motoras que usam tecnologias assistivas que interpretam atributos ARIA. Quando os atributos braille carecem das suas contrapartes não-braille, estes utilizadores podem encontrar rótulos em falta ou informação de papel 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 WCAG Critério de Sucesso 4.1.2: Nome, Papel, Valor (Nível A), que requer que todos os componentes de interface de utilizador tenham um nome acessível e papel que possam ser determinados programaticamente. Usar aria-braillelabel sem um nome acessível adequado, ou aria-brailleroledescription sem aria-roledescription, significa que o nome do elemento ou descrição de papel não é comunicado de forma fiável às tecnologias assistivas. Isto aplica-se a 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 papel 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 inteiramente.

Exemplos

Incorreto: aria-braillelabel sem um 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 sobrepor.

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

Correto: aria-braillelabel com um nome acessível

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

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

Incorreto: aria-brailleroledescription sem aria-roledescription

O elemento tem uma descrição de papel 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">My vacation in Rome</h1>
</div>

Correto: aria-brailleroledescription com aria-roledescription

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

<div
  role="article"
  aria-labelledby="slideheading"
  aria-roledescription="slide"
  aria-brailleroledescription="sld">
  <h1 id="slideheading">My vacation in Rome</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="Close">
  <span aria-braillelabel="cls">X</span>
</button>

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

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

<button aria-label="Close" aria-braillelabel="cls">
  <span>X</span>
</button>

Learn more:

Deque Reference

Deque University - How To Fix

→