ESTÁGIO CURRICULAR APLICAÇÃO DAS RECOMENDAÇÕES DE ACESSIBILIDADE NO SISTEMA INTERATIVO DE AVALIAÇÃO PARA AMBIENTES E-LEARNING

Transcrição

1 JHÔNATAN FERLIN ESTÁGIO CURRICULAR APLICAÇÃO DAS RECOMENDAÇÕES DE ACESSIBILIDADE NO SISTEMA INTERATIVO DE AVALIAÇÃO PARA AMBIENTES E-LEARNING EMPRESA: UDESC SETOR: Departamento de Ciência da Computação SUPERVISOR: Marcelo da Silva Hounsell ORIENTADOR: Avanilde Kemczinski CURSO DE BACHARELADO EM CIÊNCIA DA COMPUTAÇÃO CENTRO DE CIÊNCIAS TECNOLÓGIAS - CCT UNIVERSIDADE DO ESTADO DE SANTA CATARINA UDESC JOINVILLE SANTA CATARINA - BRASIL OUTUBRO 2008

2 APROVADO EM.../.../... Avanilde Kemczinski Doutora em Engenharia de Produção. Professora Orientadora Professor Marcelo da Silva Hounsell PhD em Engenharia da Manufatura. Supervisor da CONCEDENTE

3 UDESC UNIVERSIDADE DO ESTADO DE SANTA CATARINA - UDESC CENTRO DE CIÊNCIAS TECNOLÓGICAS - FEJ RELATÓRIO DE ESTÁGIO CURRICULAR FOLHA DE AVALIAÇÃO FINAL Carimbo da Empresa UNIDADE CONCEDENTE Razão Social: UDESC Joinville CGC/MF: / Endereço: Campus Universitário Prof. Avelino Marcante s/n Bairro: Bom Retiro CEP: Cidade: Joinville UF: SC Fone: (47) Atividade Principal: Ensino, Pesquisa e Extensão Supervisor: Marcelo da Silva Hounsell Cargo: Professor Universitário ESTAGIÁRIO Nome: Jhônatan Ferlin Matrícula: Endereço (Em Jlle): Rua Bela Vista 38, apto 202 Bairro: Saguaçu CEP: Cidade: Joinville UF: SC Fone: (47) Curso de: Ciência da Computação Título do Estágio: Aplicar as recomendações de acessibilidade no Sistema Interativo de Avaliação para Ambientes E-learning (SIA-AE). Período: 6/06/08 a 7/0/08/ Carga horária: 360

4 AVALIAÇÃO FINAL DO ESTÁGIO PELO CENTRO DE CIÊNCIAS TECNOLÓGICAS Representada pelo Professor Orientador: Avanilde Kemczinski CONCEITO FINAL NOTA Rubrica do Professor Orientador Excelente (9, a 0) Muito Bom (8, a 9,0) Bom (7, a 8,0) Regular (5,0 a 7,0) Reprovado (0,0 a 4,9) Local e data: UDESC UNIVERSIDADE DO ESTADO DE SANTA CATARINA - UDESC CENTRO DE CIÊNCIAS TECNOLÓGICAS - FEJ RELATÓRIO DE ESTÁGIO CURRICULAR AVALIAÇÃO DO ESTAGIÁRIO PELA EMPRESA Nome do Estagiário: Jhônatan Ferlin QUADRO I a) AVALIAÇÃO NOS ASPECTOS PROFISSIONAIS Pontos - QUALIDADE DO TRABALHO - Considerando o possível 2 - ENGENHOSIDADE - Capacidade de sugerir, projetar, executar modificações ou inovações. 3 - CONHECIMENTO - Demonstrado no desenvolvimento das atividades programadas. 4 - CUMPRIMENTO DAS TAREFAS - Considerar o volume de atividades dentro do padrão razoável 5 - ESPÍRITO INQUISITIVO - Disposição demonstrada para aprender 6 - INICIATIVA - No desenvolvimento das atividades SOMA Pontuação para o Quadro I e II Sofrível - ponto, Regular - 2 pontos, Bom - 3 pontos, Muito Bom - 4 pontos, Excelente - 5 pontos. QUADRO II b) AVALIAÇÃO DOS ASPECTOS HUMANOS Pontos - ASSIDUIDADE - Cumprimento do horário e ausência de faltas 2 -.DISCIPLINA - Observância das normas internas da Empresa. 3 - SOCIABILIDADE - Facilidade de se integrar com os outros no ambiente de trabalho. 4 - COOPERAÇÃO - Disposição para cooperar com os demais para atender as atividades. 5 -SENSO DE RESPONSABILIDADE - Zelo pelo material, equipamentos e bens da empresa. SOMA

5 c) AVALIAÇÃO FINAL Pontos SOMA do Quadro I multiplicada por 7 SOMA do Quadro II multiplicada por 3 SOMA TOTAL LIMITES PARA CONCEITUAÇÃO De 57 a 0 - SOFRÍVEL De 02 a 46 - REGULAR De 48 a 94 BOM De 95 a MUITO BOM De 24 a ECELENTE Nome da Empresa: UDESC Representada pelo Supervisor: Marcelo da Silva Hounsell CONCEITO CONFORME SOMA TOTAL Rubrica do Supervisor da Empresa Local: Data : Carimbo da Empresa

6 UNIVERSIDADE DO ESTADO DE SANTA CATARINA - UDESC CENTRO DE CIÊNCIAS TECNOLÓGICAS - CCT PLANO DE ESTÁGIO CURRICULAR OBRIGATÓRIO ESTAGIÁRIO Nome: Jhônatan Ferlin Matrícula: Endereço (Em Jlle): Rua Bela Vista 38, apto 202 Bairro: Saguaçu CEP: Cidade: Joinville UF: SC Fone: (47) Endereço (Local estágio): Campus Universitário Prof. Avelino Marcante s/n - Departamento de Ciência da Computação (DCC) - Grupo de Pesquisa em Informática na Educação (GPIE) Bairro: Bom Retiro CEP: Cidade: Joinville UF: SC Fone: (47) Regularmente matriculado no semestre: 7 Curso: Ciência da Computação Formatura (prevista) Semestre/Ano: 2/2009 UNIDADE CONCEDENTE Razão Social: UDESC Joinville CGC/MF: / Endereço: Campus Universitário Prof. Avelino Marcante s/n Bairro: Bom Retiro CEP: Cidade: Joinville UF: SC Fone: (47) Atividade Principal: Ensino, Pesquisa e Extensão Supervisor: Marcelo da Silva Hounsell Cargo: Professor Universitário DADOS DO ESTÁGIO Área de atuação: Desenvolvimento de Sistemas. Departamento de atuação: Departamento de Ciência da Computação Fone: (47) Ramal: Horário do estágio: Segunda à Sexta, 8:00 às 22:00 Total de horas: 80 Período: 6/06/2008 à 7/0/2008 Nome do Professor Orientador: Avanilde Kemczinski Departamento: Departamento de Ciência da Computação (DCC) Disciplina(s) simultânea(s) com o estágio Quantas: 4 Quais: ETI Ética em Informática TOCI-08 Segurança em Redes de Computadores TOCI-0 Gerência de Redes de Computadores TCC-I Trabalho de Conclusão de Curso I

7 OBJETIVO GERAL Aplicar as recomendações de acessibilidade no Sistema Interativo de Avaliação para Ambientes E-learning (SIA-AE). ATIVIDADES. Levantamento 2. Avaliação 3. Projeto 4. Implementação / Testes OBJETIVOS ESPECÍFICOS.. Levantamento das principais recomendações existentes sobre acessibilidade..2. Levantamento das ferramentas automáticas..3. Escolha dos principais elementos de avaliação. 2.. Aplicar as recomendações de acessibilidade e ferramentas automáticas no SIA-AE Classificar os erros do SIA-AE conforme o grau de prioridade. 3.. Especificação formal das alterações no SIA-AE. 4.. Implementação das alterações realizadas no SIA-AE. HORAS 20 hrs 20 hrs 20 hrs 30 hrs 30 hrs 60 hrs 80hrs Rubrica do Professor Orientador Aprovação do Comitê Rubrica do Coordenador de Estágio Rubrica do Supervisor da Empresa Data: Data: Data: Data: Carimbo da Empresa

8 CRONOGRAMA FÍSICO E REAL PERÍODO (20 horas) PR ATIVIDADES Levantamento P R 2 Avaliação P R 3 Projeto P R 4 Implementação P R

9 SUMÁRIO LISTA DE FIGURAS...2 LISTA DE TABELAS...3 LISTA DE ABREVIATURAS...4 RESUMO...5. INTRODUÇÃO OBJETIVOS GERAL ESPECÍFICOS ESTRUTURA DO TETO A EMPRESA HISTÓRICO PRINCIPAIS CURSOS HISTÓRICO DO GPIE CONSIDERAÇÕES GERAIS DESENVOLVIMENTO LEVANTAMENTO RECOMENDAÇÕES SOBRE ACESSIBILIDADE Web Content Accessibility Guidelines Section 508 Standards Accessible Design Guidelines Avaliação da Acessibilidade de Websites via Checklist com Foco na Deficiência Visual FERRAMENTAS AUTOMÁTICAS ELEMENTOS PARA AVALIAÇÃO AVALIAÇÃO LISTA DOS PONTOS DE VERIFICAÇÃO PARA AS WCAG Lista dos Pontos de Verificação de Prioridade Lista dos Pontos de Verificação de Prioridade Lista dos Pontos de Verificação de Prioridade FERRAMENTA AUTOMÁTICA SILVINHA Página Inicial Painel de Controle Perfil do Usuário Ambiente Indicador Decisão Categoria (Um) Categoria 2 (Dois) Avaliação Técnica Avaliação Pedagógica Requisitos Resultados Login Lembrar Login Informações CHECKLIST DA ANDRÉIA PILLA PRIORIDADES DE CORREÇÃO PROJETO E IMPLEMENTAÇÃO ESPECIFICAÇÃO DAS ALTERAÇÕES DE PRIORIDADE... 29

10 Método A Método B Método C ESPECIFICAÇÃO DAS ALTERAÇÕES DE PRIORIDADE Método A Método B Método C ESPECIFICAÇÃO DAS ALTERAÇÕES DE PRIORIDADE Método A Método B Método C OUTRAS MELHORIAS IMPLEMENTADAS CONSIDERAÇÕES FINAIS...46 REFERÊNCIAS...47

11 2 LISTA DE FIGURAS Figura. SIA-AE segundo os Pontos de Verificação da W3C....4 Figura 2. Percentual de questões que satisfizeram o checklist de PILLA...28 Figura 3. Atualizar Cadastro (antes)...30 Figura 4. Atualizar Cadastro (depois) Figura 5. Aviso da necessidade do javascript...3 Figura 6. Organograma das etapas Figura 7. Sinais "+" e "-" acessíveis por teclado Figura 8. Disposição dos elementos de cabeçalho na página inicial do sistema Figura 9. Elementos de cabeçalho da página inicial do painel de controle...37 Figura 0. Uso do elemento <noscript>...38 Figura. Mensagem avisando da abertura de outra página Figura 2. Menu antes e depois da alteração no atributo <title>...40 Figura 3. Sitemap do SIA-AE...4 Figura 4. Destaque do link "Ir para conteúdo"...42 Figura 5. Siglas descritas por extenso...43 Figura 6. Recurso de acessibilidade para aumentar e diminuir a fonte...45

12 3 LISTA DE TABELAS Tabela. Pontos de verificação sobre casos gerais...5 Tabela 2. Pontos de verificação sobre casos em que são utilizados mapas de imagens...5 Tabela 3. Pontos de verificação sobre casos em que são utilizadas tabelas....5 Tabela 4. Ponto de verificação sobre casos em que são utilizadas frames...5 Tabela 5. Ponto de verificação sobre casos em que são utilizados applets e scripts...5 Tabela 6. Pontos de verificação sobre casos em que é feito uso de elementos multimídia...6 Tabela 7. Ponto de verificação de último caso...6 Tabela 8. Pontos de verificação sobre casos gerais de prioridade Tabela 9. Pontos de verificação de prioridade 2, sobre casos em que são utilizadas tabelas....7 Tabela 0. Ponto de verificação de prioridade 2, sobre casos em que são utilizadas frames...7 Tabela. Ponto de verificação de prioridade 2, sobre casos em que são utilizados formulários...7 Tabela 2. Ponto de verificação de prioridade 2, sobre casos em que são utilizados applets e scripts...8 Tabela 3. Ponto de verificação de prioridade 3, sobre casos gerais....8 Tabela 4. Ponto de verificação de prioridade 3, sobre casos em que são utilizados mapas de imagens...8 Tabela 5. Pontos de verificação de prioridade 3, sobre casos em que são utilizadas tabelas....9 Tabela 6. Ponto de verificação de prioridade 3, sobre casos em que são utilizados formulários...9 Tabela 7. Não-conformidades da página inicial...20 Tabela 8. Não-conformidades do painel de controle...20 Tabela 9. Não-conformidades da página de perfil do usuário...2 Tabela 2. Não-conformidades da página de escolha do ambiente...2 Tabela 22. Não-conformidades da página de indicador Tabela 23. Não-conformidades da página de decisão Tabela 24. Não-conformidades da página de escolha da categoria...23 Tabela 25. Não-conformidades da página de escolha da categoria Tabela 26. Não-conformidades da página de avaliação técnica...24 Tabela 27. Não-conformidades da página de avaliação pedagógica...24 Tabela 28. Não-conformidades da página de requisitos...25 Tabela 29. Não-conformidades da página de resultados Tabela 30. Não-conformidades da página de realizar login Tabela 3. Não-conformidades da página de lembrar login...26 Tabela 32. Não-conformidades da página de informações...26 Tabela 33. Resultado da avaliação pelo checklist...28

13 4 LISTA DE ABREVIATURAS SIGLA CCT CSS CNPq DCC GPIE HTML PHP SIA-AE TOCI-05 TOCI-07 UDESC WCAG DESCRIÇÃO Centro de Ciências Tecnológicas Cascading Style Sheets Conselho Nacional de Desenvolvimento Científico e Tecnológico Departamento de Ciência da Computação Grupo de Pesquisa em Informática na Educação HyperText Markup Language Hypertext Preprocessor Sistema Interativo de Avaliação para Ambientes E-learning Interface Humano-Computador Desenvolvimento de Aplicações na Web Universidade do Estado de Santa Catarina Web Content Accessibility Guidelines

14 5 RESUMO Este relatório consiste na documentação das atividades desenvolvidas no estágio curricular, realizado na Universidade do Estado de Santa Catarina (UDESC), no Departamento de Ciência da Computação (DCC). O estágio teve como objetivo principal aplicar as recomendações de acessibilidade no site do Sistema Interativo de Avaliação para Ambientes E- learning (SIA-AE), bem como praticar melhorias na interface do ambiente. As atividades foram divididas em 4 etapas principais: () levantamento das diretrizes de acessibilidade; (2) avaliação do site por meio de ferramenta automática e checklist; (3) projeto para especificação das nãoconformidades encontradas e subseqüentes melhorias; e (4) implementação. Ao final do processo foi disponibilizado na internet o site com as alterações alcançadas.

15 6. INTRODUÇÃO O relatório descreve as atividades que foram realizadas nas disciplinas de Estágio Curricular I e Estágio Curricular II, previstas no Currículo do Curso de Bacharelado em Ciência da Computação, do CCT/UDESC, completando uma carga horária total de 360 horas. O desenvolvimento do estágio decorreu na própria instituição de ensino, junto ao Grupo de Pesquisa em Informática na Educação (GPIE) do Departamento de Ciência da Computação. Durante o período foram desenvolvidas as etapas propostas no plano de estágio curricular. Estas etapas foram estabelecidas segundo a temática abordada no estágio: a acessibilidade na web. Diante desta área do conhecimento em websites acessíveis, a motivação para o desenvolvimento deste trabalho se sustenta na necessidade do Sistema Interativo de Avaliação para Ambientes E-learning (SIA-AE) fornecer acesso a todas as pessoas, independente de quaisquer limitações humanas ou tecnológicas. Para isso, estabeleceram-se os seguintes objetivos: Iniciou-se por um levantamento das principais recomendações existentes sobre acessibilidade e das ferramentas automáticas para posterior escolha de quais destes recursos e/ou métodos serão aplicados no SIA-AE. Na seqüência ocorreu uma avaliação que contemplou a aplicação das recomendações de acessibilidade e ferramentas automáticas no SIA-AE para verificar as não-conformidades presentes. Reconhecido as não conformidades, classificaram-se os erros conforme o grau de prioridade de correção. Na etapa de Projeto, ocorreu a especificação formal das alterações propostas no sistema. Propostas estas, que visam tornar o SIA-AE acessível. Por fim, a implementação das correções. Esta etapa requereu grande parte do estágio curricular, visto ser a mais trabalhosa, desde o entendimento do código fonte ao fato de ocorrerem constantes reconstruções de componentes do sistema para adequar as diretrizes de acessibilidade. Paralelamente ao início do estágio curricular, o estudo das disciplinas de Fundamentos em Interface Humano-Computador (TOCI-05) e Desenvolvimento de Aplicações na Web (TOCI-07) ajudaram a incorporar um conhecimento importante para o desenvolvimento do estágio. A primeira em informações sobre usabilidade e acessibilidade e a segunda em conhecimentos técnicos em programação para Web.

16 7.. OBJETIVOS Curricular. Nesta seção será apresentado o objetivo geral e os objetivos específicos do Estágio... GERAL Aplicar as recomendações de acessibilidade no Sistema Interativo de Avaliação para Ambientes E-learning...2. ESPECÍFICOS - Levantamento das principais recomendações existentes sobre acessibilidade; - Levantamento das ferramentas automáticas; - Escolha dos principais elementos de avaliação; - Aplicar as recomendações de acessibilidade e ferramentas automáticas no SIA- AE; - Classificar os erros do SIA-AE conforme o grau de prioridade; - Especificação formal das alterações no SIA-AE; - Implementação das correções; - Teste das novas funcionalidades..2. ESTRUTURA DO TETO A organização do relatório segue em quatro partes. A introdução ao trabalho realizado é apresentada no primeiro capítulo, onde estão descritos os objetivos gerais e específicos. O capítulo dois é dedicado à apresentação da concedente onde foi realizado o estágio, neste caso a UDESC, através de um breve histórico, seus principais cursos e clientes. No capítulo três estão descritas as atividades desenvolvidas durante o estágio, as quais são divididas nas etapas de levantamento, avaliação, projeto e implementação. As considerações finais estão presentes no último capítulo.

17 8 2. A EMPRESA Neste capítulo será apresentado um breve histórico da concedente, bem como seu ramo de atividade, principais serviços, cursos e sobre o Grupo de Pesquisa em Informática na Educação, onde foi realizado o estágio. 2.. HISTÓRICO Conforme UDESC Joinville (2008), o Centro de Ciências Tecnológicas (CCT) foi criado sob a denominação de Faculdade de Engenharia de Joinville (FEJ), pelo governo do Estado de Santa Catarina, em 09 de outubro de 956, através da Lei número 520/56. O primeiro vestibular, no entanto, só foi realizado em julho de 965, com apenas 09 candidatos, mas somente em º de agosto do mesmo ano foram iniciadas as atividades da instituição, com o curso de Engenharia de Operação modalidade Mecânica de Máquinas e Motores. Depois de quatro anos, tendo formado seis turmas de engenheiros, a faculdade logrou finalmente a aprovação definitiva do Exmo. Senhor Presidente da República, pelo Decreto Federal 68.50, de 5 de abril de 97, após as inspeções e pareceres das comissões que dela se ocuparam. Os Diretores que tiveram em suas mãos a responsabilidade da Escola: Engenheiro Harro Stamm, Engenheiro Adil Calomeno, Engenheiro Domingos Filomeno Neto e o diretor na época do reconhecimento Professor Mário de Moraes. A Faculdade de Engenharia (FEJ) funcionava na época em sede própria, na rua Otto Boehm, 48, no centro de Joinville, onde hoje funciona a Rádio Udesc FM e a Fundação Softville. O campus universitário Professor Avelino Marcante, onde hoje se localiza o Centro de Ciências Tecnológicas teve a construção iniciada em 977 e foi inaugurada em 8 de março de 979. O governo do estado de Santa Catarina, através da Lei número de º de outubro 990, reconheceu a Universidade do Estado de Santa Catarina (UDESC) e a então FEJ passou a ser designada CCT, localizada no Campus II, em Joinville PRINCIPAIS CURSOS No CCT são mais de alunos distribuídos em sete cursos de graduação: Engenharia Civil, Engenharia Elétrica, Engenharia Mecânica, Engenharia de Produção e

18 9 Sistemas, Licenciatura em Física, Ciência da Computação e Tecnologia em Sistemas de Informação (UDESC Joinville, 2008). Além destes o CCT também disponibiliza cursos de pós-graduação, em nível de mestrado: Engenharia Elétrica, Engenharia de Materiais e Física. E curso seqüencial em Gestão do Varejo - Ênfase em Materiais de Construção HISTÓRICO DO GPIE Com o nome de Sistemas de Informação e Gestão do Conhecimento o grupo foi oficializado no CNPq em 0 de Abril de Ao final do mesmo ano passou a se chamar Grupo de Pesquisa em Informática na Educação - GPIE. Localizado no Departamento de Ciência da Computação, do Centro de Ciências Tecnológicas, da Universidade do Estado de Santa Catarina, em Joinville o grupo conta atualmente com quatro professores e doze alunos vinculados em duas linhas de pesquisa, sendo elas: () Ensino-Aprendizagem auxiliado por Computador e (2) Tecnologia Educacional CONSIDERAÇÕES GERAIS A UDESC Joinville também leva conhecimento à comunidade através dos programas de extensão como a Informática na Terceira Idade e Informática para Escolas Públicas, que ofereceram gratuitamente aulas para promover a inclusão digital de idosos e alunos carentes das redes pública municipal e estadual de Joinville. Outros exemplos de ações de cunho social são os projetos Universidade para Idosos e Entendendo Física para o Vestibular e projetos culturais (UDESC Joinville, 2008).

19 0 3. DESENVOLVIMENTO Este capítulo abordará todo o desenvolvimento do estágio conforme as etapas realizadas: levantamento, avaliação, projeto e implementação. 3.. LEVANTAMENTO Para iniciar o trabalho, foi essencial à busca por recomendações e/ou diretrizes que especifiquem quais os requisitos fundamentais para construir websites acessíveis. Por isso, esta primeira etapa propôs o estudo das principais recomendações existentes para acessibilidade na web. Dessa maneira, adquiriu-se conhecimento para conseguinte desenvolvimento do estágio. Além disso, buscou-se também por ferramentas automáticas. Estas que realizam uma varredura no código de uma página (HTML, por exemplo) e ao fim indicam os erros segundo as prioridades de acessibilidade incorporadas em sua análise. Por fim, este capítulo estabelece os métodos e ferramentas selecionadas para sustentarem o processo de adequação do SIA-AE acessível RECOMENDAÇÕES SOBRE ACESSIBILIDADE Inicialmente, quatro trabalhos referentes a recomendações sobre acessibilidade fizeram parte da pesquisa bibliográfica, são eles: - Web Content Accessibility Guidelines.0 (W3C, 999). - Section 508 Standards (SECTION 508, 998). - Accessible Design Guidelines (HORTON, 2002). - Avaliação da Acessibilidade de Websites via Checklist com Foco na Deficiência Visual (PILLA, 2006) Web Content Accessibility Guidelines.0 Este guia da World Wide Web Consortium (W3C) em 5 de Maio de 999 descreve as recomendações para a acessibilidade do conteúdo da Web.0, que direciona suas explicações em como tornar o conteúdo Web acessível a todos os usuários, independente da ferramenta usada (navegadores web para desktops, laptops, celulares ou leitores de tela) e das limitações

20 associadas ao respectivo uso (ambientes barulhentos, salas mal iluminadas ou com excesso de iluminação, utilização sem o uso das mãos) (W3C, 999). Assim, segundo a W3C (999) as recomendações abordam dois temas genéricos: assegurar uma transformação harmoniosa e tornar o conteúdo compreensível e navegável. - Assegurar uma transformação harmoniosa: Quando uma página mantém-se acessível apesar da presença de quaisquer limitações como deficiências físicas, sensoriais e cognitivas, limitações de trabalho e as barreiras tecnológicas este tema. Esse tema é abordado com mais detalhes nas recomendações a. - Tornar o conteúdo compreensível e navegável: Quando o conteúdo da página mantém uma linguagem clara e simples e também pela presença de meios compreensíveis para proceder à navegação entre páginas e no interior dela. Esse tema é abordado com mais detalhes nas recomendações 2 a 4. O documento da W3C, adaptado para a língua portuguesa, com as 4 recomendações sobre design acessível está descrito no anexo Section 508 Standards A Section 508 (lei americana de acessibilidade) define critérios e regras a serem seguidas na área de tecnologia de informação e outros meios de comunicação eletrônica. Especificamente no item são descritas as regras especialmente para garantir a acessibilidade das informações e aplicações disponibilizadas na Web (PILLA, 2006). Estas regras foram definidas conforme as normas da W3C. O anexo 2 contém os 6 itens que compõem as regras para acessibilidade na Web da Section Accessible Design Guidelines O Guia de Design Acessível de Sarah Horton (2002) foi desenvolvido com foco na acessibilidade para deficientes visuais, por este ser o maior desafio para desenvolvedores de Websites. As guias são divididas em 6 categorias: guias gerais, referentes ao texto, imagens (gráficos), multimídia, formulários e layout. Existe também um checklist para a verificação da acessibilidade referente às guias. O anexo 3 contém o documento com todas as guias e o checklist.

21 Avaliação da Acessibilidade de Websites via Checklist com Foco na Deficiência Visual Este trabalho de conclusão de curso teve como objetivo principal o desenvolvimento de um checklist para verificação da acessibilidade de Websites e a realização de um estudo de caso, avaliando sites governamentais de Joinville e Santa Catarina com o checklist desenvolvido para verificar a situação dos sites avaliados (PILLA, 2006). O checklist apresentado neste trabalho foi estruturado com base nas diretrizes de acessibilidade da W3C (W3C, 999), da Section 508 (SECTION 508, 998) e do checklist da Sarah Horton (HORTON, 2002), segundo PILLA (2006), para permitir uma avaliação de acessibilidade que esteja de acordo com a lei nº 5296, que obriga todos os Websites governamentais a se tornarem acessíveis. O checklist proposto está descrito no anexo FERRAMENTAS AUTOMÁTICAS As ferramentas automáticas tornam mais rápida a tarefa de web-designers, webmasters e das pessoas que desenvolvem sites para a Internet e tenham a necessidade de torná-los acessíveis. Esses validadores representam uma grande economia de tempo, pois são capazes de verificar automaticamente vários itens de um site, procurando por erros como falta de texto alternativo em imagens ou links, etc. Isto é útil, pois seria trabalhoso conferir todos os elementos de uma página buscando por este tipo de erro (PILLA, 2006). Várias ferramentas foram encontradas neste levantamento, como por exemplo: - Silvinha (DASILVA, 2006). - EvalAcess 2.0 (EVALACCESS). - HERA 2.0 Beta (HERA, 2003). - HiSoftware Cynthia Says (CYNTHIA SAYS, 2003). - Watchfire WebACT (WATCHFIRE, 2004). - WAVE (WAVE, 200) ELEMENTOS PARA AVALIAÇÃO Após o levantamento das recomendações e ferramentas automáticas, foram selecionados quais destes métodos participariam da avaliação de acessibilidade do SIA-AE. Assim, escolheu-se para uso do trabalho proposto, as recomendações.0 da W3C, o checklist da Andréia Pilla e a ferramenta automática DaSilva.

22 3 O guia da W3C (W3C, 999) conhecido internacionalmente como o maior e mais completo órgão regulamentador de acessibilidade na Web, e com isso, suas diretrizes são referenciadas em trabalhos relacionados. O checklist apresentado por PILLA (2006) com foco na deficiência visual. Este foi desenvolvido a partir do estudo das recomendações da W3C (W3C, 999), da Section 508 (SECTION 508, 998) e do checklist de Sarah Horton (HORTON, 2002), sendo então de ótima qualidade para à avaliação. A ferramenta automática DaSilva (DASILVA, 2006) além de ser um software brasileiro, também dispõe da versão para download. Seus resultados são fáceis de serem analisados, pois são bem detalhados, permitindo ao usuário perceber em qual área do código apresenta erros de acessibilidade AVALIAÇÃO A avaliação de um sistema ou página da web é comumente realizada a partir de técnicas como, análise via checklist, avaliação heurística, ensaios de interação ou por ferramentas automáticas. Assim, este trabalho abordará o processo de avaliação de acessibilidade realizada no Sistema Interativo de Avaliação para Ambientes E-learning (SIA-AE) utilizando das seguintes técnicas: - Avaliação segundo as recomendações para a acessibilidade do conteúdo da Web.0 da W3C (WCAG.0 - Web Content Accessibility Guidelines.0); - Avaliação pela ferramenta automática DaSilva; e - Avaliação por checklist da Andréia Pilla. Cada método apresenta vantagens e desvantagens, por isso foi imprescindível o uso de mais de uma técnica. Desse modo, tem-se mais consistência nos resultados obtidos, visto que a desvantagem de uma técnica é suprida pela vantagem da outra. A seguir será descrito os resultados obtidos por cada um dos métodos listados anteriormente LISTA DOS PONTOS DE VERIFICAÇÃO PARA AS WCAG.0 Os pontos de verificação das recomendações para a acessibilidade do conteúdo da Web -.0 são destinados aos criadores do conteúdo Web, pois ajudam estes a verificar quais requisitos devem ser satisfeitos no código HTML, para remover obstáculos que impeçam o acesso ao conteúdo do site por qualquer usuário.

23 4 A vantagem desse método de avaliação é a fácil verificação das não conformidades, encontradas na página, no que tange a características visuais, como por exemplo, a intensidade de contraste entre fundo e texto. Por ser um método que exige a avaliação manual, logo mais tempo é requerido, além da dificuldade em verificar erros no código fonte da página avaliada. A seguir será apresentado o resultado da avaliação do SIA-AE conforme os pontos de verificação da W3C. Os pontos de verificação estão divididos pelo grau de prioridade com base no respectivo impacto, em termos de acessibilidade (W3C, 999): - Prioridade : Pontos que os criadores de conteúdo Web devem satisfazer inteiramente. - Prioridade 2: Pontos que os criadores de conteúdos na Web deveriam satisfazer. - Prioridade 3: Pontos que os criadores de conteúdos na Web podem satisfazer. Cada item recebeu uma indicação informando se atende ou não ao requisito de acessibilidade ou se a questão não se aplicava (N/A) às páginas avaliadas. O modelo abaixo (ver Figura ) demonstra os 65 pontos de verificação distribuídos em porcentagem quando da aplicação do sistema SIA-AE. Atendem; 7 Não se aplicam; 30 Não Atendem; 8 Figura. SIA-AE segundo os Pontos de Verificação da W3C. O resultado detalhado obtido através deste método será apresentado nos capítulos 3.2.., e Lista dos Pontos de Verificação de Prioridade As tabelas que se seguem apresentam os pontos de verificação de prioridade. Dos sete itens referentes a casos gerais (ver Tabela ), somente três se aplicavam à avaliação, sendo que desses, apenas um não atendia ao requisito de acessibilidade.

24 Pontos Casos Gerais Sim Não N/A. Forneça um equivalente textual para todo o elemento não textual. Pode ser feito através do atributo "alt" ou "longdesc", ou no conteúdo do elemento. 2. Certifique-se de que toda a informação transmitida com base na cor se encontra também disponível sem cor. 4. Identifique claramente quaisquer alterações de idioma no texto de um documento, incluindo os equivalentes textuais. 6. Organize os documentos de forma que os mesmos sejam passíveis de serem lidos sem o uso das folhas de estilo. Quando um documento HTML é apresentado sem a folha de estilo a que está associado, deve ser, mesmo assim, possível ler o documento. 6.2 Certifique-se que o equivalente para conteúdo dinâmico é atualizado quando se dá a alteração dinâmica do conteúdo. 7. Evite concepções que possam provocar intermitência do ecrã, até que os agentes do utilizador possibilitem o seu controle. 4. Use linguagem clara e o mais simples possível, apropriada ao conteúdo do sítio Web. Tabela. Pontos de verificação sobre casos gerais Os dois itens (ver Tabela 2) que especificam o uso de mapas de imagens não se aplicam nesta avaliação, pois o site SIA-AE não contém nenhum mapa de imagem. Pontos Casos em que são utilizados mapas de imagens Sim Não N/A.2 Forneça links de texto redundantes para cada região ativa de um mapa de imagens "server-side". 9. Providencie mapas de imagens "client-side" em vez de mapas de imagens "serverside", exceto quando as regiões não possam ser definidas por uma das figuras geométricas disponíveis. Tabela 2. Pontos de verificação sobre casos em que são utilizados mapas de imagens. Também, os dois itens (ver Tabela 3) que especificam o uso de tabelas não se aplicam nesta avaliação, pois o sistema SIA-AE não contém tabelas para efeito de layout, já que usa blocos divs para formatação do layout. Pontos Casos em que são utilizadas tabelas Sim Não N/A 5. Nas tabelas de dados, identifique as linhas e as colunas que constituem os cabeçalhos. 5.2 Nas tabelas de dados que têm dois ou mais níveis lógicos de linhas ou colunas use notação para associar células de dados e células de cabeçalhos. Tabela 3. Pontos de verificação sobre casos em que são utilizadas tabelas. O único item sobre frames não está satisfeito (ver Tabela 4). Pontos Casos em que são utilizadas frames (molduras) Sim Não N/A 2. Forneça um título (<TITLE>) para cada "FRAME", facilitando assim a sua identificação e navegação. Tabela 4. Ponto de verificação sobre casos em que são utilizadas frames. Tabela 5). O item sobre scripts e applets também não satisfaz o critério de acessibilidade (ver Pontos Casos em que são utilizados applets e scripts Sim Não N/A 6.3 Certifique-se que as páginas são usáveis quando scripts, applets, ou outros objetos programáveis se encontram desativados ou não são suportados. Tabela 5. Ponto de verificação sobre casos em que são utilizados applets e scripts. 5

25 Também, os dois itens (ver Tabela 6) que especificam o uso de elementos multimídia, mais precisamente arquivos de vídeo, não se aplicam, pois o sistema SIA-AE não apresenta este tipo de mídia. Pontos Casos em que é feito uso de elementos multimídia Sim Não N/A.3 Forneça uma descrição em áudio da informação relevante da visualização de uma apresentação multimídia..4 Para qualquer apresentação multimídia temporizada (e.g., um filme ou animação), sincronize alternativas equivalentes (e.g., legendas ou áudio descritivo) com a apresentação. Tabela 6. Pontos de verificação sobre casos em que é feito uso de elementos multimídia. O ultimo item de prioridade (ver Tabela 7) também não é satisfeito. Pontos E se, apesar de todos os esforços... Sim Não N/A.4 Se, depois de todos os esforços, não conseguir criar uma página acessível, forneça um link para uma página alternativa que use as tecnologias W3C na sua versão acessível, com informação equivalente (ou com as mesmas funcionalidades), que seja atualizada tantas vezes quantas as páginas inacessíveis (originais). Tabela 7. Ponto de verificação de último caso Lista dos Pontos de Verificação de Prioridade 2 As tabelas abaixo apresentam os pontos de verificação de prioridade 2. Dos vinte itens referentes a casos gerais de acessibilidade descritos na Tabela 8, quatorze desses fez parte da avaliação, sendo que metade estava de acordo com os pontos de verificação. Pontos Casos Gerais Sim Não N/A 2.2 Certifique-se que as combinações das cores de fundo e do texto fornecem um contraste suficiente quando visualizados por alguém que tenha déficit de percepção de cor ou quando a mesma é visualizada num ecrã a preto e branco. 3. Sempre que existir uma linguagem com notação apropriada, use a notação em vez das imagens para transmitir a informação. 3.2 Crie documentos validando a notação com a gramática formal publicada. 3.3 Use folhas de estilo para controlar a disposição dos elementos na página e a forma de apresentá-los. 3.4 Use unidades relativas em vez de absolutas nos valores dos atributos da linguagem de notação e valores das propriedades das folhas de estilo. 3.5 Use os elementos cabeçalho (<H>...<H6>) para transmitir a estrutura dos documentos e utilize-os de acordo com as especificações. 3.6 Faça uso da correta notação para as listas (<ul>...<ol>) e para os seus pontos de enumeração (<li>). 3.7 Use a notação correta para citações (<Q> para citação curta e <BLOCKQUOTE> para citação longa, normalmente superior a três linhas). 6.5 Certifique-se que o conteúdo dinâmico é acessível ou forneça uma apresentação ou página alternativa. 7.2 Evite concepções que possam provocar o piscar (modificação do conteúdo em intervalos constantes) do conteúdo das páginas. 7.4 Não crie páginas de reiniciar periodicamente automáticas. 7.5 Não use a notação para redirecionar páginas automaticamente até que os agentes do utilizador disponham da capacidade para interromper o processo.

26 7 0. Não provocar o aparecimento de janelas de sobreposição ou outras, e não fazer com que a janela atual seja modificada sem que o utilizador disso seja informado. Use tecnologias W3C quando a mesma esteja disponível e seja apropriada para uma tarefa. Utilize as versões mais recentes, desde que suportadas..2 Evite o uso de notação desatualizada das tecnologias do W3C. 2.3 Divida grandes blocos de informação em grupos mais geríveis e apropriados. 3. Identifique claramente o destino de cada link. 3.2 Forneça metadados para acrescentar informações semânticas às páginas e aos sítios Web. 3.3 Forneça informação sobre a organização geral do sítio Web (e.g. mapa do site, índice). 3.4 Use mecanismos de navegação de uma forma consistente. Tabela 8. Pontos de verificação sobre casos gerais de prioridade 2. satisfeitos. Já os dois pontos sobre utilização de tabelas (ver Tabela 9) estão plenamente Pontos Casos em que são utilizadas tabelas Sim Não N/A 5.3 Não deve usar tabelas para formatar páginas a não ser que a tabela faça sentido quando em formato linear. Caso contrário, se a tabela não fizer sentido, forneça um equivalente alternativo (o qual poderá ser uma versão linear). Para formatar páginas recomenda-se o uso de CSS. 5.4 Se uma tabela for utilizada para formatar uma página, não utilize qualquer notação de estrutura para efeitos de formatação visual. Tabela 9. Pontos de verificação de prioridade 2, sobre casos em que são utilizadas tabelas. O único item, de prioridade 2, sobre frames (ver Tabela 0) não se aplicou nesta avaliação. Pontos Casos em que são utilizadas frames (molduras) Sim Não N/A 2.2 Descreva o propósito das frames e a forma como as mesmas estão relacionadas umas com as outras, caso essa relação, suportada apenas nos títulos das frames, não seja óbvia para o utilizador. Tabela 0. Ponto de verificação de prioridade 2, sobre casos em que são utilizadas frames. Os pontos de verificação sobre uso de formulários (ver Tabela ), de dois, apenas um não atendia ao requisito. Pontos Casos em que são utilizados formulários Sim Não N/A 0.2 Até que os agentes do utilizador suportem associações explicitas entre os rótulos e os controles de formulário, para todos os controles com rótulos implicitamente associados, certifique-se que os rótulos se encontram apropriadamente posicionados. 2.4 Associe explicitamente os rótulos aos respectivos controles. Em HTML essa associação faz-se geralmente através do elemento <LABEL>. Tabela. Ponto de verificação de prioridade 2, sobre casos em que são utilizados formulários. Dos cinco itens sobre utilização de scripts e applets (ver Tabela 2), dois não se aplicavam a avaliação e os outros não satisfaziam os requisitos de acessibilidade. Pontos Casos em que são utilizados applets e scripts Sim Não N/A 6.4 No caso dos scripts e dos applets, certifique-se que os eventos que o manipulam funcionam independentemente do dispositivo de entrada. 7.3 Enquanto os agentes do utilizador não permitam congelar o movimento do conteúdo, não use movimento nas páginas. 8. Faça com que os elementos programáveis tais como scripts e applets sejam diretamente acessíveis ou compatíveis com tecnologias de apoio. 9.2 Certifique-se de que qualquer elemento dotado de interface própria funciona

27 8 independentemente do dispositivo utilizado. No caso dos scripts, especifique manipuladores de eventos por software em vez de 9.3 manipuladores de eventos dependentes de dispositivos. Tabela 2. Ponto de verificação de prioridade 2, sobre casos em que são utilizados applets e scripts Lista dos Pontos de Verificação de Prioridade 3 As tabelas abaixo apresentam os pontos de verificação de prioridade 2. Dos quatorze pontos de verificação sobre casos gerais de prioridade 3 (ver Tabela 3), sete se aplicavam à avaliação, sendo que cinco desses estão de acordo com os pontos listados. Pontos Casos Gerais Sim Não N/A 4.2 Especifique por extenso cada abreviatura ou acrônimo quando da sua primeira ocorrência num documento. 4.3 Identifique o idioma principal do documento. 9.4 Crie uma seqüência lógica de "tabs" para percorrer os links, controles de formulários e objetos. 9.5 Defina teclas de atalho para links importantes (incluindo os que se encontram nos mapas de imagem "client-side"), controles de formulário, e grupos de controles de formulários. 0.5 Até que os agentes do utilizador consigam distinguir links adjacentes, inclua caracteres "não-linkados", circundados por espaços, entre os links adjacentes..3 Disponibilize a informação necessária de forma a que os utilizadores recebam os documentos de acordo com as suas preferências. 3.5 Providencie barras de navegação para salientar e dar acesso aos mecanismos de navegação. De preferência faça use o elemento de notação para listas (<ul>...<ol>) para estruturar esses mecanismos. Use CSS para lhes dar estilo. 3.6 Agrupe links relacionados, identifique o grupo e, forneça uma forma de saltar um grupo. 3.7 Caso seja fornecida uma função de pesquisa, ative diferentes tipos de pesquisa de modo a corresponderem a diferentes níveis de competências e às preferências dos utilizadores. 3.8 Coloque informação diferenciada no início dos cabeçalhos, parágrafos, listas, etc. 3.9 Providencie informação sobre coleções de documentos (i.e. documentos compostos por múltiplas páginas). 3.0 Providencie um meio de saltar por cima de múltiplas linhas em arte ASCII. 4.2 Reforce a mensagem texto através de gráficos e/ou áudio na medida em que os mesmos facilitem a compreensão da página. 4.3 Crie um estilo de apresentação que seja consistente ao longo das Páginas. Tabela 3. Ponto de verificação de prioridade 3, sobre casos gerais. O item referente a mapas de imagens (ver Tabela 4) de prioridade 3 não se aplica à avaliação, já que o sistema SIA-AE não apresenta mapas de imagens. Pontos Casos em que são utilizados mapas de imagens Sim Não N/A.5 Até que os agentes do utilizador alcancem o equivalente textual dos links existentes nas regiões ativas dos mapas de imagem "client-side", forneça links textuais redundantes para cada região ativa do mapa. Tabela 4. Ponto de verificação de prioridade 3, sobre casos em que são utilizados mapas de imagens. avaliação. Também, os três pontos sobre utilização de tabelas (ver Tabela 5) não se aplicam à

28 Pontos Casos em que são utilizadas tabelas Sim Não N/A 5.5 Providencie sumários para as tabelas. 5.6 Use abreviaturas na designação dos cabeçalhos das tabelas. 0.3 Até que os agentes do utilizador identifiquem corretamente o texto colocado lado a lado, disponibilize uma alternativa linear do texto (na página atual ou numa outra) para todas as tabelas que disponham o texto de forma paralela, ao longo dos limites das colunas. Tabela 5. Pontos de verificação de prioridade 3, sobre casos em que são utilizadas tabelas. O último ponto de verificação sobre uso de formulários (ver Tabela 6), não satisfaz o referente critério para acessibilidade. Pontos Casos em que são utilizados formulários Sim Não N/A 0.4 Inclua caracteres predefinidos de preenchimento nas caixas de edição e nas áreas de texto. Tabela 6. Ponto de verificação de prioridade 3, sobre casos em que são utilizados formulários FERRAMENTA AUTOMÁTICA SILVINHA O Sistema Interativo de Avaliação para Ambientes E-learning (SIA-AE) também passou pela verificação de acessibilidade através do software Silvinha. Este software é uma versão para download, executável no sistema operacional Windows, da ferramenta automática DaSilva. A vantagem em se optar por este tipo de avaliação se refere à maior rapidez na localização dos erros no código fonte da página. Por outro lado, a avaliação toma como erros qualquer inconformidade perante as guias de acessibilidade, mesmo que a inconformidade encontrada não necessariamente veja a prejudicar o acesso a informação da página. Para cada página avaliada gerou-se um relatório com as Não-conformidades encontradas segundo as recomendações da W3C. A seguir serão apresentados os resultados obtidos em cada uma das páginas avaliadas Página Inicial A página inicial apresentou uma inconformidade de prioridade, três de prioridade 2 e duas de prioridade 3, conforme apresentado na Tabela 7. Prioridade da W3C Ponto de Verificação Descrição Ocorrências. Fornecer um equivalente textual a cada elemento não textual (por ex., por meio de "alt" ou "longdesc", ou como parte do 2 conteúdo do elemento) Criar documentos passíveis de validação por gramáticas formais publicadas Utilizar elementos de cabeçalho indicativos da estrutura do

29 20 documento, de acordo com as especificações Associar explicitamente os rótulos aos respectivos controles Identificar o principal idioma utilizado nos documentos Incluir caracteres predefinidos de preenchimento nas caixas de edição e nas áreas de texto, até que os agentes do usuário tratem 2 corretamente os controles vazios. Tabela 7. Não-conformidades da página inicial Painel de Controle A página do painel de controle hp apresentou uma inconformidade de prioridade, três de prioridade 2 e uma de prioridade 3, conforme visto na Tabela 8. Prioridade da W3C Ponto de Verificação Descrição Ocorrências. Fornecer um equivalente textual a cada elemento não textual (por ex., por meio de "alt" ou "longdesc", ou como parte do 8 conteúdo do elemento) Criar documentos passíveis de validação por gramáticas formais publicadas Utilizar elementos de cabeçalho indicativos da estrutura do documento, de acordo com as especificações Associar explicitamente os rótulos aos respectivos controles Identificar o principal idioma utilizado nos documentos. Tabela 8. Não-conformidades do painel de controle Perfil do Usuário A página do perfil do usuário apresentou uma inconformidade de prioridade, três de prioridade 2 e uma de prioridade 3, conforme apresentado na Tabela 9. Prioridade da W3C Ponto de Verificação Descrição Ocorrências. Fornecer um equivalente textual a cada elemento não textual (por ex., por meio de "alt" ou "longdesc", ou como parte do 7 conteúdo do elemento). 2. Dar, a cada frame, um título que facilite a identificação dos frames e sua navegação Assegurar a acessibilidade do conteúdo dinâmico ou fornecer apresentação ou página alternativas Criar documentos passíveis de validação por gramáticas formais publicadas Utilizar elementos de cabeçalho indicativos da estrutura do documento, de acordo com as especificações Utilizar unidades relativas, e não absolutas, nos valores dos

30 2 atributos da linguagem de marcação e nos valores das propriedades das folhas de estilo Associar explicitamente os rótulos aos respectivos controles Em programas interpretáveis, especificar respostas a eventos, preferindo-as a rotinas dependentes de dispositivos Identificar o principal idioma utilizado nos documentos Incluir caracteres predefinidos de preenchimento nas caixas de edição e nas áreas de texto, até que os agentes do usuário tratem 7 corretamente os controles vazios. Tabela 9. Não-conformidades da página de perfil do usuário Ambiente A página onde o usuário informa qual ambiente será avaliado apresentou uma inconformidade de prioridade, três de prioridade 2 e uma de prioridade 3, conforme visto na Tabela 20. Prioridade da W3C Ponto de Verificação Descrição Ocorrências. Fornecer um equivalente textual a cada elemento não textual (por ex., por meio de "alt" ou "longdesc", ou como parte do 2 conteúdo do elemento) Criar documentos passíveis de validação por gramáticas formais publicadas Utilizar elementos de cabeçalho indicativos da estrutura do documento, de acordo com as especificações Utilizar unidades relativas, e não absolutas, nos valores dos atributos da linguagem de marcação e nos valores das 3 propriedades das folhas de estilo Associar explicitamente os rótulos aos respectivos controles Em programas interpretáveis, especificar respostas a eventos, preferindo-as a rotinas dependentes de dispositivos Identificar o principal idioma utilizado nos documentos Incluir caracteres predefinidos de preenchimento nas caixas de edição e nas áreas de texto, até que os agentes do usuário tratem 2 corretamente os controles vazios. Tabela 20. Não-conformidades da página de escolha do ambiente Indicador A página do indicador de tipo de usuário apresentou duas inconformidades de prioridade, seis de prioridade 2 e uma de prioridade 3, conforme apresentado na Tabela 2. Prioridade da W3C Ponto de Verificação Descrição Ocorrências. Fornecer um equivalente textual a cada elemento não textual 6

31 22 (por ex., por meio de "alt" ou "longdesc", ou como parte do conteúdo do elemento). 2. Dar, a cada frame, um título que facilite a identificação dos frames e sua navegação Assegurar a acessibilidade do conteúdo dinâmico ou fornecer apresentação ou página alternativas Criar documentos passíveis de validação por gramáticas formais publicadas Utilizar elementos de cabeçalho indicativos da estrutura do documento, de acordo com as especificações Utilizar unidades relativas, e não absolutas, nos valores dos atributos da linguagem de marcação e nos valores das propriedades das folhas de estilo Associar explicitamente os rótulos aos respectivos controles Em programas interpretáveis, especificar respostas a eventos, preferindo-as a rotinas dependentes de dispositivos Identificar o principal idioma utilizado nos documentos. Tabela 2. Não-conformidades da página de indicador Decisão A página de decisão do caminho a se seguir (avaliação técnica e avaliação pedagógica) apresentou uma inconformidade de prioridade, duas de prioridade 2 e uma de prioridade 3, conforme apresentado na Tabela 22. Prioridade da W3C Ponto de Verificação Descrição Ocorrências. Fornecer um equivalente textual a cada elemento não textual (por ex., por meio de "alt" ou "longdesc", ou como parte do 2 conteúdo do elemento) Criar documentos passíveis de validação por gramáticas formais publicadas Utilizar elementos de cabeçalho indicativos da estrutura do documento, de acordo com as especificações Identificar o principal idioma utilizado nos documentos. Tabela 22. Não-conformidades da página de decisão Categoria (Um) A página da escolha da categoria apresentou uma inconformidade de prioridade, duas de prioridade 2 e uma de prioridade 3, conforme apresentado na Tabela 23. Prioridade da W3C Ponto de Verificação. Descrição Fornecer um equivalente textual a cada elemento não textual (por ex., por meio de "alt" ou "longdesc", ou como parte do Ocorrências 2

32 23 conteúdo do elemento) Criar documentos passíveis de validação por gramáticas formais publicadas Utilizar elementos de cabeçalho indicativos da estrutura do documento, de acordo com as especificações Identificar o principal idioma utilizado nos documentos. Tabela 23. Não-conformidades da página de escolha da categoria Categoria 2 (Dois) A página da escolha da categoria 2 apresentou uma inconformidade de prioridade, duas de prioridade 2 e uma de prioridade 3, conforme apresentado na Tabela 24. Prioridade da W3C Ponto de Verificação Descrição Ocorrências. Fornecer um equivalente textual a cada elemento não textual (por ex., por meio de "alt" ou "longdesc", ou como parte do 2 conteúdo do elemento) Criar documentos passíveis de validação por gramáticas formais publicadas Utilizar elementos de cabeçalho indicativos da estrutura do documento, de acordo com as especificações Identificar o principal idioma utilizado nos documentos. Tabela 24. Não-conformidades da página de escolha da categoria Avaliação Técnica A página da avaliação técnica apresentou duas inconformidades de prioridade, seis de prioridade 2 e uma de prioridade 3, conforme apresentado na Tabela 25. Prioridade da W3C Ponto de Verificação Descrição Fornecer um equivalente textual a cada elemento não textual (por ex., por meio de "alt" ou "longdesc", ou como parte do conteúdo do elemento). Dar, a cada frame, um título que facilite a identificação dos frames e sua navegação. Assegurar a acessibilidade do conteúdo dinâmico ou fornecer apresentação ou página alternativas. Criar documentos passíveis de validação por gramáticas formais publicadas. Utilizar elementos de cabeçalho indicativos da estrutura do documento, de acordo com as especificações. Utilizar unidades relativas, e não absolutas, nos valores dos atributos da linguagem de marcação e nos valores das Ocorrências 8

33 24 propriedades das folhas de estilo Associar explicitamente os rótulos aos respectivos controles Em programas interpretáveis, especificar respostas a eventos, preferindo-as a rotinas dependentes de dispositivos Identificar o principal idioma utilizado nos documentos. Tabela 25. Não-conformidades da página de avaliação técnica Avaliação Pedagógica A página da avaliação pedagógica apresentou uma inconformidade de prioridade, duas de prioridade 2 e uma de prioridade 3, conforme apresentado na Tabela 26. Prioridade da W3C Ponto de Verificação Descrição Ocorrências. Fornecer um equivalente textual a cada elemento não textual (por ex., por meio de "alt" ou "longdesc", ou como parte do 2 conteúdo do elemento) Criar documentos passíveis de validação por gramáticas formais publicadas Utilizar elementos de cabeçalho indicativos da estrutura do documento, de acordo com as especificações Identificar o principal idioma utilizado nos documentos. Tabela 26. Não-conformidades da página de avaliação pedagógica Requisitos A página de requisitos apresentou duas inconformidades de prioridade, seis de prioridade 2 e uma de prioridade 3, conforme apresentado na Tabela 27. Prioridade da W3C Ponto de Verificação Descrição Fornecer um equivalente textual a cada elemento não textual (por ex., por meio de "alt" ou "longdesc", ou como parte do conteúdo do elemento). Dar, a cada frame, um título que facilite a identificação dos frames e sua navegação. Assegurar a acessibilidade do conteúdo dinâmico ou fornecer apresentação ou página alternativas. Criar documentos passíveis de validação por gramáticas formais publicadas. Utilizar elementos de cabeçalho indicativos da estrutura do documento, de acordo com as especificações. Utilizar unidades relativas, e não absolutas, nos valores dos atributos da linguagem de marcação e nos valores das propriedades das folhas de estilo. Ocorrências 8

34 Associar explicitamente os rótulos aos respectivos controles Em programas interpretáveis, especificar respostas a eventos, preferindo-as a rotinas dependentes de dispositivos Identificar o principal idioma utilizado nos documentos. Tabela 27. Não-conformidades da página de requisitos Resultados A página de resultados apresentou uma inconformidade de prioridade, três de prioridade 2 e uma de prioridade 3, conforme apresentado na Tabela 28. Prioridade da W3C Ponto de Verificação Descrição Ocorrências. Fornecer um equivalente textual a cada elemento não textual (por ex., por meio de "alt" ou "longdesc", ou como parte do 9 conteúdo do elemento) Criar documentos passíveis de validação por gramáticas formais publicadas Utilizar elementos de cabeçalho indicativos da estrutura do documento, de acordo com as especificações Utilizar unidades relativas, e não absolutas, nos valores dos atributos da linguagem de marcação e nos valores das 2 propriedades das folhas de estilo Identificar o principal idioma utilizado nos documentos. Tabela 28. Não-conformidades da página de resultados Login A página de realizar login apresentou uma inconformidade de prioridade, duas de prioridade 2 e duas de prioridade 3, conforme apresentado na Tabela 29. Prioridade da W3C Ponto de Verificação Descrição Ocorrências. Fornecer um equivalente textual a cada elemento não textual (por ex., por meio de "alt" ou "longdesc", ou como parte do 2 conteúdo do elemento) Criar documentos passíveis de validação por gramáticas formais publicadas Associar explicitamente os rótulos aos respectivos controles Identificar o principal idioma utilizado nos documentos Incluir caracteres predefinidos de preenchimento nas caixas de edição e nas áreas de texto, até que os agentes do usuário tratem 2 corretamente os controles vazios. Tabela 29. Não-conformidades da página de realizar login.

35 Lembrar Login A página de lembrar login apresentou uma inconformidade de prioridade, duas de prioridade 2 e duas de prioridade 3, conforme apresentado na Tabela 30. Prioridade da W3C Ponto de Verificação Descrição Ocorrências. Fornecer um equivalente textual a cada elemento não textual (por ex., por meio de "alt" ou "longdesc", ou como parte do 2 conteúdo do elemento) Criar documentos passíveis de validação por gramáticas formais publicadas Associar explicitamente os rótulos aos respectivos controles Identificar o principal idioma utilizado nos documentos Incluir caracteres predefinidos de preenchimento nas caixas de edição e nas áreas de texto, até que os agentes do usuário tratem corretamente os controles vazios. Tabela 30. Não-conformidades da página de lembrar login Informações A página de informações apresentou uma inconformidade de prioridade, duas de prioridade 2 e uma de prioridade 3, conforme apresentado na Tabela 3. Prioridade da W3C Ponto de Verificação Descrição Ocorrências. Fornecer um equivalente textual a cada elemento não textual (por ex., por meio de "alt" ou "longdesc", ou como parte do 3 conteúdo do elemento) Criar documentos passíveis de validação por gramáticas formais publicadas Em programas interpretáveis e applets, assegurar que a resposta a eventos seja independente do dispositivo de entrada Identificar o principal idioma utilizado nos documentos. Tabela 3. Não-conformidades da página de informações CHECKLIST DE ANDRÉIA PILLA O checklist desenvolvido por PILLA (2006) consiste em um conjunto de 25 perguntas que têm por objetivo ajudar o avaliador na verificação de acessibilidade, com foco na deficiência visual, de uma determinada página na Web. Assim, o avaliador observa a página que está sendo avaliada e responde o checklist de acordo com as características encontradas (PILLA, 2006).

36 27 A avaliação de acessibilidade do SIA-AE através deste checklist, teve como resultado o relatório disposto na Tabela 32. Cada questão recebeu um valor textual (ATENDE ou NÃO ATENDE) informando se atende ou não ao requisito de acessibilidade ou se a questão não se aplica (N/A) às páginas avaliadas. Em relação aos níveis de prioridade, PILLA (2006) descreve que as perguntas com prioridade recebem essa prioridade pois a inconformidade da interface com elas inviabilizaria o acesso de usuários portadores de deficiências visuais. As perguntas com prioridade 2 são as características que se não observadas, atrapalhariam o acesso consideravelmente e as perguntas com prioridade 3 são as que ajudariam a tornar a interface ainda mais acessível mas não são essenciais na maioria dos casos. Questão Descrição Prioridade Resultado Todas as imagens e elementos não textuais como vídeos, sons e animações possuem equivalentes textuais? ATENDE 2 Existem links textuais redundantes para as regiões ativas dos mapas de imagens contidos no site? N/A 3 Existe contraste suficiente entre as cores de fundo e do texto? ATENDE 4 São utilizadas imagens de plano de fundo que atrapalham a leitura de texto? ATENDE 5 A aparência da página é prejudicada quando se utiliza apenas tons de cinza? 2 ATENDE 6 É possível navegar por todo o site utilizando apenas o teclado? NÃO ATENDE 7 Existe uma maneira para pular links de navegação repetitivos? 2 NÃO ATENDE 8 Existe uma seqüência de tabulação lógica para se percorrer os links, formulários e objetos? ATENDE 9 Existem atalhos por teclado para links importantes e controles de formulários? 3 ATENDE 0 Existem janelas pop-up ou links que abrem em novas janelas ou qualquer modificação no conteúdo atual da janela sem que o usuário N/A seja alertado disso? O início de cabeçalhos, parágrafos, listas e enumerações são identificados de maneira adequada, através de uma marcação correta, NÃO 2 de modo a facilitar a identificação dos mesmos por usuários de leitores ATENDE de tela? 2 Os cabeçalhos de linhas e colunas de tabelas são identificados de maneira correta? 2 N/A 3 Os frames possuem um titulo que facilite a identificação e navegação? 2 N/A 4 As tabelas utilizadas para efeitos de disposição na pagina (para definir o layout da pagina) fazem sentido quando a pagina é lida linearmente? N/A 5 As paginas fazem sentido quando lidas linearmente? NÃO ATENDE 6 O layout consegue acomodar diferentes tamanhos de tela? 2 ATENDE 7 Redimensione o texto da página para o máximo possível. O layout da pagina consegue acomodar corretamente o texto redimensionado? 2 ATENDE 8 As páginas ainda podem ser utilizadas sem funcionalidades como NÃO JavaScript, frames, plug-ins e scripts? ATENDE 9 O site é legível quando as folhas de estilo são desativadas? 2 NÃO ATENDE

37 20 A página e seus mecanismos de navegação seguem um estilo de apresentação consistente? 2 ATENDE 2 Existe um mapa do site para fornecer ao usuário informações sobre a NÃO 2 organização geral do site? ATENDE 22 A linguagem utilizada no site é clara e adequada ao conteúdo? 3 ATENDE 23 A informação contida no site está dividida em grupos pequenos e fáceis de gerenciar e compreender? 3 ATENDE 24 Siglas e abreviaturas são especificadas por extenso na primeira vez que NÃO 3 ocorrem em um documento? ATENDE 25 Quando uma resposta temporizada é exigida, o usuário é alertado e possui tempo suficiente para responder ou solicitar mais tempo? 2 N/A Tabela 32. Resultado da avaliação pelo checklist Das 25 questões deste checklist, 9 se aplicavam à avaliação. Sendo que 8 dessas não atendiam ao requisito de acessibilidade. Um modelo percentual sobre a quantidade de questões que o sistema SIA-AE atendeu pode ser visto na Figura Não se Aplicam; 6 Atendem; Não Atendem; 8 Figura 2. Percentual de questões que satisfizeram o checklist de PILLA PRIORIDADES DE CORREÇÃO Após obter vários relatórios de não conformidades, é necessário definir qual a prioridade de correção dos erros de acessibilidade reconhecidos no SIA-AE. Assim, definiu-se que para efeito de organização, será adotado o mesmo nível de prioridades utilizado pela W3C, ou seja, a correção se inicia a partir dos itens de prioridade, depois os itens de prioridade 2 e por fim os de prioridade 3. Segundo a W3C (999), os itens de prioridade são pontos que os criadores de conteúdo Web devem satisfazer inteiramente, pois se não o fizerem, um ou mais grupos de usuários ficarão impossibilitados de acessar as informações contidas no documento. A satisfação desse tipo de pontos é um requisito básico para que determinados grupos possam acessar documentos disponíveis na internet. Já os itens de prioridade 2 são pontos que os criadores de conteúdos na Web deveriam satisfazer, pois se não o fizerem, um ou mais grupos de usuários terão

38 29 dificuldades em acessar as informações contidas no documento. A satisfação desse tipo de pontos promoverá a remoção de barreiras significativas ao acesso a documentos disponíveis na internet. E os itens de prioridade 3 são pontos que os criadores de conteúdos na Web podem satisfazer, pois se não o fizerem, um ou mais grupos poderão se deparar com algumas dificuldades em acessar informações contidas nos documentos. A satisfação desse tipo de pontos irá melhorar o acesso a documentos armazenados na internet PROJETO E IMPLEMENTAÇÃO A etapa de projeto propõe a especificação das alterações propostas no SIA-AE. Para tanto, definiu-se um padrão de organização e analise das Não-conformidades referentes a cada uma das páginas. Assim, para cada página do SIA-AE, foi verificado o resultado dos três métodos de avaliação usados, e analisar quais não conformidades encontradas realmente impedem o acesso à informação contida na página. Por fim, para cada não conformidade representativa, uma solução de melhoria e conseqüente alteração proposta para eliminar os erros de acessibilidade. A idéia principal para o desenvolvimento das correções foi em manter o máximo possível o layout e as características visuais do SIA-AE, e agregando as novas melhorias de acessibilidade. Para efeito de entendimento, durante este trabalho, os três métodos de avaliação serão descritos da seguinte forma: - Método A: Avaliação segundo as recomendações para a acessibilidade do conteúdo da Web.0 da W3C; - Método B: Avaliação pela ferramenta automática DaSilva; - Método C: Avaliação por checklist da Andréia Pilla. É importante salientar que as novas funcionalidades do SIA-AE, que foram implementadas neste trabalho podem ser vistas no novo endereço do SIA-AE, a saber: ESPECIFICAÇÃO DAS ALTERAÇÕES DE PRIORIDADE A seguir serão apresentadas todas as alterações de prioridade propostas no SIA-AE para se adequar aos critérios de acessibilidade.

39 Método A O ponto de verificação 6. informa que um documento HTML deve ser passível de ser lido mesmo que a folha de estilo vinculada a ele esteja desabilitada. O SIA-AE apresenta duas páginas em desacordo com este ponto, são elas: a página de Atualizar Cadastro, hp?option=5, e a página de Fale Conosco, ption=6, os campos de entrada foram alinhados com suas respectivas descrições. Na Figura 3 é possível verificar como os elementos se apresentavam na página de Atualizar Cadastro quando as folhas de estilo estavam desabilitadas. Figura 3. Atualizar Cadastro (antes). Já a Figura 4 mostra como o formulário passou a ser organizado após a inserção dos atributos <label> e <fieldset>. O atributo <fieldset> possui a tarefa de englobar todos os elementos pertencentes à legenda Dados Cadastrais. Figura 4. Atualizar Cadastro (depois).

40 3 O ponto de verificação 6.3 informa que qualquer página deve ser usável mesmo com scripts e applets desabilitados. O SIA-AE utiliza uma grande quantidade de códigos javascript em sua estrutura interna. Estes códigos se fazem presente em todos os momentos de interatividade entre o sistema e o usuário, como por exemplo, durante a realização do login e também durante o processo de avaliação, de um ambiente e-learning, pelo usuário. Por isso é importante que todos estes scripts estejam sempre habilitados. Para que isto aconteça, sempre que algum script esteja desabilitado, uma mensagem será apresentada ao usuário, avisando-lhe para habilitar o javascript no navegador. Esta solução se tornou mais aceitável a partir da constatação da grande quantidade de scripts no código fonte do SIA-AE, tornando-se muito extensiva e complexa a substituição por outro tipo de lógica sem uso de scripts. A Figura 5 mostra um exemplo de aviso (em vermelho) ao usuário, da necessidade do uso de javascript na página. Estes avisos somente são visíveis quando o javascript não é detectado no navegador do usuário. Cabe ao atributo <noscript> realizar esta tarefa. Figura 5. Aviso da necessidade do javascript. O ponto de verificação.4 avisa que se depois de todas as correções, mesmo assim não conseguir uma página acessível, deve-se fornecer um link para uma página alternativa com informação equivalente. Este item está diretamente ligado ao uso de leitores de tela. Contudo, os leitores de tela ainda não suportam a tecnologia javascript, sendo esta linguagem de suma importância no funcionamento das páginas dinâmicas do SIA-AE. Assim, foi inserido um recurso na página inicial do sistema, onde os usuários de leitores de tela serão informados de que o SIA-AE ainda não está acessível a leitores de tela devido à atual impossibilidade destes em suportar a tecnologia javascript. abaixo: A mensagem de aviso fornecida aos leitores de tela é descrita no trecho de código <div id='msg_para_leitor_tela' >

41 Bem vindo ao SIAE. O sistema interativo de avaliação para ambientes e-learning tem por objetivo disponibilizar uma ferramenta automatizada que sirva como instrumento para apoiar os usuários na avaliação de ambientes e- learning. Atualmente o sistema não fornece apoio a leitores de tela, pois foi desenvolvido com tecnologias que ainda não são interpretadas pelos leitores de tela. </div> 32 O ponto de verificação 2. informa que é preciso fornecer, a cada frame, um título que facilite a sua identificação e navegação. Por Exemplo, na página Perfil do Usuário, há um frame sem título, logo foi acrescido um título a este. <iframe name='iframe_model' title='frame do perfil do usuario' id='iframe_model' src='#' frameborder=0 style='width:00%; height:2.5em; border:0.0625em solid #FF0000; display:none'> Método B O ponto de verificação. que refere-se a todo elemento não textual possuir um equivalente textual, atende as expectativas perante os métodos A e C, já no método B há um grande número de ocorrências em desacordo com este critério. Esta situação ocorre, pois o método B analisa o código HTML da página em busca de um atributo, alt por exemplo, que esteja relacionado e descreva o elemento não textual, neste caso refere-se a imagens utilizadas no SIA-AE. Como esta verificação foi realizada por uma ferramenta automática, ela não possui a capacidade de distinguir se a imagem é importante para o entendimento do conteúdo ou se é somente para efeito de design. Assim a ferramenta considera que todas as imagens devem ter um equivalente textual. Através de uma análise in loco, como pelos métodos A e C podemos verificar que as imagens utilizadas no sistema são apenas para efeito visual. Logo não se caracteriza por não conformidade, segundo os critérios de acessibilidade. O ponto de verificação 2. sobre uso de frames já descrito no capítulo anterior, também não está satisfeito segundo o método B. As páginas que foram corrigidas são as seguintes: e

42 Método C A questão 6 indaga se é possível navegar por todo o site utilizando apenas o teclado. Na página de Informações, na seção Etapas, ption=3, não é possível navegar pelo organograma proposto nesta página. Também, nas páginas que decorrem da avaliação de um ambiente e-learning, os sinais de +, que permitem saber mais sobre as questões, não eram acessíveis por teclado. Portanto foi implementado uma solução para que o usuário possa navegar por estas estruturas através do teclado. A Figura 6 mostra o organograma trabalhado, que também passou a conter um link Voltar ao Fluxograma para facilitar na navegação. Figura 6. Organograma das etapas. A Figura 7 mostra os sinais + e - da página Indicador.

43 34 Figura 7. Sinais "+" e "-" acessíveis por teclado. A questão 5 pergunta se as páginas fazem sentido quando lidas linearmente. Esta questão faz referência ao uso de leitores de tela, ou seja, se o leitor de tela consegue ler o conteúdo linearmente, para que o usuário não se confunda com informações fora de ordem. No capitulo já foi elucidado que o SIA-AE não será acessível a leitores de tela, logo, esta questão ainda permanecerá não conforme com os critérios de acessibilidade. A questão 8 indaga se as páginas ainda podem ser utilizadas sem funcionalidades como frames plug-ins e scripts. Este mesmo questionamento já foi esclarecido no capitulo ESPECIFICAÇÃO DAS ALTERAÇÕES DE PRIORIDADE 2 A seguir serão apresentadas todas as alterações de prioridade 2 propostas no SIA-AE para se adequar aos critérios de acessibilidade Método A O ponto de verificação 3.2 descreve que o desenvolvedor deve criar páginas validadas de acordo com a gramática formal publicada, ou seja, usando corretamente o atributo DOCTYPE (Document Type Definition). A definição de um tipo de documento informa quais as regras que o documento pretende seguir e quais as regras que o browser deve utilizar ao analisar (parsing) o documento. O SIA-AE não possui nenhum doctype, por isso, todas as páginas

44 35 passaram a conter o seguinte: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" " O transitional é utilizado para quem está fazendo uma transição entre uma forma antiga de marcação para uma mais moderna e mais apropriada. Esta linha de código se faz presente sempre antes da tag de abertura <html>. O ponto de verificação 3.4 informa que deve-se usar unidades de medida de comprimento relativas em vez de absolutas nos valores dos atributos da linguagem de notação e nos valores das propriedades das folhas de estilo. Assim, utilizar unidades relativas em, ex e % - percentagem em detrimento de pt point, px - pixel, in - polegada, pc - pica, mm - milímetro ou cm centímetro, as quais são unidades absolutas. As seguintes páginas possuem unidades absolutas, logo serão substituídas por um valor equivalente na unidade relativa em : e Por exemplo, na página de Resultado foi substituído os valores de px para em, como mostrado a seguir: <td style='border:px solid #cccccc; background-color:".$value["color"]."; width:5px;'> <td style='border:0.0625em solid #cccccc; backgroundcolor:".$value["color"]."; width:0.9375em;'> O ponto de verificação 3.5 refere-se ao uso correto dos elementos de cabeçalho (<H>...<H6>) para transmitir a estrutura dos documentos. As alterações segundo a correta especificação foram as seguintes: as tags atuais serão substituídas por tags novas devidamente ordenadas, sendo <H> para o maior cabeçalho e <H6> para o menor. - <H3> será substituído por <H> - <H> será substituído por <H2> - <H5> será substituído por <H3> - <H6> será substituído por <H4> - <H4> será substituído por <H5>

45 36 - <H2> será substituído por <H6> Na Figura 8 pode ser visto a disposição dos elementos de cabeçalho na página inicial do sistema, e na Figura 9 corresponde à página inicial do painel de controle. Figura 8. Disposição dos elementos de cabeçalho na página inicial do sistema. Os elementos estão estruturados em hierarquia, onde <H> tem o maior destaque e <H6> o menor destaque, sendo que o <H4> é utilizado apenas nas mensagens de alerta, como aquela de avisa o usuário para ativar o javascript do navegador.

46 37 Figura 9. Elementos de cabeçalho da página inicial do painel de controle O ponto de verificação 6.4 descreve que no caso dos scripts e dos applets, certifiquese que os eventos que o manipulam funcionam independentemente do dispositivo de entrada. Para isso, deve-se usar o elemento <noscript> para fornecer as mesmas mensagens e eventos que seriam visualizados através de scripts. A Figura 0 mostra a página de Informações, onde o item Fale Conosco apresenta 2 (duas) mensagens de aviso para ativação do javascript.

47 38 Figura 0. Uso do elemento <noscript> Estas mensagens são visíveis aos usuários apenas quando o javascript não é detectado no navegador do usuário. Esta tarefa é realizada pelo elemento < noscript >, por exemplo: <noscript> Esta página necessita de javascript. Ative-o no seu navegador. </noscript> O ponto de verificação 9.2 informa para certificar-se de que qualquer elemento dotado de interface própria funciona independentemente do dispositivo utilizado. Este item faz referência à navegação via teclado independente do uso do mouse. Na página de Informações, na seção Etapas, ption=3, o organograma não está acessível pelo teclado. Logo, este recurso será efetivado. O ponto de verificação 9.3 informa que no caso dos scripts, devem-se especificar manipuladores de eventos por software em vez de manipuladores de eventos dependentes de dispositivos. Ou seja, os manipuladores onclick serão usados juntos com os onkeypress nas seguintes páginas do SIA-AE: e

48 39 O ponto de verificação 0. descreve para não provocar o aparecimento de janelas sem que o utilizador seja informado. No SIA-AE, as páginas que decorrem do processo de avaliação de um ambiente E-learning, apresentam no canto inferior esquerdo um link para a página de Informações, Ao clicar neste link, abre uma nova janela. Por isso, foi ajustado o atributo target de _blank para _self. Assim, abrirá a nova página na mesma janela. Além desse, ao passar o mouse no item de menu Login localizado na página de Informações, o usuário será avisado do surgimento de uma nova janela ao clicar neste item. O uso deste recurso também é usado no link Esqueci meu login/senha na página inicial, como visto na Figura. Figura. Mensagem avisando da abertura de outra página. O ponto de verificação 2.4 afirma para associar os elementos <label> aos seus respectivos campos de entrada, por exemplo, em formulários. As seguintes páginas do SIA-AE possuem campos sem a especificação de labels: e hp. Logo, passarão a conter seus respectivos labels. Por exemplo, na página inicial do Sistema, o campo para digitar o nome do usuário para realizar o login estava escrito da seguinte forma: <div class='sublogin'> Login: <input type='text' size='6' maxlength='0' id='idusuario' name='idusuario'> </div> E passou a ser escrito utilizando o elemento <label>:

49 <label for='idusuario' title='informe seu nome de usuário.'>usuário:</label> <input type='text' maxlength='0' id='idusuario' name='idusuario' tabindex='4'> 40 O ponto de verificação 3. informa que o destino de cada link deve ser identificado claramente. Isto pode ser feito usando o atributo <title>. Além disso, tornar o texto do link conciso para fazer sentido quando lido fora do contexto. Por exemplo, no menu principal do Painel de Controle, hp, todos os itens apresentavam a mesma descrição no atributo <title>, logo cada um passou a ter uma descrição própria, identificando qual seu destino. Na Figura 2 é possível ver um comparativo do antes e depois das alterações nos atriutos <title> do nemu principal. Figura 2. Menu antes e depois da alteração no atributo <title>