Acessibilidade: criando

site acessvel
Gabriel Silvrio
Claudemir Marcelino
Hlio da Costa

O que acessibilidade?
Segundo o Portal do Planalto o termo acessibilidade
significa incluir a pessoa com deficincia na
participao de atividades como o uso de produtos,
servios e informaes.
Acessibilidade nada mais do que a preocupao em
fornecer o alcance, ao ambiente fsico e virtual, a
todos. Resumindo: acessibilidade dar autonomia.

Acessibilidade e Oportunidade

Fonte: http://www.educadores.diaadia.pr.gov.br/arquivos/File/tvmultimidia/imagens/6ingles/3handic.jpg

Acessibilidade e Oportunidade
Garantir a acessibilidade garantir a oportunidade
para todos.
O mundo ideal seria em que uma deficincia, seja ela
qual for, no fosse obstculo de alcanar uma
oportunidade.
uma responsabilidade cidad, social, humana,
ntegra, altrusta e justa.
Pessoas portadoras de deficincia possuem
necessidades como qualquer outra.

Acessibilidade Web
Acessibilidade na Web significa garantir que
pessoas com deficincia devem poder usar,
acessar e compreender o que e publicado na
Web. Reinaldo Ferraz, especialista em desenvolvimento
web do W3C Brasil.

E o que eu tenho a ver com isso?

Eu no tenho
nada a ver
com isso!

Fonte: http://www.youtube.com/watch?v=TaXpOmGhZ5Y

E o que eu tenho a ver com isso?

Acesso a informao: a informao e o
conhecimento importante para o desenvolvimento
da sociedade, onde o Desenvolvedor Web tem parte
nessa misso.
Acesso a ferramentas e servios: a Internet
proporciona hoje inmeros servios de todo o
gnero, que deve estar disponvel para todos.
Acesso a produtos: da mesma forma, diversos
produtos so oferecidos pela Rede, produtos esses
que podem melhorar a vida do cliente, que pode ser
um deficiente.

E o que eu tenho a ver com isso?

Ampliar a relao social: o ser humano , por natureza,
um ser social, e portanto, necessita de socializao.
Democracia: na Internet, um cidado pode unir-se a
outros com ideais em comum, e dar voz e visibilidade a
uma opinio, e, portanto, democrtica.
Lazer: conectado, possvel tambm ter acesso jogos,
filmes, desenhos, blogs, e diversos outras fonte de
entretenimento.
Enfim... A Internet elimina fronteiras como o tempo,
poder aquisitivo, distncia, meio de acesso, entre outras,
e seus recursos so imensurveis.

A quem estarei ajudando?

Pessoas cegas, que utilizam um software leitor de
tela para acessar o contedo de uma pgina;
Pessoas com baixa viso, que necessitam de
contraste e fontes maiores;
Pessoas daltnicas que no enxergam um
determinado tipo de cor;
Pessoas surdas que no conseguem escutar um
udio na Web;
Pessoas com mobilidade reduzida que utilizam um
dedo (ou nem isso) para acessar o contedo de uma
pgina Web.

A quem estarei ajudando?

Idosos, que tem dificuldades de navegao,
principalmente quando o design do site no
adequado;
Usurios de dispositivos mveis, que nos ltimos anos,
sua utilizao tem crescido consideravelmente.
Celulares, tablets, smartphones, PDAs, entre outros,
figuram nessa lista;
Pessoas com deficincia temporria;
E a lista no para: facilitam o acesso de pessoas a
pgina com iluminao deficiente, ambiente com
muito barulho, mos ocupadas, de motores de busca
etc.

A quem estarei ajudando?

45.606.048 de brasileiros, 23,9% da
populao total, tm algum tipo de
deficincia visual, auditiva, motora
e intelectual.
25.800.681 (26,5%) so mulheres e
19.805.367 (21,2%) so homens.
38.473.702 pessoas vivem em reas
urbanas e 7.132.347 em reas rurais.

Fonte: http://www.pessoacomdeficiencia.gov.br/app/sites/default/files/publicacoes/cartilha-censo-2010-pessoas-com-deficienciareduzido.pdf

A quem estarei ajudando?

Percentual da populao brasileira com deficincia
25,00%
20,00%
15,00%

23,90%
18,80%

10,00%
5,00%

7%

5,10%
1,40%

0,00%
Pelo menos

Visual

Motora

Auditiva

Intelectual

uma das
deficincias
Fonte: http://g1.globo.com/brasil/noticia/2012/04/239-dos-brasileiros-declaram-ter-alguma-deficiencia-diz-ibge.html

A quem estarei ajudando?

Percentual de pessoas com pelo menos uma das
deficincias por grupo de idade: censos 2000 e 2010
70,00%
60,00%

67,70%

54,00%

50,00%
40,00%

24,90%

30,00%

15,60%

20,00%

7,50%
4,30%

10,00%
0,00%
65 ou mais

15 a 64 anos

2000

0 a 14 anos

2010

Fonte: http://www.pessoacomdeficiencia.gov.br/app/sites/default/files/publicacoes/cartilha-censo-2010-pessoas-com-deficienciareduzido.pdf

Como posso tornar meus sites

acessveis?
Seguir regras, padres e recomendaes, como:

Html5;
W3C, WCAG;
WAI-ARIA;
e-MAG;
WebAIM;

Utilizar os padres de forma adequada e validar

seu cdigo um timo primeiro passo para
colocar a acessibilidade na Web na rotina do
desenvolvimento.

WCAG
Em 1999, o pai do WWW, TimBerners-Lee
anuncia o lanamento de uma Iniciativa de
Acessibilidade na Web WAI;
Esse programa desencadeou diversas iniciativas e
programas de acessibilidade na Web;
Em maio de 1999, a W3C lana Diretrizes de
Acessibilidade para Contedo na Web as WCAG
1.0 (World Content Accessibility Guide);
Em 2008, a WAI lana a segunda verso das
Diretrizes de Acessibilidade, as WCAG 2.0

e-MAG
Em 18 de janeiro de 2005, a primeira verso do e-MAG
(Modelo de Acessibilidade em Governo Eletrnico) foi
disponibilizado.
Em dezembro do mesmo ano, a verso 2.0 foi lanada.
O e-MAG foi institucionalizado no mbito Sistema de
Administrao dos Recursos de Tecnologia da
Informao SISP, em 2007, com a Portaria n 3, de 7
de maio.
Assim as recomendaes tornaram-se obrigatrias nos
sites e portais do governo.
A verso mais atual a 3.1

Mas como deixar o seu site acessvel

Semntica
acessibilidade

logo

<header>
<nav>

<article>

<aside>

<footer>

Atributos
accesskey: especifica uma tecla de atalho para
ativar/focar um elemento.
alt: especifica um texto alternativo para a imagem.
title: especifica informaes adicionais sobre um
elemento.
tabindex: especifica a ordem de tabulao de um
elemento (quando o boto "tab" usado para
navegar).
autofocus: especifica que a rea de texto deve receber
automaticamente o foco quando a pgina carregada.
lang: especifica o idioma do contedo do elemento.

Algumas Tags
<abbr>: indica o significado de uma abreviao,
utilizando o atributo title.
<blockquote>: utilizada para criar um bloco de citao,
e a fonte pelo atributo cite.
<cite>: define o ttulo de um trabalho (por exemplo,
um livro, uma msica, um filme, um programa de TV,
uma pintura, uma escultura, etc).
<a>: importante descrevermos para onde este link nos
levar, pelo atributo title.
<img>: importante definir o atributo alt, no qual
devemos descrev-la em detalhes.
<label>: define um rtulo para um elemento <input>.

Responsividade
Exibir pginas da web em tamanhos variveis;
Um site responsivo mais acessvel em
diversos dispositivo, desde desktops at
smartphones e tablets.

Usabilidade
Aplicaes de tcnicas para facilitar o uso.
Qualquer pessoa possa utilizar o site, e que
ele funcione de forma esperado pelo usurio.
Memorizao e gil execuo de tarefas,
aprendizado rpido, e interface amigvel.
Assim, o acesso do site por idosos, crianas,
deficientes, dispositivos mveis, etc., e possa
ser agradvel ao usurio.

Ferramentas Assistivas
Tecnologias assistivas abrangem os ampliadores de
tela, leitores de telas, navegadores textuais,
navegadores por voz, teclados alternativos, entre
outros;
Facilita o acesso a recursos, por deficientes;
Ajudam o desenvolvedor criar sites mais acessveis;
Validadores, avaliadores, verificadores e simuladores;

Site www.fatecinclui.com.br
Resultado de um trabalho da 1 turma da
Faculdade de Tecnologia de So Roque;
Desenvolvido durante a disciplina de
Acessibilidade;
Foi desenvolvido pelos alunos Gabriel Silvrio,
Claudemir Marcelino e Hlio da Costa;
Os tutoriais foram desenvolvidos por todos os
alunos da sala.

Bibliografia
Acessibilidade. Disponvel em:
(www2.planalto.gov.br/acessibilidade). Acesso em:
24/09/2014.
Acessibilidade Web: (X)HTML, CSS, Scripts e Usabilidade
para Todos. Disponvel em: (www.acessibilidadelegal.com).
Acesso em: 23/08/2014.
GONZALES, Nena e MATTOS, Sheyla. O que Acessibilidade.
Disponvel em: (www.novoser.org.br) . Acesso em:
25/09/2014.
NASCIMENTO, Thiago. Acessibilidade Web: o que todo
profissional da rea precisa saber. Disponvel em:
(www.thiagonasc.com) . Acesso em: 02/10/2014.

Bibliografia
IFRS - Projeto de Acessibilidade Virtual. Disponvel em:
(acessibilidade.bento.ifrs.edu.br) . Acesso em: 02/09/2014.
e-MAG - Modelo de Acessibilidade em Governo Eletrnico.
Disponvel em: (emag.governoeletronico.gov.br/emag) .
Acesso em: 17/09/2014.
FERRAZ, Reinaldo. As diretrizes de acessibilidade para
contedo na Web WCAG. Coletanea Front End - Uma
Antologia da Comunidade Front End Brasileira, p.81.
OLIVEIRA, Luiza Maria Borges. Cartilha Do Censo 2010 Pessoas com Deficincia. Disponvel em:
(www.pessoacomdeficiencia.gov.br) . Acesso em: 03/10/2014.

Sobre
Gabriel Silvrio
Claudemir Marcelino
Hlio da Costa

Slide desenvolvido para palestra de Acessibilidade Web

na 2 Feira Tecnolgica da Faculdade de Tecnologia de
So Roque, apresentada no dia 08/09/2014.