Componentes: o lado sombrio que não te contaram

Componentes: o lado sombrio que não te contaram

Com o hype da utilização de componentes, nota-se, uma carência no quesito de acessibilidade em componentes, essa talk visa mostrar referências e boas práticas para supri-lás.

590371c05fc56adf612fd91ea509cf74?s=128

Bruno Pulis

October 21, 2017
Tweet

Transcript

  1. Componentes: o lado sombrio que não te contaram

  2. Bruno Pulis @brunopulis

  3. Belo Horizonte

  4. None
  5. Componentes do latim componens, juntar.

  6. funcionalidades
 unidade independente
 integração Component Based 
 Development

  7. None
  8. Mas e a acessibilidade?

  9. 45 milhões de pessoas são afetadas diretamente pela falta de

    acessibilidade na web. Fonte: IBGE Censo 2010
  10. Projetamos experiências
 em sua maioria frustantes

  11. Lei Brasileira de Inclusão (LBI) É 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
  12. Web Content Accessibility Guidelines
 (WCAG) 
 São recomendações que tem

    objetivo de tornar o conteúdo na Web mais acessível.
  13. Aria is comming…

  14. WAI-ARIA Atributos que alteram a semântica dos elementos HTML para

    tornar o conteúdo acessível. 
 
 Divididos em duas categorias: 
 • Roles • State/Properties
  15. None
  16. Roles Define o tipo de elemento que o usuário está

    interagindo. States/Properties Define o estado e propriedades do elemento que está sendo manipulado.
  17. None
  18. None
  19. github.com/brunopulis/devfestne2k17

  20. Vantagens de uso: • Curva de aprendizado baixa; • Contribuir

    para uma aplicação SPA; • Atributos inseridos no HTML, sem complexidade.
  21. Componentes com A11y

  22. None
  23. None
  24. None
  25. React-A11y github.com/reactjs/react-a11y

  26. React Axe github.com/dylanb/react-axe

  27. mwpt.com.br/movimento

  28. None
  29. a11yproject.com

  30. a11yweekly.com

  31. @emplums “Estamos criando deficiências se não estivermos criando a web

    para todos.”
  32. None
  33. Obrigado! @brunopulis