Construção de Front-end

Guiado à Testes de
Acessibilidade
Prof. Msc. Tiago Nogueira
tiago.nogueira@bag.ifmt.edu.br

Agenda
 Definição de Front-End
 Introdução
 Acessibilidade na Web
 Diretrizes de Acessibilidade
 Ferramentas Assistivas
 Teste de Acessibilidade
 Estudo de Caso – Corretude de códigos

Definição de Front-End

Definição de
Front-End?

Introdução

Introdução
 No início desta década, o censo dos Estados Unidos indicou que um em
cada oito cidadãos americanos teria algum tipo de deficiência grave [4].
No Brasil, cerca de 14,5% da população possui algum tipo de
deficiência visual, aproximadamente 27 milhões de pessoas [5]. Alguns
estudos relatam que, nos Estados Unidos, 10 milhões de pessoas com
algum tipo de deficiência representam um mercado estimado em 46
bilhões de dólares. Esse número expressivo de pessoas não pode ser
desconsiderado quando tratamos das tecnologias computacionais.
 Relevância: Processos que permitem ou garantem à acessibilidade
das pessoas com algum tipo de deficiência nas interações com
websites.

Acessibilidade na Web

Acessibilidade na Web
 O termo acessibilidade tem ganhado muito destaque no cenário
nacional atual, tendo em vista que a garantia de acesso a pessoas
com necessidades especiais, em todas as instituições sociais, tem
ganhado força com a temática da inclusão sendo constantemente
debatida e colocada em foco.
 E, no universo da Internet, não poderia ser diferente, já que tal
mecanismo de comunicação e informação prima pelo objetivo de
promover o acesso a todos os cidadãos. Daí a necessidade de propor
elementos que impulsionem tal prática e permita que, de fato,
todos possam usufruir dos benefícios da tecnologia da informação e
comunicação.

Acessibilidade na Web
 A acessibilidade na web, portanto, não se restringe apenas a instrumentos
utilizados em meios virtuais e com a presença da tecnologia, mas também requer
conhecimentos em demais áreas que servem como apoio para o desenvolvimento
de projetos e práticas tecnológicas que, por sua vez, permitem o bom andamento
das atividades virtuais e, com isso, o uso mais dinâmico e com uma função social
da Web.
 Para tal, são propostas legislações que “garantem” estes objetivos:
 Lei no 4.169 de dezembro de 1962 (uso do Braille);
 Lei no 7.405 de novembro de 1985 (símbolo internacional);
 Lei no 7.853/89 (Coordenadoria Nacional para Integração da Pessoa Portadora
de Deficiência);
 Lei no 7.853/89 (Responsabilidades ao Governo);
 Decreto no 5.296 de 2004.

Diretrizes de
Acessibilidade

Diretrizes de Acessibilidade (WCAG)
 A acessibilidade na Web, para que possa atender a todas as
necessidades de seus usuários portadores de deficiência deve seguir
alguns parâmetros que norteiam tal iniciativa no intuito de que todos
os indivíduos desse universo sejam plenamente atendidos, de forma
igualitária.
WCAG (Web Content Accessibility Guidelines):
Versão 1.0 e 2.0;
Prioridades 1, 2 e 3.

Diretrizes de Acessibilidade (WCAG)
 Princípios:
Promover alternativas equivalentes a conteúdos auditivos e visuais;
Não recorrer apenas à cor;
Utilizar corretamente a marcação e folhas de estilo;
Indicar claramente o idioma utilizado;
Criar tabelas passíveis de transformação harmoniosa;
Assegurar que páginas que utilizem novas tecnologias tenham
transformação harmoniosa;
 Assegurar o controle ao usuário sobre alterações temporais do
conteúdo;
 Assegurar a acessibilidade direta em interfaces integradas pelo usuário;





Diretrizes de Acessibilidade (WCAG)
 Princípios:





Projetar a página considerando a independência de dispositivos;
Utilizar soluções provisórias;
Utilizar tecnologias e recomendações;
Fornecer informações de contexto e orientação;
Fornecer mecanismos claros de navegação;
Assegurar a clareza e simplicidade dos documentos.

Diretrizes de Acessibilidade (WCAG)
 Web Content Accessibility Guidelines (WCAG)

Diretrizes de Acessibilidade (e-Mag)
 No Brasil, existe a e-MAG (Manual de Acessibilidade do Governo
Eletrônico) que, por sua vez, possui 8 princípios, também inspirados
na WCAG 1.0, na intenção de tornar o conteúdo Web de fato acessível,
no entanto formatado para atender ao público nacional.
Selos: A, AA e AAA.

Diretrizes de Acessibilidade
 Web Content Accessibility Guidelines (WCAG) e e-Mag

Diretrizes de Acessibilidade
 Web Content Accessibility Guidelines (WCAG) e e-Mag

Ferramentas Assistivas

Ferramentas Assistivas
 Tecnologia Assistiva é um termo ainda novo, utilizado para identificar
todo o arsenal de Recursos e Serviços que contribuem para
proporcionar ou ampliar habilidades funcionais de pessoas com
deficiência e consequentemente promover Vida Independente e
Inclusão [3].

Teste de Acessibilidade

Teste de Acessibilidade
 Teste de Acessibilidade é um
processo continue e iterativo e
dever ser pensado desde a
concepção do Website:
Coleta de informação;
Planejamento;
Design;
Desenvolvimento;
Testes e publicação;
Manutenção.

Teste de Acessibilidade
 Testes automáticos e
semiautomáticos:
Access Monitor;
DaSilva;
Acessibilidade.net;
WebXact;
Hera 2.1 Beta;
CynthiaSays;
Valet 4.2;
Ocawa;
Evaluera.

Teste de Acessibilidade
 Testes de Acessibilidade no AccessMonitor:

Estudo de Caso –
Corretude de códigos

Estudo de Caso
 RECOMENDAÇÃO 1 – RESPEITAR OS PADRÕES DE
DESENVOLVIMENTO WEB

Estudo de Caso
 RECOMENDAÇÃO 2 – ORGANIZAR O CÓDIGO HTML DE FORMA
LÓGICA E SEMÂNTICA

Estudo de Caso
 RECOMENDAÇÃO 3 – UTILIZAR CORRETAMENTE OS NÍVEIS DE
CABEÇALHO

Estudo de Caso
 RECOMENDAÇÃO 4 – ORDENAR DE FORMA LÓGICA E INTUITIVA A
LEITURA E TABULAÇÃO

Estudo de Caso
 RECOMENDAÇÃO 5 - DISPONIBILIZAR TODAS AS FUNÇÕES DA
PÁGINA VIA TECLADO

Estudo de Caso
 RECOMENDAÇÃO 5 - DISPONIBILIZAR TODAS AS FUNÇÕES DA
PÁGINA VIA TECLADO

Estudo de Caso
RECOMENDAÇÃO 6 –
FORNECER ÂNCORAS PARA IR
DIRETO A UM BLOCO DE
CONTEÚDO

Estudo de Caso
 Página para teste e correções:
http://zip.net/bts3g4

 Links pra realização dos testes:
http://www.acessibilidade.gov.
pt/accessmonitor/

Referências
[1] WORLD WIDE WEB CONSORTIUM et al. Web content accessibility guidelines
(WCAG) 2.0. 2008.
[2] BACH, Catharine F. et al. Diretrizes de acessibilidade: uma abordagem
comparativa entre WCAG e e-MAG. SIMPÓSIO BRASILEIRO DE SISTEMAS DE
INFORMAÇÃO, V, p. 73-74, 2009.
[3] Assistiva, Tecnologia e Educação. Disponível em:
http://www.assistiva.com.br/tassistiva.html. Acessado em: 18 de março de 2016.
[4] SUTCLIFFE, Alistair; HART, Jennefer. Some Reflections on Evaluating Users’
Experience. which is commonly known as TwinTide (Towards the Integration of
Trans-sectorial IT Design, p. 67.
[5] IBGE. Instituto brasileiro de geografia e estatística. censo demográfico.
Brasil, 2010.