O documento discute diretrizes de acessibilidade para conteúdo web, incluindo o uso de XHTML, CSS e JavaScript de forma não obstrutiva. Também aborda leitores de tela, AJAX, semântica e a importância de tornar sites acessíveis.

1. Micael Estrázulas (Jan/2015)

2. Vídeo: Acesso Digital

3. Navegando usando o DOSVOX

4. Diretrizes de Acessibilidade para
Conteúdo Web (WCAG) 2.0
 Perceptível
 Operável
 Compreensível
 Robusto
http://www.w3.org/Translations/WCAG20-pt-PT

5. Javascript e CSS
 Deve ser um PLUS não uma
necessidade
 Se o navegador por alguma limitação
(física, tecnológica ou robótica) não
possuir javascript?

6. Google
 Projeto de acessibilidade
 Evitar iFrames ou adicionar link com seu
conteúdo separadamente
 Desenvolver com melhorias
progressivas
 Siga as diretrizes
 Ajuda no posicionamento do site
 Robos se assemelham aos leitores de
telas

7. Imagine num contexto atual
 XHTML puro (sem CSS e sem
Javascript)

8. Imagine num contexto atual
 XHTML + Javascript (sem CSS)

9. Imagine num contexto atual
 XHTML + CSS (sem Javascript)

10. Sem javascript?
 Software JAWS é pago
 DOSVox funciona praticamente em
modo texto (sem javascript)
 Ser acessível é utilizar XHTML como
base, CSS e Javascript como formas de
melhorar experiência do usuário

11. Mas existe site moderno
acessível?

12. Mas existe site moderno
acessível?

13. Leitores de tela
 Leitor varre o código, cria um buffer e ao apertar
TAB ele navega neste buffer
 Código deve possuir o máximo de informações de
identificação:
 ALT nas imagens
 TITLE nos links
 Correta estruturação do HTML (h1,h2... ul, li, strong,
head, footer, etc)
 Correta ordenação dos elementos do HTML
(posicionamento das informações não apenas pelo CSS
mas também pelo código – primeiro menus, segundo
conteudo, etc)
 TABINDEX para ajudar na navegabilidade da tabulação
 Utilização de javascript não obstrutivo
 Semântica

14. Alguns leitores de tela (e o IE 6
que era complicado)
 DOSVOX (nacional, OpenSource, mais
utilizado no Brasil, não possui
Javascript)
 Orca (vem no Gnome do Linux)
 JAWS
 Virtual Vision
 IBM Via Voice
 NVDA
 ...

15. Javascript não obstrutivo
 Nunca, em nenhuma circunstância,
adicione Javascript diretamente no
documento.
 Javascript é um incremento, não uma
funcionalidade segura
 Verificando a disponibilidade de um objeto
antes de acessá-lo
 Crie Javascript, não dialetos de
navegadores específicos
 Não seqüestre variáveis de outros scripts
 Mantenha a independência do mouse

16. Exemplos
 O link aponta para a página sem AJAX:
<a href="index.php?f=1" id="fact">Generate random fact</a>.
 Caso possua Javascript, adiciona
evento de onClick para requisição
AJAX:

17. AJAX e Leitores de Tela
 Deve-se utilizar javascript não obstrutivo
 Tentar chamar sempre através de
formulários
 ‘’Avisar’’ o leitor que houve um
recarregamento da página (tabindex=-1)
 Não há um padrão entre os leitores desta
solução

18. Sugestões da comunidade
 Ao terminar a requisição AJAX adicionar
o foco no novo elemento
 Somente aceitam focus() os elementos
a, area, button, input, object, select e
textarea

19. Sugestões da comunidade
 Adicionar tabIndex = -1 nos elementos
 Não permitirá navegação via teclado
neste elemento

20. Informações
 Um site todo acessível pode trazer a
uma visibilidade perante a comunidade
 Estima-se que existam 16 milhões de
deficientes no Brasil (IBGE/2010)
 Um site acessível ajuda na indexação
de mecanismos de busca
 E é legal para a sociedade :)

21. Questionamentos:
 Qual o custo de não se utilizar AJAX?
 E o custo de se fazer AJAX não
obstrutivo?
 Qual a acessibilidade desejada?
 Por que não fazer acessível?

22. Fontes
 https://support.google.com/webmasters/answer/817
66?hl=pt-BR#
 http://domscripting.com/presentations/xtech2006/
 http://imasters.com.br/artigo/4298/javascript/tudo-
sobre-javascript-nao-obstrutivo-parte-01/
 http://www.maujor.com/tutorial/ajax-screen-
readers.php#structurecontent
 http://msdn.microsoft.com/pt-
br/magazine/cc507641.aspx
 http://pt.m.wikipedia.org/wiki/Leitor_de_tela
 http://acessibilidade.bento.ifrs.edu.br/arquivos/pdf/m
anual/manual-01-arquivo-01.pdf