Tweet
Tweet

Slide 1

Slide 1 text

Ferramentas para a11y

Slide 2

Slide 2 text

BRUNO PULIS @obrunopulis / brunopulis.com ● Formada em Sistemas para Internet pelo Pitágoras; ● Evangelista de a11y e web standards; ● Co-fundador do Minas Dev; ● Star Wars lover e apaixonado por Javascript; ● QA Analyst na Monetizze.

Slide 3

Slide 3 text

Acessibilidade web significa que TODOS podem usar a Web." Chris DeMars

Slide 4

Slide 4 text

A web não é uma barreira para pessoas com deficiência, ela é a .solução.". https://webaim.org/articles/pour

Slide 5

Slide 5 text

● Maior valor agregado à empresa e fortalecimento da sua marca; ● Melhoria de performance e de usabilidade, criando vantagem competitiva; ● Ampliação e diversificação de público; ● Leis regulamentadoras; ● Melhoria em questões de SEO; ● Facilidade e menor custo de manutenção; ● Aumento de compatibilidade com dispositivos, plataformas, sistemas e navegadores. BENEFÍCIOS

Slide 6

Slide 6 text

PADRÕES E LEIS

Slide 7

Slide 7 text

● Lei Brasileira de Inclusão (LBI); ● Declaração dos Direitos das Pessoas com Deficiência (ONU); ● WCAG. PADRÕES E LEIS

Slide 8

Slide 8 text

ESTATÍSTICAS

Slide 9

Slide 9 text

45 milhões de pessoas afetadas pela falta de acessibilidade no Brasil. Fonte: CENSO IBGE/2010

Slide 10

Slide 10 text

23,9% da população brasileira sofre algum tipo de deficiência. Fonte: CENSO IBGE/2010

Slide 11

Slide 11 text

Foi realizada uma pesquisa em fevereiro, pela WebAIM testando 1 milhão de home pages dos principais sites da web. Na amostragem, os resultados não foram animadores. Fonte: https://webaim.org/projects/million

Slide 12

Slide 12 text

59.653.607 erros encontrados, uma média de 59,6 erros por página.

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

97,8% das páginas possuía alguma falha de acordo com o WCAG 2.0

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

Tipo de falha WCAG # de páginas iniciais % em páginas iniciais Baixo contraste 852,868 85.3% Texto alternativo em falta 679,964 68% Links vazios 581,408 58.1% Labels ausentes em forms 528,482 52.8% Idioma no HTML ausente 329,612 33.1% Botões vazios 250,367 25%

Slide 17

Slide 17 text

Muito trabalho deve ser feito para que a Web seja disponível sem barreiras. Apesar do número de erros serem gritantes, a maioria deles são .simples correções..

Slide 18

Slide 18 text

Suíte de testes

Slide 19

Slide 19 text

Colorblinding

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

No content

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

No content

Slide 26

Slide 26 text

No content

Slide 27

Slide 27 text

Access Monitor

Slide 28

Slide 28 text

Access Monitor

Slide 29

Slide 29 text

Access Monitor

Slide 30

Slide 30 text

No content

Slide 31

Slide 31 text

axe Um kit de ferramentas de acessibilidade, construído com as regras do WCAG É simples de usar, não requer conhecimentos avançados de acessibilidade e não desperdiça seu tempo com falsos positivos.

Slide 32

Slide 32 text

axe

Slide 33

Slide 33 text

axe Chrome Extension

Slide 34

Slide 34 text

No content

Slide 35

Slide 35 text

Axe Pro

Slide 36

Slide 36 text

axe for Android Apps

Slide 37

Slide 37 text

No content

Slide 38

Slide 38 text

npm install -D cypress cypress-axe axe-core

Slide 39

Slide 39 text

Color Contrast Analyzer

Slide 40

Slide 40 text

DICAS

Slide 41

Slide 41 text

● Utilize headings com ordem lógica (h1,h2,h3); ● Imagens com descrição alternativa; ● Evite usar "saiba mais", "clique aqui" em links; ● Navegar somente com o teclado, comportamento deve ser o mesmo do mouse. DICAS DE ACESSIBILIDADE

Slide 42

Slide 42 text

Awesome a11y https://github.com/brunopulis/awesome-a11y

Slide 43

Slide 43 text

No content

Slide 44

Slide 44 text

No content

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

OBRIGADO! @obrunopulis