desenvolvimento de sistemas web com usabilidade e acessibilidade: comparando ui-patterns e...

12
Desenvolvimento de Sistemas Web com usabilidade e acessibilidade: comparando UI-Patterns e Diretrizes W3C Joaquim Augusto Machado, Vânia Paula de Almeida Departamento de Computação Universidade Federal de São Carlos (UFSCar) Caixa Postal 676 13.565-905 São Carlos SP Brasil [email protected], [email protected] Abstract. This paper presents a comparison of user interface design patterns for web system (UI-Patterns) and accessibility guidelines WCAG 2.0 (Web Content Accessibility Guidelines) recommended by the W3C (Word Wide Web Consortium). The comparison considered three design patterns: BreadCrumbs, Pagination and Search Tips and the results shows patterns which complete and some which do not meet the W3C guidelines. This paper suggests that developers use the usability and accessibility together in your website designs. Resumo. Este artigo científico apresenta a comparação de padrões de projetos de interface de usuários de sistemas web (UI-Patterns) com as diretrizes de acessibilidade WCAG 2.0 (Web Content Accessibility Guidelines) recomendadas pelo W3C (World Wide Web Consortium). A comparação considerou três padrões de projeto: BreadCrumbs Paginação e Dicas de pesquisa e os resultados mostram padrões que completam e alguns que não atendem às diretrizes do W3C. Este artigo sugere que desenvolvedores utilizem a usabilidade e a acessibilidade juntas em seus projetos de websites. 1. Introdução O desenvolvimento de sistemas voltados para a web deve levar em consideração as questões de usabilidade e acessibilidade. O termo usabilidade é aqui associado com características de eficiência, eficácia e satisfação de uso, enquanto que a acessibilidade permitirá que um maior número de usuários acesse e compreenda os sistemas computacionais. A usabilidade pode ser entendida como sinônimo de facilidade de uso. Um sistema web com boa usabilidade é aquele em que o usuário consegue encontrar rapidamente a informação desejada, por exemplo. Também está relacionado em ficar satisfeito durante a interação e com o seu resultado (NIELSEN, 1993). Uma das formas de se obter sistemas com maior usabilidade é seguir o conjunto de orientações presentes em Padrões de Projeto para Interfaces de Usuário, em inglês User Interface Design Patterns (UI patterns). Já a acessibilidade na web visa tornar os websites acessíveis para todos os usuários, inclusive pessoas com deficiências. Para cada tipo de deficiência existem recomendações que devem ser seguidas e que foram padronizadas pelo Web Accessibility Initiative (WAI). Para possibilitar a acessibilidade de sistemas web, podem-se seguir as recomendações presentes nos padrões sugeridos pelo The World Wide Web Consortium (W3C). A Figura 1 apresenta o modelo de acessibilidade adotado pelo W3C. O modelo considera ferramentas que oferecem aos desenvolvedores web uma vasta opção de

Upload: ufscar-br

Post on 17-Jan-2023

0 views

Category:

Documents


0 download

TRANSCRIPT

Desenvolvimento de Sistemas Web com usabilidade e

acessibilidade: comparando UI-Patterns e Diretrizes W3C

Joaquim Augusto Machado, Vânia Paula de Almeida

Departamento de Computação – Universidade Federal de São Carlos (UFSCar)

Caixa Postal 676 – 13.565-905 – São Carlos – SP – Brasil

[email protected], [email protected]

Abstract. This paper presents a comparison of user interface design patterns

for web system (UI-Patterns) and accessibility guidelines WCAG 2.0 (Web

Content Accessibility Guidelines) recommended by the W3C (Word Wide Web

Consortium). The comparison considered three design patterns: BreadCrumbs,

Pagination and Search Tips and the results shows patterns which complete and

some which do not meet the W3C guidelines. This paper suggests that

developers use the usability and accessibility together in your website designs.

Resumo. Este artigo científico apresenta a comparação de padrões de

projetos de interface de usuários de sistemas web (UI-Patterns) com as

diretrizes de acessibilidade WCAG 2.0 (Web Content Accessibility Guidelines)

recomendadas pelo W3C (World Wide Web Consortium). A comparação

considerou três padrões de projeto: BreadCrumbs Paginação e Dicas de

pesquisa e os resultados mostram padrões que completam e alguns que não

atendem às diretrizes do W3C. Este artigo sugere que desenvolvedores

utilizem a usabilidade e a acessibilidade juntas em seus projetos de websites.

1. Introdução

O desenvolvimento de sistemas voltados para a web deve levar em consideração as

questões de usabilidade e acessibilidade. O termo usabilidade é aqui associado com

características de eficiência, eficácia e satisfação de uso, enquanto que a acessibilidade

permitirá que um maior número de usuários acesse e compreenda os sistemas

computacionais.

A usabilidade pode ser entendida como sinônimo de facilidade de uso. Um

sistema web com boa usabilidade é aquele em que o usuário consegue encontrar

rapidamente a informação desejada, por exemplo. Também está relacionado em ficar

satisfeito durante a interação e com o seu resultado (NIELSEN, 1993). Uma das formas

de se obter sistemas com maior usabilidade é seguir o conjunto de orientações presentes

em Padrões de Projeto para Interfaces de Usuário, em inglês User Interface Design

Patterns (UI patterns).

Já a acessibilidade na web visa tornar os websites acessíveis para todos os

usuários, inclusive pessoas com deficiências. Para cada tipo de deficiência existem

recomendações que devem ser seguidas e que foram padronizadas pelo Web

Accessibility Initiative (WAI).

Para possibilitar a acessibilidade de sistemas web, podem-se seguir as

recomendações presentes nos padrões sugeridos pelo The World Wide Web Consortium

(W3C). A Figura 1 apresenta o modelo de acessibilidade adotado pelo W3C. O modelo

considera ferramentas que oferecem aos desenvolvedores web uma vasta opção de

recursos para tanto para a criação quanto para o aprimoramento das funcionalidades dos

websites. Já os usuários com deficiência utilizam navegadores, player de mídia e várias

outras tecnologias assistidas para a interação com os websites.

Figura 1. Relacionamento dos componentes essenciais da Acessibilidade Web1

Entretanto, são encontrados alguns problemas entre padrões de interação, que

são maneiras de descrever soluções de usabilidade comum em um determinado

contexto, e as recomendações do W3C. Dependendo de como, ou onde designers e

desenvolvedores procuram informações, pode-se recuperá-las de forma completa,

incompleta ou até mesmo conflitante. Por um lado, alguns designers e desenvolvedores

seguem os padrões de interação, por outro, outros designers e desenvolvedores seguem

apenas as regras propostas pelo W3C.

Neste trabalho, serão apresentados alguns padrões voltados para a interface de

usuário, e uma comparação frente aos padrões do W3C com o intuito de mostrar a

viabilidade e as inconsistências entre essas duas fontes de conhecimento sobre boas

soluções de usabilidade e acessibilidade.

Esta pesquisa foi realizada nas seguintes bibliotecas de padrões projeto de

interface: Coleção de Welie2, Coleção UI Patterns and Techniques (TIDWELL, 2010) e

a biblioteca UI-Patterns3. Após essa pesquisa, foram comparados os padrões com as

recomendações do W3C com as Guidelines do WCAG 2.0. Os resultados sugerem que

desenvolvedores se atentem não somente a questão de usabilidade ou apenas a

acessibilidade. Esses dois conceitos devem estar sempre relacionados, para que os

1 http://www.w3.org/WAI/intro/components.php

2 http://www.welie.com/

3 http://ui-patterns.com/

websites sejam utilizados por um maior numero de usuários, comuns, idosos ou com

alguma necessidade especial.

Este artigo está organizado da seguinte maneira: a seção 2 sintetiza os conceitos

de padrões de interação e as diretrizes do W3C, a seção 3 apresenta trabalhos

relacionados, a seção 4 apresenta a metodologia aplicada para a realização desta

pesquisa, na seção 5 têm-se os resultados obtidos, e a seção 6 apresenta as

considerações finais e a indicação de trabalhos futuros.

2. Referencial Teórico

Esta seção apresenta uma síntese sobre Padrões de Projetos, Padrões de Interação de

Usuários e as Diretrizes de Acessibilidade do WCAG 2.0.

O W3C é um consórcio internacional no qual organizações filiadas, uma equipe

em tempo integral e o público, trabalham juntos para desenvolver padrões para a web.

Liderado por Tim Berners-Lee, o idealizador da internet, e o CEO Jeffrey Jaffe, o W3C

tem como missão Conduzir a WWW (World Wide Web) para que atinja todo seu

potencial desenvolvendo protocolos e diretrizes que garantam seu crescimento de longo

prazo. A WAI orienta algumas das especificações técnicas da web, e são desenvolvidas

com a coordenação da W3C através de várias tecnologias, como por exemplo: HTML,

XML, CSS, SVG, SMIL, etc. Também tem como objetivo desenvolver estratégia,

diretrizes, recursos e normas para tornar a web mais acessível para pessoas com

necessidades especiais como a WCAG 2.0, que seria apenas uma parte das diretrizes

abordadas pela WAI.

O conceito de Padrões de Projetos foi criado pelo arquiteto Christopher

Alexander (ALEXANDER et al. 1977). Para ele cada padrão deveria seguir as seguintes

caracteríscas:

Encapsulamento: um padrão encapsula um problema ou solução bem

definida. Ele deve ser independente, específico e bem formulado de maneira

clara como deve ser aplicado.

Generalidade: todo padrão deve permitir sua reutilização a partir dele

mesmo.

Equilíbrio: quando um padrão utilizado em uma aplicação equilibra a razão

com cada uma das restrições envolvidas para cada passo do projeto.

Abstração: os padrões que representam abstrações rotineiras ou do

conhecimento cotidiano.

Abertura: um padrão deve permitir a sua extensão para um nível mais

detalhado.

Combinatoriedade: padrões são relacionados hierarquicamente. Podendo

ser composto de padrões de alto nível com padrões de nível mais baixo.

Alexander et al. (1977) também sugeriu o formato que a descrição de um padrão

deve ter. Ele estabeleceu que um padrão deve ser descrito em cinco partes, além de suas

definições: Nome, Exemplo, Contexto, Problema e Solução.

2.1. Padrões de Projetos

Um padrão de projeto, ou design pattern, refere-se a uma solução reutilizável que pode

ser aplicada para a solução de problemas do mundo real. Segundo Gamma et al.(2000)

um padrão de projeto possui quatro elementos essenciais:

Nome do padrão: referência que pode ser usada para descrever um

problema, suas soluções e consequências, uma ou duas palavras;

O problema: descrição de situações nas quais o padrão pode ser aplicado;

A solução: descrição de quais os elementos compõem o padrão de projeto,

seus relacionamentos, responsabilidades e colaborações;

As consequências: descreve os resultados da aplicação do padrão e analisa

as vantagens e desvantagens da aplicação do padrão.

Os padrões de projeto de software são organizados por famílias padrões de

criação (Abstract Factory, Builder e Singleton), estruturais (Adapter, Composite e

Façade) e comportamentais (Mediator, State e Template Method).

2.2. Padrões de Interação de Usuários

Padrões de interação de usuário são maneiras de descrever soluções de usabilidade

comum em um determinado contexto. Eles documentam soluções de sucesso para

diversos problemas de interação de usuários com soluções de tecnologia.

Padrões de interação de usuário ajudam a criar consistência em toda a web, e

proporcionar recomendações para web designers aumentarem a usabilidade de suas

soluções de design. Muitas coisas do cotidiano obedecem a um padrão, e isso inclui as

aplicações em design e desenvolvimento. Padrões de interação de usuário, em web

design, estão ganhando o reconhecimento como um importante recurso na criação de

projetos, para que os websites tenham uma maior usabilidade por todos os tipos de

usuários.

Será mostrado nas próximas subseções exemplos de padrões de interação de

usuário, contendo a sua definição, quando deve ser utilizado e o porquê de sua

utilização.

2.2.1. Breadcrumbs - Tidwell

Breadcrumbs mostram em que página o usuário se encontra na hierarquia de

site. Breadcrumbs geralmente são mostrados no topo da página, acima do conteúdo da

página, como apresentado na Figura 2. Eles são apresentados como uma série de links

em uma única linha de texto, onde os rótulos link correspondem com o título da página

correspondente. Esses rótulos devem ser separados por delimitadores, tais como ">", "|",

"/" e "::"

Figura 2. Exemplo de Breadcrumbs4

Esse padrão deve ser usado quando o website possuir estrutura hierárquica com

dois níveis ou mais. Os usuários se deslocam através de navegação direta, filtragem,

pesquisa no site, ou links para seções de outros locais dentro ele.

O padrão Breadcrumbs mostra cada nível de hierarquia que leva à página atual,

a partir do topo da página inicial do website. Em certo sentido, ele mostra uma única

"fatia" linear do mapa geral do website. Assim, como um Mapa de sequência,

Breadcrumbs ajudam o usuário a descobrir onde ele está no website.

2.2.2. Dicas de Pesquisa - Welie

O usuário precisa saber como utilizar o sistema de buscas do website, para isso deve

conter um informativo de como utilizar palavras-chaves na realização das buscas.

Figura 3. Exemplo de Dica de Pesquisa5

Deve ser utilizado para que usuários iniciantes que utilizarem a função de busca

tenham um melhor controle no termo correspondente a ser pesquisado. Não é

recomendado na utilização de Pesquisas Avançadas, como apresentado na Figura 3.

O padrão Dica de Pesquisa mostra aos usuários palavras não técnicas que podem

ser utilizadas, isto evitaria erros de sintaxe.

2.2.3. Paginação – UI-Patterns

O padrão Paginação fornece aos usuários uma quebra natural de leitura ou

preenchimento de dados, e permite a reavaliação se desejarem ou não continuar

visitando mais dados. Isso também ocorre porque os controles de paginação são

frequentemente colocados abaixo da lista para proporcionar aos usuários essa opção

para continuar a leitura ou o preenchimento dos dados.

4 www.submarino.com.br, 2011

5 www.ibm.com, 2011

Figura 4. Exemplo Paginação6

Deve ser utilizado quando houver mais dados do que é confortavelmente visível

em tela, e quando o conjunto de dados é ordenado em qualidade de interesse

(geralmente o mais recente em primeiro lugar). O padrão de paginação não é indicado

quando não se deseja que o usuário faça uma pausa na navegação para a página

seguinte, como apresentado na Figura 4.

O padrão Paginação quebra uma lista em pedaços para que um usuário possa

identificar facilmente um maior número de informações. Além disso, ele coloca a opção

para o usuário se ele deseja carregar mais itens da lista, ou se os resultados desta página

já são suficientes para ele. Esse padrão também tem a vantagem de ser muito comum na

Web, especialmente (mas não exclusivamente) para os resultados da pesquisa.

2.3. Diretrizes de Acessibilidade para Conteúdo Web

As WCAG 2.0 definem como tornar o conteúdo da Web mais acessível às pessoas com

deficiência. O termo acessibilidade faz referência a diferentes deficiências, incluindo

visuais, auditivas, físicas, de fala, cognitivas, de linguagem, de aprendizagem e

neurológicas. As WCAG foram desenvolvidas utilizando processos do W3C em

colaboração com pessoas de todo o mundo, com o objetivo de partilhar uma norma de

acessibilidade para o conteúdo Web.

Essas normas são baseadas em quatro princípios:

1. Perceptível - A informação e os componentes da interface do usuário têm

de ser apresentados aos usuários em formas que eles possam perceber.

2. Operável - Os componentes de interface de usuário e a navegação têm de

ser operáveis.

3. Compreensível - A informação e a operação da interface de usuário têm de

ser compreensíveis.

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 de apoio.

As normas WCAG possuem uma hierarquia, a qual segue a seguinte estrutura:

Princípios, Diretrizes, Critérios de Sucesso e Técnicas de tipo Suficiente e de tipo

Aconselhada. Para um melhor entendimento será dado um exemplo de como se pode

chegar até as técnicas partindo do princípio.

Para se chegar a uma técnica que faz referência a como aumentar o tamanho da

fonte para uma melhor leitura de um usuário com problemas visuais, como a G178,

deve se partir do princípio 1, perceptível, a diretriz utilizada será a número 4,

discernível, o critério de sucesso referenciado para essa técnica é o de número 4,

redimensionar texto e por fim a técnica G178. Nesse caso pode ser representado desta

forma: 1.4.4 – Redimensionar Texto – G178 Fornecer controles na página Web que

permitam aos utilizadores alterar gradualmente o tamanho de todo o texto numa página

até 200%.

3. Trabalhos Relacionados

6 www.google.com, 2011

De acordo com os trabalhos de Gonçalves et al. (2010); Maia et al. (2010); Bach et al.

(2009) e Murenin & Tabrizi (2005) existem várias recomendações para os

desenvolvedores de web sites.

Segundo Gonçalves et al (2010), na lista dos principais reguladores estão a

World Wide Web Consortium (Iniciativa WAI), a União Européia (Regulamentos e

Planos de Ação), os Estados Unidos da América (artigo 508) e o Brasil com o Decreto

Nº 5.296, de 2 dezembro de 2004 e a Portaria Nº3, de 7 de maio de 2007, que

institucionaliza o Modelo de Acessibilidade em Governo Eletrônico – e-MAG.

Para Bach et al (2009) poucas organizações, que foram afetadas pelo Decreto nº

5.296 de 2004, conhecem o e-MAG, conjunto de diretrizes que regulamenta a questão

de acessibilidade de web sites no Brasil,. Com isso foi feito um levantamento

comparativo entre as Diretrizes para a acessibilidade do Conteúdo da Web (WCAG),

criado pela W3C através do WAI e o e-MAG, este criado pelo Departamento de

Governo Eletrônico.

Já Vieritz et al. (2010), diz que websites estão focados em designer de interface

e usabilidade, já que a qualidade da interface do usuário vem tendo um grande aumento

no impacto comercial. No entanto, nem sempre a questão da acessibilidade é trabalhada

em conjunto com a usabilidade. Em seu trabalho, Vieritz et al. (2010), apresenta uma

solução na utilização de padrões de interface de usuário na integração de acessibilidade

com usabilidade através das normas WCAG 2. Na pesquisa proposta, se pode dizer que

é complementar a de Vieritz et al. (2010), pois será feita a comparação de padrões de

projetos de interface de usuários coma as normas propostas pela WCAG 2.

Baseando-se nas pesquisas citadas, este trabalho realizará estudo de alguns

padrões de interação e suas relações com as diretrizes do WCAG, visando orientar

designer no uso conjunto das recomendações para melhorias de usabilidade e

acessibilidades em websites.

4. Metodologia

Para a comparação proposta neste artigo, foram escolhidas as seguintes bibliotecas de

Padrões de Interação de Usuários: Tidwell - UI Patterns and Techniques (TIDWELL,

2010), Welie (http://www.welie.com/) e UI-Patterns (http://ui-patterns.com). Após isso,

alguns padrões foram estudados e selecionados de forma aleatória nessas bibliotecas.

Com identificação das definições e funcionalidades desses padrões, foi realizada

uma pesquisa nas diretrizes propostas pela W3C, a WCAG2, levantando quais os

Princípios, Diretrizes, Critérios de Sucesso e Técnicas em que esses padrões estariam

relacionados, e se os mesmos atendem as diretrizes propostas por esse Consórcio.

A formação da coluna Princípios de Acessibilidade – Diretrizes – Técnica da

Tabela 1 foi composta a partir de um Princípio até a Técnica proposta pela WCAG2.

Essa montagem foi mostrada na seção 2.3. Diretrizes de Acessibilidade para Conteúdo

Web deste artigo.

Após essa seleção de padrões e pesquisa das técnicas da WCAG2, serão

analisados os dados obtidos e enquadrados nas seguintes categorias:

Contempla: Quando um padrão atende todas as diretrizes propostas pelas

técnicas WCAG;

Não Contempla: Quando um padrão não atende nenhuma das diretrizes

propostas pelas técnicas WCAG;

Completa: Quando um padrão completa as diretrizes da WCAG.

Uma representação para essa proposta de metodologia encontra-se em uma

tabela apresentada abaixo.

Tabela 1 – Relação Padrões de Interface X W3C WCAG2.0

Relação Padrões de Interface X W3C WCAG2.0

Tema Subtema Padrões - Linguagem Princípios de Acessibilidade -

Diretrizes - Técnicas

Necessidades

do usuário

Navegação

Breadcrumbs - Tidwell

2.4.8 Localização

G65: Fornecer um trilho de

navegação

Menus Suspenso - Welie

2.4.1 Ignorar Blocos

SCR28: Utilizar um menu expansível

para ignorar blocos de conteúdo

H50: Utilizar elementos estruturais

para agrupar os links

Paginação - UI-Patterns

2.4.5 Várias Formas

G125: Fornecer links para navegar

para páginas Web relacionadas /

G126: Fornecer uma lista de links

para todas as outras páginas Web

2.4.2 Página com Título / 2.4.8

Localização - G127: Identificar a

relação de uma página Web com um

conjunto maior de páginas Web

Pesquisa Dicas de Pesquisa - Welie

3.1.3 Palavras Invulgares / 3.1.4

Abreviaturas

G70: Fornecer uma função para

procurar um dicionário online

2.4.5 Várias Formas

G161: Fornecer uma função de

procura para ajudar os utilizadores a

encontrar o conteúdo

Interação SlideShow - Welie

2.2 Tempo Suficiente

G4: Permitir que o conteúdo seja

colocado em pausa e reiniciado a

partir do preciso momento em que foi

colocado em pausa

G5: Permitir que os utilizadores

executem uma atividade sem

qualquer limite de tempo

G11: Criar conteúdo que fica em

modo intermitente durante menos de

5 segundos

G75: Fornecer um mecanismo para

adiar qualquer atualização do

conteúdo

G76: Fornecer um mecanismo para

solicitar uma atualização do

conteúdo, em vez de atualizar

automaticamente

G133: Fornecer uma caixa de

verificação na primeira página de um

formulário de várias partes, que

permite aos utilizadores solicitar um

limite de tempo de sessão maior ou

nenhum limite de tempo de sessão

G152: Definir imagens gif animadas

para deixar de estar em modo

intermitente após n ciclos

G180: Fornecer um meio ao

utilizador para definir o limite de

tempo para 10 vezes superior ao

limite de tempo predefinido

G186: Utilizar um controlo na página

Web que para o conteúdo em

movimento, em modo intermitente ou

em atualização automática

G187: Utilizar uma tecnologia para

incluir conteúdo em modo

intermitente que possa ser

descativado através do agente de

utilizador

G191: Fornecer um link, um botão ou

outro mecanismo que recarregue a

página sem qualquer conteúdo em

modo intermitente

G198: Fornecer uma forma para o

utilizador desativar o limite de tempo

Necessidades

da Aplicação

Chamando a

atenção Captcha - UI-Patterns

1.1.1 Conteúdo Não Textual

G143: Fornecer uma alternativa em

texto que descreva a finalidade do

CAPTCHA

G144: Garantir que a Página Web

inclua outro CAPTCHA que sirva a

mesma finalidade utilizando uma

modalidade diferente

Simplificando

a Interação

Ampliador de fonte -

Welie

1.4.4 Redimensionar texto

G178: Fornecer controlos na página

Web que permitam aos utilizadores

alterar gradualmente o tamanho de

todo o texto numa página até 200%

5. Resultados

Como resultados dessa pesquisa foram escolhidos três padrões comparados com as

diretrizes WCAG 2.0 recomendadas pelo W3C, apresentados na Tabela. Para cada tipo

de análise foi utilizada a classificação: contempla, não atende e completa, como é

mostrado na Tabela 2.

Tabela 2 – Resultados obtidos após a análise - Padrões de Interação X WCAG 2.0 W3C

Padrões - Linguagem Princípios de Acessibilidade - Diretrizes - Técnicas Analise

Breadcrumbs - Tidwell 2.4.8 Localização

G65: Fornecer um trilho de navegação Contempla

Dicas de Pesquisa - Welie

3.1.3 Palavras Invulgares / 3.1.4 Abreviaturas

G70: Fornecer uma função para procurar um

dicionário online

Não Atende

2.4.5 Várias Formas

G161: Fornecer uma função de procura para ajudar os

utilizadores a encontrar o conteúdo

Paginação - UI-Patterns

2.4.5 Várias Formas

G125: Fornecer links para navegar para páginas Web

relacionadas

G126: Fornecer uma lista de links para todas as

outras páginas Web

2.4.2 Página com Título / 2.4.8 Localização

G127: Identificar a relação de uma página Web com

um conjunto maior de páginas Web

Completa

Verificou-se que o padrão Breadcrumbs atendeu completamente as diretrizes

propostas pela WCAG 2, como se define a técnica, G65: Fornecer um trilho de

navegação, que diz “Um trilho de navegação ajuda o utilizador a visualizar a forma

como o conteúdo foi estruturado e como retroceder na navegação para páginas Web

anteriores, e pode identificar a localização atual numa série de páginas Web”, e a

definição de Breadcrumbs para a biblioteca Tidwell diz que “Breadcrumbs mostram em

que página o usuário se encontra na hierarquia de site”.

As diretrizes do WCAG para esse padrão mostra o exemplo de implementação

abaixo.

Figura 5 – Exemplo Breadcrums7

Foi observado que o padrão de interação Dicas de Pesquisa não atende as

diretrizes propostas pela WCAG, já que o mesmo apresenta apenas exemplos de como

os usuários devem proceder para realizar um busca. Já as diretrizes mostram como deve

ser implementada uma rotina de busca pelo website.

As técnicas da WCAG 2.0 identificadas para este padrão foram as G70 e G161.

A primeira diz que o desenvolvedor deve implementar mecanismos de busca através de

um dicionário online e verificar se o resultado que está contido no dicionário

corresponde à definição correta. Para a segunda técnica, os desenvolvedores devem

implementar um formulário de busca ou um link para uma página de pesquisa. Nesse

formulário é necessário que os desenvolvedores coloquem meta-tags nas páginas do

website para conduzir o usuário para uma página com links que contenham os

resultados da pesquisa obtida pelos termos utilizados.

Já o padrão de Paginação completa as técnicas propostas pela WCAG2, pois ele

além de relacionar páginas de um resultado de uma pesquisa, pode estar relacionado a

7 http://www.acesso.umic.pt/w3/TR/WCAG20-TECHS/G65.html, 2011

um preenchimento de cadastros em determinados websites, por exemplo, um cadastro

pessoal que pode ser dividido em algumas páginas.

As técnicas da WCAG2 para o padrão de Paginação são as G125, G126 e G127.

Para a técnica G125 o desenvolvedor deve preparar o website para que as páginas

subsequentes estejam fazendo referencias as informações relacionadas. Já para a G126,

deve ser verificado se cada página tem uma lista de links para as outras páginas do

website, se os links da lista conduzem corretamente às páginas e se a lista de links para

todas as páginas website está presente. E para técnica G127, deve se certificar de que o

título da página descreve a relação da mesma com o conjunto ao qual ela pertence e se a

mesma inclui meta-tags que identificam a relação da página com o conjunto ao qual ela

pertence.

6. Conclusão e trabalhos futuros

Teve-se como objetivo deste artigo, mostrar soluções de desenvolvimento de websites

acessíveis e com uma boa usabilidade, comparando as diretrizes de acessibilidade

propostas pelo W3C e padrões de interação de usuário.

Com isso concluímos que um website deve conter vários princípios para ser

acessível para todos os tipos de usuário, incluindo os idosos e as pessoas com

deficiência, não deixando de lado a usabilidade, para que o website tenha uma interface

que permita eficácia, eficiência e satisfação de uso.

Como trabalhos futuros, pretende-se elaborar um manual de referência, contendo

todo o material coletado durante a realização deste artigo.

7. Referências

ALEXANDER, C. et al. A Pattern Language. New York, NY (USA): Oxford

University Press, 1977.

BACH, C. F. et al. Diretrizes de acessibilidade: uma abordagem comparativa entre

WCAG e E-MAG. Revista Eletrônica de Sistemas de Informação, v. 8, n. 1, out.

2009. Disponível em: <http://revistas.facecla.com.br/index.php/reinfo/article/view/271>

Acesso em: 07 jun. 2011.

GAMMA, Erich et al. Padrões de projeto: soluções reutilizáveis de software orientado

a objetos. Porto Alegre, RS: Bookman, 2000. xii, 364 p.

GONÇALVES, R. et al. Acessibilidade web das Plataformas Electrónicas de

Contratação Pública em Portugal. In: INFORMATION SYSTEMS AND

TECHNOLOGIES (CISTI). 5., 2010. Proceedings…. [S.l: s.n.], 2010. Disponível em:

<http://ieeexplore.ieee.org/stamp/stamp.jsp?tp=&arnumber=5556699>. Acesso em: 25

abr. 2011.

VIERITZ, H.; SCHILBERG, D.; JESCHKE, S. Merging web accessibility and usability

by patterns. Proceedings of the 12th international conference on Computers helping

people with special needs: Part I. Anais..., ICCHP’10. Berlin, Heidelberg: Springer-

Verlag. Disponível em: <http://dl.acm.org/citation.cfm?id=1886667.1886729>. Acesso

em: 23 out. 2011. , 2010

MURENIN, C. A.; TABRIZI, M. H. N. Development of usable and accessible Web-

portals using W3C standards. In: INTERNATIONAL CONFERENCE ON

INFORMATION TECHNOLOGY: coding and computing, 5., 2005. Anais... [S.l: s.n.],

2005. v. 2. Disponível em:

<http://ieeexplore.ieee.org/xpl/freeabs_all.jsp?arnumber=1425265>. Acesso em: 25 abr.

2011.

NIELSEN, Jackob. Usability Engineering. Morgan Kaufmann Publishers, Inc.

San Francisco, California, 1993.

TIDWELL, J. Designing Interfaces. 2. ed. Canada: O’Reilly Media, Inc., 2010. 576 p.

W3C. Consórcio World Wide Web (W3C). Disponível em: <http://www.w3c.br>.

Acesso em 21 abr. 2011

WCAG. Web Content Accessibility Guidelines 2.0. 1999. Disponível em:

<http://www.w3.org/TR/2008/REC-WCAG20-20081211/.>. Acesso em 21 ago.2011.

WILIE. Wilie Patterns in Interaction Design. Disponível em:

<http://www.welie.com/index.php>. Acesso em 21 ago. 2011