acessibilidade na web - googlei/o sp
Post on 08-May-2015
275 Views
Preview:
DESCRIPTION
TRANSCRIPT
Acessibilidade na web
Google I/O - SP
26 de junho de 2014
Reinaldo Ferraz
@reinaldoferraz
http://premio.w3c.br/
Acessibilidade na Web: A quem se destina?
Cegos – Daltônicos - Baixa visão
Foto: everystockphoto.com - namida-k
Surdos
Foto: everystockphoto.com - jessicafm
Mobilidade reduzida
Estatísticas
Pessoas com deficiências no Brasil
24% 45.623.910 pessoas
Fonte: Censo 2010
Estatísticas
No mundo, esse número é
aproximadamente
1 bilhão de pessoas
Fonte: ONU
Acessibilidade na web
Porque não
desenvolvemos
web sites
acessíveis?
Algumas hipóteses:
Desconhecimento
http://www.seosmarty.com/impossible-captcha-it-doesnt-really-matter-if-you-are-human-or-not/
http://www.seosmarty.com/impossible-captcha-it-doesnt-really-matter-if-you-are-human-or-not/
http://www.seosmarty.com/impossible-captcha-it-doesnt-really-matter-if-you-are-human-or-not/
http://www.seosmarty.com/impossible-captcha-it-doesnt-really-matter-if-you-are-human-or-not/
http://www.seosmarty.com/impossible-captcha-it-doesnt-really-matter-if-you-are-human-or-not/
Acessibilidade na web
Preconceito
Público alvo
É muito caro!
O prazo é curto!
Dá muito trabalho!
Não sei fazer!
Já testou seu site?
Foto: Flickr.com - Baddog_
Já testou o seu site?
Acessível via teclado
Foto: Flickr.com - Baddog_
Já testou o seu site?
Já testou o seu site?
Vídeos com legendas
Já testou o seu site?
Sem CSS
e imagens
Foto: Flickr.com - Baddog_
Ou mesmo sem monitor
Acessibilidade na web
Beneficia pessoas com deficiência
Acessibilidade na web: A quem se destina?
Acessibilidade é para todos !
Você acha que tem controle sobre o seu
usuário?
NÃO
Você não tem controle sobre o seu usuário
Acessibilidade deve fazer parte da rotina
Web Content Accessibility Guidelines
http://www.w3.org/TR/WCAG/
Princípio 1: Perceptível
Princípio 2: Operável
Princípio 3: Compreensível
Princípio 4: Robusto
Princípios do WCAG
ARIA e HTML5
WAI-ARIA (Accessible 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.
http://www.w3.org/WAI/intro/aria
ARIA e HTML5
progressbar
radiogroup
scrollbar
slider
spinbutton
status
Tab
tabpanel
textbox
tooltip
73 ROLES (Ou Papéis)
alert
Alertdialog
button
checkbox
dialog
menu
menubar
menuitem
option
...
http://www.w3.org/TR/wai-aria/roles#role_definitions
ARIA e HTML5
aria-activedescendant
aria-atomic
aria-autocomplete
aria-busy (state)
aria-checked (state)
aria-controls
aria-describedby
aria-disabled (state)
aria-dropeffect
aria-expanded (state)
aria-flowto
aria-grabbed (state)
35 States and Properties (Estados e Propriedades)
aria-haspopup
aria-hidden (state)
aria-invalid (state)
aria-label
aria-labelledby
aria-level
aria-live
aria-multiline
aria-multiselectable
aria-orientation
aria-owns
... http://www.w3.org/TR/wai-aria/states_and_properties
ARIA e HTML5
Implementação por leitores de tela:
Landmark roles são suportadas em
• JAWS 10
• NVDA 2010.1+
• VoiceOver no iPhone IOS4.
As WCAG utilizam a semântica do HTML
para tornar o conteúdo acessível
ARIA são atributos que conseguem mudar a
semântica dos elementos para tornar o
conteúdo acessível
Situação 1:
Uma galeria de imagens
<img src=“starwars.jpg”
alt=“Foto de Luke Skywalker no filme Star
Wars – O império contra ataca”>
<div class="foto" role="img"
aria-label="Logo do W3C que está dentro do
CSS"></div>
<img src="img-slides/w3clogo.png"
alt="Logo do W3C dentro do HTML">
reinaldoferraz.com.br
Situação 2:
Uma página cheia de
destaques
<a href=“#contents”>Saltar</a>
<elemento id=“contents”>
<h1>...</h1>
<h2>...</h2>
<h3>...</h3>
<h2>...<h2>
<h3>...</h3>
<h4>...</h4>
<h2>...</h2>
<h3>...</h3>
html5accessibility.com
Situação 3:
Menu e Submenus
CSS:
a:hover
a:focus
JavaScript:
onmouseover="#"
onfocus="#"
onmouseout="#"
onblur="#"
Situação 4:
Formulários
<fieldset>
<legend>
Identifique-se!
</legend>
<label for="text">
Nome</label>
<input id="text" type="text"
aria-describedby="comp">
<p id="comp">
Preencha seu nome
de verdade, viu?</p>
</fieldset>
<fieldset>
<legend>
Identifique-se!
</legend>
<label for="text">
Nome</label>
<input id="text" type="text"
aria-describedby="comp">
<p id="comp">
Preencha seu nome
de verdade, viu?</p>
</fieldset>
<fieldset>
<legend>
Identifique-se!
</legend>
<label for="text">
Nome</label>
<input id="text" type="text"
aria-describedby="comp">
<p id="comp">
Preencha seu nome
de verdade, viu?</p>
</fieldset>
Slider
Não dá para usar o
input type=“range”?
SIM!
html5accessibility.com
html5accessibility.com
Situação 5:
Utilização de cores
Neil Harbisson
http://www.youtube.com/watch?v=CvPOh0p9cf0
Daltonismo
Daltonismo
Daltonismo
Uma menina com cabelos loiros, olhos
azuis vestida de rosa
Daltonismo
Visão normal
Daltonismo
Protanopia (Deficiências em vermelho)
Daltonismo
Deuteranopia (Deficiências em verde)
Daltonismo
Tritanopia (Deficiências em azul)
Daltonismo
Acromatopsia (Deficiências todas as cores)
Daltonismo
Nunca utilize somente cor para
transmitir uma informação na Web
Daltonismo
Situação 4:
Múltiplos idiomas
<html lang=“pt-br”>
...
Esse texto está em português
<html lang=“pt-br”>
...
Esse texto está em português <span
lang=“en”>and this one in english</span>
Situação 5:
Elementos dinâmicos
<button role=“button” aria-pressed=“false”>
<img src=“off.png” alt=“Status Desligado”>
</button>
<button role=“button” aria-pressed=“true”>
<img src=“on.png” alt=“Status Ligado”>
</button>
<div class="message">
<span id="messages" aria-live="assertive"></span>
</div>
<div class="message">
<span id="messages" aria-live=“off" ></span> </div>
Dicas importantes para melhorar a acessibilidade
• Validação de Markup
• Siga as diretrizes de
acessibilidade (WCAG e ARIA)
• Validação automática de
acessibilidade
• Verificação de avisos
• Teste com tecnologias assistivas
• Coloque a acessibilidade na rotina
do desenvolvimento
Obrigado!
@reinaldoferraz
“Se o seu site não está pronto para receber
TODAS as pessoas, o site é deficiente.”
Adaptado da arq. Thais Frota
top related