Incluíndo a acessibilidade no desenvolvimento Web

Desenvolvimento Acessível

Quem sou 2

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

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

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

Público Alvo

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

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

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

Porquê acessibilidade na Web?

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

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

Leis de acessibilidade 14

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

Exemplos de acessibilidade urbana

#FAIL 17

#FAIL 18

#FAIL 19

#FAIL 20

#FAIL 21

#SUCCESS 22

#SUCCESS 23

#SUCCESS 24

O que é WCAG?

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

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

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

Estudo de Caso

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

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

You doing it wrong, dude! 32

Dicas e Truques

Definição do idioma <!DOCTYPE html> <html lang=" pt-br "> <head>
<title>Definição de idioma correto</title> <meta charset="UTF-8"> </head> 01. 02. 03. 04. 05. 06. 34

exemplo

Definição do idioma <!DOCTYPE html> <html lang="pt-br"> <body> Os
smarthpones são telefones inteligentes! </body> 01. 02. 03. 04. 05. 36

exemplo

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

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

Declaração de alt <!DOCTYPE html> <html lang="pt-br"> <body> <img src="images/1234.jpg"
alt="Casal abraçado na praia de Cabo Frio" /> </body> 01. 02. 03. 04. 05. 40

exemplo

Sem declaração de alt <!DOCTYPE html> <html lang="pt-br"> <body> <img
src="images/1234.jpg" /> </body> 01. 02. 03. 04. 05. 42

exemplo

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

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

Uso correto de links <!DOCTYPE html> <html lang="pt-br"> <body> 
Compre o <a href="http://goo.gl/Ub2wI6"> iPhone 5s </a> com um desconto de 20% </body> 01. 02. 03. 04. 05. 47

Uso incorreto de links <!DOCTYPE html> <html lang="pt-br"> <body> 
Compre um iPhone 5s <a href="http://goo.gl/Ub2wI6"> clicando aqui </a> com um desconto de 20% </body> 01. 02. 03. 04. 05. 48

Dados estatísticos

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

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

Concluímos que...

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

Tabelas

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

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

sem label

com label

fieldset e legend

CAPTCHA

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

CAPTCHA 64

Web Semântica

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

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

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

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

Incluíndo a acessibilidade no desenvolvimento Web

Incluíndo a acessibilidade no desenvolvimento Web

More Decks by Bruno Pulis

Other Decks in Programming

Featured

Transcript