Apresentação sobre acessibilidade na web. As principais barreiras e soluções básicas para tornar sites e apps acessíveis e universais. Referências, exemplos e pessoas: Marcelo Sales: http://acessibilida.de Valter Junior - NVDA e Windows 10: https://goo.gl/djFWYQ Exemplos de descrição de imagem: https://codepen.io/msales78/project/full/ZBaoeY/ Exemplo - vídeo com audiodescrição: https://goo.gl/cgwFFG Exemplo - vídeo com LIBRAS: https://goo.gl/WyCHMl W3C - Diretrizes WCAG 2.0: https://goo.gl/3XJ3Oo Siga! Reinaldo Ferraz W3C: @reinaldoferraz Talita Pagani: @talitapagani Marcelo Sales: @msales Iguale Comunicação de acessibilidade: @iguale Rogério Chiavegatti: @chiavegatti

1. A WEB PARA TODOS
ACESSIBILIDADE NA WEB
“ Para as pessoas sem deficiência a tecnologia torna as coisas mais fáceis.
Para pessoas com deficiência, a tecnologia torna as coisas possíveis.”
(Mary Pat Radabaugh, 1993) – Introdução a Tecnologia Assistiva.

2. Rogério Chiavegatti
BETA.36 - LTS
• Na web desde 1996.
• devOPS , devFront.devBack.end();
• “Serious Business Man” no FIFA 2017 do XBOX One.
• Hoje: CTO na IgualeDigital Comunicação de Acessibilidade
• Ontem e Hoje: Consultor de TI - One Man Band
@chiavegatti

3. Visão geral sobre acessibilidade na web.
• Tornar sites e aplicativos usáveis por pessoas com e sem necessidades especiais.
• Projetar e desenvolver sites e apps onde todos os usuários consigam explorar suas
funcionalidades e informações.
• Oferecer suporte a diferentes necessidades e barreiras:
• Visual
• Auditiva
• Motora e Física
• Intelectual e Cognitiva
• Oferecer suporte a tecnologias assistivas
• Leitores de tela.
• Linguagem de sinais.
• Alternativas de navegação e acesso.

4. Porque a acessibilidade na web é importante?
1. É o certo a fazer.
Design Universal – Não pense em inclusão.
2. É possível fazer.
Se for Universal não dará trabalho. Agora, se não for...
3. É uma Lei.
LBI – Lei Brasileira da inclusão. (LEI Nº 13.146)
http://www.planalto.gov.br/ccivil_03/_ato2015-2018/2015/lei/l13146.htm#art127
“ Barreiras nas comunicações e na informação: qualquer entrave, obstáculo, atitude ou comportamento
que dificulte ou impossibilite a expressão ou o recebimento de mensagens e de informações por
intermédio de sistemas de comunicação e de tecnologia da informação. “

5. Principais barreiras: Visuais
• Texto muito pequeno
Quando eu digo, pequeno. É bem pequeno!
• Cores e Contraste
• Fontes Ilegíveis
• Imagens sem descrição
• Imagens Complexas
Gráficos ou imagem com significado importante que não possuem descrição.
• Vídeos sem descrição ou sem alternativas textual ou sonora.
• Formulários que impossibilitam a navegação estruturada e lógica.
Campos sem <label> por exemplo.
• Documentos formatados fora de padrão.
Arquivos .pdf onde não é possível selecionar o texto.
• Críticos em sites: Calendários e Carrousel

6. Principais barreiras: Auditivas
• Ausência de suporte para a Linguagem de sinais. (Libras)
Muitos deficientes auditivos não são alfabetizados como nós!
• Ausência de Legendas ou transcrições do áudio.
Cadê a transcrição desse podcast, hein?
• Linguagens complexas, termos complexos...
Quanto texto! Deixa eu voltar 2 parágrafos para entender o que ele quer dizer...

7. Principais barreiras: Motoras e Físicas
• Atividades com tempo limitado.
Ex: Um questionário de testes com timeout definido .
• Formulários que impedem a navegação usando o Tab.
O form precisa ser bem estruturado e use a tag tabindex corretamente!
• Ausência de suporte a navegação para tecnologias assistivas.
Sem atalhos no leitor de tela, preciso voltar todo o conteúdo para encontrar uma parte do conteúdo que me
interessa...

8. Principais barreiras: Cognitivas Mentais
• Elementos como vídeos e áudio que não podem ser desligados, ou iniciam
automaticamente.
Não obrigue o usuário a interagir com o conteúdo, não seja intrusivo.
• Uso desnecessário de linguagem complexa.
Linguagem simples, clara e objetiva. Comunicação acessível também é Universal.
• Conteúdo e estrutura da página sem clareza e objetividade.
Organize o conteúdo de forma racional e lógica. Seu Layout deve respeitar uma coerência e
relação entre as informações apresentadas.
• Fluxo de conteúdo: Da esquerda para direita! De cima para baixo....
E vale reforçar!
Pense em Design Universal e na acessibilidade desde o início do projeto!

9. Ferramentas Assistivas
• Leitores de Tela ( NVDA, JAWS)
• Navegadores Textuais. (Lynx)
• Ferramentas de Zoom e Ampliadores de Tela.
• Navegadores de Voz e comandos de Voz.
Valter Junior deficiente visual e
docente do curso do Senac, fala sobre
o uso do NVDA com o Windows 10
Youtube:
https://www.youtube.com/watch?v=COhVRo
kRQQY

10. DESIGN UNIVERSAL
INTEGRAR COM IGUALDADE
Não faça com que pessoas com necessidades especiais usem estruturas e ambientes diferentes.
Faça com que seus projetos atendam a todos os públicos irrestritamente.

11. Design Universal e Acessibilidade são responsabilidades
compartilhadas.
• Entre devs e designers
[Estrutura, Código, MetaDados] – [ Cores, Contraste, Fontes, Layout e UX]
• Entre profissionais e clientes
Produção de conteúdo, Guias de utilização, suporte e comprometimento com
a manutenção da acessibilidade.
• Grandes Corporações (vendors)
Oferecer suporte para acessibilidade em Sistemas operacionais, Browsers,
Players de mídia, etc ...

12. WCAG 2.0 – Web Accessibility Guidelines
O que são as diretrizes?
Quem responde é o Marcelo Sales da http://acessibilida.de
https://www.youtube.com/watch?v=3dQuTBjtqb0

13. WAI-ARIA – Acessible Rich Internet Applications
Define uma forma de tornar o conteúdo e aplicativos web mais
acessíveis a pessoas com deficiências. Ele contribui
especialmente com conteúdo dinâmico e interface de controles
de usuário avançadas desenvolvidos com Ajax, HTML,
JavaScript e tecnologias relacionadas.
https://www.w3.org/WAI/intro/aria
• Contém 73 Roles. ( Papéis )
• Contém 35 States and Properties (Estados e Propriedades)
• As roles são suportadas por leitores de tela:
• JAWS
• NVDA
• VoiceOver (apple)

14. HTML e CSS: Semântico e Limpinho
• Em: HMTL5 + CSS3 Muito+Acessível
• Declare o idioma
<html lang=“pt-br”>...
• Estruture corretamente o HTML
• Tag: accesskey
• Elimine todos os erros.
Tags incorretas ou inválidas.
• Evite o uso de css inline.
• PageLoad: Quanto mais rápido melhor.
• Foco no Focus!
Mostre onde o usuário está ;)
Estrutura

15. • Crie corretamente os formulários.
<form><fieldset><label>< ... tabindex=>
• O elemento <label> para associar rótulos aos controles de formulários.
• O tabindex para definir o fluxo de navegação entre os elementos do formulário.
Exemplo práticos:
http://webaim.org/techniques/forms/controls
HTML e Formulários

16. O Conteúdo
• Reforçando! Produza o conteúdo de forma Clara e Objetiva.
• Aplique os títulos e subtítulos na ordem correta: <h1></h1> até <h6></h6>
Usar tags corretamente é uma regra que se aplica a todas as tags do html.
• Use nomes amigáveis para arquivos e links.
É melhor fatura-telefônica- 01012018.pdf do que xpto918374_992xie0.pdf
• Sempre ofereça alternativas para o conteúdo não textual.
O conteúdo em texto é sempre muito eficiente!
Descrição de imagens – Legendas, audiodescrição, alternativas para o conteúdo
• Descreva bem e descreva sempre as imagens do seu site.
Exemplos práticos: https://codepen.io/msales78/project/full/ZBaoeY/
• Para vídeos ofereça legendas ,(CC), recursos de audiodescrição, transcrições.
• Para áudio, ofereça alternativas em texto.

17. Tá feito! Agora, testes, testes, testes...
• Entenda como as pessoas com necessidades especiais usam seu site ou app.
• Google, provavelmente o cego que mais usa a internet... Pense e enxergue
como ele.
• Aprenda sobre diferentes tipos de necessidades especiais e comorbidade!
• Teste o suporte a acessibilidade e ferramentas assistivas.
• Use ferramentas e recursos, simples e gratuitas para testar.
• Validador W3C – HTML
https://validator.w3.org/
• Validador W3C – CSS
https://jigsaw.w3.org/css-validator/
• TotalValidator – WCAG 2.0
https://www.totalvalidator.com/
• Leitor de Telas – NVDA
https://www.nvaccess.org/
Busque a conformidade para o WCAG 2.0 AA

18. Testes finalizados.
HTML – OK,CSS- OK, Selinhos bonitinhos – Tudo OK! Ok, mesmo?
• Desculpe, mas os testes eletrônicos não garantem acessibilidade.
• E os selos também não...
• Já um Teste Cognitivo! :D
Vai, testa lá!
• Navegue no seu projeto via teclado, sem mouse.
• Use um leitor de telas.
• Desabilite o Javascript. – Teste o ajax agora!
• Desative o css – como a página ficou?
Considero acessível quando consigo proporcionar a maior independência
e autonomia possível para a pessoa com deficiência!

19. Ferramentas Úteis
• ColorZilla
http://www.colorzilla.com/
• Color Contrast Spectrum
https://www.joedolson.com/tools/color-contrast-tester.php?lang=pt-pt
Testes Gerais
Cores e contraste
• Firefox WebDeveloper
https://addons.mozilla.org/pt-BR/firefox/addon/web-developer/
• Wave – WebAIM
http://wave.webaim.org/
• TotalValidator
https://www.totalvalidator.com/

20. Alguns dados...
24%45.623.910 pessoas
com deficiência no Brasil
1Bilhão+No mundoFonte: ONU
Fonte: Censo IBGE 2010
Acessibilidade é para todos e principalmente para...

21. Para seguir e acompanhar!
Reinaldo Ferraz
W3C
@reinaldoferraz
Marcelo Sales
acessibilida.de
@msales
Talita Pagani
talitapagani.com
@talitapagani
Iguale Acessibilidade
iguale.com.br
@iguale
Pessoas e empresas que ajudam a disseminar e ampliar os conhecimentos em
acessibilidade.

22. Links e referências
• acessibilida.de
https://addons.mozilla.org/pt-BR/firefox/addon/web-developer/
• acessibilidadelegal.com
http://wave.webaim.org/
• webaim.org
http://webaim.org/
• Cartilha de acessibilidade W3C
http://www.w3c.br/pub/Materiais/PublicacoesW3C/cartilha-w3cbr-acessibilidade-
web-fasciculo-I.html
• W3C WCAG 2.1 – Rascunho das novas especificações
https://www.w3.org/TR/WCAG21/

23. PERGUNTAS?

24. Obrigado pessoall!
Até a próxima
Rogério Chiavegatti
@chiavegatti • chiavegatti.com.br • chiavegatti@gmail.com