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.
Uso acessível
O CUMPRIMENTO DAS PREMISSAS NA WEB CONTEMPORÂNEA
Por Gabriel Luiz Ramos
Para quem você desenvolve?
“Acessibilidade é tudo sobre
a necessidade das pessoas.”
Diego Eis
Dados Estatísticos
Pessoas com deficiências no Brasil
24% da população = 45.623.910 pessoas
Fonte: Censo 2010
No mundo
Mai...
Antes de tudo:
-Web: qual a premissa?
-Informação -> acesso -> usuário
Usabilidade
-Utilidade;
-Usabilidade;
-Design de Interação (UI);
-Experiência do Usuário (UX).
Como você acessa?
-Em casa;
-No trabalho;
-Na escola;
-No trânsito (ônibus, carro, avião, metrô).
Componentização de acesso
-Teclado?
-Mouse?
-Boa resolução?
-Boa conexão?
-Tempo?
-Boa geladeira?
(nem tão) pequenos detalhes
Todos possuem necessidades especiais
Cegueira, daltonismo, deficiência auditiva, deficiência motora...
Inclusive você!
Lei nº 13.146, de 6 de julho de 2015
Art. 63. É obrigatória a acessibilidade nos sítios da internet [...] para
uso da pess...
Seu serviço nunca vai ser perfeito para
todos
Alguém disse flash?
Fundamentos
Graceful Degradation x Progressive Enhancement
-Fault Tolerance: Tolerância a erros desde o início;
“Texto é u...
Chega de Blábláblá
-Conteúdo: HTML Semântico e Correto;
-Formatação: CSS e estilo;
-Comportamento: Javascript / jQuery e a...
Escrita
-Código limpo (se possível, compressão);
-Organização em arquivos: melhora no
desempenho, processamento e evita re...
-Semântica: div?
O próprio DOCTYPE e a declaração de tagsDiego Eis
Tabelas? Sim!
Não para estrutura Sim para diagramação de dados
FALLBACKS
Estrutura representativa para utilizações
“menos abastadas”
Tratamento de erro para visualização de conteúdo
FALLBACKS
Conditional Comments:
<!--[if IE 6]>
De acordo com comentário, esse navegador é IE 6
<![endif]-->
<!--[if gte IE...
FALLBACKS
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type...
Novidades como: Bordas, gradientes (degradês), rotações, implementações
3D, filtros.
Mas e a acessibilidade?
- Prefixos ht...
Interações:
FALLBACKS
Eventos:
- onMouseOver / onMouseOut
- onFocus / onBlur / onClick
Aplicação de estilos:
- a:hover
- a...
FALLBACKS
E agora? Será que tá habilitado?
É realmente necessário?
Pesquisa realizada pela WebAIM em 2012 indicou que 98,6...
FALLBACKS
<noscript>
<style>
.no-js{ display:none !important;}
</style>
</noscript>
Script download: Async x Defer
FALLBACKS
Modernizr: https://modernizr.com/
Componentização/Reutilização
(web components)
Polymer: https://www.polymer-project.org/1.0/
Atributos
Atributos REL e ALT
<img src=“imagem.jpg” alt=“Planetas”>
<a href=“http://link.com.br rel=“valor”>link</a>
<p ti...
Atributos
Atributo tabindex
<nav>
<ul>
<li><a href="#" tabindex="1">Link 1</a></li>
<li><a href="#" tabindex="2">Link 2</a...
WAI-ARIA
Extensões (atributos) para auxiliar a semântica, a
interação e a navegação de leitores de tela em
aplicações web....
WAI-ARIA
- Widget: alert, button, tab...
- Document Structure: list, listitem, img...
- Landmarks: banner, main, navigatio...
WAI-ARIA
Roles:
Breve aplicação
WAI-ARIA
States and Properties (Atributos “aria-[...]=”)
- aria-labelledby, aria-haspopup, aria-hidden, aria-
selected...
...
WAI-ARIA
States and properties, breve aplicação:
<ul role=“navigation”>
<li><a role=“tab” tabindex=“1” aria-selected=“true...
WAI-ARIA
Precauções:
<div role=“button”>ativar</div>
<button role=“button”>ativar</section>
Prefira os elementos semântico...
Adaptive Web Design
Fluido, responsivo, adaptativo:
A entrega da informação ajustada ao meio de acesso.
Cor, contraste, imagem, mensagem...
Do usuário, para o usuário
Acessibilidade como algo
cotidiano, do início ao fim
http:/...
Muito obrigado!
Uso acessivel - O cumprimento das premissas na web contemporânea
Upcoming SlideShare
Loading in …5
×

Uso acessivel - O cumprimento das premissas na web contemporânea

2,828 views

Published on

Apresentação sobre conceitos gerais de acessibilidade na web com a integração de tecnologias front-end.

Published in: Internet
  • 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 } .........................................................................................................................
       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
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. 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
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. 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
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. 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

Uso acessivel - O cumprimento das premissas na web contemporânea

  1. 1. Uso acessível O CUMPRIMENTO DAS PREMISSAS NA WEB CONTEMPORÂNEA Por Gabriel Luiz Ramos
  2. 2. Para quem você desenvolve? “Acessibilidade é tudo sobre a necessidade das pessoas.” Diego Eis
  3. 3. Dados Estatísticos Pessoas com deficiências no Brasil 24% da população = 45.623.910 pessoas Fonte: Censo 2010 No mundo Mais de 1 Bilhão de pessoas Fonte: ONU
  4. 4. Antes de tudo: -Web: qual a premissa? -Informação -> acesso -> usuário
  5. 5. Usabilidade -Utilidade; -Usabilidade; -Design de Interação (UI); -Experiência do Usuário (UX).
  6. 6. Como você acessa? -Em casa; -No trabalho; -Na escola; -No trânsito (ônibus, carro, avião, metrô).
  7. 7. Componentização de acesso -Teclado? -Mouse? -Boa resolução? -Boa conexão? -Tempo? -Boa geladeira?
  8. 8. (nem tão) pequenos detalhes
  9. 9. Todos possuem necessidades especiais Cegueira, daltonismo, deficiência auditiva, deficiência motora... Inclusive você!
  10. 10. Lei nº 13.146, de 6 de julho de 2015 Art. 63. É obrigatória a acessibilidade nos sítios da internet [...] 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
  11. 11. Seu serviço nunca vai ser perfeito para todos Alguém disse flash?
  12. 12. Fundamentos Graceful Degradation x Progressive Enhancement -Fault Tolerance: Tolerância a erros desde o início; “Texto é universal”
  13. 13. Chega de Blábláblá -Conteúdo: HTML Semântico e Correto; -Formatação: CSS e estilo; -Comportamento: Javascript / jQuery e ações. -Front-End:
  14. 14. Escrita -Código limpo (se possível, compressão); -Organização em arquivos: melhora no desempenho, processamento e evita reflow e repaint.
  15. 15. -Semântica: div? O próprio DOCTYPE e a declaração de tagsDiego Eis
  16. 16. Tabelas? Sim! Não para estrutura Sim para diagramação de dados
  17. 17. FALLBACKS Estrutura representativa para utilizações “menos abastadas” Tratamento de erro para visualização de conteúdo
  18. 18. FALLBACKS Conditional Comments: <!--[if IE 6]> De acordo com comentário, esse navegador é IE 6 <![endif]--> <!--[if gte IE 8]> De acordo com comentário, esse navegador é IE 8 ou superior <![endif]--> <!--[if lt IE 9]> De acordo com comentário, esse navegador é IE 9 ou inferior <![endif]--> <!--[if !IE]> De acordo com comentário, esse navegador não é IE <![endif]--> http://www.quirksmode.org/css/condcom.html
  19. 19. FALLBACKS <video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> Your browser does not support the video tag. </video> W3C
  20. 20. Novidades como: Bordas, gradientes (degradês), rotações, implementações 3D, filtros. Mas e a acessibilidade? - Prefixos http://docs.emmet.io/css-abbreviations/vendor-prefixes/ -moz-border-radius: 12px; -webkit-border-radius: 12px; -o-border-radius: 12px; -ms-border-radius: 12px; border-radius: 12px; - Para Firefox e navegadores com motor Mozilla; FALLBACKS - Safari, Chrome e navegadores com motor Webkit; - Opera; - Internet Explorer; - Propriedade a ser aceita.
  21. 21. Interações: FALLBACKS Eventos: - onMouseOver / onMouseOut - onFocus / onBlur / onClick Aplicação de estilos: - a:hover - a:focus
  22. 22. FALLBACKS E agora? Será que tá habilitado? É realmente necessário? Pesquisa realizada pela WebAIM em 2012 indicou que 98,6% dos usuários de leitores de tela navegam com javascript habilitado http://webaim.org/techniques/javascript/
  23. 23. FALLBACKS <noscript> <style> .no-js{ display:none !important;} </style> </noscript>
  24. 24. Script download: Async x Defer
  25. 25. FALLBACKS Modernizr: https://modernizr.com/
  26. 26. Componentização/Reutilização (web components) Polymer: https://www.polymer-project.org/1.0/
  27. 27. Atributos Atributos REL e ALT <img src=“imagem.jpg” alt=“Planetas”> <a href=“http://link.com.br rel=“valor”>link</a> <p title=“informações”>essas são as informações</p>
  28. 28. Atributos Atributo tabindex <nav> <ul> <li><a href="#" tabindex="1">Link 1</a></li> <li><a href="#" tabindex="2">Link 2</a></li> <li><a href="#" tabindex="3">Link 3</a></li> <li><a href="#" tabindex="4">Link 4</a></li> <li><a href="#" tabindex="5">Link 5</a></li> </ul> </nav>
  29. 29. WAI-ARIA Extensões (atributos) para auxiliar a semântica, a interação e a navegação de leitores de tela em aplicações web. http://www.w3.org/TR/wai-aria/ http://www.w3.org/TR/aria-in-html/
  30. 30. WAI-ARIA - Widget: alert, button, tab... - Document Structure: list, listitem, img... - Landmarks: banner, main, navigation, form, search, complementary, contentinfo... Tipos de “roles” http://www.w3.org/TR/wai-aria/roles
  31. 31. WAI-ARIA Roles: Breve aplicação
  32. 32. WAI-ARIA States and Properties (Atributos “aria-[...]=”) - aria-labelledby, aria-haspopup, aria-hidden, aria- selected... http://www.w3.org/TR/wai-aria/states_and_properties
  33. 33. WAI-ARIA States and properties, breve aplicação: <ul role=“navigation”> <li><a role=“tab” tabindex=“1” aria-selected=“true”>Aba 1</a></li> <li><a role=“tab” tabindex=“2”>Aba 2</a></li> </ul> <section role=“main”> <div role=“tabpanel” aria-labelledby=“tab1”> Conteudo </div> </section>
  34. 34. WAI-ARIA Precauções: <div role=“button”>ativar</div> <button role=“button”>ativar</section> Prefira os elementos semânticos do próprio HTML.
  35. 35. Adaptive Web Design Fluido, responsivo, adaptativo: A entrega da informação ajustada ao meio de acesso.
  36. 36. Cor, contraste, imagem, mensagem... Do usuário, para o usuário Acessibilidade como algo cotidiano, do início ao fim http://www.w3.org/Translations/WCAG20-pt-br/
  37. 37. Muito obrigado!

×