APLICAÇÃO DOS CRITÉRIOS DE ACESSIBILIDADE: UM ESTUDO DE CASO NA PÁGINA DO FRAMEWORK DE PREÇO DE VENDA APPLICATION OF ACCESSIBILITY PATTERNS: A CASE STUDY ON PAGE FRAMEWORK FOR SALE PRICE Jonathan Heverson Ribas Victor Schnepper Lacerda Simone Nasser Matos Eliana C. C. Ishikawa Resumo. Atualmente são poucas as páginas web que apresentam conteúdos acessíveis de conformidade com os padrões da W3C. Conscientes deste problema, o Grupo de Pesquisa em Engenharia de Software da Universidade Tecnológica Federal do Paraná, Campus Ponta Grossa, está desenvolvendo um projeto que implementa diversos métodos de validação de páginas da web, bem como ferramentas assistivas na página do FRAMEMK – um framework para otimização de preço de venda. Este artigo mostra algumas recomendações de acessibilidade para o desenvolvimento de páginas e os métodos e procedimentos necessários para aplicá-las. Palavras-chave: Acessibilidade, Ferramentas assistivas, W3C. Abstract. Currently there are few websites that have content accessible in accordance with the standards of the W3C. Therefore, the Research Group in Software Engineering from the Technological University of Paraná, Ponta Grossa Campus, is developing a project that applied several methods of validating web pages, as well as assistive tools on the FRAMEMK site - a framework for optimization of the sales price. This article shows some accessibility guidelines for the development of site and the methods and procedures necessary to implement them. Keywords: Accessibility, Assistive tools, W3C. Revista Tecnológica Maringá, v. 20. p. 13-23, 2011. Aplicação dos critérios de acessibilidade: um estudo de caso na página do framework de preço de venda 14 1. INTRODUÇÃO Alguns usuários encontram dificuldades no processo de navegação, como por exemplo, pode-se citar as pessoas portadoras de deficiência locomotora, as quais não possuem habilidade suficiente para operar um periférico - como teclado ou o mouse - e as com deficiências visuais, que sentem dificuldade em identificar ou até mesmo enxergar os elementos de um sítio. Segundo Baranauskas e Mantoan (2001), “dispositivos especiais têm sido incorporados ao hardware ou software facilitando o acesso de todos e têm sido criadas aplicações especiais para alguns tipos de deficiências do usuário”. Com o objetivo de tornar essa navegação mais fácil e acessível, também foram estabelecidas novas diretrizes para criação de página tal como as recomendadas pela W3C (World Wide Web Consorcium) (2001). O W3C trata-se de um consórcio de empresas de tecnologia cujo objetivo é desenvolver tecnologias denominadas padrões da web para a criação e a interpretação dos conteúdos. Para alcançar seus objetivos, o W3C contém diversos comitês que estudam as tecnologias existentes para a apresentação de conteúdo na Internet e criam padrões de recomendações para a utilização destas tecnologias. Os Padrões Web são um conjunto de normas, diretrizes, recomendações, notas, artigos, tutoriais e afins, de caráter técnico, destinado a orientar fabricantes, desenvolvedores e projetistas para o uso de práticas que possibilitem a criação de uma web acessível a todos, independentemente dos dispositivos usados ou de suas necessidades especiais. Quando se fala de normas para a Web, trata-se, na prática, de três componentes independentes: estrutura, apresentação e comportamento, ou ainda de linguagens estruturais (HTML, XML e XHTML), linguagens de apresentação (CSS), modelos de objeto (DOM), dentre outras. Utilizar padrões para a Web é extremamente vantajoso pois proporciona um maior controle sobre a página. Quando é dito que uma página é compatível com os padrões significa que o documento consiste Revista Tecnológica de HTML ou XHTML válido, utiliza CSS para layout, é bem-estruturado e semanticamente correto. Esses fatores podem garantir que o sítio seja acessado por qualquer tecnologia assistiva ou dispositivo, seja ele móvel, tátil, desktop etc. Segundo Hogetop e Santarosa (2002), a evolução das tecnologias assistivas é contínua e acontece atualmente numa velocidade que impõe constantes reformulações do conhecimento. Assim, sítios construídos de acordo com estes padrões, custam menos, funcionam melhor e são acessíveis a mais pessoas, dispositivos e tecnologias assistivas – não apenas nos navegadores, leitores de tela e dispositivos sem fios atuais, mas também nos de amanhã. O presente artigo apresenta a descrição de alguns critérios de acessibilidade e as etapas da reestruturação pela qual o sítio do FRAMEMK passou, realizada pelo grupo de pesquisa em engenharia de software da Universidade Tecnológica Federal do Paraná (Arcabomk 2010). 2. CRITÉRIOS DE ACESSIBILIDADE Segundo Lee (2001) o poder da web está em sua universalidade. O acesso feito por qualquer pessoa, independentemente da sua incapacidade, é um aspecto essencial. O crescimento de usuários de internet vem aumentando a cada ano, atraindo a atenção de todos os tipos de pessoas, inclusive as portadoras de deficiências, sejam deficiências cognitivas quanto motoras. Estas pessoas necessitam de um auxílio maior na operabilidade em páginas web (Lee 2001). Mas, a acessibilidade web não se limita somente as pessoas com deficiências. Ela envolve também as pessoas comuns, que por algum motivo, como inexperiência ou pela dificuldade de utilização da interface, sentem dificuldade em navegar em páginas da web. Em um estudo recente feito por Conforto e Santarosa (2002), está descrito que o número de pessoas com necessidades especiais cresce em todos os países, e que estas pessoas começaram a reivindicar seu legítimo direito de ter acesso à informação e, principalmente, a uma informação que possa ser compreendida. O acesso aos benefícios da Internet deve ser otimizado buscando reduzir as discriminações e as exclusões sem, com isso, prejudicar suas características gráficas ou suas funcionalidades. Para construir um padrão acessível, em 1999 a W3C (World Wide Web Consorcium) criou um conjunto de diretrizes, a chamada WCAG 1.0 (W3C Maringá, v. 20. p. 13-23, 2011. Ribas. Lacerda, Matos e Ishikawa 15 1999), descritas em um documento que abrange várias recomendações para construir uma página da web totalmente acessível. Em 2008 este documento foi ampliado, com o objetivo de aumentar a abrangência da verificação, atingindo assim, um público mais variado. Esse novo projeto tem por princípio, além de especificar recomendações a determinadas linguagens, criar um padrão de acessibilidade para linguagens e tecnologias que ainda não foram criadas. A seguir citam-se quatro critérios em que se agrupam esses princípios (W3C 2008): 1. Perceptível: A informação e os componentes da interface do usuário devem ser apresentados ao usuário em formas que possam ser percebidos. 2. Operável: Os componentes de interface de usuário e a navegação devem ser facilmente operados pelo usuário. 3. Compreensível: A informação e a operação da interface de usuário devem ser compreendidos pelo usuário. 4. Robusto: O conteúdo tem de ser robusto o suficiente para poder ser interpretado de forma concisa por diversos agentes do usuário, incluindo tecnologias assistivas, como por exemplo, o leitor de voz. Dentro desses princípios existem recomendações. Por existirem muitas recomendações serão exemplificadas apenas as do princípio Perceptível. 1. Perceptível 1. Alternativas em Texto: Fornecer alternativas em texto para qualquer conteúdo não textual. 2. Mídias com base no tempo: Fornecer alternativas para mídias com base no tempo. 3. Adaptável: Criar conteúdos que possam ser apresentados de diferentes maneiras (por ex., um layout mais simples) sem perder informação ou estrutura. 4. Discernível: Facilitar a audição e a visualização de conteúdos aos usuários, incluindo a separação do primeiro plano e do plano de fundo. Dentro dessas recomendações existem ainda pontos de verificação, que detalham ainda mais os requisitos de uma página acessível, e como existem muitos pontos dentro de uma recomendação. Neste artigo será exemplificado somente os pontos da recomendação Adaptável. 1. Perceptível 3. Adaptável 1. Informações e Relações: As informações, a estrutura e as relações transmitidas através de apresentação podem ser determinadas de forma programática ou estão disponíveis no texto. 2. Sequência com Significado: Quando a sequência na qual o conteúdo é apresentado afeta o seu significado, uma sequência de leitura correta pode ser determinada de forma programática. 3. Características Sensoriais: As instruções fornecidas para compreender e utilizar o conteúdo não dependem somente das características sensoriais dos componentes, tais como forma, tamanho, localização visual, orientação ou som. Os pontos de verificação que foram implementados na estrutura do sítio estão listadas na tabela 1. Estas recomendações fazem parte dos quatro princípios da WCAG. Tabela 1 – Recomendações da WCAG relacionadas à estrutura do FRAMEMK. Ponto de Princípio Recomendação Descrição verificação Criar conteúdos que possam ser apresentados 1.3.1 Informações de diferentes maneiras (por exemplo, um layout 1 Perceptível 1.3 Adaptável e Relações mais simples) sem perder informação ou estrutura. 1.4.6 Contraste Facilitar a audição e a visualização de conteúdos 1 Perceptível 1.4 Discernível (Melhorado) aos usuários, incluindo a separação do primeiro plano e do plano de fundo. 3.2.3 Navegação Fazer com que as páginas Web surjam e 3 Compreensível 3.2 Previsível Consistente funcionem da forma esperada. 2 Operável Revista Tecnológica 2.4 Navegável 2.4.4 Finalidade do Link (Em Contexto) Fornecer formas de ajudar os usuários a navegar, localizar conteúdos e determinar o local onde estão dentro da página. Maringá, v. 20. p. 13-23, 2011. 16 Aplicação dos critérios de acessibilidade: um estudo de caso na página do framework de preço de venda O trabalho de validação abrange muitos outros critérios, e para aplicá-los foram utilizados validadores, tal como o validador de Html/XHtml (W3C Markup Validation 2010) e o validador de CSS (W3C CSS Validation Service 2010). À medida que o código da página é corrigido com a assistência dos validadores, a página se torna mais acessível, porém a aplicação dos critérios acima apresentados necessita uma reestruturação da página, objeto de estudo do presente artigo. Dentre as mudanças efetuadas na estrutura do sítio encontra-se a divisão e organização das folhas de estilo, a organização dos conteúdos do sítio por assunto, a remoção das tags principais de cada página e o novo sistema de indexação das páginas. 3. APLICAÇÃO DOS PONTOS DE VERIFICAÇÃO O método de desenvolvimento deste trabalho foi feito nas atividades e subatividades representadas graficamente por meio do diagrama de atividades UML (Unifield Modeling Language) (LIMA, 2009), ilustradas na figura 1. Figura 1 – Método de Desenvolvimento do Trabalho. A atividade de Validar Página é responsável por legitimar o código da página em uma ferramenta de validação. Caso o código esteja correto, a atividade que será executada é a Publicar página. Do contrário, se erros forem encontrados, a atividade Avaliar erros será realizada. A atividade Validar erros é composta por três subatividades, sendo a primeira delas a Analisar erros. Esta atividade consiste em verificar os pontos do código que apresentam erros, para então ser efetuada a segunda atividade Pesquisar causa do erro. Nesta atividade, são lidas as descrições dos erros que podem levar a solução dos mesmos, porém as vezes é necessário uma pesquisa mais aprofundada no documento de acessibilidade (W3C 2008). Revista Tecnológica Depois de serem encontradas as causas são testadas as soluções mudando o código, tarefas pertencentes à última subatividade de Testar possíveis soluções. Completada a atividade Avaliar erros a página é revalidada, o que torna o processo iterativo voltando a atividade de Validar Página. A seguir serão descritos como os pontos de verificação foram analisados e implementados com a ajuda dos validadores, conforme citado anteriormente. 3.1 INFORMAÇÕES E RELAÇÕES Esta recomendação requer que as informações, a estrutura e as relações transmitidas através de apresentação possam ser determinadas de forma programática ou estão disponíveis no texto. Maringá, v. 20. p. 13-23, 2011. Ribas, Lacerda, Matos e Ishikawa Usa-se esta recomendação como base para reestruturar o código fonte do sítio FRAMEMK, pois no sítio as tags encontravam- se fora da ordem de precedência, como por exemplo, as tags <h1> e <h2>, ilustradas na figura 2. Figura 2 – Exemplo de tags desordenadas. Este problema é comum em sítios web não validados, e pode ser corrigido ordenando as tags pela sua ordem de precedência, como ilustra a figura 3. Figura 3 – Exemplo de tags ordenadas. A tag “h1” possui um nível hierárquico superior à tag “h2”, portanto, ela deve ser apresentada antes. Somente pode ser usada a tag “h2” quando houver uma tag anterior denominada de “h1”. Outro exemplo da aplicação desta recomendação, foi a extração das tags “html”, “body” e “head” pois detectou-se um erro de duplicidade da estrutura das tags quando uma página era incluída no sítio do FRAMEMK. A figura 4 ilustra este problema. Figura 4 – Exemplo de código replicado. Revista Tecnológica Maringá, v. 20. p. 13-23, 2011. 17 18 Aplicação dos critérios de acessibilidade: um estudo de caso na página do framework de preço de venda A solução destes problemas problemas na estrutura do código fonte permitiu ao sítio FRAMEMK ter uma melhor interface gráfica e adaptabilidade com os navegadores de internet e tecnologias assistivas. 3.2 CONTRASTE (MELHORADO) Este critério tem por objetivo tornar o acesso a informação mais facilitado independente do tipo de usuário. Logo, foi aplicado à página por uma necessidade e não um erro gerado pelo validador. Para garantir uma maior acessibilidade para portadores de deficiência visual, foram construídas duas ferramentas de acessibilidade, mudando a estrutura da interface do sítio. Estas estruturas foram construídas em Java Script e permitem a mudança da estrutura do texto e links de navegação em tempo real. Uma entidade construída foi para atender as necessidades de pessoas com miopia e/ou hipermetropia. Esta ferramenta consiste em aumentar ou diminuir o tamanho da fonte do sítio FRAMEMK. Estas mudanças de fonte estão ilustradas na figura 5. Figura 5 – Mudanças de fonte através da ferramenta de acessibilidade A segunda estrutura utilizada no sítio FRAMEMK foi construída para atender as necessidades de pessoas que sofrem de daltonismo. Esta consiste tirar o contraste da página, deixando-a somente em preto e branco, conforme ilustrado na figura 6. Figura 6 – Mudanças de contraste através da ferramenta de acessibilidade 3.3 ARQUITETURA DO FRAMEMK Este item trata de uma implementação necessária para a aplicação da recomendação 3.2 Previsível. 3.3.1 Indexação das folhas de estilo e estrutura do corpo.jsp No antigo sítio do FRAMEMK, a folha de estilos principal se encontrava em um único arquivo e estava ligada a várias páginas, Revista Tecnológica tornando-a grande e desorganizada, não estando em conformidade com os padrões da W3C. Para este problema foi necessário dividir a página original em várias páginas, por exemplo, o cabeçalho e o menu foram separados em uma única página, assim por diante. Para manter a estrutura da página os pedaços foram incluídos em uma única página chamada “corpo.jsp”. A figura 7 ilustra essa divisão pelo diagrama de componentes da página “corpo.jsp”. Maringá, v. 20. p. 13-23, 2011. Ribas, Lacerda, Matos e Ishikawa 19 Figura 7 – Diagrama da página corpo.jsp Os componentes “linkAnterior.js” e “rodapé.jsp” do diagrama, pertencem ao pacote “corpo.jsp”, porém são ligados à página “index.jsp”, porque é necessário manter a ordem em que os componentes de interface aparecem na tela, conceito que será explicado no próximo item deste artigo. Com a divisão das páginas foi possível dividir o CSS, que também se encontrava em um único arquivo, relacionando as partes com as páginas que compõe o arquivo “corpo.jsp”. A figura 8 ilustra o diagrama de componentes da divisão das Folhas de estilo. Figura 8 – Diagrama de componentes do CSS A figura 9 ilustra visualmente a divisão das páginas que compõe o “corpo.jsp”. Revista Tecnológica Maringá, v. 20. p. 13-23, 2011. 20 Aplicação dos critérios de acessibilidade: um estudo de caso na página do framework de preço de venda ' Figura 9 – Separação dos elementos da página 3.3.2 Navegação Consistente A inclusão dessas páginas na página “corpo.jsp”, atende o ponto de verificação 3.2.3 Navegação Consistente da recomendação 3.2 Previsível. Esse ponto de verificação descreve que a ordem em que os componentes de interface aparecem na tela não deve ser mudada, a menos que essa ação seja de conhecimento do usuário, criando assim um padrão de interface. O componente “index.jsp” é correspondente à página índice do sítio, o pacote “CSS” corresponde à ligação da página índice às folhas de estilo, o pacote “corpo” é correspondente aos elementos da página principal, assim montando uma estrutura que atende ao ponto de verificação porque a página “index.jsp” incluirá o “corpo.jsp” antes de todas as outras páginas, nunca alterando a ordem da interface da página inicial. Esta implementação também está ilustrada na figura 14 do item 3.4.1 deste artigo. 3.4 FINALIDADE DO LINK (EM CONTEXTO) Para obedecer esta recomendação, foi necessário alterar a lógica de ligação das páginas do sítio FRAMEMK, pois na versão anterior, as páginas eram adicionadas dentro de uma indexação fixa, incluindo as páginas conforme uma variável passada por parâmetro no navegador. Esta passagem de parâmetro está ilustrada na figura 10. Figura 10 – Passagem de parâmetro pelo sítio antigo do FRAMEMK. Esse tipo de indexação fixa não atende ao critério 2.4 Navegável, pois os usuários, utilizando ou não uma ferramenta como o leitor de voz, não conseguem se localizar ou identificar a página pelo endereço apresentado. Revista Tecnológica 3.4.1 Ferramenta de indexação No sítio antigo, tinha-se por base um arquivo denominado “Conteudo.jsp”, onde se encontravam Maringá, v. 20. p. 13-23, 2011. Ribas, Lacerda, Matos e Ishikawa 21 todas as referências dos links e inclusões das páginas, conforme ilustrado na figura 9. O código do arquivo, “Conteudo.jsp” está ilustrado na Figura 11. Figura 11 – Parte do conteúdo do arquivo Conteudo.jsp. Este mecanismo funciona com a criação de uma variável dinâmica que “inclui” as outras páginas por meio de uma chamada no navegador, ilustrado na figura 12. Figura 12 – Exemplo de endereçamento do sítio novo. O código desta nova implementação está escrito na Figura 13. Figura 13- Novo Código. A diferença é que a adição de uma nova página ao sítio é feita através de inclusão de um link em um nível acima da página criada, ou seja, seu pai. Já no método anterior era necessário criar um novo índice dentro da estrutura de múltipla escolha, o que dificulta o processo de manutenção da página. Esse sistema é implementado através da criação de uma variável dinâmica, por exemplo, se for necessário criar uma nova página dentro do “contexto do aplicativo”, Revista Tecnológica basta somente criar um novo link dentro desta página. Vale também ressaltar que a nova implementação é mais simples e menor que a antiga, pois a variável String dispensa o uso do comando de múltipla escolha do método anterior. A figura 14 além de complementar a explicação do item 3.2.2 deste artigo, também mostra a implementação da variável dinâmica pelo diagrama de pacotes. Maringá, v. 20. p. 13-23, 2011. 22 Aplicação dos critérios de acessibilidade: um estudo de caso na página do framework de preço de venda Figura 14 – Diagrama da página índice Como já observado na figura 14, a variável “Pagina.jsp” representa o novo sistema de indexação do sítio. O pacote “paginas” denotado no diagrama da figura 14 representa as páginas dos outros conteúdos do sítio, ilustrado na figura 15. Figura 15 – Diagrama do pacote páginas Cada componente citado na figura 15 é um conteúdo do menu horizontal do sítio. Por exemplo, o componente “areas.jsp” é correspondente á página “Áreas de atuação”, o componente “ferramentas.jsp” corresponde à página “Ferramentas”, etc. Os pacotes “Contexto do aplicativo” e “Padroes de projeto” foram criados pela necessidade de dividir as páginas contidas dentro desses temas, atendendo também a recomendação de navegabilidade porque no sítio antigo do framework a navegabilidade Revista Tecnológica era totalmente centralizada, dificultando a procura de algum arquivo ou documento. As páginas restantes que estão denotadas dentro deste pacote são apenas páginas que podem ou não conter arquivos, porém geralmente são páginas pequenas que só contém um pequeno conteúdo. Dentro destes dois pacotes há outros pacotes e uma página que liga estes à página de nível superior, como ilustra a figura 16. Subsequente cada pacote dentro do pacote “Padroes de projeto” contém outros pacotes e uma outra página que liga estes pacotes a um nível superior. Maringá, v. 20. p. 13-23, 2011. Ribas, Lacerda, Matos e Ishikawa Figura 16 – Diagrama do pacote “Padrões de projeto” 4. CONCLUSÕES No presente artigo, foram apresentados os critérios que relevantes à reestruturação do sítio do FRAMEMK. Todas as mudanças realizadas tiveram como base as recomendações de acessibilidade web (WCAG). Essas mudanças geraram uma melhor interface e organização tanto para o usuário quanto para o desenvolvedor e tecnologias assistivas. É importante ressaltar que existem outras recomendações que foram implementadas no sítio do FRAMEMK, porém não exigiram uma reestruturação. O sítio do FRAMEMK ainda está em processo de mudança, um banco de dados será implementado ainda no final deste ano, podendo assim ter sua estrutura modificada novamente para atender à nova necessidade. As mudanças na estrutura do sítio do FRAMEMK foram satisfatórias para os desenvolvedores, pois agora com a nova estrutura, é mais fácil localizar arquivos e documentos, então pode-se concluir que um sítio com um padrão de estrutura traz uma melhora de custo e benefício também para o seu desenvolvedor. Apesar deste tipo de sítio ter um processo mais lento de construção, a manutenção e a adaptação de novas tecnologias é mais rápido comparado aos sítios construídos sem nenhum planejamento. para Além das guidelines. Revista Online da Bibl. Prof. Joel Martins, V.2,N°.2, 2001. CONFORTO, D. & SANTAROSA, L. M. C. Acessibilidade à Web : Internet para Todos . Revista de Informática na Educação: Teoria, Prática – PGIE/UFRGS. V.5 N˚ 2 p.87-102, 2002. DIAS, C. Usabilidade na web 2º edição. Rio de Janeiro: Alta Books. p. 139-140.2006. HOGETOP, L. & SANTAROSA, L.M.C. Tecnologias assistivas: Viabilizando a acessibilidade ao potencial individual. Revista informática na educação, V.5,N°.2, 2002. LEE, B. W3C Leading the Web to its full potential. 2001. LIMA, A. S. UML 2.0: do requisito à solução. São Paulo: Érica, 2009. Object Management Group (OMG 2008). Introduction to OMG UML. Disponível em http://www.omg.org/gettingstarted/what_is_uml.ht m. 2008. W3C Markup Validation, 2010. Disponível em http://validator.w3.org/. 2010. W3C CSS Validation Service, 2010. Disponível em http://jigsaw.w3.org/css-validator/. 2010. W3C. Web Content Accessibility Guidelines 1.0. Disponível em http://www.w3.org/TR/WCAG10/. 1999. W3C. Web Content Accessibility Guidelines 2.0. Disponível em http://www.w3.org/TR/WCAG20/. 2008. AGRADECIMENTOS REFERÊNCIAS Arcabomk. Um framework para otimização de preço de venda. Disponível em http://200.134.81.19:8080/arcabomk/. 2010. BARANAUSKAS, M.C.C. & MANTOAN, M.T.E. Acessibilidade em ambientes educacionais: Revista Tecnológica Agradecemos a Fundação Araucária pelo apoio financeiro concedido ao aluno pesquisador e a Universidade Tecnológica Federal do Paraná – Campus Ponta Grossa no que tange ao ambiente de desenvolvimento do sistema. Maringá, v. 20. p. 13-23, 2011. 23