03.12.2024

Acessibilidade de SVG e MathML: Padrões para Texto Alternativo

Resumo Rápido

Para melhorar a acessibilidade, utilize os elementos <title> e <desc> dentro do SVG, bem como o atributo alttext em MathML.

<!-- SVG exibe uma imagem -->
<svg aria-labelledby="title desc" role="img">
   <title id="title">Gráfico de Barras Anuais de Crescimento</title>
   <desc id="desc">O gráfico demonstra um aumento constante na renda.</desc>
</svg>

<!-- MathML facilita a compreensão de fórmulas matemáticas -->
<math alttext="a^2 + b^2 = c^2" role="math">
   <!-- A expressão matemática é colocada aqui -->
</math>

O texto alternativo deve servir como um equivalente verbal para o conteúdo gráfico, transmitindo sua história ou propósito.

Garantindo Acessibilidade com ARIA e Gerenciamento de Teclado

No SVG e MathML, a aplicação da ARIA pode aumentar a acessibilidade, e o fornecimento de gerenciamento de teclado ajuda aqueles que dependem de leitores de tela.

SVG:

• O elemento <title> fornece um rótulo breve.
• O elemento <desc> oferece uma descrição completa.
• O role="img" indica que o elemento SVG é percebido como uma imagem.
• aria-labelledby conecta elementos destinados ao título e à descrição.

MathML:

• Um <div> com atributos role="math" e aria-label cria contexto para acesso por voz.
• Se as equações forem muito complexas para serem descritas com aria-label, o atributo alttext será útil.

Adicione tabindex="0" aos elementos para torná-los selecionáveis ao navegar pela página com um teclado.

Adaptando SVG e MathML para Melhor Usabilidade

Para tornar SVG e MathML amigáveis para todos:

1. Uso Adequado dos Elementos SVG

• Mantenha os elementos <text> intactos. Converter texto em caminhos gráficos pode dificultar a transmissão de informações.
• Se houver problemas com a gestão de identificadores únicos, considere usar tags <img> para incorporar SVG.
• Para SVG decorativos, use aria-hidden="true" para que não sejam percebidos por leitores de tela.

2. Alternativas Textuais para Matemática e Gráficos

• <figcaption> ou <p> com texto alternativo ajudam a compreender melhor o conteúdo da página.
• Texto adicional pode ser colocado fora de vista para melhorar a acessibilidade e a compreensão.

3. Evitando Armadilhas e Erros

• O suporte por leitores de tela para aria-label e alttext pode variar, então use-os sabiamente.
• Mantenha-se atualizado com as especificações do W3C para acompanhar as recomendações de melhores práticas atuais.

Visualização

Texto alternativo é a voz para os deficientes visuais.

<!-- Uma imagem pode falar mais que mil palavras -->
SVG (🖼): "Um rosto com um sorriso feliz, olhos brilhando de alegria. Um sorriso mais largo que as planícies do Texas."
<!-- A matemática agora pode se comunicar -->
MathML (🧮): "A fórmula E=mc² simboliza a relação entre energia, massa e a velocidade da luz."

O texto alternativo, falado por softwares de leitura de tela, transforma conteúdos visuais e expressões matemáticas em palavras perceptíveis.

Como Adaptar Leitores de Tela

Compreender as características dos leitores de tela e ajustar suas configurações pode melhorar significativamente a acessibilidade do seu site:

• Dependendo das configurações ou versões, os leitores podem vocalizar todos os <title> e <desc>, o que não é um erro, mas sim uma funcionalidade.
• O suporte para aria-label e alttext pode diferir entre leitores de tela, especialmente ao trabalhar com MathML.

Os leitores de tela têm suas peculiaridades, portanto, é importante continuamente aprimorar seu conhecimento e acompanhar as atualizações das normas de acessibilidade.

Recursos Úteis

1. Home | Iniciativa de Acessibilidade na Web (WAI) | W3C — O principal recurso para padrões de acessibilidade.
2. WebAIM: Texto Alternativo — A fonte essencial de informações sobre como criar texto alternativo.
3. Suporte à Acessibilidade — SVG 2 — Tudo o que você precisa saber sobre acessibilidade SVG.
4. Página Inicial do W3C Math — O principal recurso para MathML.
5. Ícones SVG Acessíveis com Sprites Inline | CSS-Tricks — Um ótimo artigo para desenvolvedores de interfaces.
6. Página Inicial | GBH — Histórias além dos pixels e equações.
7. Guia de Práticas para Autores ARIA | APG | WAI | W3C — Um guia para trabalhar com gráficos.

Video

Navigation