Acessibilidade na Web Cesár Bomfim Brasília 15 de Março

Transcrição

1 Acessibilidade na Web Cesár Bomfim Brasília 15 de Março

2 Avaliação Passos para Site Acessível -Seguir padrões Web; -Seguir as diretrizes e recomendações de acessibilidade; -Realizar avaliação de acessibilidade.

3 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).

4 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.

5 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.

6 2 - Análise de um endereço de uma página de Fale Conosco:

7 1 Exemplo para Localizador Universal de Recursos (URL)

8 2 Presença de quadro (frame) -Conceito: Divide o espaço da página em colunas e linhas; -Observado: Presença ou ausência.

9 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>.

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

11 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);

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

13 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.

14 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.

15 3 Ferramenta para doctype e validação do código - Sítio do W3C Plugin Web Developer -Opção: Ferramentas > Validar HTML

16 3 Exemplo para doctype e validação

17 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.

18 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...

19 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.

20 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>

21 4 Exemplo para title

22 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.

23 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.

24 5 Como avaliar a declaração de idioma - Observando diretamente no código: - Utilizando o validador de internacionalização do W3C:

25 5 -

26 5 Exemplo para declaração de idioma da página Exemplo da declaração para um parágrafo específico:

27 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.

28 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.

29 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.

30 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.

31 Exemplo comparativo do mapa UTF-8 e ANSI:

32 6 Exemplo para mapa de caracteres (charset)

33 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.

34 7 Exemplo para independência de dispositivo

35 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.

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

37 8 Ferramenta para verificar o uso de SGC - Buscar diretamente no código por Generator ; -Utilizar a ferramenta Wappalyzer;

38 8 Ferramenta para verificar a utilização de SGC -Plugin Wappalyzer

39 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.

40 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.

41 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.

42 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;

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

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

45 9 Desrespeito a hierarquia de cabeçalhos das páginas;

46 9 Desrespeito a hierarquia de cabeçalhos das páginas;

47 9 Uso de cabeçalhos com fins estilísticos, isto é para deixar o texto maior ou em negrito;

48 9 Exemplo para uso de HTML semântico

49 9 Ferramenta para uso do HTML semântico -Plugin Web Developer -Opção: Informações > Estrutura de Documento; -Opção: Destacar > Elementos por nível;

50 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.

51 10 Exemplo para folhas de estilo (CSS)

52 10 Ferramenta para folhas de estilo (CSS) -Plugin PageSpeed do Firebug -Opção: Remove unused css

53 10 Ferramenta para folhas de estilo (CSS) -Plugin Inline Code Finder (ICF)

54 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

55 11 Exemplo para camada de comportamento

56 11 Ferramenta para Camada de Comportamento -Plugin Inline Code Finder (ICF)

57 11 Ferramenta para Camada de Comportamento -Plugin Web Developer -Opção: Desativar > Desativar Javascript

58 11 Ferramenta para Camada de Comportamento 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?

59 11 Ferramenta para Camada de Comportamento É 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.

60 11 Ferramenta para Camada de Comportamento Ao declarar um <script> sempre usar a marcação <noscript> para fornecer uma alternativa ao usuário. <script> </script> <noscript> document.write("alô Mundo!") Sem suporte a scripts! Acesse esta versão: </noscript>

61 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.

62 12 Ferramenta para Peso dos elementos e otimização da página -Plugin YSLOW -Opção: Statistics

63 12 Ferramenta para Peso dos elementos e otimização da página -Plugin Page Speed do Firebug -Opções: Combinar imagens com CSS Sprites, Ativar Compactação, Adiar análise de javascript, Otimizar imagens

64 12 Ferramenta para Peso dos elementos e otimização da página -Site websiteoptimization -link:

65 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.

66 Avaliação Análise de Desenho 1 Exemplo para identidade visual

67 Avaliação Análise de Desenho 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

68 Avaliação Análise de Desenho 2 Exemplo para Padronização Visual

71 Avaliação Análise de Desenho 3 Cabeçalho -Conceito: Primeiro ponto de identificação e âncora para sítio; -Observado: Tamanho ocupa, elementos presentes.

72 Avaliação Análise de Desenho 3 Exemplo para Cabeçalho

73 Avaliação Análise de Desenho 4 Paleta de Cores -Conceito: Escolha correta é vital para bom funcionamento do sítio ou portal; -Observado: Contraste das cores.

74 Avaliação Análise de Desenho 4 Exemplo para paleta de cores

75 Avaliação Análise de Desenho 4 Ferramenta para paleta de cores -Software Colour Contrast Analyser

76 Avaliação Análise de Desenho 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.

77 Avaliação Análise de Desenho 5 Exemplo para uso de animação e recursos multimídia

78 Avaliação Análise de Desenho 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.

79 Avaliação Análise de Desenho 6 Exemplo para pregnância das imagens

80 Avaliação Análise de Desenho 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

81 Avaliação Análise de Desenho 7 Exemplo para diagramação e uso de área branca

82 Avaliação Análise de Desenho 7 Exemplo para diagramação e uso de área branca

83 Avaliação Análise de Desenho 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.

84 Avaliação Análise de Desenho 8 Exemplo para leiturabilidade

85 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.

86 Avaliação Análise de Acessibilidade 1 Exemplo para simulação de leitor de tela

87 Avaliação Análise de Acessibilidade 1 Ferramenta para simulação de leitor de tela -Plugin Fangs

88 Avaliação Análise de Acessibilidade 1 Ferramenta para simulação de leitor de tela -Leitores de tela

89 Avaliação Análise de Acessibilidade 1 Ferramenta para simulação de leitor de tela -Simulador de tela no ASES

90 Avaliação Análise de Acessibilidade 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

91 Avaliação Análise de Acessibilidade 2 Exemplo para avaliador e simulador de Acessibilidade para sítios - ASES

92 Avaliação Análise de Acessibilidade 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.

93 Avaliação Análise de Acessibilidade 3 Exemplo para navegação por teclado

94 Avaliação Análise de Acessibilidade 4 Descrição das imagens -Conceito: Descrever imagem de forma sucinta; -Observado: Presença do texto alternativo, qualidade do texto, imagens decorativas

95 Avaliação Análise de Acessibilidade 4 Exemplo para descrição das imagens

96 Avaliação Análise de Acessibilidade 4 Ferramenta para descrição das imagens -Propriedade da imagem do Firefox

97 Avaliação Análise de Acessibilidade 4 Ferramenta para descrição das imagens -Plugin Web Developer => Imagens = Exibir textos alternativos

98 Avaliação Análise de Acessibilidade 4 Ferramenta para descrição das imagens -Plugin Web Developer => Imagens => Visualizar informações sobre imagens

99 Avaliação Análise de Acessibilidade 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

100 Avaliação Análise de Acessibilidade 5 Exemplo para quebra de navegação

101 Avaliação Análise de Acessibilidade 5 Ferramenta para quebra de navegação -Plugin Web Developer

102 Avaliação Análise de Acessibilidade 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.

103 Avaliação Análise de Acessibilidade 6 Exemplo para página de descrição com os recursos de acessibilidade

104 Avaliação Análise 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.

105 Avaliação Análise de Acessibilidade 7 Exemplo para barra de acessibilidade

106 Avaliação Análise 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

107 Avaliação Análise de Acessibilidade 8 Exemplo para mapa do sítio

108 Avaliação Análise de Acessibilidade 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.

109 Avaliação Análise de Acessibilidade 9 Exemplo para apresentação de formulários

110 Avaliação Análise de Acessibilidade 9 Ferramenta para apresentação de formulários -Plugin Web Developer

111 Avaliação Análise de Acessibilidade 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.

112 Avaliação Análise de Acessibilidade 10 Exemplo para apresentação de documentos