Incluíndo a acessibilidade no desenvolvimento Web

Slide 1

Slide 1 text

Desenvolvimento Acessível

Slide 2

Slide 2 text

Quem sou 2

Slide 3

Slide 3 text

Quem sou • Desenvolvedor Frontend desde 2010; • Tecnólogo em Sistemas para Internet pela Faculdade Pitágoras; • Especialista em acessibilidade; • Idealizador do projeto Acessibilidade Urbana; • Colaborador e integrante do Minas Dev; • Fundador do Frontend Beagá; • Administrador do Compass Brasil, Grunt Brasil. 3

Slide 4

Slide 4 text

Slide 5

Slide 5 text

Minas Dev É uma comunidade de desenvolvedores que promovem o diálogo e troca de conhecimentos. Alguns projetos do Minas Dev: • Acessibilidade Urbana • Dev In Company • Dev In University • Minas Dev Beer 5

Slide 6

Slide 6 text

O que é acessibilidade? Acessibilidade é o direito de usuários acessarem a rede de informações, mas também o direito de eliminação de barreiras arquitetônicas, disponibilidade de comunicação, acesso físico, equipamentos e programas adequados, conteúdo e apresentação da informação em formatos alternativos. “ 6

Slide 7

Slide 7 text

Público Alvo

Slide 8

Slide 8 text

Público Alvo • Você sem deficiência alguma; • Deficiência visual; • Deficiência Motora; • Deficiência Auditiva; • Paralisia Cerebral; • Tetraplegia; 8

Slide 9

Slide 9 text

Público Alvo • Pessoas com baixa visão; • Idosos; • Crianças; • Alguém que sofreu algum acidente; • Deficiência Cognitiva (dislexia, deficit de atenção). 9

Slide 10

Slide 10 text

Público Alvo Logo, concluímos que todos, em algum momento, precisarão de mais acessibilidade no seu dia a dia, enquanto alguns, necessitam dela todos os dias para realização de tarefas comuns. 10

Slide 11

Slide 11 text

Porquê acessibilidade na Web?

Slide 12

Slide 12 text

De acordo com pesquisa 1 bilhão de pessoas possuem algum tipo de deficiência no mundo. Estimativa aproximada. Fonte: ONU. 12

Slide 13

Slide 13 text

45.623.910 de pessoas ... com deficiência no Brasil. 24,9% da população. Fonte: Censo 2010. 13

Slide 14

Slide 14 text

Leis de acessibilidade 14

Slide 15

Slide 15 text

Leis de acessibilidade 1. Decreto 5.296 de 2 Dezembro de 2004; Inclui pessoas com necessidades especiais nos meios urbanos, arquitetônicos e meios de comunicações; 2. Decreto 6.949 de Agosto de 2009. Visa a convenção sobre os direitos das pessoas com deficiência. 15

Slide 16

Slide 16 text

Exemplos de acessibilidade urbana

Slide 17

Slide 17 text

#FAIL 17

Slide 18

Slide 18 text

#FAIL 18

Slide 19

Slide 19 text

#FAIL 19

Slide 20

Slide 20 text

#FAIL 20

Slide 21

Slide 21 text

#FAIL 21

Slide 22

Slide 22 text

#SUCCESS 22

Slide 23

Slide 23 text

#SUCCESS 23

Slide 24

Slide 24 text

#SUCCESS 24

Slide 25

Slide 25 text

O que é WCAG?

Slide 26

Slide 26 text

WCAG É uma recomendação de acessibilidade para conteúdo na Web que visa torná-los mais acessíveis. • A primeira versão do WCAG 1.0 foi lançada em 1998; • A segunda e atual 2008, onde o documento ficou de fácil compreensão para desenvolvedores e gestores. 26

Slide 27

Slide 27 text

Príncipios da WCAG 2.0 • Príncipio 1: Perceptível A informação e os componentes da interface do usuário têm de ser apresentados de forma que os mesmos possam perceber. • Príncipio 2: Operável O usuário deve ser capaz de operar toda interface via teclado. 27

Slide 28

Slide 28 text

Príncipios da WCAG 2.0 • Príncipio 3: Compreensível Toda informação e operação da interface deve ser compreensível. • Príncipio 4: Robusto O conteúdo deve ser robusto para ser entendido por navegadores e tecnologias assistivas. 28

Slide 29

Slide 29 text

Estudo de Caso

Slide 30

Slide 30 text

Prefeitura de Belo Horizonte Iremos avaliar o site da PBH, nos quesitos: • Performance; • Acessibilidade. 30

Slide 31

Slide 31 text

Site PBH Performance Acessibilidade 1.2Mb de carregamento da home Nota 3.1 em 10 90 request's Tabelas para layout 22 Page Speed Grade: D (65%) Imagens 77, 55 sem atributo alt YSlow Grade: C (73%) Erros de validação (X)HTML 624. http://goo.gl/ijBNIc Access Monitor - Ferramenta para testar acessibilidade 31

Slide 32

Slide 32 text

You doing it wrong, dude! 32

Slide 33

Slide 33 text

Dicas e Truques

Slide 34

Slide 34 text

Definição do idioma Definição de idioma correto 01. 02. 03. 04. 05. 06. 34

Slide 35

Slide 35 text

exemplo

Slide 36

Slide 36 text

Definição do idioma

Os smarthpones são telefones inteligentes!

01. 02. 03. 04. 05. 36

Slide 37

Slide 37 text

exemplo

Slide 38

Slide 38 text

Declaração de ALT em imagens Sempre devemos declarar um texto alternativo referente a imagem, descrever exatamente a imagem, exemplo: • A descrição deve ser concisa e ter sentido, afinal você está descrevendo algo pra quem não enxerga. :) 38

Slide 39

Slide 39 text

Declaração de ALT em imagens • Imagem meramente decorativas no layout recomenda-se colocá-las via background através do CSS. • Imagem que, caso não possam sair do layout o uso do ALT em vazio é recomendado. 39

Slide 40

Slide 40 text

Declaração de alt Casal abraçado na praia de Cabo Frio

01. 02. 03. 04. 05. 40

Slide 41

Slide 41 text

exemplo

Slide 42

Slide 42 text

Sem declaração de alt

01. 02. 03. 04. 05. 42

Slide 43

Slide 43 text

exemplo

Slide 44

Slide 44 text

No content

Slide 45

Slide 45 text

Links Evite ao máximo utilizar as seguintes expressões: • Saiba mais • Clique aqui • Leia mais 45

Slide 46

Slide 46 text

Links Estas expressões não auxiliam um deficiente visual só dificultam o acesso. O ideal é colocar o link no contexto da frase. Utilize o outline para destacar os links, desta forma visualmente o usuário sabe onde ele está. 46

Slide 47

Slide 47 text

Uso correto de links

Compre o iPhone 5s com um desconto de 20%

01. 02. 03. 04. 05. 47

Slide 48

Slide 48 text

Uso incorreto de links

Compre um iPhone 5s clicando aqui com um desconto de 20%

01. 02. 03. 04. 05. 48

Slide 49

Slide 49 text

Dados estatísticos

Slide 50

Slide 50 text

Dezembro 2013 Dezembro 2013 Valor "Saiba mais" aproximadamente 7.450.000 "Clique aqui" aproximadamente 46.600.000 "Leia mais" aproximadamente 18.600.000 50

Slide 51

Slide 51 text

Setembro 2014 Setembro 2014 Valor "Saiba mais" aproximadamente 54.800.000 "Clique aqui" aproximadamente 95.600.000 "Leia mais" aproximadamente 26.200.000 51

Slide 52

Slide 52 text

Concluímos que...

Slide 53

Slide 53 text

Setembro 2014 Essas expressões na internet aumentaram consideravelmente. Comparativo de crescimento Valor "Saiba mais" aproximadamente 47.350.000 "Clique aqui" aproximadamente 49.000.000 "Leia mais" aproximadamente 7.600 53

Slide 54

Slide 54 text

Tabelas

Slide 55

Slide 55 text

Tabelas Não utilize para construir layout's, foi criada para ser utilizada em dados tabulares Utilize de outras tags especifícas para elaboração do layout. 55

Slide 56

Slide 56 text

Slide 57

Slide 57 text

Forms

Slide 58

Slide 58 text

Formulários Construa formulários com label's apontando para o determinado input. Use as estruturas de fieldset para agrupar seções do formulário e legend para nomear cada seção. 58

Slide 59

Slide 59 text

sem label

Slide 60

Slide 60 text

com label

Slide 61

Slide 61 text

fieldset e legend

Slide 62

Slide 62 text

CAPTCHA

Slide 63

Slide 63 text

CAPTCHA Não utilize Captcha, já foi comprovado que ele não é seguro! http://www.karlgroves.com/2013/02/09/list-of- resources-breaking-captcha/ Uma alternativa para promover segurança é utilizar de perguntas lógicas, qual a cor de determinado objeto e etc. 63

Slide 64

Slide 64 text

CAPTCHA 64

Slide 65

Slide 65 text

Web Semântica

Slide 66

Slide 66 text

Web Semântica Abuse e use das novas tags do HTML5 elas irão enriquerecer seu código. Procure fazer um código funcional e limpo que todos possam entender. Acessibilidade é uma etapa importante de um todo, porém quase todos esquecem, é sua amiga. 66

Slide 67

Slide 67 text

Citações Se o lugar não está pronto para receber todas as pessoas, então o lugar é deficiente. Thaís Frota As experiências que nós projetamos serão as que usaremos daqui há 20 anos, você pode ser vitíma do seu próprio veneno. Bruno Pulis “ “ 67

Slide 68

Slide 68 text

Referências • Definição de acessibilidade; • Decreto de lei 5296; • Decreto de lei 6949; • http://giphy.com/ • Acessibilidade na prática • Palestra sobre HTML5 + WAI-ARIA 68

Slide 69

Slide 69 text

Obrigado! Bruno Pulis • @brunopulis • facebook.com/bpulis • speakerdeck.com/brunopulis • brunopulis.com • github.com/brunopulis/talks/una-barreiro 69