Este documento discute testes de acessibilidade digital. Ele explica o que são leitores de tela e como eles funcionam para pessoas cegas. Também explica como testar manualmente sites e aplicativos para acessibilidade usando as diretrizes WCAG e ferramentas como leitores de tela, bookmarklets e o plugin aXe.

1. Testes de acessibilidade,
o que são?
Camila Marinho Garcia
& Cristina Stoll

2. Quem somos?
Camila Marinho Garcia Cristina Henrietta Stoll

3. Você sabia…?

4. O que é um leitor de tela?
Um software de tecnologia
assistiva utilizado por pessoas
cegas, que fornece informações
através de síntese de voz sobre
os elementos exibidos na tela do
computador ou smartphone.

5. DESKTOP
NVDA JAWS
Orca VoiceOver
MOBILE
TalkBack VoiceOver

6. Como funciona seu acesso?
Os leitores de tela interpretam e produzem tudo aquilo que
foi construído semanticamente correto.
Eles não leem tudo em uma tela porque infelizmente, uma
grande parte dos desenvolvedores não conhecem os
leitores de telas nem a forma com que funcionam.

7. Como testamos?

8. Qual o escopo dos testes manuais?
➔ Organização e semântica de conteúdo
Por exemplo: títulos e a hierarquia destes títulos
➔ Funcionalidade nas interações
Por exemplo: links, botões, campos de formulário
➔ Relevância e qualidade de conteúdo “alternativo”
Por exemplo: descrições de imagem

9. Demonstração ao vivo com
NVDA + VoiceOver

10. O que é acessibilidade e
quem se beneficia?

11. Como testamos para todos?
Utilizamos as normas do WCAG, criada pelo consórcio W3C
em 1999 é as normas que norteiam a acessibilidade digital
de todas as demais normas no mundo todo.
Nível A
atende a maioria
Nível AA
atende mais que
a maioria
Nível AAA
atende todos

12. WCAG 1.4.3 [AA]
Contraste
Pelo menos 4.5:1 para texto
normal e 3:1 para texto grande e
gráficos de conteúdo.
Importante para:
pessoas com baixa visão, pessoas
idosas e você lendo no sol!
Foreground: #FA8135
Background: #FFFFFF
Contrast ratio: 2.5:1
Foreground: #FFFFFF
Background: #89B051
Contrast ratio: 2.5:1

13. Contrast ratio:
1.2:1
Contrast ratio:
1.1:1

14. WCAG 1.2.2 [A]
Legendas
Áudio pré-gravado deveriam
incluir “legenda oculta”.
Importante para:
pessoas surdas, estrangeiros e você
sem fones de ouvido em público!

15. WCAG 2.4.6 [AA]
Cabeçalhos
e rótulos
Títulos de conteúdos e rótulos
de campos e botões devem
descrever claramente a finalidade.
Importante para:
pessoas cegas, pessoas com
autismo e você buscando informação!

16. WCAG 1.3.5 [AA]*
Objetivo de
entrada
O objetivo de entrada de um
campo deve ser definido e o
atributo autocomplete habilitado.
Importante para:
pessoas cegas, pessoas com baixa
mobilidade e você no seu celular!

17. Quais ferramentas utilizamos?
Leitores de tela: navegamos com eles para gratinar a experiência do
usuário que utiliza um leitor de tela e navega com seu teclado.
Bookmarklets: scripts no navegador utilizados para identificar erros de
semântica visualmente e rapidamente.
aXe: extensão Chrome para análise automática de código web.
Também, existe para mobile (Attest for iOS, Attest for Android).
Colour Contrast Analyser (CCA): ferramenta que pode ser usada para
web ou mobile permite a análise de contraste entre cores.

18. Quer entrar em contato?
Camila Marinho Garcia
@camilamgarcia
no Twitter e LinkedIn
Cristina Henrietta Stoll
@xtstoll
no LinkedIn e GitHub