acessibilidade na web - faders · acessibilidade na web cesár bomfim brasília 15 de março....

MINISTÉRIO DO PLANEJAMENTO

Acessibilidade na Web

MINISTÉRIO DO PLANEJAMENTO

Cesár BomfimBrasília 15 de Março

MINISTÉRIO DO PLANEJAMENTOMINISTÉRIO DO PLANEJAMENTOSecretaria de Lo istica e Tecnologia da Informaçãoǵ

Avaliação – Passos para Site Acessível

-Seguir padrões Web;

-Seguir as diretrizes e recomendações de acessibilidade;

-Realizar avaliação de acessibilidade.


Avaliação – Estrutura-Análise de Código: Avalia qualidade e semântica da codificação do sítio;

-Análise de Desenho: Avalia qualidade da área visual do sítio;

-Análise de Acessibilidade: Avalia qualidade da navegação do sítio por pessoas com deficiência e aderência aos padrões de acessibilidade (e-MAG e WCAG).


Avaliação – Análise de Código

1 – Localizador Universal de Recursos (URL)

-Conceito: Endereço no qual se encontra o sítio ou portal;

-Observado: formatação, memorização, facilidade, presença ou ausência do prefixo “WWW”, palavras desnecessárias.



Urls devem ser amigáveis, isto é, devem ser formadas por palavras e não códigos e

parâmetros, devem ser concisas e claras.

Urls amigáveis são simples de ler e de se lembrar.


Avaliação – Análise de Código2 - Análise de um endereço de uma página de Fale Conosco:

http://www.dominio.gov.br/diretorio/sub-diretorio/?apt=34&jhr=45&name=card.do

http://www.dominio.gov.br/diretorio/sub-diretorio/fale-conosco.html

http://www.dominio.gov.br/fale-conosco.html

http://www.dominio.gov.br/fale-conosco

http://dominio.gov.br/fale-conosco



1 – Exemplo para Localizador Universal de Recursos (URL)



2 – Presença de quadro (frame)

-Conceito: Divide o espaço da página em colunas e linhas;

-Observado: Presença ou ausência.



O uso de frames representa uma barreira a mais para as pessoas que utilizam leitores de tela, pois estes

dificultarão ou até impedirão o acesso às informações por pessoas com deficiência visual completa.

As tags <frameset>, <frame> e <noframe> foram abolidas do HTML5, ficando somente o <iframe>.



Se for inevitável o uso de quadros, deve-se optar pelo iframe, tendo o cuidado de tornar seus conteúdos

acessíveis.



2 - Para verificar a presença de quadros pode-se:

- Buscar diretamente no código as tags <frame> ou <iframe>;

- Utilizar plugin WebDeveloper do Firefox => Destacar = Quadros (frames);



2 – Exemplo para presença de quadro (frame)



3 – Doctype e validação

-Conceito: Especifica as regras para a codificação da página;

-Observado: Presença e qual doctype utilizados, erros levantados.



As páginas devem respeitar as regras de codificação do

padrão de Doctype escolhido para que elas possam ser

interpretadas corretamente tanto por navegadores, quanto

por ferramentas de tecnologia assistiva.



3 – Ferramenta para doctype e validação do código

- Sítio do W3C- http://validator.w3c.org- http://validator.w3.org/unicorn/

-Plugin Web Developer-Opção: Ferramentas > Validar HTML

http://validator.w3c.org/



3 – Exemplo para doctype e validação



4 – Title

-Conceito: Título da página. Importante para conceituar o usuário sobre o assunto principal da página e para ajudar na identificação da página por motores de busca;

-Observado: Descrição e relação ao conteúdo da página.



Atenção

- Os títulos devem ser claros e concisos;- Devem passar ao usuário a informação sobre o conteúdo principal da página em questão; - Não devem conter palavras ou expressões desnecessárias como “Bem vindo ao portal”, “Página de Contato”, “Sítio Oficial”, etc;- Não devem conter recursos de pontuação ou outros caracteres utilizados com recursos estéticos.

Ex. “.:: Bem Vindo ao Portal ::.”, “... Fale Conosco || IFMS ...”



4 – Como avaliar o Title

- Observando diretamente no código o conteúdo da tag Title da página.

- Observando barra de título da janela do navegador.



4 – Exemplo para title

Página Inicial

<title> Instituto Federal de Mato Grosso do Sul – IFRS</title>

Página de Acesso a Informação

<title> Acesso a Informação – IFMS </title>



4 – Exemplo para title



5 – Declaração de idioma

-Conceito: Indica qual é a língua principal utilizada na página e a alteração em textos específicos;

-Observado: Correta declaração do idioma, declaração de mudança em trechos em outros idiomas.



O atributo Lang deve ser utilizado para marcar o idioma principal em que a página foi escrita, assim como a presença de palavras ou expressões em outra língua.

Esta informação poderá ser utilizada para facilitar tarefas como a tradução do texto original para outros idiomas, verificação ortográfica, formatação de dados, etc.

Usuários de ferramentas de tecnologia assistivas tais como leitores de tela também serão beneficiados com esta marcação, pois o programa ao ler a página poderá dar a entonação correta de cada palavra apresentada.



5 – Como avaliar a declaração de idioma

- Observando diretamente no código:

- Utilizando o validador de internacionalização do W3C:

http://validator.w3.org/i18n-checker/



5 - http://validator.w3.org/i18n-checker/



5 – Exemplo para declaração de idioma da página

Exemplo da declaração para um parágrafo específico:



6 – Mapa de caracteres (Charset)

-Conceito: Indica o conjunto de caracteres da página;

-Observado: Presença ou ausência do charset, conformidade com W3C.



Documentos html admitem apenas uma forma de codificação. Não é possível, por exemplo, codificar diferentes partes do documento com mapas de caracteres diferentes.

Portanto, deve existir apenas uma declaração de codificação por página.

Atenção ao fato de que a declaração do mapa de caracteres apenas não basta, é preciso que os documentos sejam gravados utilizando o mapa declarado.



Atenção!

A não declaração do mapa utilizado ou a gravação em padrão de caracteres em formato diferente do utilizado na página pode impedir a correta interpretação e exibição das informações por navegadores, assim como causar problemas para a verbalização do conteúdo por leitores de telas.



6 – Como avaliar a declaração do mapa de caracteres e a adequada codificação da página

- Observando diretamente no código;

- Utilizando o validador de internacionalização do W3C;


- Observando a renderização da página em um navegador.




Exemplo comparativo do mapa UTF-8 e ANSI:



6 – Exemplo para mapa de caracteres (charset)



7 – Independência de dispositivo

-Conceito: Verificar a visualização e comportamento do sítio em vários navegadores;

-Observado: Atuação da visualização e comportamento do sítio em navegadores distintos.



7 – Exemplo para independência de dispositivo



8 – Utilização de Sistemas de Gestão de Conteúdo (SGC)

-Conceito: integra uma série de informações para padronização, evolução e manutenção de sítios;

-Observado: Presença e qual é utilizado.



8 – Exemplo para utilização de Sistemas de Gestão de Conteúdo


Avaliação – Análise de Código8 – Ferramenta para verificar o uso de SGC

- Buscar diretamente no código por “Generator”;

-Utilizar a ferramenta Wappalyzer;


Avaliação – Análise de Código8 – Ferramenta para verificar a utilização de SGC

-Plugin Wappalyzer



9 – Uso HTML semântico

-Conceito: Utilizar os elementos HTML de acordo com a função que foram criados;

-Observado: Conformidade com padrões W3C.



O respeito a semântica dos elementos HTML permite que:

- as páginas sejam indexadas adequadamente pelos motores de busca;

- as ferramentas de tecnologia assistiva traduzam de maneira mais eficiente o conteúdo para as pessoas com deficiência;

- as páginas tenham tamanhos menores.



9 – Como avaliar a semântica HTML?

Não há uma ferramenta que possa dizer se um elemento HTML está sendo usado para o fim ao qual o mesmo foi criado. É necessário que o responsável pela escrita da página conheça e utilize adequadamente cada elemento da linguagem de marcação.

O que se pode fazer é uma validação humana utilizando alguns recursos auxiliares para tentar identificar e apontar o uso inadequado de algum elemento ou atributo.



Os erros mais comuns de semântica a serem buscados são:

- O uso de tabelas para diagramação de páginas;

- Uso inadequado de cabeçalhos: ausência, desrespeito a hierarquia, uso com fins estilísticos;

- Não uso das listas html para marcar itens semelhantes como itens de um menu ou uma sequência de itens relacionais;


Avaliação – Análise de Código9 – O uso de tabelas para diagramação de páginas;


Avaliação – Análise de Código9 – Desrespeito a hierarquia de cabeçalhos das páginas;


Avaliação – Análise de Código9 – Uso de cabeçalhos com fins estilísticos, isto é para deixar o texto maior ou em negrito;



9 – Exemplo para uso de HTML semântico


Avaliação – Análise de Código9 – Ferramenta para uso do HTML semântico

-Plugin Web Developer-Opção: Informações > Estrutura de Documento;-Opção: Destacar > Elementos por nível;



10 – Folhas de Estilo (CSS)

-Conceito: Utilizada para formatar a camada de apresentação do sítio;

-Observado: Uso, boas práticas, presença inline ou interna, quantidade não utilizada.



10 – Exemplo para folhas de estilo (CSS)


Avaliação – Análise de Código10 – Ferramenta para folhas de estilo (CSS)

-Plugin PageSpeed do Firebug-Opção: Remove unused css


Avaliação – Análise de Código10 – Ferramenta para folhas de estilo (CSS)

-Plugin Inline Code Finder (ICF)



11 – Camada de Comportamento

-Conceito: Utilização de componentes scripts, flashs, applets e outros para manipulação da informação;

-Observado: Uso, interrupção, presença scripts no corpo do html, independência de dispositivos, localização do scripts



11 – Exemplo para camada de comportamento


Avaliação – Análise de Código11 – Ferramenta para Camada de Comportamento

-Plugin Inline Code Finder (ICF)



-Plugin Web Developer-Opção: Desativar > Desativar Javascript



Verificar se não há perda de informações ou funcionalidades quando não há suporte a scripts.

✗Os menus funcionam?✗

✗Os formulários funcionam?✗

✗A busca no sítio funciona?



É preciso fornecer um meio de acesso às informações e aos serviços oferecidos, mesmo quando o usuário fizer uso de um navegador ou uma ferramenta de tecnologia assistiva que não suporte a execução de scritps.



Ao declarar um <script> sempre usar a marcação <noscript> para fornecer uma alternativa ao usuário.

✗<script>✗ document.write("Alô Mundo!")✗</script>✗<noscript>✗ Sem suporte a scripts! Acesse esta versão:✗ http://www.paginaacessivel.gov.br ✗</noscript>

http://www.paginaacessivel.gov.br/



12 – Peso dos elementos e otimização da página

-Conceito: Avaliar tempo de renderização da página e técnicas para otimizar os elementos que prejudicam a performance;

-Observado: Tamanho em bytes, elementos que dificultam a renderização, indicação de técnicas de otimização, uso correto de formato de arquivos.


Avaliação – Análise de Código12 – Ferramenta para Peso dos elementos e otimização da página

-Plugin YSLOW-Opção: Statistics



-Plugin Page Speed do Firebug-Opções: Combinar imagens com CSS Sprites, Ativar

Compactação, Adiar análise de javascript, Otimizar imagens



-Site websiteoptimization -link: http://www.websiteoptimization.com/services/analyze/


Avaliação – Análise de Desenho

1 – Identidade Visual

-Conceito: Verificar presença da “Barra Brasil”. Mantida pela SECOM do Ministério do Planejamento;

-Observado: Presença ou omissão, aplicação correta dos elementos da barra.



1 – Exemplo para identidade visual



2 – Padronização Visual

-Conceito: Criação de um vocabulário visual a ser utilizado por todo sítio;

-Observado: Existência de padrão, aplicação as páginas e hotsites



2 – Exemplo para Padronização Visual



3 – Cabeçalho

-Conceito: Primeiro ponto de identificação e âncora para sítio;

-Observado: Tamanho ocupa, elementos presentes.



3 – Exemplo para Cabeçalho



4 – Paleta de Cores

-Conceito: Escolha correta é vital para bom funcionamento do sítio ou portal;

-Observado: Contraste das cores.



4 – Exemplo para paleta de cores


Avaliação – Análise de Desenho4 – Ferramenta para paleta de cores

-Software Colour Contrast Analyser



5 – Uso de animação e recursos multimídia

-Conceito: O uso de animações e multimídia podem distrair o cidadão do objetivo do sítio e até incomodá-lo;

-Observado: Pertinência, controle, presença de banners animados.



5 – Exemplo para uso de animação e recursos multimídia



6 – Pregnância das imagens

-Conceito: Capacidade de ícone ou imagem transmitir o objetivo para o qual foi criado;

-Observado: Uso e relações com tema do sítio.



6 – Exemplo para pregnância das imagens



7 – Diagramação e uso da área branca

-Conceito: Diagramação é a distribuição e organização dos elementos da página. Área branca ajuda na separação dos blocos de informação;

-Observado: Utilização da diagramação e áreas brancas



7 – Exemplo para diagramação e uso de área branca



8 – Leiturabilidade

-Conceito: Garantir que o texto seja lido de forma agradável;

-Observado: Tamanho da fonte e composição, largura de linha e entrelinhas, alinhamento do texto.



8 – Exemplo para leiturabilidade


Avaliação – Análise de Acessibilidade

1 – Simulação de leitor de tela

-Conceito: Os leitores de tela interpretam o código HTML gerando sons correspondentes à fala;

-Observado: Tempo de leitura, omissão de informações, existência de atalhos e teclas de atalho, navegação por links e cabeçalhos.



1 – Exemplo para simulação de leitor de tela


Avaliação – Análise de Acessibilidade1 – Ferramenta para simulação de leitor de tela

-Plugin Fangs



-Leitores de tela



-Simulador de tela no ASES



2 – Avaliador e simulador de Acessibilidade para sítios - ASES

-Conceito: Software que aponta os problemas de acessibilidade do sítio ;

-Observado: Erros e avisos apresentados pelo software



2 – Exemplo para avaliador e simulador de Acessibilidade para sítios - ASES



3 – Navegação por teclado

-Conceito: Utilização do sítio apenas pelo teclado;

-Observado: Comportamento por teclado, conteúdo realçado, atalhos via teclado.



3 – Exemplo para navegação por teclado



4 – Descrição das imagens

-Conceito: Descrever imagem de forma sucinta;

-Observado: Presença do texto alternativo, qualidade do texto, imagens decorativas



4 – Exemplo para descrição das imagens


Avaliação – Análise de Acessibilidade4 – Ferramenta para descrição das imagens

-Propriedade da imagem do Firefox



-Plugin Web Developer => Imagens = Exibir textos alternativos



-Plugin Web Developer => Imagens => Visualizar informações sobre imagens



5 – Quebra de navegação

-Conceito: Ações que desviam a lógica da navegação e retiram o foco sem prévia anuência do usuário;

-Observado: Páginas abertas em novas janelas ou abas, links quebrados, atributo target=”blank”



5 – Exemplo para quebra de navegação


Avaliação – Análise de Acessibilidade5 – Ferramenta para quebra de navegação

-Plugin Web Developer



6 – Página de descrição com os recursos de acessibilidade

-Conceito: Apresenta os recursos de acessibilidade e outras informações pertinentes ao assunto;

-Observado: Link para acesso, teclas de atalho, opções de aumento de fonte e contraste.



6 – Exemplo para página de descrição com os recursos de acessibilidade



7 – Barra de acessibilidade

-Conceito: Localiza-se no topo (cabeçalho) do sítio e apresenta alguns elementos obrigatórios;

-Observado: Opções de aumentar, diminuir e retornar a fonte, contraste, atalhos para área do sítio (menu, conteúdo e busca), link para página de descrição de acessibilidade.



7 – Exemplo para barra de acessibilidade



8 – Mapa do sítio

-Conceito: Permite um visão geral do conteúdo do sítio. Funciona como um índice;

-Observado: Presença, disposição em lista



8 – Exemplo para mapa do sítio



9 – Apresentação de formulários

-Conceito: Seção que possui conteúdo, marcações e elementos especiais chamados campos. Os usuários utilizam os formulários para alterar os campos antes do envio ao servidor para serem processados;

-Observado: tag HTML form; disponibilizar os elementos na ordem correta de navegação; etiquetas aos campos ; mudança de contexto quando elemento recebe foco; botão do tipo submit permitir a verificação das informações antes do envio; erros de cada campo; conjunto de informações em tags fieldset e legend.


Avaliação – Análise de Acessibilidade9 – Exemplo para apresentação de formulários


Avaliação – Análise de Acessibilidade9 – Ferramenta para apresentação de formulários

-Plugin Web Developer



10 – Apresentação de documentos

-Conceito: Formas como o documento dever ser disponibilizado nos sítios. Preferência em HTML;

-Observado: Documentos do sítio e suas informações como extensão (tipo de arquivo) e tamanho. Documentos no formato HTML, ODF e PDF.


Avaliação – Análise de Acessibilidade10 – Exemplo para apresentação de documentos

acessibilidade na web - faders · acessibilidade na web cesár bomfim brasília 15 de março....

Documents