acessibilidade web: primeiros passos
TRANSCRIPT
VANESSA ME TONINI
Acessibilidade para WebPrimeiros Passos
SOBRE MIM...
•Desenvolvedora front-end desde 2007
•Tecnóloga em Sistemas para Internet. UNIVALI/2011
•Especialista em desenvolvimento Web. UTFPR/2014
•MBA em Engenharia de Software orientada a SOA. FIAP
•Certified Magento Front End Developer
•Membro e organizadora do MariaLab Hackerspace
•Consultora Agile Coach
Consórcio fundado em 1994 pelo criador da web, Sir Tim Berners-Lee.
Formado por organizações filiadas, uma equipe em tempo integral e o público.
Qualquer um pode participar da criação dos padrões para a Web.
Publicou mais de 100 padrões para web
HTML
XML
CSS
XHTML
ACESSIBILIDADE WEB
O que é?
Por que?
45.623.910 24%
Pessoas com deficiência no BrasilCenso 2010 - IBGE
Por que?
35.791.488Pessoas com deficiência
visual no BrasilCenso 2010 - IBGE
Pessoas com deficiência visual no Brasil
Não consegue enxergar
528.624
Grande dificuldade
6.056.684
Alguma dificuldade
29.206.180
Censo 2010 - IBGE
QUEM SE BENEFICIA COM ISTO?
QUEM SE BENEFICIA COM ISTO?
https://www.youtube.com/watch?v=hFI4CuxQjSA
VÍDEOACESSIBILIDADE NA WEB: CUSTO OU BENEFÍCIO?
COMO COMEÇAR A FAZER ACESSIBILIDADE WEB?!
CONHEÇA OS PADRÕES DE ACESSIBILIDADE W3C
Web Content Accessibility Guidelines (WCAG) 2.0
Diretrizes de Acessibilidade para Conteúdo Web
http://www.w3.org/Translations/WCAG20-pt-br/
Accessible Rich Internet Applications Suite (WAI-ARIA)
Suíte de recomendações para aplicações rica de internet
http://www.w3.org/TR/wai-aria/
VALIDE SEU CÓDIGO
http://jigsaw.w3.org/css-validator/
VALIDE A ACESSIBILIDADE
http://www.acessibilidade.gov.pt/accessmonitor/
AccessMonitor
VALIDE A ACESSIBILIDADE
http://www.governoeletronico.gov.br/acoes-e-projetos/e-MAG/ases-avaliador-e-simulador-de-acessibilidade-sitios
VALIDAÇÃO MANUAL: LEITORES DE TELA
NVDA
Open Source, desenvolvido por programadores
deficientes visuaishttp://www.nvaccess.org/
VALIDAÇÃO MANUAL: LEITORES DE TELA
JAWS
Software proprietário, com versão para testes
http://www.freedomscientific.com/Products/Blindness/JAWS
VALIDAÇÃO MANUAL: LEITORES DE TELA
DOSVOX
Open Source, e brasileiro
http://intervox.nce.ufrj.br/dosvox/
VALIDAÇÃO MANUAL: LEITORES DE TELA
Voice Over
https://www.apple.com/br/accessibility/osx/voiceover/
VALIDAÇÃO MANUAL: LEITORES DE TELA
Orca
https://git.gnome.org/browse/orca
https://en.wikipedia.org/wiki/Orca_(assistive_technology)
IDIOMA DO CONTEÚDO
atributo lang
<!DOCTYPE html> <html lang="pt-BR" > ....
é um atributo global, pode ser utilizado em todas as tags
VIDEOS COM LEGENDA
the web video text track formats
WebVTT
http://dev.w3.org/html5/webvtt/
FONTEStamanho adequado?
contraste adequado?
legível?
NAVEGAÇÃO: POR ARIA LANDMARKS
atributo role
NAVEGAÇÃO: POR HTML HEADERS
<h1>
<h2>
<h3>
NAVEGAÇÃO: DESABILITE O CSS E
AS IMAGENS
Já testou a navegação por teclado?
Já testou seu site com monitor desligado?
FORMULÁRIOS: LABELS E ARIA-REQUIRED
FORMULÁRIOS: IDENTIFICAR CAMPOS OBRIGATÓRIOS
*
FORMULÁRIOS: IDENTIFICAR CAMPOS OBRIGATÓRIOS
a cor vermelha pode ser imperceptível para daltônicos
MENSAGENS DE FEEDBACK
aria-live:focus
CORES E CONTRASTES
utilizar símbolos junto a cores
MENUS “INVISÍVEIS”
https://adobe-accessibility.github.io/Accessible-Mega-Menu/
Exemplo Open Source da Adobe de como fazer um
Menu com submenu e imagens acessíveis
ARIA
• Promove acesibilidade em aplicações com conteúdo dinâmico e controles avançados do usuário, no qual
demandam AJAX, HTML e Javascript
Confira os meus slides de uma palestra sobre WAI-ARIA em: goo.gl/IzrxV6
• A realização da acessibilidade não depende só de mudanças estruturais mas principalmente de uma
mudança cultural.•
A diferença não deve ser vista nunca como um problema.
• As pessoas diferentes são uma contribuição pra sociedade. •
• Qualquer pessoal em algum momento da vida vai precisar de acessibilidade.
• Por isso tornar o mundo acessível é um compromisso de todos.
•
MuitoObrigada!
@vanessametonini