Acessibilidade na Web
Desenvolvendo para pessoas e não só para máquinas
Reinaldo Ferraz – W3C Brasil - CEWEB.br
@reinaldoferraz
Slideshare.com/reinaldoferraz
Acessibilidade na Web: A quem se destina?
Cegos - daltônicos - baixa visão
Deficiência auditiva
Deficiência motora
24%
45.623.910 pessoas
Censo 2010
Fonte: http://www.ibge.gov.br/home/estatistica/populacao/censo2010/resultados_preliminar...
Fonte: http://www.planalto.gov.br/ccivil_03/_Ato2015-2018/2015/Lei/L13146.htm
LEI Nº 13.146, DE 6 DE JULHO DE 2015.
Art. 6...
LEI Nº 13.146, DE 6 DE JULHO DE 2015.
Art. 63. É obrigatória a acessibilidade nos sítios da
internet mantidos por empresas...
A Web foi feita para as pessoas
AndyWalker
LeonardoGleisson
IvyBean
Neil Harbisson
http://www.youtube.com/watch?v=CvPOh0p9cf0
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/
Preconceito
Público alvo
Játestouoseusite?
Foto: Flickr.com - Baddog_
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
É muito caro!O prazo é curto!Não sei fazer!Dá muito trabalho!
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
WAI-ARIA (Accessible Rich Internet Applications) define
uma forma de tornar o conteúdo e aplicativos web mais
acessíveis a...
progressbar
radiogroup
scrollbar
slider
spinbutton
status
Tab
tabpanel
textbox
tooltip
73 ROLES (Ou Papéis)
alert
Alertdia...
aria-activedescendant
aria-atomic
aria-autocomplete
aria-busy (state)
aria-checked (state)
aria-controls
aria-describedby
...
Landmark roles são suportadas em
• JAWS 10
• NVDA 2010.1+
• VoiceOver no iPhone IOS4.
1. As WCAG utilizam a semântica do
HTML para tornar o conteúdo acessível
2. ARIA são atributos que conseguem
mudar a semân...
Quatro regras de WAI-ARIA
Regra nº 1
Não use ARIA
(prefira os elementos semânticos do HTML)
Regra nº 2
Não mude a semântica
dos elementos
(apenas se você realmente precisar)
Não faça isso:
<h1 role=button>heading button</h1>
Não faça isso:
<h1 role=button>heading button</h1>
Faça isso:
<h1>
<button>heading button</button>
</h1>
Não faça isso:
<h1 role=button>heading button</h1>
Faça isso:
<h1>
<button>heading button</button>
</h1>
Se não puder usar...
Regra nº 3
Todos os controles
interativos devem ser
acessíveis via teclado
Regra nº 4
Não use
role="presentation" ou
aria-hidden="true“ em um
elemento de foco visí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”>
reinaldoferraz.com.br
Situação 2:
Esconder conteúdo de um
leitor de tela
<a href=“#”
role="presentation">
<img src=“starwars.jpg”
alt=“Foto de Luke Skywalker no filme Star
Wars – O império contra...
<p aria-hidden="true“>
Conteúdo que deve estar escondido não deve
permitir foco via teclado. Utilizar role
presentation so...
Formas de ocultar elementos e efeitos na acessibilidade
CSS Efeito na tela Efeito na acessibilidade
visibility:hidden;
O e...
Exemplos
Situação 3:
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
<input type=“email”>
<input type=“url”>
<input type=“tel”>
Exemplos
Situação 4:
Menu e Submenus
CSS:
a:hover
a:focus
JavaScript:
onmouseover="#"
onfocus="#"
onmouseout="#"
onblur="#"
Exemplos
Situação 5:
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...
<fieldset>
<legend>
Identifique-se!
</legend>
<label for="text">
Nome</label>
<input id="text" type=“range"
aria-described...
html5accessibility.com
Exemplos
Situação 6:
Utilização de cores
Visão normal
Protanopia (Deficiências em vermelho)
Deuteranopia (Deficiências em verde)
Tritanopia (Deficiências em azul)
Acromatopsia (Deficiências todas as cores)
Exemplos
Situação 7:
Múltiplos idiomas
Exemplos
Situação 8:
Elementos dinâmicos
<button role=“button” aria-pressed=“false”>
<img src=“off.png” alt=“Status Desligado”>
</button>
<button role=“button” ari...
Live Regions
Exemplos
Dicas importantes para melhorar a acessibilidade
• Validação de Markup
• Siga as diretrizes de acessibilidade (WCAG e ARIA...
http://premio.ceweb.br/
Obrigado
reinaldo@nic.br @reinaldoferraz
“Se o seu site não está pronto para receber
TODAS as pessoas, o site é deficiente...
Acessibilidade na Web: Construíndo páginas para pessoas e não só para máquinas
Acessibilidade na Web: Construíndo páginas para pessoas e não só para máquinas
Acessibilidade na Web: Construíndo páginas para pessoas e não só para máquinas
Acessibilidade na Web: Construíndo páginas para pessoas e não só para máquinas
Acessibilidade na Web: Construíndo páginas para pessoas e não só para máquinas
Acessibilidade na Web: Construíndo páginas para pessoas e não só para máquinas
Acessibilidade na Web: Construíndo páginas para pessoas e não só para máquinas
Acessibilidade na Web: Construíndo páginas para pessoas e não só para máquinas
Acessibilidade na Web: Construíndo páginas para pessoas e não só para máquinas
Acessibilidade na Web: Construíndo páginas para pessoas e não só para máquinas
Acessibilidade na Web: Construíndo páginas para pessoas e não só para máquinas
Acessibilidade na Web: Construíndo páginas para pessoas e não só para máquinas
Acessibilidade na Web: Construíndo páginas para pessoas e não só para máquinas
Acessibilidade na Web: Construíndo páginas para pessoas e não só para máquinas
Acessibilidade na Web: Construíndo páginas para pessoas e não só para máquinas
Acessibilidade na Web: Construíndo páginas para pessoas e não só para máquinas
Próximos SlideShares
Carregando em…5
×

Acessibilidade na Web: Construíndo páginas para pessoas e não só para máquinas

814 visualizações

Publicada em

O objetivo desta palestra é apresentar como a acessibilidade na Web impacta a vida de todos e como pequenas intervenções podem fazer uma enorme diferença no acesso de pessoas com deficiência na Web. Serão apresentados os principais motivos para tornar a Web acessível e exemplos práticos de como a acessibilidade na Web funciona na prática.

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

Sem downloads
Visualizações
Visualizações totais
814
No SlideShare
0
A partir de incorporações
0
Número de incorporações
53
Ações
Compartilhamentos
0
Downloads
11
Comentários
0
Gostaram
2
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Acessibilidade na Web: Construíndo páginas para pessoas e não só para máquinas

  1. 1. Acessibilidade na Web Desenvolvendo para pessoas e não só para máquinas Reinaldo Ferraz – W3C Brasil - CEWEB.br
  2. 2. @reinaldoferraz Slideshare.com/reinaldoferraz
  3. 3. Acessibilidade na Web: A quem se destina?
  4. 4. Cegos - daltônicos - baixa visão
  5. 5. Deficiência auditiva
  6. 6. Deficiência motora
  7. 7. 24% 45.623.910 pessoas Censo 2010 Fonte: http://www.ibge.gov.br/home/estatistica/populacao/censo2010/resultados_preliminares/default_resultados_preliminares.shtm
  8. 8. Fonte: http://www.planalto.gov.br/ccivil_03/_Ato2015-2018/2015/Lei/L13146.htm LEI Nº 13.146, DE 6 DE JULHO DE 2015. Art. 63. É obrigatória a acessibilidade nos sítios da internet mantidos por empresas com sede ou representação comercial no País ou por órgãos de governo, para uso da pessoa com deficiência, garantindo-lhe acesso às informações disponíveis, conforme as melhores práticas e diretrizes de acessibilidade adotadas internacionalmente.
  9. 9. LEI Nº 13.146, DE 6 DE JULHO DE 2015. Art. 63. É obrigatória a acessibilidade nos sítios da internet mantidos por empresas com sede ou representação comercial no País ou por órgãos de governo, para uso da pessoa com deficiência, garantindo-lhe acesso às informações disponíveis, conforme as melhores práticas e diretrizes de acessibilidade adotadas internacionalmente. Fonte: http://www.planalto.gov.br/ccivil_03/_Ato2015-2018/2015/Lei/L13146.htm
  10. 10. A Web foi feita para as pessoas
  11. 11. AndyWalker
  12. 12. LeonardoGleisson
  13. 13. IvyBean
  14. 14. Neil Harbisson http://www.youtube.com/watch?v=CvPOh0p9cf0
  15. 15. Acessibilidade na web Porque não desenvolvemos web sites acessíveis? Algumas hipóteses:
  16. 16. Desconhecimento
  17. 17. http://www.seosmarty.com/impossible-captcha-it-doesnt-really-matter-if-you-are-human-or-not/
  18. 18. http://www.seosmarty.com/impossible-captcha-it-doesnt-really-matter-if-you-are-human-or-not/
  19. 19. http://www.seosmarty.com/impossible-captcha-it-doesnt-really-matter-if-you-are-human-or-not/
  20. 20. http://www.seosmarty.com/impossible-captcha-it-doesnt-really-matter-if-you-are-human-or-not/
  21. 21. http://www.seosmarty.com/impossible-captcha-it-doesnt-really-matter-if-you-are-human-or-not/
  22. 22. Preconceito
  23. 23. Público alvo
  24. 24. Játestouoseusite?
  25. 25. Foto: Flickr.com - Baddog_
  26. 26. Beneficia pessoas com deficiência
  27. 27. Acessibilidade na web: A quem se destina? Acessibilidade é para todos !
  28. 28. Você acha que tem controle sobre o seu usuário?
  29. 29. NÃO
  30. 30. Você não tem controle sobre o seu usuário
  31. 31. É muito caro!O prazo é curto!Não sei fazer!Dá muito trabalho!
  32. 32. Acessibilidade deve fazer parte da rotina
  33. 33. Web Content Accessibility Guidelines http://www.w3.org/TR/WCAG/
  34. 34. Princípio 1: Perceptível Princípio 2: Operável Princípio 3: Compreensível Princípio 4: Robusto Princípios do WCAG
  35. 35. 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
  36. 36. 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
  37. 37. 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
  38. 38. Landmark roles são suportadas em • JAWS 10 • NVDA 2010.1+ • VoiceOver no iPhone IOS4.
  39. 39. 1. As WCAG utilizam a semântica do HTML para tornar o conteúdo acessível 2. ARIA são atributos que conseguem mudar a semântica dos elementos para tornar o conteúdo acessível
  40. 40. Quatro regras de WAI-ARIA
  41. 41. Regra nº 1 Não use ARIA (prefira os elementos semânticos do HTML)
  42. 42. Regra nº 2 Não mude a semântica dos elementos (apenas se você realmente precisar)
  43. 43. Não faça isso: <h1 role=button>heading button</h1>
  44. 44. Não faça isso: <h1 role=button>heading button</h1> Faça isso: <h1> <button>heading button</button> </h1>
  45. 45. Não faça isso: <h1 role=button>heading button</h1> Faça isso: <h1> <button>heading button</button> </h1> Se não puder usar o elemento correto, faça isso: <h1> <span role=button>heading button</span> </h1>
  46. 46. Regra nº 3 Todos os controles interativos devem ser acessíveis via teclado
  47. 47. Regra nº 4 Não use role="presentation" ou aria-hidden="true“ em um elemento de foco visível
  48. 48. Situação 1: Uma galeria de imagens
  49. 49. <img src=“starwars.jpg” alt=“Foto de Luke Skywalker no filme Star Wars – O império contra ataca”>
  50. 50. reinaldoferraz.com.br
  51. 51. Situação 2: Esconder conteúdo de um leitor de tela
  52. 52. <a href=“#” role="presentation"> <img src=“starwars.jpg” alt=“Foto de Luke Skywalker no filme Star Wars – O império contra ataca”> </a> <a href=“#” aria-hidden="true“> <img src=“starwars.jpg” alt=“Foto de Luke Skywalker no filme Star Wars – O império contra ataca”> </a>
  53. 53. <p aria-hidden="true“> Conteúdo que deve estar escondido não deve permitir foco via teclado. Utilizar role presentation somente tira a semântica do elemento. </p>
  54. 54. Formas de ocultar elementos e efeitos na acessibilidade CSS Efeito na tela Efeito na acessibilidade visibility:hidden; O elemento fica oculto, mas continua a ocupar o espaço que normalmente ocuparia O conteúdo é ignorado pelos leitores de tela display:none; O elemento fica oculto e não ocupa espaço O conteúdo é ignorado pelos leitores de tela height: 0; width: 0; overflow: hidden; O elemento fica oculto e não ocupa espaço O conteúdo é ignorado pelos leitores de tela text-indent: -999em; O conteúdo é movido para "fora da tela", não sendo mais visível, mas links podem ser focalizados de maneira imprevisível Os leitores de tela acessam o conteúdo, mas somente texto e elementos inline position: absolute; left: - 999em; O conteúdo é removido de sua posição, não ocupando espaço e é movido para "fora da tela", ficando oculto Os leitores de tela acessam o conteúdo Fonte: http://emag.governoeletronico.gov.br/cursodesenvolvedor/desenvolvimento-web/praticas-web-acessivel-apresentacao-design.html
  55. 55. Exemplos
  56. 56. Situação 3: Uma página cheia de destaques
  57. 57. <a href=“#contents”>Saltar</a> <elemento id=“contents”>
  58. 58. <h1>...</h1> <h2>...</h2> <h3>...</h3> <h2>...<h2> <h3>...</h3> <h4>...</h4> <h2>...</h2> <h3>...</h3>
  59. 59. html5accessibility.com
  60. 60. <input type=“email”> <input type=“url”> <input type=“tel”>
  61. 61. Exemplos
  62. 62. Situação 4: Menu e Submenus
  63. 63. CSS: a:hover a:focus JavaScript: onmouseover="#" onfocus="#" onmouseout="#" onblur="#"
  64. 64. Exemplos
  65. 65. Situação 5: Formulários
  66. 66. <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>
  67. 67. <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>
  68. 68. <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>
  69. 69. <fieldset> <legend> Identifique-se! </legend> <label for="text"> Nome</label> <input id="text" type=“range" aria-describedby="comp"> <p id="comp"> Preencha seu nome de verdade, viu?</p> </fieldset>
  70. 70. html5accessibility.com
  71. 71. Exemplos
  72. 72. Situação 6: Utilização de cores
  73. 73. Visão normal
  74. 74. Protanopia (Deficiências em vermelho)
  75. 75. Deuteranopia (Deficiências em verde)
  76. 76. Tritanopia (Deficiências em azul)
  77. 77. Acromatopsia (Deficiências todas as cores)
  78. 78. Exemplos
  79. 79. Situação 7: Múltiplos idiomas
  80. 80. Exemplos
  81. 81. Situação 8: Elementos dinâmicos
  82. 82. <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>
  83. 83. Live Regions
  84. 84. Exemplos
  85. 85. 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
  86. 86. http://premio.ceweb.br/
  87. 87. Obrigado reinaldo@nic.br @reinaldoferraz “Se o seu site não está pronto para receber TODAS as pessoas, o site é deficiente.” Adaptado da arq. Thais Frota

×