O documento discute as diretrizes WCAG para acessibilidade na web, incluindo princípios como perceptível, operável e compreensível. Ele também cobre tópicos como leitores de tela, atributos ALT e ARIA, formulários acessíveis, captcha e indicação de progresso de tarefas. O objetivo é criar conteúdo web acessível para pessoas com deficiência.

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