O plugin DevAssist do YuJa EqualGround usa IA para ajudar você a resolver problemas de acessibilidade em HTML diretamente no IDE VS Code, economizando o tempo necessário para a remediação manual retroativa depois que sites e aplicativos web entram no ar. O YuJa DevAssist verifica a conformidade com os padrões WCAG 2.1 e 2.2, níveis A, AA e AAA, para ajudar a garantir a conformidade total.
Configurar o YuJa EqualGround DevAssist
O plugin YuJa EqualGround DevAssist pode ser baixado pelo site do EqualGround e instalado no Visual Studio Code.
-
No menu lateral do EqualGround, acesse Configuração > DevAssist.
-
Clique no botão Baixar plugin na etapa 1 para baixar o plugin do EqualGround para VS Code.
- Abra o Visual Studio Code.
-
Selecione a guia Extensões na barra lateral.
-
Clique no menu Mais ações e escolha Instalar do VSIX.
-
Localize o arquivo do plugin do EqualGround baixado e selecione Instalar para concluir a configuração.
- Abra qualquer arquivo HTML para iniciar a análise de acessibilidade em tempo real.
Como usar o YuJa EqualGround DevAssist
O YuJa EqualGround DevAssist corrige erros de código propondo Correções rápidas. Selecionar uma Correção rápida aplicará instantaneamente as alterações ao seu código. As sugestões de Correção rápida podem ser identificadas por um ícone de lâmpada amarela.
- Abra o Visual Studio Code.
- Abra qualquer arquivo HTML para iniciar a análise de acessibilidade em tempo real. Os problemas são sinalizados diretamente no código com um sublinhado vermelho ondulado.
-
Passe o mouse sobre um problema para saber mais sobre ele e por que ele é importante.
- Use a Correção rápida para fazer correções instantâneas no código. Para abrir a Correção rápida:
-
Use o atalho Ctrl +. do teclado.
Observação: Este é o atalho padrão; o seu atalho configurado pode ser diferente.
-
Role até a parte inferior da janela pop-up e clique em Correção rápida…
-
Selecione a linha com o erro e, em seguida, clique no ícone de lâmpada azul.
-
Problemas que o YuJa DevAssist pode resolver
Consulte a tabela abaixo para ver os diferentes problemas de WCAG 2.2 que o YuJa DevAssist pode resolver.
| Diretriz WCAG | Número do critério de sucesso WCAG | Problema |
| 1.1 Alternativas em texto | 1.1.1 Conteúdo não textual | Imagens, ícones e elementos não textuais não têm texto alternativo nem rótulos ARIA. |
| 1.2 Mídia baseada em tempo | 1.2.1 Apenas áudio e apenas vídeo (pré-gravado) | O áudio/vídeo pré-gravado não tem uma alternativa de transcrição em texto. |
| 1.2.2 1.2.2 Legendas (pré-gravado) | O vídeo pré-gravado não tem legendas sincronizadas. | |
| 1.3 Adaptável | 1.3.1 Informações e relações | Há uso inadequado de HTML semântico (por exemplo, <div> em vez de <nav>, campos de entrada sem rótulos, hierarquia de títulos ignorada). |
| 1.3.4 Orientação | O conteúdo fica bloqueado em uma orientação de tela específica (somente retrato/paisagem). | |
| 1.3.5 Identificar a finalidade da entrada | Os campos de formulário não têm atributos de preenchimento automático para dados pessoais (nome, e-mail etc.) | |
| 1.4 Distinguível | 1.4.10 Reflow | O conteúdo quebra ou transborda quando ampliado para 400% ou em uma largura de viewport de 320px (reflow deficiente). |
| 1.4.12 Espaçamento de texto | O texto é cortado ou sobreposto quando o espaçamento é substituído (altura da linha, espaçamento entre letras ou espaçamento entre palavras). | |
| 2.2 Tempo suficiente | 2.2.1 Tempo ajustável | Os limites de tempo (sessões, questionários) não podem ser desativados, estendidos ou ajustados. |
| 2.2.2 Pausar, parar, ocultar | O conteúdo com reprodução automática ou em movimento (carrosséis, animações) não tem controle de pausa/parada. | |
| 2.4 Navegável | 2.4.2 Página com título | Faltam elementos <title> significativos nas páginas. |
| 2.4.3 Ordem do foco | Há uma ordem de foco do teclado ilógica que não corresponde ao layout visual. | |
| 2.4.9 Finalidade do link (apenas link) | Links com rótulos vagos, como “clique aqui” ou “leia mais”, são ambíguos fora de contexto. | |
| 2.4.10 Títulos de seção | Seções longas de conteúdo não têm títulos que permitam aos usuários navegar por elas. | |
| 3.1 Legível | 3.1.1 Idioma da página | O elemento <html> não tem o atributo lang. |
| 3.2 Previsível | 3.2.5 Mudança sob solicitação | Há mudanças de contexto inesperadas na entrada (por exemplo, redirecionamentos de página ou envios de formulário acionados sem intenção do usuário). |
| 4.1 Compatível | 4.1.2 Nome, função, valor | Os elementos interativos (botões, campos de entrada, widgets personalizados) não têm atributos de nome, função ou valor para tecnologias assistivas. |