Tweet
Tweet

Slide 1

Slide 1 text

Componentes: o lado sombrio que não te contaram

Slide 2

Slide 2 text

Bruno Pulis @brunopulis

Slide 3

Slide 3 text

Belo Horizonte

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

Componentes do latim componens, juntar.

Slide 6

Slide 6 text

funcionalidades
 unidade independente
 integração Component Based 
 Development

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

Mas e a acessibilidade?

Slide 9

Slide 9 text

45 milhões de pessoas são afetadas diretamente pela falta de acessibilidade na web. Fonte: IBGE Censo 2010

Slide 10

Slide 10 text

Projetamos experiências
 em sua maioria frustantes

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

Web Content Accessibility Guidelines
 (WCAG) 
 São recomendações que tem objetivo de tornar o conteúdo na Web mais acessível.

Slide 13

Slide 13 text

Aria is comming…

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

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.

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

github.com/brunopulis/devfestne2k17

Slide 20

Slide 20 text

Vantagens de uso: • Curva de aprendizado baixa; • Contribuir para uma aplicação SPA; • Atributos inseridos no HTML, sem complexidade.

Slide 21

Slide 21 text

Componentes com A11y

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

React-A11y github.com/reactjs/react-a11y

Slide 26

Slide 26 text

React Axe github.com/dylanb/react-axe

Slide 27

Slide 27 text

mwpt.com.br/movimento

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

a11yproject.com

Slide 30

Slide 30 text

a11yweekly.com

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

No content

Slide 33

Slide 33 text

Obrigado! @brunopulis