Acessibilidade Web: Primeiros passos

VANESSA ME TONINI
Acessibilidade para Web
Primeiros 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
•Certiﬁed 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 ﬁliadas, 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: Primeiros passos

Por que?
45.623.910
24%
Pessoas com deﬁciência no Brasil
Censo 2010 - IBGE

Por que?
35.791.488
Pessoas com deﬁciência
visual no Brasil
Censo 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

https://www.youtube.com/watch?v=hFI4CuxQjSA
VÍDEO
ACESSIBILIDADE 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://validator.w3.org/

VALIDE SEU CÓDIGO
http://jigsaw.w3.org/css-validator/

VALIDE A ACESSIBILIDADE
http://wave.webaim.org/

http://www.acessibilidade.gov.pt/accessmonitor/
Access
Monitor

http://www.tawdis.net/

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
deﬁcientes visuais
http://www.nvaccess.org/

VALIDAÇÃO MANUAL:
LEITORES DE TELA
JAWS
Software
proprietário, com
versão para testes
http://www.freedomscientiﬁc.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/

FONTES
tamanho 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
Conﬁra 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.
•

Acessibilidade Web: Primeiros passos

Mais conteúdo relacionado

Acessibilidade Web: Primeiros passos