Acessibilidade na web

Palestra na III Vale Web Livre

Transcript

1. Jose Ailton B. da Silva
2. whoami • Ailton Silva • Suporte Técnico da Coordenadoria Regional de Educação (CREDE17) em Icó • Graduado em Mecatrônica Industrial • Blog - http://ailtonbsj.wordpress.com • Portfolio - http://orkideaplus.esy.es • http://github.com/ailtonbsj
3. A quem se destina? • Cegos, daltônicos, baixa visão • Deficiência auditiva • Deficiência motora • Deficiência Cognitiva • Futuramente: nós • 24% da população brasileira • Cerca de mais de 45 milhões
4. “Planejar antes codificar”
5. WCAG - Web Content Accessibility Guidelines •Pra quem é? • Desenvolvedores de conteúdo para a Web (autores de páginas web, projetistas de sites, etc.) • Desenvolvedores de ferramentas para a Web • Desenvolvedores de ferramentas de avaliação da acessibilidade
6. WCAG - Princípios 1. Perceptível - a informação e os componentes da interface do usuário têm de ser apresentados aos usuários em formas que eles possam perceber. 2. Operável - Os componentes de interface de usuário e a navegação têm de ser operáveis. 3. Compreensível - A informação e a operação da interface de usuário têm de ser compreensíveis. 4. Robusto - O conteúdo tem de ser robusto o suficiente para poder ser interpretado de forma concisa por diversos agentes do usuário, incluindo recursos de tecnologia assistiva.
7. Leitores de tela • DOSVOX - sistema de código aberto mais utilizado no Brasil, disponível para Windows ou para Linux. • JAWS para Microsoft Windows - leitor de tela com suporte para vários idiomas. • NVDA - software livre de leitura de tela para Microsoft Windows com suporte para vários idiomas. • VoiceOver no iPhone Atributo LANG do HTML
8. Atributo ALT <img src=“path.jpg” alt=“descrição”> <div class=“path” role=“img” aria- label=“descricao”>
9. Pular Conteúdos na pagina <a href=“#conteudo”>Ir para conteúdo</a> <div id=“conteudo”>
10. Focus e onKey • CSS • Hover, Focus • JavaScript • Onmouseover, onfocus, onblur
11. WAI-ARIA - Accessible Rich Internet Applications • Alert • Alertdialog • Button • Checkbox • Dialog • Link • Log • Marquee • Progressbar • Radio • Scrollbar • Slider • Spinbutton • status • textbox • Timer • Tooltip • Article • Definition • Directory • Document • Group • Heading • Img • List, listitem • Math • Note • Presentation • Region • Separator • Toolbar ( . . . )
12. LandMarks
13. Formulários • Legend • Label • Aria-describeby
14. Captcha • Opção sonora • reCAPTCHA
15. Contraste • Exemplo: Plone CMS
16. Indicação de progresso de tarefas
17. Parte Prática • Criar o WebApp: Lista de Tarefas Acessível • Testar usando: • Navegação somente pelo teclado • NVDA • NoCoffee Vision Simulator • Lynx • github.com/ailtonbsj/task-manager-with-accessibility