Acessibilidade Web

Acessibilidade: criando site acessível

Gabriel Silvério Claudemir Marcelino Hélio da Costa

O que é acessibilidade?

• Segundo o Portal do Planalto “o termo acessibilidade significa incluir a pessoa com deficiência na participação de atividades como o uso de produtos, serviços e informações.”

• Acessibilidade nada mais é do que a preocupação em fornecer o alcance, ao ambiente físico 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 deficiência, seja ela qual for, não fosse obstáculo de alcançar uma oportunidade.

• É uma responsabilidade cidadã, social, humana, íntegra, altruísta e justa.

• Pessoas portadoras de deficiência possuem necessidades como qualquer outra.

Acessibilidade Web

• “Acessibilidade na Web significa garantir que pessoas com deficiência 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?

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

Eu não tenho nada a ver com isso!

E o que eu tenho a ver com isso?

• Acesso a informação: a informação e o conhecimento é importante para o desenvolvimento da sociedade, onde o Desenvolvedor Web tem parte nessa missão.

• Acesso a ferramentas e serviços: a Internet proporciona hoje inúmeros serviços de todo o gênero, que deve estar disponível para todos.

• Acesso a produtos: da mesma forma, diversos produtos são 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 relação social: o ser humano é, por natureza, um ser social, e portanto, necessita de socialização.

• Democracia: na Internet, um cidadão pode unir-se a outros com ideais em comum, e dar voz e visibilidade a uma opinião, e, portanto, democrática.

• Lazer: conectado, é possível também ter acesso à jogos, filmes, desenhos, blogs, e diversos outras fonte de entretenimento.

• Enfim... A Internet elimina fronteiras como o tempo, poder aquisitivo, distância, meio de acesso, entre outras, e seus recursos são imensuráveis.

A quem estarei ajudando? • Pessoas cegas, que utilizam um software leitor de

tela para acessar o conteúdo de uma página;

• Pessoas com baixa visão, que necessitam de contraste e fontes maiores;

• Pessoas daltônicas que não enxergam um determinado tipo de cor;

• Pessoas surdas que não conseguem escutar um áudio na Web;

• Pessoas com mobilidade reduzida que utilizam um dedo (ou nem isso) para acessar o conteúdo de uma página Web.

A quem estarei ajudando? • Idosos, que tem dificuldades de navegação,

principalmente quando o design do site não é adequado;

• Usuários de dispositivos móveis, que nos últimos anos, sua utilização tem crescido consideravelmente. Celulares, tablets, smartphones, PDAs, entre outros, figuram nessa lista;

• Pessoas com deficiência temporária;

• E a lista não para: facilitam o acesso de pessoas a página com iluminação deficiente, ambiente com muito barulho, mãos ocupadas, de motores de busca etc.

A quem estarei ajudando?

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

45.606.048 de brasileiros, 23,9% da população total, têm algum tipo de deficiência – visual, auditiva, motora e intelectual.

25.800.681 (26,5%) são mulheres e 19.805.367 (21,2%) são homens.

38.473.702 pessoas vivem em áreas urbanas e 7.132.347 em áreas rurais.

A quem estarei ajudando?

0,00%

5,00%

10,00%

15,00%

20,00%

25,00%

Pelo menos

uma das

deficiências

Visual Motora Auditiva Intelectual

23,90%

18,80%

7% 5,10%

1,40%

Percentual da população brasileira com deficiência

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

A quem estarei ajudando?

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

0,00%

10,00%

20,00%

30,00%

40,00%

50,00%

60,00%

70,00%

65 ou mais 15 a 64 anos 0 a 14 anos

54,00%

15,60%

4,30%

67,70%

24,90%

7,50%

2000 2010

Percentual de pessoas com pelo menos uma das deficiências por grupo de idade: censos 2000 e 2010

Como posso tornar meus sites acessíveis?

• Seguir regras, padrões e recomendações, como: – Html5;

– W3C, WCAG;

– WAI-ARIA;

– e-MAG;

– WebAIM;

• Utilizar os padrões de forma adequada e validar seu código é 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 lançamento 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 lança Diretrizes de Acessibilidade para Conteúdo na Web – as WCAG 1.0 (World Content Accessibility Guide);

• Em 2008, a WAI lança a segunda versão das Diretrizes de Acessibilidade, as WCAG 2.0

e-MAG

• Em 18 de janeiro de 2005, a primeira versão do e-MAG (Modelo de Acessibilidade em Governo Eletrônico) foi disponibilizado.

• Em dezembro do mesmo ano, a versão 2.0 foi lançada.

• O e-MAG foi institucionalizado no âmbito Sistema de Administração dos Recursos de Tecnologia da Informação – SISP, em 2007, com a Portaria nº 3, de 7 de maio.

• Assim as recomendações tornaram-se obrigatórias nos sites e portais do governo.

• A versão mais atual é a 3.1

Mas como deixar o seu site acessível

Semântica

acessibilidade

<header> logo

<nav>

<article>

<footer>

<aside>

Atributos

• accesskey: especifica uma tecla de atalho para ativar/focar um elemento.

• alt: especifica um texto alternativo para a imagem.

• title: especifica informações adicionais sobre um elemento.

• tabindex: especifica a ordem de tabulação de um elemento (quando o botão "tab" é usado para navegar).

• autofocus: especifica que a área de texto deve receber automaticamente o foco quando a página é carregada.

• lang: especifica o idioma do conteúdo do elemento.

Algumas Tags

• <abbr>: indica o significado de uma abreviação, utilizando o atributo title.

• <blockquote>: utilizada para criar um bloco de citação, e a fonte pelo atributo cite.

• <cite>: define o título de um trabalho (por exemplo, um livro, uma música, 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 rótulo para um elemento <input>.

Responsividade

• Exibir páginas da web em tamanhos variáveis;

• Um site responsivo é mais acessível em diversos dispositivo, desde desktops até smartphones e tablets.

Usabilidade

• Aplicações de técnicas para facilitar o uso.

• Qualquer pessoa possa utilizar o site, e que ele funcione de forma esperado pelo usuário.

• Memorização e ágil execução de tarefas, aprendizado rápido, e interface amigável.

• Assim, o acesso do site por idosos, crianças, deficientes, dispositivos móveis, etc., e possa ser agradável ao usuário.

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 acessíveis;

• Validadores, avaliadores, verificadores e simuladores;

Site www.fatecinclui.com.br

• Resultado de um trabalho da 1ª turma da Faculdade de Tecnologia de São Roque;

• Desenvolvido durante a disciplina de Acessibilidade;

• Foi desenvolvido pelos alunos Gabriel Silvério, Claudemir Marcelino e Hélio da Costa;

• Os tutoriais foram desenvolvidos por todos os alunos da sala.

Bibliografia • Acessibilidade. Disponível em:

(www2.planalto.gov.br/acessibilidade). Acesso em: 24/09/2014.

• Acessibilidade Web: (X)HTML, CSS, Scripts e Usabilidade para Todos. Disponível em: (www.acessibilidadelegal.com). Acesso em: 23/08/2014.

• GONZALES, Nena e MATTOS, Sheyla. O que é Acessibilidade. Disponível em: (www.novoser.org.br) . Acesso em: 25/09/2014.

• NASCIMENTO, Thiago. Acessibilidade Web: o que todo profissional da área precisa saber. Disponível em: (www.thiagonasc.com) . Acesso em: 02/10/2014.

Bibliografia • IFRS - Projeto de Acessibilidade Virtual. Disponível em:

(acessibilidade.bento.ifrs.edu.br) . Acesso em: 02/09/2014.

• e-MAG - Modelo de Acessibilidade em Governo Eletrônico. Disponível em: (emag.governoeletronico.gov.br/emag) . Acesso em: 17/09/2014.

• FERRAZ, Reinaldo. As diretrizes de acessibilidade para conteúdo 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 Deficiência. Disponível em: (www.pessoacomdeficiencia.gov.br) . Acesso em: 03/10/2014.

Sobre

Gabriel Silvério

Claudemir Marcelino

Hélio da Costa

Slide desenvolvido para palestra de Acessibilidade Web na 2ª Feira Tecnológica da Faculdade de Tecnologia de

São Roque, apresentada no dia 08/09/2014.