3. Acessibilidade na Web

Transcrição

1 Análise de Acessibilidade em Redes Sociais Fernando Reichert da Silva, Fábio Zschornack Faculdade de Informática UniRitter Rua Orfanotrófio, 555 CEP Porto Alegre RS Brazil Abstract. Social networks are nowadays a service in great expansion, even enlarging the interaction power of their users in the web. In order to then new virtual societies allow the inclusion of all the users, regardless of their diverse characteristics, some attentions with the accessibility tools and of the conceived content are necessary. This work carries out a study of the accessibility in two great Social networks: Orkut and Twitter. Tests were performed to gauge the failures and indicate possible improvements on these social networks that allow the inclusion of people with disabilities as well those that use different platforms and access devices. Resumo. As Redes Sociais são atualmente um serviço em grande expansão, ampliando ainda mais o poder de interação de seus usuários no ambiente web. Para que estas novas sociedades virtuais que se formam permitam a inclusão de todos os usuários, independentemente de suas características, são necessários alguns cuidados com a acessibilidade da ferramenta e do conteúdo gerado. Este trabalho realiza um estudo sobre a acessibilidade em duas grandes Redes Sociais: o Orkut e o Twitter. Foram realizados testes, apontadas as falhas e as possíveis melhorias para que estas redes permitam a inclusão de pessoas com incapacidades e também aquelas que utilizem diferentes plataformas e dispositivos de acesso. 1. Introdução Para Recuero [2005 apud Bassani; Heidrich 2008], as redes sociais são entendidas como sistemas fundamentados na interação social, buscando a conexão e a comunicação entre diferentes sujeitos. Já os sujeitos possuem múltiplas características, necessitando que a rede, vista como uma ferramenta, seja a mais acessível possível para atender a toda esta diversidade. Outro cuidado importante se faz no conteúdo que os próprios usuários produzem e compartilham nestas redes de múltiplas formas (texto e audiovisual), precisando assim haver uma cultura de acessibilidade. Na web, a acessibilidade preocupa-se com os cuidados que são necessários para que pessoas que tenham alguma incapacidade, uma deficiência ou que utilizem algum dispositivo ou plataforma específica, consigam acessar seus serviços. Tendo estes cuidados, sujeitos com estas particularidades não estarão sendo excluídos destas novas sociedades que se formam na web. Esta questão torna-se lei e cada país cria sua

2 legislação própria, tendo como exemplos o Section nos EUA e o decreto nº , artigo 47 no Brasil. Este artigo apresenta análises em duas grandes redes sociais, o Orkut e o Twitter, propondo melhorias na questão de acessibilidade. Neste processo, foram utilizadas as recomendações da Web Content Accessibility Guidelines WCAG, ferramentas de auxílio aos testes e a participação de usuários. Dois aspectos foram considerados: a correta estrutura da ferramenta e a cultura que os próprios usuários necessitam ter para gerar um conteúdo que seja acessível. O artigo está organizado da seguinte maneira. A seção 2 apresenta uma base teórica sobre as Redes Sociais e sua aplicação na web. A seção 3 aborda os conceitos da Acessibilidade na Web. A seção 4 apresenta a metodologia e os resultados da análise de acessibilidade. A seção 5 define algumas propostas de melhorias às redes analisadas. A seção 6 conclui o artigo e apresenta sugestões de trabalhos futuros. A seção 7 é dedicada aos agradecimentos. 2. Redes Sociais Conforme Lévy [1999 apud Bassani; Heidrich 2008], o ciber-espaço é o novo meio de comunicação que surge com a interconexão mundial de computadores, designando não só a infra-estrutura, mas todo o conteúdo gerado e compartilhado entre os seres que alimentam este universo. Inserido neste ciber-espaço estão as comunidades virtuais, definidas por Castells [2003 apud Machado; Tijiboy 2005] como uma rede eletrônica interativa, auto-definida e organizada em torno de um interesse ou finalidade compartilhado. Assim, as Redes Sociais incorporam as comunidade virtuais e a Internet ganha uma nova caracterização na forma de organizar a sua interação. Estas redes podem ser representadas por grafos, onde os nodos são os atores (pessoas, instituições ou grupos) e as arestas os relacionamentos existentes entre eles [Wasserman; Faust 1994 apud Recuero 2005]. Este conjunto de participantes unem ideias e recursos em torno de valores e interesses compartilhados. Uma grande base de dados é formada, providenciando um importante meio de organizar, compartilhar e procurar conteúdo. Cada ator cria um perfil individualizado, com seus dados pessoais, fotos e vídeos, para que ele possa ser reconhecido e consiga interagir com os demais. A interação torna-se condição principal para a construção destas redes, na qual seus atores formam laços sociais [Wassermann; Faust 1994 apud Recuero 2005]. Grupos de usuários são formados por interesses em comum, conectando seus atores por laços relacionais [Breiger 1974 apud Recuero 2005]. A partir destas múltiplas conexões surge o conteúdo destas relações, definido como capital social [Wasserman; Faust 1994 apud Recuero 2005]. Esse grande volume de laços e atores tornam estas redes extremamente dinâmicas, modificando-se em relação ao tempo e dependentes das interações que podem modificar sua estrutura

3 No ambiente web os conceitos das Redes Sociais são transformados em aplicações que potencializam a criação destas novas sociedades e facilitam a interação entre seus participantes. Serviços estes que estão em crescente uso, devido a uma grande variedade de websites, alguns buscando até mesmo segmentar os tipos de participantes. Alguns exemplos são: Facebook, Twitter, Orkut, YouTube, Flickr, MySpace, entre outros. A Rede Social Twitter 3 foi desenvolvida em março de 2006, pela Obvious Corp. em São Francisco. Atualmente, possui cerca de 6 milhões de usuários do mundo todo. Seus serviços criam um microblogging, que permite o envio de mensagens em forma de texto, de no máximo 140 caracteres, por SMS, mensageiro instantâneo, ou pelo próprio site. As atualizações são exibidas no perfil do usuário em tempo real e enviadas aos seus seguidores. Sua grande novidade está no ritmo, que faz milhares de pessoas não pararem de trocar mensagens [Martins; Leal 2009]. O Orkut 4 é a Rede Social mais utilizada pelos brasileiros, contando atualmente com 70 milhões de usuários, sendo que destes aproximadamente 49% são do Brasil. Foi criada em 24 de janeiro de 2004 pelo engenheiro turco Orkut Büyükkokten com o objetivo de criar novas amizades e manter relacionamentos. Como em qualquer sociedade, as formadas por estas Redes Sociais também terão uma grande diversidade de participantes. Dentre esta diversidade, surgem diferenças que muitas vezes podem ser limitadoras, não permitindo a participação efetiva nesta sociedade e gerando uma exclusão. Estas ferramentas de interação social devem seguir determinadas recomendações para que formem sociedades virtuais inclusivas, conforme será visto na próxima seção. 3. Acessibilidade na Web Segundo Thatcher [2006], a acessibilidade na web permite que pessoas com incapacidades possam perceber, entender, navegar e interagir com a web. Incapacidades estas que não são limitadas apenas a pessoas com algum tipo de deficiência (visual, física, auditiva, cognitiva, psicológica, neurológica ou de fala), mas também aquelas com incapacidades momentâneas (braço quebrado, por exemplo), idosos (com sentidos reduzidos), que utilizem conexão de banda baixa ou diferentes plataformas e dispositivos de acesso. Como cita Zeldman [2003], alguns mitos sobre esta questão precisam ser esclarecidos: sua amplitude (não é apenas para deficientes visuais), seu custo (que não é alto), os recursos que podem ser utilizados (não precisando ser uma página pobre de tecnologia) e a existência de apenas uma versão do website. Conforme Clark [2002], quando se considera uma aplicação desenvolvida para o ambiente web, diversos componentes estão presentes e interrelacionados: o desenvolvedor, o usuário e o conteúdo. O conteúdo é o elemento central e flutuante entre os demais, devendo ser corretamente interpretado. Em 1994 foi fundado o World Wide Web Consortium - W3C, um consórcio internacional no qual organizações

4 filiadas, uma equipe em tempo integral e o público trabalham de forma colaborativa para desenvolver padrões para a web. Dentre estes padrões há as especificações técnicas e as diretrizes específicas de acessibilidade. Em abril de 1997 foi criado um grupo da W3C denominado de Web Acessibility Iniative WAI, responsável por criar estratégias, recomendações e recursos para tornar a web acessível. Suas recomendações abrangem a acessibilidade de três elementos: o conteúdo utilizando o WCAG, as ferramentas de autoria, seguindo o Authoring Tool Accessibility Guidelines - ATAG e os agentes do usuário, guiados pelo User Agent Accessibility Guidelines - UAAG. Conforme a World Wide Web Consortium [2008], o WCAG 2.0 é uma recomendação organizada da seguinte maneira: princípios (são quatro, estando no topo e sendo seu fundamento), diretrizes (são doze, não testáveis, mas que ajudam na compreensão dos critérios de sucesso) e os critérios de sucesso (fornecidos para cada diretriz, sendo testáveis e utilizados nos casos em que são necessários requisitos e testes de conformidade). Já os quatro princípios são: Perceptível (a informação e os componentes da interface do utilizador têm de ser apresentados aos utilizadores em formas que eles possam percepcionar), Operável (os componentes da interface do utilizador e a navegação têm de ser operáveis), Compreensível (a informação e a operação da interface do utilizador têm que ser compreensível) e Robusto (o conteúdo tem de ser robusto o suficiente para poder ser interpretado de forma fiável por diversos agentes do utilizador, incluindo tecnologias de apoio). As Redes Sociais de maior utilização na web já estão preocupadas com a acessibilidade, realizando constantes alterações em suas estruturas. Estudiosos da área discutem as barreiras de acessibilidade que estas ferramentas apresentam, criando até mesmo versões alternativas. Um exemplo disso é o AcessibleTwitter 5, um Twitter mais fácil de se utilizar e otimizado para usuários com alguma incapacidade, principalmente visual. Tendo então compreendido os conceitos das Redes Sociais, apresentado aquelas que foram analisadas e verificadas as diretrizes necessárias para torná-las acessíveis, a próxima seção trará a metodologia utilizada para avaliar estas redes quanto à sua acessibilidade. 4. Metodologia de Análise de Acessibilidade Esta seção apresenta a metodologia adotada para analisar a acessibilidade das Redes Sociais e seus resultados. Foram realizadas avaliações objetivas, com conclusões obtidas de forma automatizada por meio de ferramentas. Também foram utilizadas avaliações subjetivas e técnicas de inspeção de usabilidade, realizadas por um único testador em um mesmo computador, por meio de diferentes ferramentas. Nelas, diferentes conclusões podem ser obtidas pela análise do testador diante dos resultados obtidos. Alguns usuários destas redes foram selecionados, respondendo um questionário pré-elaborado para identificar suas maiores dificuldades no uso diário destas ferramentas. A ordem de execução das avaliações não foi necessariamente na ordem 5

5 apresentada no artigo, porém a cada nova avaliação buscava-se a integração com as já realizadas. É importante ressaltar que estas redes estão em constantes atualizações e mudanças estruturais. Sendo assim, tais modificações podem influenciar os resultados demonstrados por este trabalho Validando os códigos HTML e CSS As páginas iniciais das Redes Sociais tiveram seus códigos validados. Como cita Nielsen [2003], um documento bem estruturado traz diversas vantagens: o acesso em diversas plataformas e dispositivos móveis, a melhor compreensão pelas tecnologias assistivas utilizadas pelo usuário e um código mais limpo e compacto, consumindo menos banda na rede. Para validar a estrutura do documento, conforme a Hypertext Markup Language HTML foi utilizado o Markup Validation Service 6, já para a validação da formatação do documento, utilizou-se o CSS Validation Service 7, ambos da W3C. As ferramentas detectaram automaticamente os tipos de documentos de cada rede social, realizando uma análise da sintaxe de seus códigos e gerando um relatório. Os resultados são sintetizados na Tabela 1. Tabela 1. Relatório geral dos Erros e Alertas dos códigos validados Rede Social HTML 4.01 Transitional HTML 4.01 Strict XHTML 1.0 Strict CSS 2.1 Erros Alertas Erros Alertas Erros Alertas Erros Alertas Orkut Twitter Na validação do Orkut, quanto a sua estrutura, o tipo de documento identificado foi o HTML 4.1 Transitional, apresentando oito erros. Alguns destes erros são: tag base não fechada, algumas tags com os nomes de atributos sem estarem entre aspas duplas, algumas imagens sem atributos de texto alternativo e outras com um tipo de alinhamento inválido. Modificando-se o tipo de documento para Strict, com uma rigidez maior na utilização das tags e de seus atributos, os erros são duplicados, com a adição de algumas tags que não são fechadas corretamente. Já o Twitter trabalha com o formato XHTML 1.0 Strict, com uma exigência maior na observância das regras sintáticas, não estando validado. São encontrados 21 erros que na sua maioria são facilmente corrigidos, como a falta de fechamento de algumas tags /> e de alguns valores de atributos, que devem ser colocados em aspas duplas. Também há alguns nomes de identificadores de determinadas tags que estão com suas grafias erradas, identificadas pelas demais referências feitas na página

6 Na questão do código Cascading Style Sheets - CSS, o Twitter está totalmente validado, já o Orkut apresenta um grande número de erros. Os erros do Orkut neste quesito se devem principalmente ao grande número de propriedades que são da versão CSS 3 (que ainda não é padronizada) e regras específicas para funcionarem apenas em determinados navegadores, com uma sintaxe inválida para o padrão do CSS Validando as diretrizes do WCAG 2.0 As diretrizes do WCAG 2.0 foram avaliadas pelo Web Accessibility Checker , desenvolvido pelo Adaptative Technology Resource Centre, da Universidade de Toronto. Os testes foram realizados utilizando os três níveis de conformidade: A (mais baixo), AA e AAA (mais alto). O WCAG é formado por diversos Critérios de Sucesso, sendo que cada um deles possui um nível de conformidade. Para um website atingir o nível de conformidade A, ele deve cumprir todos os Critérios de Sucesso de nível A. Para atingir o nível AA, deve cumprir todos de nível A e AA. Já para alcançar o de nível AAA, cumprir todos do nível A, AA e AAA. Os relatórios gerados pela ferramenta tiveram seus dados sintetizados na Tabela 2. Tabela 2. Relatório geral de Erros e Alertas da validação do WCAG 2.0 Rede Social WCAG 2.0 A WCAG 2.0 AA WCAG 2.0 AAA Erros Alertas Erros Alertas Erros Alertas Orkut Twitter Observa-se que ambas as Redes possuem apenas erros em Critérios de sucesso de nível de conformidade A, que são constantes à medida que sobe a exigência. Os alertas são crescentes, porém não são complicadores na acessibilidade. O Twitter apresenta os seguintes erros: a tag <body> possui um identificador que não é único e duas imagens com problemas em seus textos alternativos: uma contendo um atributo longdesc com link inválido para sua descrição e outra sem nenhum atributo alt. Já o Orkut não define o idioma de seu documento e possui imagens sem texto alternativo. A falta de textos alternativos nas imagens, muito comum em ambas as redes, não permite que deficientes visuais as identifiquem utilizando os leitores de tela, já que o software utiliza este texto para sintetizar de forma sonora o significado visual da imagem Analisando questões de cores e contraste Para analisar as questões de cores e contrastes destas redes foram utilizados dois softwares: o Color Oracle 6 9, desenvolvido pelo Institute of Cartography e o teste de

7 contraste, disponível por meio de uma barra de ferramentas do Internet Explorer desenvolvido pelo Web Accessibility Tools Consortium 10. O Color Oracle permite simular a forma pela qual os daltônicos visualizam tais redes. Há três tipos de daltonismo: a deuteranopia (mais comum) que é a dificuldade de diferenciar cores verdes, a Protanopia (rara) que é a dificuldade de enxergar cores vermelhas e a Tritanopia (extremamente rara) com a dificuldade de enxergar cores azuis. Visualmente notou-se pouca dificuldade na visualização das redes, mas um exagerado cansaço visual geradas pelas combinações de cores vistas de forma diferente por tais usuários. No teste de contraste, feito pela barra de ferramentas da Web Accessibility Tools - WAT é possível analisar se as combinações de cores entre os elementos da página e seus fundos são satisfatórias. O Twitter possui onze combinações de pares, sendo que apenas três estão em conformidade com o WCAG 2.0, que especifica rígidos padrões de cores e luminosidade a estes elementos. O Orkut possui onze combinações, sendo que seis são aceitas. Nota-se que as redes necessitam melhorar este quesito, principalmente o Twitter, que deveria ser revisto quanto as suas cores do perfil padrão. Deve-se observar que o Twitter permite que seus usuários modifiquem a imagem de fundo e as cores dos elementos de seu perfil (links e texto). Por este motivo, foi utilizado nos testes um perfil com as cores padrão Acessando as redes utilizando diferentes navegadores e opções As Redes Sociais foram acessadas utilizando-se os navegadores de maior aceitação no mercado, que segundo estatísticas da Market Share de Junho de são: o Internet Explorer (versões 6 e 7), desenvolvido pela Microsoft Corporation, o Firefox (versão 3.0), desenvolvido pela Mozilla Corporation e o Safari (versão 3.2), desenvolvido pela Apple. Alguns itens do navegador também foram desabilitados, tais como: o Javascript, o CSS e a visualização de imagens, visando simular situações em que os usuários não podem executar scripts ou por terem uma banda baixa, desabilitam estas opções. Todos os testes adicionais desta subseção foram realizados utilizando-se uma extensão do Firefox: o Web Developer 12. Inicialmente, foram analisados os aspectos visuais destas redes: sua disponibilidade, funcionalidade e renderização. Foram observados que estes aspectos, em diferentes navegadores, mantiveram-se constantes. Porém, o layout das duas Redes Sociais utilizam tabelas, conforme mostra a Figura 1, demarcado por meio de linhas que contornam algumas regiões das redes e que são visíveis utilizando-se o Web Developer. O uso deste tipo de layout pode apresentar distorções em dispositivos que não suportem tabelas, tais como alguns dispositivos portáteis. Além disso, essa prática vai de encontro às recomendações da W3C, que indica o seu uso apenas para a exibição de dados tabulares

8 Após, foi testado o comportamento das redes com o aumento e diminuição do zoom. Alguns usuários com baixa visão podem utilizar este recurso, principalmente para aumentar o tamanho dos caracteres e permitir a leitura do texto. É importante salientar que os navegadores apresentam maneiras diferentes de modificar o zoom. Assim, o Internet Explorer 7 manteve os layout de ambas as redes sem distorções, já nos demais navegadores há o deslocamento da imagem de fundo do Twitter, quando o zoom é decrementado. Figura 1. Exibição dos Layout das Redes Sociais utilizando-se de tabelas Ao desabilitar a visualização de imagens no Orkut, notou-se que há um grande número de imagens sem nenhum atributo alt, um erro grave já acusado nas validações anteriores. Nesta mesma rede há imagens com textos alternativos vazios, que são itens de menu decorativos, utilizados de forma correta, já que há um texto ao lado com a função destes ícones. Um exemplo crítico é o caso dos botões de avançar ou retroceder as fotos que não são descritas textualmente. Já o Twitter utiliza-se de menos recursos visuais, não apresentando problemas neste quesito, descrevendo todos os textos alternativos de suas imagens, pois o enfoque dessa rede é mais textual do que gráfico. Desabilitando o Javascript, percebe-se o mesmo comportamento nas duas redes: é exibida uma mensagem de erro, informando que o este recurso deve ser habilitado no navegador para ser liberado o acesso. Esta limitação restringe o acesso a estas redes apenas a dispositivos que possuam esta tecnologia. Ao ser desabilitado o CSS no Twitter, a rede apresenta uma estrutura de página correta, com os links de acesso rápido no topo (visíveis nessa situação), seguido dos links de menu principais, as mensagens rápidas como listas numeradas e no final o rodapé. O Orkut apresenta da mesma forma uma adequada estrutura, tendo no topo os itens navegação e de maior utilização Acessando as redes utilizando navegador em modo texto Para verificar situações em que o usuário não pode utilizar nenhum recurso multimídia ou o dispositivo de acesso está com estes recursos desabilitados, foi utilizado o navegador de modo texto Links , criado por Mikuláš Patočka. Este navegador 13

9 apresenta como diferencial aos demais de sua categoria a simulação de elementos gráficos como menus, tabelas e novas janelas. Acessando o Orkut pelo navegador em modo texto, após o login é exibida a seguinte mensagem de erro: Your browser s cookie functionality is turned off. Please turn it on. Esse erro é ocasionado pelo fato da ferramenta utilizada não trabalhar com cookies, demostrando a obrigatoriedade desta funcionalidade estar ativada no navegador para poder acessar a rede. Outros navegadores da mesma categoria foram testados porém nenhum dos pesquisados conseguiu acessar esta rede social. Este fato inviabilizou a análise do Orkut neste aspecto. Já o Twitter, acessado pelo navegador em modo texto, apresenta alguns links de acessibilidade visíveis nesse modo (skip past navigation, skip to navigation, skip to sign in form), que permitem o acesso rápido a determinados elementos da página, como mostrado na Figura 2. Figura 2. Página inicial do Twitter visualizada pelo navegador em modo texto Após o login no Twitter e continuando a navegação pela rede, foi constatado que todos os campos de texto (textarea e textfield) possuem corretamente suas descrições textuais do conteúdo que o usuário deve inserir. Nas páginas constata-se o excesso de divisões de telas, que pode ser maior conforme a quantidade de mensagens do perfil, observado nos demais navegadores com o contínuo deslocamento da barra de rolagem. Algumas configurações, tais como a mudança de imagens e demais elementos de cor são prejudicados neste tipo de navegação, conforme é exibido na Figura 3. Outro detalhe, que pode ser analisado na mesma figura é o uso de textos com dicas (tips) auxiliando o usuário.

10 Figura 3. Página de Configurações do Designer do Twitter visualizada pelo navegador em modo texto 4.6. Acessando as redes utilizando leitor de tela Deficientes visuais navegam pelos websites por meio do teclado e o apoio de softwares denominados de leitores de tela, que são capazes de ler os códigos destas páginas, interpretar e sintetizar o conteúdo de forma sonora, assim como os comandos digitados. Para simular este ambiente e analisar suas barreiras, as Redes Sociais foram acessadas utilizando o leitor de tela DosVox , desenvolvido pela Universidade Federal do Rio de Janeiro UFRJ. O Orkut não pode ser acessado pelo navegador interno do DosVox, que por ser mais simples e não trabalhar com cookies, apresentou o mesmo problema encontrado no acesso utilizando o navegador em modo texto na subseção anterior. Assim, foi utilizado para acessar esta rede um software externo do mesmo pacote, denominado de Monitvox, que realiza a leitura pela tela do navegador do usuário. Na navegação de ambas as redes deve-se levar em consideração que as dificuldades de navegação são constatadas pela falta de experiência do testador neste ambiente e não problemas estruturais da ferramenta. Mesmo assim, são notadas barreiras, algumas indicadas em outras subseções, porém agora vivenciadas de forma prática, como no Orkut podem ser citadas: As imagens sem texto alternativo são sonorizadas apenas como vínculo indicando que é um link, porém sem descrição textual do que a imagem exibe. No Orkut os aplicativos App adicionados indicam que para alterar a ordem é preciso arrastar usando o mouse, porém utilizando este software fica impossível realizar este movimento. Caracteres American Standard Code for Information Interchange - ASCII que em conjunto formam imagens, inseridos em recados e nos perfis dos usuários tem seus caracteres reproduzidos sonoramente, gerando confusão e não dando a noção do seu conteúdo visual. 14

11 Links sem legenda direta de seu destino e sim a sua Uniform Resource Locator - URL completa dificultam a legibilidade quando sonorizados. Fotos ou vídeos sem nenhuma legenda ficam sem significados, dando a sensação de estar navegando em uma página sem conteúdo algum. Os comandos de navegação dos vídeos são operáveis pelo teclado, mas não possuem uma legenda para serem sonorizados pelo leitor de tela e permitir sua interação. Torna-se impossível definir um amigo como fã ou definir o quanto ele é confiável, legal e sexy, já que é uma funcionalidade por javascript, sem rótulo algum e controlada pelo mouse. Impossibilidade de se criar uma comunidade, já que é solicitado que seja digitado um texto que está em uma imagem que não possui nenhum texto alternativo. Já no Twitter observa-se as seguintes barreiras: Ao se inserir uma nova mensagem é impossível saber quantos caracteres ainda restam para serem digitados (dos 140 permitidos). Dificuldade de tornar uma mensagem como favorita ou replicá-la, já que não há tecla de atalho para estas funcionalidades. Algumas ações após serem realizadas não deixam claras se obtiveram sucesso, por exemplo a replicação de uma mensagem Acessando as redes por meio de dispositivo móvel Para analisar a navegabilidade, compatibilidade e visualização destas redes, acessadas por meio de dispositivos móveis, foram utilizados dois simuladores: o Opera Mini Simulator Demo 15 para celulares, fornecido pela Opera Software SA e o ibbdemo 16 para iphones, desenvolvido por Shaun Sullivan. Acessando as redes pelos simuladores, notou-se que ambas as redes apresentam dois modos de visualização, que podem ser trocados nos links de seus rodapés: um para celular (aparelhos móveis) com um layout simples, sem tantos recursos visuais e só suas funcionalidades principais (conforme Figura 4) e outro padrão, igual a visualizada nos computadores através dos navegadores. Deve-se observar que o modo padrão possui muitos elementos, disponibilizados de forma não linear, o que exige constantes aumentos de zoom para ler o conteúdo, já que o espaço de tela nos aparelhos portáteis é reduzido, o que dificulta a navegabilidade e usabilidade

12 Figura 4. Redes Sociais acessadas por celular em modo de visualização para dispositivo móvel Realizando o acesso por celular, o Orkut apresentou uma boa disposição dos itens, da seguinte forma: com a frase de status, recados, aniversários, as atualizações de amigos, os links do menu principal e o rodapé. As fotos são visualizadas, porém alguns recursos foram desabilitados tais como: vídeos, grupos, depoimentos, eventos e informações não essenciais dos perfis dos usuários (tais como o número de fãs). O modo de visualização completo possui apenas a limitação de não exibir os vídeos. Já o Twitter é bem visualizado e funcional em ambos os modos de visualização. O acesso por iphone em ambas as redes não apresenta grandes problemas, renderizando de forma perfeita e sendo funcional tanto no modo móvel (conforme Figura 5), como na padrão. O Orkut em sua versão completa permite até mesmo a visualização de vídeos, característica não obtida pelo uso do celular. Figura 5. Redes Sociais acessadas por iphone em modo de visualização para dispositivo móvel

13 4.8. Navegando nas redes sem o uso do mouse As Redes Sociais foram acessadas utilizando apenas o teclado, sem o apoio do mouse, para verificar a sua navegabilidade. Assim, foram simuladas situações em que o mouse está com problemas, o acesso por meio de aparelhos portáteis que não possuem este dispositivo e demais situações em que o usuário não consegue movimentá-lo (por exemplo, por estar com alguma lesão temporária ou permanente nos braços). A cada tecla tab pressionada no teclado, o foco é alterado para o próximo elemento na ordem de tabulação, definida na estrutura do documento. Esta ordem pode ser definida pela inclusão do atributo tabindex em algumas tags, caso contrário segue a estrutura do documento, de cima para baixo. Esta ordem é importante, já que define a lógica de leitura do site. Ambas as redes obedeceram estes critérios. Os links do menu principal possuem teclas de atalho para facilitar seu acesso. Um detalhe é que nas redes estes atalhos não são marcados visualmente nos links. No Twitter as funções de replicar e tornar como favorita uma mensagem não possuem nenhuma tecla de atalho. No Orkut é possível acessar todos os comandos dos vídeos (parar/reproduzir, linha de tempo e volume) apenas utilizando o teclado. Cabe salientar que, apesar dos layouts de ambas as redes possuírem tabelas, este fato não foi crítico nestes testes. Isso se deve ao fato das tabelas serem utilizadas para separar blocos lógicos de conteúdo, não havendo tabelas dentro de outras tabelas, como foi demonstrado anteriormente na Figura Coletando informações dos usuários das Redes Sociais Foi realizada uma pesquisa com pessoas que tenham perfis nas duas redes sociais selecionadas para este trabalho. Os sujeitos foram selecionados conforme determinadas características, tendo dois representantes para cada uma das seguintes categorias: deficiente visual (portador de deficiência visual total), deficiente auditivo (portador de deficiência auditiva total), deficiente físico (com impossibilidade de movimento de um ou de ambos os braços), idoso e usuário sem nenhuma incapacidade aparente. Foi aplicado a eles um questionário pré-elaborado, conforme Anexo 1, com questões para traçar suas características e as principais dificuldades que encontram no uso diário destas redes. Após, os dados foram tabulados, conforme apresentado nos Anexos 2 e 3. Analisando os dados obtidos em ambas as redes constata-se que: Para os usuários sem incapacidade aparente e os idosos, quanto maior o conhecimento de internet, menores as dificuldades para realizar as tarefas. Na questão da motivação os usuários para utilização das redes sociais, observase que o maior interesse em utilizar as redes é buscar novas amizades e manter as antigas (86%), seguido de contatos profissionais (10%) e namoro (4%). Já considerando a média de acessos semanais nas redes, temos: 3 a 4 (60%), 1 a 2 (26%), 5 a 6 (10%) e mais de 6 (4%). Com os dados obtidos pelos usuários do Twitter pode ser observado que: A tarefa de Ler a ajuda do site, apresentou uma dificuldade média (2,2) já que muitos dos entrevistados não conhecem o idioma em inglês. Deficientes

14 auditivos e visuais classificaram esta tarefa como sendo de muita dificuldade, este fato deve-se mais pela compreensão do idioma, do que pela estrutura do conteúdo. Deficientes visuais possuem mais dificuldades na tarefa de Replicar uma mensagem, tendo sido definido pelos dois deficientes visuais como muito difícil. Esta dificuldade foi constatada nas seções 4.6 e 4.8. Deficientes visuais são os que mais possuem dificuldades no uso geral da rede (1,91), porém ela ainda é pouca. A seguir, vêm os idosos (1,55), os usuários sem incapacidade aparente (0,77), os deficientes físicos (0,73) e os deficientes auditivos (0,68). Os deficientes auditivos possuem baixa dificuldade, pois a rede não utiliza elementos audiovisuais. A tarefa de Procurar por pessoas foi a que apresentou a maior dificuldade (2,5) para a média dos usuários. Isso se deve principalmente pela ferramenta ainda necessitar aperfeiçoar o mecanismo de busca. Já a que apresentou mais facilidade foi a Leitura do conteúdo de seus seguidores (0,4). Já com os dados obtidos pelos usuários do Orkut, observa-se que: Deficientes visuais são os que mais possuem dificuldades no uso geral da rede (2,22), seguido pelos deficientes físicos (0,78), deficientes auditivos (0,69), idosos (0,59) e os usuários sem incapacidade aparente (0,56). A tarefa de Ler um recado recebido em forma de vídeo foi a que apresentou a maior dificuldade aos usuários (1,8), seguida pela tarefa de Inserir um novo vídeo (1,7). Estas duas tarefas foram definidas pelos deficientes visuais e auditivos como sendo de muita dificuldade. Isso se deve ao fato da dificuldade de navegação dos controles de vídeos pelo leitor de tela, sendo uma dificuldade para o deficiente visual e o fato de muitas vezes não possuir uma legenda do seu conteúdo, trazendo uma dificuldade ao deficiente auditivo. A dificuldade de inserção de um novo vídeo se deve ao fato de necessitar de um acesso a um site externo. A tarefa de Definir um amigo como fã foi indicada como de muita dificuldade para os deficientes visuais. Esta dificuldade está relacionada com o fato do mecanismo de definição deste item ser por javascript, visual e apenas funcional com a utilização do mouse. As tarefas com menores dificuldades foram a de Entrar no site, inserindo e senha, seguida de Ler um recado em forma de texto Avaliando o conteúdo gerado pelo usuário O conteúdo gerado pelo usuário foi avaliado, coletando alguns trechos de perfis reais, para demonstrar algumas dificuldades que poderão ser encontradas por diferentes usuários. Assim, é exemplificada a importância da educação destes usuários na produção de um conteúdo que também seja acessível. Sobre estes aspectos, os conteúdos com os seguintes teores podem apresentar problemas de acessibilidade:

15 Significado visual gerado pela Arte ASCII: há a possibilidade em ambas as redes de serem inseridas imagens formadas por caracteres, como mostra a Figura 6. O leitor de tela utilizado pelos deficientes visuais será incapaz de ler o conteúdo ou interpretar o significado da imagem, já que é formado por um conjunto de caracteres que serão lidos individualmente. Este fato já foi vivenciado nos testes da subseção 4.6. No Orkut alguns de seus usuários utilizam caracteres ASCII entre os seus nomes de usuários, dificultando a sua compreensão e a sua busca. No Twitter as artes ASCII são mais simples, mas também presentes, tais como: \o/ e :). Figura 6. Exemplo de arte ASCII coletada de um perfil do Orkut Significado apenas sonoro: o Orkut possibilita que seus recados contenham elementos de som, que são reproduzidos ao serem visualizados. Estes recados podem perder seu significado para um deficiente auditivo ou por ser muito baixo não ser audível a quem possui baixa audição. Vídeos sem legendas: com a integração do Orkut e o YouTube, o número de vídeos nesta rede teve um aumento significativo, com a possibilidade de ser inserido em um recado. Porém, vídeos sem legendas podem não ser compreendido por deficientes auditivos. Imagens sem descrição alternativa: gifs animados e imagens com conteúdo textual inseridos como recados no Orkut, se não tiverem um texto alternativo não serão compreendidos pelos deficiente visuais, como foi visto de forma prática na subseção 4.6. Abreviações e Linguagens Específicas: com a restrição de caracteres para cada mensagem do Twitter, muitos usuários utilizam-se de abreviaturas e termos específicos da internet, podendo tornar algumas de suas mensagens incompreensíveis para aqueles que não dominam tal vocabulário. Conflitos de cores e contrastes: a possibilidade de mudar a cor da fonte dos recados no Orkut pode trazer dificuldades visuais em dois casos: caso haja apenas um significado visual ou se for conflitante com a cor de fundo da ferramenta. O daltônico pode apresentar dificuldades específicas em algumas situações. Diversidade de Idiomas: o Twitter por permitir seguir pessoas de diversos países, utilizando muitos idiomas diferentes, apresenta problemas ao utilizar um leitor de tela de um idioma específico. A ferramenta incapaz de identificar o idioma da

16 mensagem interpreta e lê no idioma em que foi desenvolvida, podendo dificultar a interpretação sonora das palavras Avaliando as redes como promotoras de acessibilidade As Redes também foram analisadas como ferramentas de integração, verificando se estão disponibilizando mecanismos próprios para educar seus usuários a produzirem um conteúdo acessível. Sobre estes aspectos o Orkut foi analisado, notando-se os seguintes problemas na estrutura desta ferramenta, muitos vivenciados de forma prática na subseção 4.6: Ao se inserir uma imagem, o campo para a legenda é opcional. Caso nenhum texto seja inserido a frase minha foto é inserida. Nos vídeos o título é obrigatório, já a descrição não, podendo ficar vazia. Ao se inserir uma imagem ou gif animado juntamente com algum recado, a ferramenta não fornece nenhuma opção para inserir uma legenda. Qualquer código HTML pode ser inserido como um recado, não passando por nenhum tipo de validação. A URL de um site somente pode ser inserida de forma completa. Ao se inserir um recado contendo imagens e/ou links ou ao se criar uma nova comunidade, é solicitado uma confirmação digitando algumas letras mostradas em uma imagem distorcida (recurso comumente conhecido por Completely Automated Public Turing test to tell Computers and Humans Apart - CAPTCHA). Esta imagem não possui texto alternativo, não sendo interpretado por leitores de tela e inacessível a deficientes visuais. Além disso, até mesmo usuários sem nenhum tipo de deficiência têm dificuldades em interpretá-las. As fotos marcadas nos perfis de outros usuários são reunidas em um link denominado fotos comigo. Porém, elas não trazem junto as suas legendas, nem permite adicioná-las, tornando-se o significado apenas visual. Sobre o Twitter foram levantados os problemas estruturais: É possível modificar as cores dos elementos do perfil, como citado anteriormente, porém não há qualquer tipo de validação de contraste, podendo gerar combinações de difícil visualização. É muito comum utilizar links com suas URLs reduzidas. O problema é a impossibilidade de saber qual página será carregada sem ter que clicar no link. O conteúdo da página externa pode não ser acessível. 5. Propostas de Melhorias Após a metodologia de análise de acessibilidade ter sido concluída, foram identificadas as principais falhas do Orkut e do Twitter nesta questão. Assim, é possível citar algumas possíveis melhorias que tornem estas ferramentas mais acessíveis.

17 5.1 Melhorias comuns as duas redes As funcionalidades das redes poderiam ser revistas, para que ambas sejam funcionais com o javascript ativado ou desativado, dependência apontada na subseção 4.4. Navegando sem o mouse (subseção 4.8) notou-se a existência de teclas de atalho, porém os links que a possuem poderiam ser marcados visualmente, com o sublinhado de uma de suas letras. Sobre a questão do conteúdo inserido pelos próprios usuários, visto na subseção 4.10, é necessário investir na educação da acessibilidade. Uma sugestão seria a de inserir na área de ajuda um item sobre a importância de gerar um conteúdo que possa ser compreendido por todos os usuários da rede e demais tópicos de acessibilidade, que nenhuma das redes possui. 5.2 Melhorias para o Orkut Como visto na subseção 4.1, o tipo de documento do Orkut poderia já ser o HTML 4.01 Strict, com a correção dos problemas apresentados nos testes, através de uma revisão geral do código. Assim, a rigidez da sintaxe será maior e por conseqüência será mais acessível. Apesar do CSS ter vários erros indicados pelo validador, a maioria deles não é preocupante quanto a acessibilidade (mais aspectos visuais), sendo que se os navegadores não identificarem a sintaxe do CSS 3 ou alguma regra específica, não as utilizarão. Nas validações do WCAG 2.0, realizados na subseção 4.2, foram demonstrados os erros do Orkut que precisam ser revistos em seu código, principalmente a definição de idioma do documento e o grande número de imagens com problemas em suas descrições alternativas, sendo que este último erro também foi constato na subseção 4.4 quando as imagens foram desabilitadas dos navegadores. Estes dois grupos de erros são críticos na questão de acessibilidade, não percebidos pela maioria dos usuários, mas problemáticos aos deficientes visuais. O Orkut mesmo apresentando seis das onze combinações de cores em conformidade com o WCAG 2.0, conforme subseção 4.3, poderia rever as demais combinações, já que as cores dos perfis desta rede social são estáticas. Neste mesmo aspecto o possível cansaço visual causado aos daltônicos, por visualizar as combinações de cores diferentes das definidas na rede, poderia ser revisto. A partir da navegação na rede utilizando um leitor de tela, como apresentado na subseção 4.6 e confirmado pelos deficientes visuais em suas entrevistas (subseção 4.9), percebeu-se que é necessário uma legenda nos comandos de controle dos vídeos inseridos. Outra melhoria seria no mecanismo de definir um amigo como fã e o quanto ele é confiável, legal e sexy. Estas funcionalidades trazem muita dificuldade aos deficientes visuais (como visto na subseção 4.9) e a definição de seus valores poderiam ser substituídos por radiobuttons com valores pré-definidos, acessíveis por teclado e com legenda. Ao coletar os dados dos usuários, realizado na subseção 4.9, também percebeuse que a inserção de vídeos na ferramenta poderia ser melhorada, com um mecanismo de busca interna e integrada ao YouTube.

18 Sobre a estrutura do Orkut, algumas mudanças são propostas: Solicitar obrigatoriamente uma legenda nos seguintes casos: ao ser inserido uma imagem no álbum de fotos ou como um recado, e ao inserir um vídeo. Ao lado do campo de legenda poderia ser inserido um link intitulado de Qual a importância disso?, que quando clicado informaria ao usuário a importância da legenda e sua consequência aos demais usuários da rede. Não permitir simplesmente a inserção de um código HTML como recado e sim disponibilizar mecanismos para se inserir estes elementos (tal como um pequeno editor de texto para se inserir imagens, sons e formatar o texto). Fornecer uma alternativa sonora para os CAPTCHAS ou substituí-los por uma pergunta simples que possa ser respondida pelo usuário (conforme o seu idioma e país). Para cada foto marcada em outro álbum, trazer consigo sua legenda. 5.3 Melhorias para o Twitter O Twitter poderia revisar o seu código XHTML 1.0 consertando os erros sintáticos, que em sua maioria são simples, como mostrado na subseção 4.1. Já o CSS não precisa de nenhuma revisão, já que passou sem nenhum erro no validador. Esta rede social apresentou poucos erros na validação do WCAG 2.0, conforme subseção 4.2, que precisam ser revistos no código, com questão ao correto uso dos textos alternativos em algumas de suas imagens. Conforme análise realizada na subseção 4.3, a rede precisa rever as cores utilizadas em seu perfil padrão, por apresentar um alto número de combinações em desconformidade com esta recomendação e considerando que a maioria dos usuários o utiliza. O layout utilizado pelo Twitter necessita modificações, para que quando a página tiver uma diminuição de zoom não tenha sua imagem de fundo deslocada de posição, conforme visto na subseção 4.4. O posicionamento de todos os seus elementos deve ser padrão e independente do zoom utilizado. Na subseção 4.6, na qual a rede foi acessada pelo leitor de tela, foi constatada a dificuldade de saber quantos caracteres já foram digitados nas mensagens, assim seria interessante ter um aviso sonoro quando o limite de 140 caracteres for alcançado. Outras indicações sonoras interessantes seriam as conclusões de algumas ações, tais como: postar uma mensagem, adicionar algum perfil como favorito, replicar ou responder uma mensagem, sendo estas últimas avaliadas como difíceis pelos usuários (subseção 4.9). Com a coleta de informações dos usuários, realizada na subseção 4.9, observouse que o idioma é uma barreira para os usuários, principalmente na compreensão dos itens de ajuda da rede, assim poderia ser disponibilizado o idioma em português. Outro aspecto seria a melhora do mecanismo de busca da ferramenta, caracterizando melhor os perfis da rede e permitindo sua procura por eles. Outra dificuldade é replicar uma mensagem, que ocorre também ao torná-la como favorita, sendo que em ambas funcionalidades é necessária adicionar uma tecla de atalho.

19 A estrutura da ferramenta, analisada na subseção 4.11, poderia sofrer as seguintes melhorias: O usuário, ao modificar as cores dos elementos de seus perfis, poderia receber um alerta de combinações de cores com contrastes ruins, para evitá-las. O próprio Twitter poderia fornecer uma ferramenta interna para a abreviatura das URLs e inserir uma legenda ou indicação do endereço completo quando inserido em uma mensagem. A ferramenta poderia converter os smileys inseridos nas mensagens para uma versão textual para ser compreensível por todos os usuários. Ex: :-) em (sorriso) 6. Conclusões e Trabalhos Futuros Conclui-se que muitas das alterações necessárias nas redes sociais para solucionar suas falhas críticas e torná-las mais acessíveis são em sua maioria simples de serem realizadas, como foram amplamente discutidas na seção 5. Estas alterações que são necessárias, não provocariam grandes impactos aos usuários que não possuem nenhuma incapacidade aparente, mas trariam ganhos para os demais. Apesar destas falhas, a maioria dos usuários com alguma incapacidade consegue acessar estas redes sociais, porém com dificuldade em determinados itens. O acesso é mais crítico aos deficientes visuais, limitados ao uso do leitor de tela e que necessitam que as redes sigam padrões mais rígidos, para que este software consiga navegar de forma satisfatória. Pode ser constatado também que as redes preocupam-se em possibilitar seu acesso em dispositivos móveis, apresentando versões, já que a mobilidade é uma forte tendência mundial. Como não há uma metodologia padronizada de análise de acessibilidade, foi importante a utilização de um conjunto de métodos para que as conclusões fossem as mais amplas possíveis, já que o universo de usuários e características avaliados neste artigo foi amplo. Assim, se faz necessário que grupos como o WAI continuem a discutir e promover a acessibilidade na web, trabalhando na criação de uma metodologia padronizada de análise. Sobre a questão da produção de um conteúdo acessível, é necessário que a ferramenta invista na educação e conscientização dos usuários neste assunto. Este é o único caminho, já que as ferramentas em si não poderão controlar este montante gigantesco de conteúdo gerado. Caso fizesse isto, tornariam-se rígidas demais, dificultando a troca de informação entre seus usuários e descaracterizando seus princípios. As constantes mudanças estruturais sofridas por estas redes podem resolver muitos dos problemas de acessibilidade citados neste trabalho, porém podem facilmente trazer outros. O importante é que, a cada nova mudança, alguns dos princípios de acessibilidade sejam considerados. Como trabalhos futuros propõe-se a pesquisa em outras redes sociais, tais como: o Facebook (mais utilizado mundialmente), o YouTube e o Flickr (que apresentam como principais elementos vídeo e imagens, críticos na questão da acessibilidade).

20 Também poderia ser entrevistado um universo maior de usuários (em quantidade e qualidades) e realizados testes presenciais. Uma alternativa baseada no conceito de hipermídia adaptativa poderia ser proposta. Outro aspecto interessante seria analisar se as novas ferramentas, que permitem que os usuários criem a sua própria rede social, obedecem a algumas das regras de acessibilidade. 7. Agradecimentos A participação dos usuários possibilitou trazer dificuldades reais que estes enfrentam no uso diário das redes, trazendo uma contribuição valiosa para a análise, como mostrada na subseção 4.9. Participação esta, que agradeço afetuosamente, possibilitando-me ter contato com histórias de vidas tão especiais e agregadoras à minha vida. Referências Bibliográficas Bassani, Patrícia B. Scherer; Heidrich, Regina de Oliveira. (2008) Corpo e tecnologia: um estudo das redes sociais na Web. Feevale. Porto Alegre: CINTED-UFRGS, v.06 nº2. Clark, Joe. (2002) Building Accessible Websites. Boston: New Riders. Machado, Joicemegue Ribeiro; Tijiboy, Ana Vilma. (2005) Redes Sociais Virtuais: um espaço para efetivação da aprendizagem cooperativa. Porto Alegre: CINTED- UFRGS, v.03, nº01. Martins, Ivan; Leal, Renata. (2009) Revista Época: o Twitter vê e mostra tudo. São Paulo: Editora Globo, edição 572. Nielsen, Jakob. (2003) Projetando Websites. Rio de Janeiro: Editora Campus. Nunes, Diogo Cambraia. (2008) Acessibilidade em Websites Governamentais na Área Previdenciária. Trabalho de Conclusão de Curso (Sistemas de Informação) - Uniritter. Porto Alegre. Recuero, Raquel da Cunha. (2005) Redes Sociais no Ciberespaço: Uma proposta de Estudo. ECOS/UCPel e PPGCOM/UFRGS. RJ: UERGS-XXVII Congresso Brasileiro de Ciências da Comunicação. Thatcher, Jim et al. (2006) Web Accessibility: Web Standards and Regulatory Compliance. Berkeley: Friendsof-Apress. World Wide Web Consortium. (2008) Web Content Accessibility Guidelines 2.0. Disponível por www em < Último acesso em 27/11/2009. Zeldman, Jeffrey. (2003) Projetando Web Sites Compatíveis. Rio de Janeiro: Elsevier.