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...
ARIA e HTML5
progressbar
radiogroup
scrollbar
slider
spinbutton
status
Tab
tabpanel
textbox
tooltip
73 ROLES (Ou Papéis)
a...
ARIA e HTML5
aria-activedescendant
aria-atomic
aria-autocomplete
aria-busy (state)
aria-checked (state)
aria-controls
aria...
ARIA e HTML5
Implementação por leitores de tela:
Landmark roles são suportadas em
• JAWS 10
• NVDA 2010.1+
• VoiceOver no ...
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 d...
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=...
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-describedb...
<fieldset>
<legend>
Identifique-se!
</legend>
<label for="text">
Nome</label>
<input id="text" type="text"
aria-describedb...
<fieldset>
<legend>
Identifique-se!
</legend>
<label for="text">
Nome</label>
<input id="text" type="text"
aria-describedb...
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” ari...
<div class="message">
<span id="messages" aria-live="assertive"></span>
</div>
<div class="message">
<span id="messages" a...
Dicas importantes para melhorar a acessibilidade
• Validação de Markup
• Siga as diretrizes de
acessibilidade (WCAG e ARIA...
Obrigado!
@reinaldoferraz
“Se o seu site não está pronto para receber
TODAS as pessoas, o site é deficiente.”
Adaptado da ...
Acessibilidade na Web - GoogleI/O SP
Acessibilidade na Web - GoogleI/O SP
Acessibilidade na Web - GoogleI/O SP
Acessibilidade na Web - GoogleI/O SP
Acessibilidade na Web - GoogleI/O SP
Acessibilidade na Web - GoogleI/O SP
Acessibilidade na Web - GoogleI/O SP
Acessibilidade na Web - GoogleI/O SP
Acessibilidade na Web - GoogleI/O SP
Acessibilidade na Web - GoogleI/O SP
Acessibilidade na Web - GoogleI/O SP
Próximos SlideShares
Carregando em…5
×

Acessibilidade na Web - GoogleI/O SP

796 visualizações

Publicada em

Palestra sobre acessibilidade na Web feita para o Google I/O em São Paulo

Publicada em: Internet
0 comentários
4 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
796
No SlideShare
0
A partir de incorporações
0
Número de incorporações
157
Ações
Compartilhamentos
0
Downloads
13
Comentários
0
Gostaram
4
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Acessibilidade na Web - GoogleI/O SP

  1. 1. Acessibilidade na web Google I/O - SP 26 de junho de 2014 Reinaldo Ferraz @reinaldoferraz
  2. 2. http://premio.w3c.br/
  3. 3. Acessibilidade na Web: A quem se destina?
  4. 4. Cegos – Daltônicos - Baixa visão Foto: everystockphoto.com - namida-k
  5. 5. Surdos Foto: everystockphoto.com - jessicafm
  6. 6. Mobilidade reduzida
  7. 7. Estatísticas Pessoas com deficiências no Brasil 24% 45.623.910 pessoas Fonte: Censo 2010
  8. 8. Estatísticas No mundo, esse número é aproximadamente 1 bilhão de pessoas Fonte: ONU
  9. 9. Acessibilidade na web Porque não desenvolvemos web sites acessíveis? Algumas hipóteses:
  10. 10. Desconhecimento
  11. 11. http://www.seosmarty.com/impossible-captcha-it-doesnt-really-matter-if-you-are-human-or-not/
  12. 12. http://www.seosmarty.com/impossible-captcha-it-doesnt-really-matter-if-you-are-human-or-not/
  13. 13. http://www.seosmarty.com/impossible-captcha-it-doesnt-really-matter-if-you-are-human-or-not/
  14. 14. http://www.seosmarty.com/impossible-captcha-it-doesnt-really-matter-if-you-are-human-or-not/
  15. 15. http://www.seosmarty.com/impossible-captcha-it-doesnt-really-matter-if-you-are-human-or-not/
  16. 16. Acessibilidade na web Preconceito
  17. 17. Público alvo
  18. 18. É muito caro! O prazo é curto! Dá muito trabalho! Não sei fazer!
  19. 19. Já testou seu site? Foto: Flickr.com - Baddog_
  20. 20. Já testou o seu site? Acessível via teclado Foto: Flickr.com - Baddog_
  21. 21. Já testou o seu site?
  22. 22. Já testou o seu site? Vídeos com legendas
  23. 23. Já testou o seu site? Sem CSS e imagens Foto: Flickr.com - Baddog_
  24. 24. Ou mesmo sem monitor
  25. 25. Acessibilidade na web Beneficia pessoas com deficiência
  26. 26. Acessibilidade na web: A quem se destina? Acessibilidade é para todos !
  27. 27. Você acha que tem controle sobre o seu usuário?
  28. 28. NÃO
  29. 29. Você não tem controle sobre o seu usuário
  30. 30. Acessibilidade deve fazer parte da rotina
  31. 31. Web Content Accessibility Guidelines http://www.w3.org/TR/WCAG/
  32. 32. Princípio 1: Perceptível Princípio 2: Operável Princípio 3: Compreensível Princípio 4: Robusto Princípios do WCAG
  33. 33. 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
  34. 34. 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
  35. 35. 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
  36. 36. ARIA e HTML5 Implementação por leitores de tela: Landmark roles são suportadas em • JAWS 10 • NVDA 2010.1+ • VoiceOver no iPhone IOS4.
  37. 37. 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
  38. 38. Situação 1: Uma galeria de imagens
  39. 39. <img src=“starwars.jpg” alt=“Foto de Luke Skywalker no filme Star Wars – O império contra ataca”>
  40. 40. <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">
  41. 41. reinaldoferraz.com.br
  42. 42. Situação 2: Uma página cheia de destaques
  43. 43. <a href=“#contents”>Saltar</a> <elemento id=“contents”>
  44. 44. <h1>...</h1> <h2>...</h2> <h3>...</h3> <h2>...<h2> <h3>...</h3> <h4>...</h4> <h2>...</h2> <h3>...</h3>
  45. 45. html5accessibility.com
  46. 46. Situação 3: Menu e Submenus
  47. 47. CSS: a:hover a:focus JavaScript: onmouseover="#" onfocus="#" onmouseout="#" onblur="#"
  48. 48. Situação 4: Formulários
  49. 49. <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>
  50. 50. <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>
  51. 51. <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>
  52. 52. Slider
  53. 53. Não dá para usar o input type=“range”?
  54. 54. SIM!
  55. 55. html5accessibility.com
  56. 56. html5accessibility.com
  57. 57. Situação 5: Utilização de cores
  58. 58. Neil Harbisson http://www.youtube.com/watch?v=CvPOh0p9cf0
  59. 59. Daltonismo
  60. 60. Daltonismo
  61. 61. Daltonismo Uma menina com cabelos loiros, olhos azuis vestida de rosa
  62. 62. Daltonismo Visão normal
  63. 63. Daltonismo Protanopia (Deficiências em vermelho)
  64. 64. Daltonismo Deuteranopia (Deficiências em verde)
  65. 65. Daltonismo Tritanopia (Deficiências em azul)
  66. 66. Daltonismo Acromatopsia (Deficiências todas as cores)
  67. 67. Daltonismo Nunca utilize somente cor para transmitir uma informação na Web
  68. 68. Daltonismo
  69. 69. Situação 4: Múltiplos idiomas
  70. 70. <html lang=“pt-br”> ... Esse texto está em português
  71. 71. <html lang=“pt-br”> ... Esse texto está em português <span lang=“en”>and this one in english</span>
  72. 72. Situação 5: Elementos dinâmicos
  73. 73. <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>
  74. 74. <div class="message"> <span id="messages" aria-live="assertive"></span> </div> <div class="message"> <span id="messages" aria-live=“off" ></span> </div>
  75. 75. 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
  76. 76. Obrigado! @reinaldoferraz “Se o seu site não está pronto para receber TODAS as pessoas, o site é deficiente.” Adaptado da arq. Thais Frota

×