Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

A saga dos 12 tópicos de acessibilidade na Web

2,999 views

Published on

Palestra sobre acessibilidade na Web e WAI-ARIA na BrazilJS2015.

Published in: Internet
  • DOWNLOAD THAT BOOKS INTO AVAILABLE FORMAT (2019 Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m77EgH } ......................................................................................................................... Download Full EPUB Ebook here { http://bit.ly/2m77EgH } ......................................................................................................................... Download Full doc Ebook here { http://bit.ly/2m77EgH } ......................................................................................................................... Download PDF EBOOK here { http://bit.ly/2m77EgH } ......................................................................................................................... Download EPUB Ebook here { http://bit.ly/2m77EgH } ......................................................................................................................... Download doc Ebook here { http://bit.ly/2m77EgH } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book that can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer that is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBooks .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story That Helped Ignite a Movement,-- Atomic Habits: An Easy & Proven Way to Build Good Habits & Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money That the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths that Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • If you want to download or read this book, Copy link or url below in the New tab ......................................................................................................................... DOWNLOAD FULL PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Doc Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • ..............ACCESS that WEBSITE Over for All Ebooks ................ ......................................................................................................................... DOWNLOAD FULL PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Full EPUB Ebook here { http://bit.ly/2m6jJ5M } .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • ..............ACCESS that WEBSITE Over for All Ebooks ................ ......................................................................................................................... DOWNLOAD FULL PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Full EPUB Ebook here { http://bit.ly/2m6jJ5M } .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THI5 BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Full EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download doc Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

A saga dos 12 tópicos de acessibilidade na Web

  1. 1. A saga dos 12 tópicos de acessibilidade reinaldoferraz
  2. 2. Razões
  3. 3. 24% 45.623.910 pessoas Censo 2010 Fonte: http://www.ibge.gov.br/home/estatistica/populacao/censo2010/resultados_preliminares/default_resultados_preliminares.shtm
  4. 4. 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
  5. 5. 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
  6. 6. A Web foi feita para as pessoas
  7. 7. Andy Walker
  8. 8. Leonardo Gleisson
  9. 9. Ivy Bean
  10. 10. Neil Harbisson http://www.youtube.com/watch?v=CvPOh0p9cf0
  11. 11. Leitores de tela e JavaScript
  12. 12. • Navegação • Conteúdo escondido • Falta de controle pelo usuário • Confusão/desorientação Ótimo artigo sobre esse tópico: http://webaim.org/techniques/javascript/
  13. 13. Web Aim Screen Reader Survey Fonte: http://webaim.org/projects/screenreadersurvey5/#javascript Pesquisa feita com 1465 usuários de software leitor de tela em Janeiro de 2014
  14. 14. Web Aim Screen Reader Survey Fonte: http://webaim.org/projects/screenreadersurvey5/#javascript 97.6% mantém o JavaScript habilitado
  15. 15. JAWS 16 - Suporte a MathML (FF e IE) - Lê cores de fundo (FF) - Maior suporte a ARIA NVDA 2015.2 - Suporte aos principais landmarks de ARIA ORCA / VoiceOver - Suporte a Live Regions
  16. 16. WCAG e WAI-ARIA
  17. 17. 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
  18. 18. Ativar links
  19. 19. Nem todo mundo usa mouse
  20. 20. <a href="menu.php" onmouseover="swapImageOn('menu')" onfocus="swapImageOn('menu')" onmouseout="swapImageOff('menu')" onblur="swapImageOff('menu')"> <img id="menu" src="menu_off.gif" alt="Menu" /> </a> a:hover a:focus
  21. 21. Canvas e Acessibilidade
  22. 22. <canvas id="x" width="300" height="300"></canvas>
  23. 23. <canvas id="x" width="300" height="300"> <a href="#“> Desenho de uma estrela amarela feita ao pressionar o botão </a> </canvas>
  24. 24. <canvas id="x" width="300" height="300"> <h2>Keyboard controls</h2> <a href=“#” id=“up”>Up</a> < a href=“#” id=“down”>Down</a> < a href=“#” id=“left”>Left</a> < a href=“#” id=“right”>Right</a> </canvas>
  25. 25. <canvas id="x" width="300" height="300"> <h2>Keyboard controls</h2> <a href=“#” id=“up”>Up</a> < a href=“#” id=“down”>Down</a> < a href=“#” id=“left”>Left</a> < a href=“#” id=“right”>Right</a> </canvas> <p aria-live="polite">Status: <span id=“move">moving</span></p>
  26. 26. Quatro regras de WAI-ARIA
  27. 27. Regra nº 1 Não use ARIA (prefira os elementos semânticos do HTML)
  28. 28. Regra nº 2 Não mude a semântica dos elementos (apenas se você realmente precisar)
  29. 29. Não faça isso: <h1 role=button>heading button</h1>
  30. 30. Não faça isso: <h1 role=button>heading button</h1> Faça isso: <h1> <button>heading button</button> </h1>
  31. 31. 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>
  32. 32. Regra nº 3 Todos os controles interativos devem ser acessíveis via teclado
  33. 33. Regra nº 4 Não use role="presentation" ou aria-hidden="true“ em um elemento de foco visível
  34. 34. Web components acessível
  35. 35. <toolbar > <toolbar-button> Cólera do Dragão </toolbar-button> </toolbar>
  36. 36. <toolbar > <button> Cólera do Dragão </button> </toolbar>
  37. 37. • Widget Roles alert, button, checkbox, menuitem, progressbar, tab, tabpanel... • Document Structure img, list, listitem, presentation, region • Landmark Roles application, banner, complementary, contentinfo, form, main, navigation, search Fonte: http://www.w3.org/TR/wai-aria/roles
  38. 38. <toolbar role=“toolbar”> <toolbar-button role=“button” tabindex="0“ > Cólera do Dragão Ativado! </toolbar-button> </toolbar>
  39. 39. • Widget Attributes aria-checked, aria-disabled, aria-pressed, aria-valuemax, aria-valuenow... Fonte: http://www.w3.org/TR/wai-aria/states_and_properties
  40. 40. <toolbar role=“toolbar”> <toolbar-button role=“button” tabindex="0“ aria-pressed=“true”> Cólera do Dragão Ativado! </toolbar-button> </toolbar>
  41. 41. https://www.polymer-project.org/0.5/articles/accessible-web-components.html
  42. 42. Drag and Drop
  43. 43. http://www.sitepoint.com/accessibility-in-modern-interfaces/ https://github.com/jsprodotcom/source/blob/master/accessibilit y-in-modern-interfaces.zip
  44. 44. aria-dropeffect copy move link execute popup none aria-grabbed true false undefined http://www.w3.org/WAI/PF/aria-practices/#dragdrop
  45. 45. Conteúdo dinâmico
  46. 46. • aria-atomic: Indica que a TA apresentará toda área (ou partes pré definidas) que mudou • aria-live: Determina a prioridade da leitura pela TA (off, polite, assertive) • aria-busy: Qualquer mudança em um elemento com aria-busy=“true” não será lido até que o atributo mude para “false”
  47. 47. http://accessibility.athena-ict.com/aria/examples/live3.shtml
  48. 48. <p id="clock" aria-live="off">16:03:14</p> <div class="alerts" aria-hidden="false" id="myAlert" aria-live="polite"> Get back to work</div> http://accessibility.athena-ict.com/aria/examples/live3.shtml Para os outros alertas aria-atomic="false"
  49. 49. <span id="messages" aria-live="polite" > Fulano adicionou você como amigo </span>
  50. 50. Widgets
  51. 51. Widget Roles alert, alertdialog, button, checkbox, dialog, gridcell, link, log, marquee, menuitem, menuitemcheckbox, menuitemradio, option, progressbar, radio, scrollbar, slider, spinbutton, status, tab, tabpanel, textbox, timer, tooltip, treeitem combobox, grid, listbox, menu, menubar, radiogroup, tablist, tree, treegrid
  52. 52. Fonte: http://oaa-accessibility.org/example/42/ role=“application” role=“tree” role=“treeitem” aria-expanded=“false" aria-expanded="true" role=“treeitem”
  53. 53. <a href="#“ id="handle_zoomSlider“ role="slider“ aria-orientation="vertical“ aria-valuemin="0“ aria-valuemax="17“ aria-valuetext="14“ aria-valuenow="14" > <span>11</span> </a>
  54. 54. SVG e acessibilidade
  55. 55. <svg xmlns="http://www.w3.org/2000/svg> <path id="svg_1" d="m149.255,218.57251l119.008,0l36.77844,- 113.06026l36.77902,113.06026l119.00964,0l- 96.28226,69.87662l36.77859,113.06311l-96.285,-69.88104l- 96.28284,69.88104l36.77907,-113.06311l-96.28267,- 69.87662l0,0z" stroke-width="5" stroke="#000000" fill="yellow"/> </svg>
  56. 56. <svg xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Estrela em ARIA"> <title>Estrela com título</title> <desc>Teste do elemento de descrição</desc> <path id="svg_1" d="m149.255,218.57251l119.008,0l36.77844,- 113.06026l36.77902,113.06026l119.00964,0l- 96.28226,69.87662l36.77859,113.06311l-96.285,-69.88104l- 96.28284,69.88104l36.77907,-113.06311l-96.28267,- 69.87662l0,0z" stroke-width="5" stroke="#000000" fill="yellow"/> </svg>
  57. 57. Browser / Leitor de tela Aria-label: Sim Title: Não Desc: Sim Aria-label: Sim Title: Não Desc: Não Aria-label: Sim Title: Não Desc: Sim Aria-label: Sim Title: Não Desc: Não Aria-label: Sim Title: Não Desc: Não Aria-label: Sim Title: Não Desc: Não Aria-label: Sim Title: Não Desc: Não Aria-label: Não Title: Sim Desc: Sim Aria-label: Sim Title: Não Desc: Não
  58. 58. Além do código
  59. 59. - 1.4.1 Utilização de Cores: A cor não é utilizada como o único meio visual de transmitir informações, indicar uma ação, pedir uma resposta ou distinguir um elemento visual. - 1.4.3 Contraste (Mínimo): A apresentação visual de texto e imagens de texto tem uma relação de contraste de, no mínimo, 4.5:1 - 1.4.4 Redimensionar texto: Exceto para legendas e imagens de texto, o texto pode ser redimensionado sem tecnologia assistiva até 200 por cento sem perder conteúdo ou funcionalidade. - 2.3.2 Três Flashes: As páginas web não incluem qualquer conteúdo que pisca mais de três vezes no período de um segundo.
  60. 60. Documentação importante
  61. 61. WCAG 2.0 http://www.w3.org/TR/WCAG20/ http://www.w3.org/Translations/WCAG20-pt-br/ WAI-ARIA 1.0 http://www.w3.org/TR/wai-aria/ http://www.w3.org/TR/wai-aria/roles http://www.w3.org/TR/wai-aria/states_and_properties http://www.w3.org/TR/aria-in-html/ WebAim - Accessible /JavaScript http://webaim.org/techniques/javascript/ http://webaim.org/blog/accessibility-lipstick-on-a-usability-pig/
  62. 62. Não adianta maquiar o porco
  63. 63. Aplicar técnicas de acessibilidade em um site com usabilidade ruim é como passar batom em um porco. Não importa o quanto você passe, ele continuará sendo um porco. Fonte: http://webaim.org/blog/accessibility-lipstick-on-a-usability-pig/
  64. 64. Aplicar técnicas de acessibilidade em um site com usabilidade ruim é como passar batom em um porco. Não importa o quanto voce passe, ele continuará sendo um porco. Não faça da ARIA o seu batom. Fonte: http://webaim.org/blog/accessibility-lipstick-on-a-usability-pig/
  65. 65. Cupom de desconto BrazilJS CDW1375001 http://conferenciaweb.w3c.br
  66. 66. Obrigado reinaldo@nic.br @reinaldoferraz w3cbrasil@nic.br @w3cbrasil Facebook.com/W3CBrasil

×