Milton Mattos

Não tem nada mais motivador quando um projeto web suado entra no ar, foi o site para o refrigerante Guarah. Demorei até para escrever esse post, mas o site do Guarah esta no ar, com muito orgulho. A equipe que trabalhou para esse projeto esta de parabéns!

Agora bola para frente para outros desafios.

Muitas empresas vem investindo alto para evitar os erros de usabilidade mais comuns, que são:

• Não realizar nenhuma pesquisa com os consumidores, seguindo, apenas, o que as empresas acreditam ser a vontade de seus clientes.

• Realizar pesquisas tendenciosas, fazendo com que as resoluções sejam tomadas baseadas em pessoas fictícias, em vez dos consumidores reais.

• Realizar pesquisas inadequadas. Atualmente, um dos métodos de pesquisa realizadas no universo corporativo, é o Focus Group, onde um moderador faz com que os participantes dêem suas opiniões sobre determinados produtos ou serviços. Este método, muito eficiente para algumas situações, não é o melhor para descobrir os problemas relacionados à usabildade.

• Realizar pesquisas com temas pré-definidos. Como é possível escolher previamente as questões que serão respondidas pelo público, sem ter um conhecimento prévio sobre esse público? Este é o erro crucial dete tipo de pesquisa.

• Manter sempre o foco das pesquisas nos negócios. Durante o processo da pesquisa, muitos pontos são levantados e, por isso, é de extrema importância manter o foco em apenas dois ou três pontos estratégicos e fundamentais.

• Alguns pesquisadores de usabilidade costumam fazer do seu trabalho apenas um canal para demonstrarem que suas teorias acadêmicas estão corretas. Entretanto, no mundo dos negócios, atitudes são mais importantes do que teoria e, para atingir resultados favoráveis, é preciso cortar gastos, aumentar o número de acessos ao site ou realizar qualquer outra ação que ajude a pagar as contas.

• Usabilidade e Arquitetura da Informação são essenciais para o desenvolvimento de um bom projeto web, mas, o mais importante de tudo, é entender as pessoas e seus comportamentos. A experiência de navegação que as pessoas tem ao navegar em um site é um dos fatores que determina o sucessos de uma empresa. Portanto, é preciso manter o foco na experiência do visitante como um todo, pois trata-se do comportamento de pessoas e não de ferramnetas.

Cada vez mais sites utilizam linguagem de game para divulgar os seus produtos. A empresa de balas Mentos, para divulgar sua linha de produtos, desenvolveu um jogo para internet no mesmo estilo Street Fight, só que ao invés de porradas são beijos. O momento mais divertido é quando você ganha.

Vídeo muito bacana sobre os conceitos de web 2.0 através de um supermercado. Com legendas em português.

Mandaram bem nessa campanha!

No post anterior foi comentando sobre a prioridade 1 para acessibilidade. Agora segue as directivas da prioridade 2 para acessibilidade na web.

1. Fornecer alternativas ao conteúdo sonoro e visualNão contém nenhum ponto sobre essa directiva.

2. Não recorrer apenas à cor> Assegurar que a combinação de cores entre o fundo e o primeiro plano seja suficientemente contrastante para poder ser vista por pessoas com cromodeficiências, bem como pelas que utilizam monitores monocromáticos.
   A prioridade 2 têm ênfase nas imagens.

3. Utilizar corretamente marcações e folhas de estilo> Por exemplo, é de utilizar MathML para anotar equações matemáticas, e folhas de estilo para formatar texto e organizar a sua paginação (disposição na página). Além disso, evitar a utilização de imagens para representar texto, em vez disso, texto e folhas de estilo.Dos browsers mais usado somente o Mozilla têm suporte para o MathML, sendo necessário instalar plugin para funcionar no Internet Explorer.Links

   Exemplo de código MathML

   http://codefactory.com.br/weblog/?page_id=85

   Browser compatíveis para MathML
   http://www.w3.org/Math/implementations.html

   Minha opinião

   Se não têm suporte para o browser mais usado Internet Explorer e sendo necessário instalar um pluging para rodar o MathML. Creio que esteja muito longe a acessibilidade para esse aspecto.

   O mesmo caso ocorre no uso do comando css “before” e “after” que indica o começo/fim do documento, para facilitar o usuário e lembrar onde ele estave. Não funciona no Internet Explorer, somente no Mozilla.Minha opiniãoNão sei se é hiprocrisia, mas o W3C não utiliza isso.
   
   > Criar documentos passíveis de validação por gramáticas formais, publicadas
   
   Por exemplo, incluir uma declaração de tipo de documento no início do documento, que se refira a uma DTD publicada (por ex., a DTD estrita do HTML 4.0).

   > Utilizar folhas de estilo para controlar a paginação (disposição em página) e a apresentação.
   
   Por exemplo, utilizar a propriedade ‘font’ do CSS em vez do elemento FONT do HTML no controlo estilos de tipo de letra.

   > Utilizar unidades relativas, e não absolutas, nos valores dos atributos da linguagem de anotação e nos valores das propriedades das folhas de estilo.
   
   Por exemplo, em CSS, utilizar ‘em’ ou percentagens em vez das unidades absolutas ‘pt’ ou ‘cm’.

   > Utilizar elementos de cabeçalho indicativos da estrutura do documento e fazê-lo de acordo com as especificações.
   
   Por exemplo, em HTML, utilizar H2 para indicar uma subsecção de H1. O mesmo caso do uso correto dos comandos para tabela.

   > Anotar correctamente listas e pontos de enumeração em listas.
   
   Por exemplo, em HTML, hierarquizar correctamente as listas OL, UL e DL. Quando houver outras categorias na lista, incluir um texto finalizando informando a finalização da categoria.

   Exemplo

   http://www.w3.org/TR/WCAG10-CSS-TECHS/#lists

   > Anotar as citações. Não utilizar anotações de citação para efeitos de formatação, como, por exemplo, o avanço de texto.

   Por exemplo, em HTML, utilizar os elementos Q e BLOCKQUOTE para, respectivamente, anotar citações curtas e mais extensas. O elemento não funciona no Internet Explorer.
   

4. Indicar claramente qual o idioma utilizado > Não contém nenhum ponto sobre essa directiva.
   

5. Criar tabelas passíveis de transformação harmoniosa
   
   > Não utilizar tabelas para efeitos de disposição em página, a não ser que a tabela continue a fazer sentido depois de linearizada. Se não for o caso, fornecer um equivalente alternativo (que pode ser uma versão linearizada); > Se for utilizada uma tabela para efeitos de disposição em página, não utilizar qualquer anotação estrutural para efeitos de formatação visual.

   Por exemplo, em HTML, não utilizar o elemento TH para fazer com que o conteúdo de uma célula (que não seja de cabeçalho de tabela) apareça centrado e a negrito.

6. Assegurar que as páginas dotadas de novas tecnologias sejam transformadas harmoniosamente
   
   > Em programas interpretáveis e applets, assegurar que a resposta a acontecimentos seja independente do dispositivo de entrada.Usar teclado ao invés do mouse.

   Técnica

   Use “onmousedown” com “onkeydown”.
   Use “onmouseup” com “onkeyup”.
   Use “onclick” com “onkeypress”

   > Assegurar a acessibilidade do conteúdo dinâmico ou fornecer uma apresentação ou página alternativas.
   
   Por exemplo, em HTML utilizar NOFRAMES no final de cada conjunto de frames. No caso de determinadas aplicações, os programas interpretados no servidor podem ser de acesso mais fácil do que os interpretados no cliente.

7. Assegurar o controle do utilizador sobre as alterações temporais do conteúdo

   > Evitar as situações que possam provocar o piscar do conteúdo das páginas (isto é, alterar a apresentação a intervalos regulares, como o ligar e desligar), até que os agentes do utilizador possibilitem o controlo desse efeito.
   
   > Evitar páginas contendo movimento, até que os agentes do utilizador possibilitem a imobilização do conteúdo.

   Sempre que uma página contenha movimento, fornecer (num programa interpretável ou num applet) um mecanismo para o imobilizar e para impedir actualizações. A utilização de folhas de estilo dotadas de programas interpretáveis destinados à criação de movimento permite que os utilizadores tenham mais facilidade em as desactivar ou fazer com que os seus efeitos sejam anulados.

   > Não criar páginas de refrescamento automático periódico, até que os agentes do utilizador possibilitem parar o refrescamento.

   Por exemplo, em HTML, não provocar o refrescamento automático das páginas através da inclusão de “HTTP-EQUIV=refresh”, até que os agentes do utilizador dêem aos utilizadores a possibilidade de desactivarem essa funcionalidade.

   > Não utilizar anotações para redireccionar as páginas automaticamente, até que os agentes do utilizador possibilitem parar o redireccionamento automático. Em vez de utilizar anotações, configurar o servidor de modo a que seja ele a executar os redireccionamentos.
   
   

8. Assegurar a acessibilidade directa de interfaces do utilizador integradas

   > Sempre que um objecto integrado tenha uma “interface própria”, a interface — tal como a interface do próprio navegador — tem de ser acessível. Se a interface do objecto integrado não puder ser tornada acessível, tem de ser fornecida uma solução alternativa.
   
   

9. Pautar a concepção pela independência face a dispositivos

   > Assegurar que qualquer elemento dotado de interface própria possa funcionar de modo independente de dispositivos.
   
   Cada interface própria deve funcionar com qualquer dispositivo(mouse, teclado e entre outros)

   > Em programas interpretáveis, especificar de resposta a acontecimentos, preferindo-as a rotinas dependentes de dispositivos.
   
   O detalhe dessa directiva é informar quando houve um programa(script, apllet ou object) depender do dispositivo teclado.

10. Utilizar soluções de transição

    > Não provocar o aparecimento de janelas de sobreposição ou outras, e não fazer com que o conteúdo da janela actual seja modificado sem que o utilizador seja disso informado, até que os agentes do utilizador tornem possível a desactivação de janelas secundárias.
    
    Por exemplo, em HTML, evitar a utilização de frames cujo destino seja uma nova janela.

    > Assegurar o correcto posicionamento de todos os controlos de formulários que tenham rótulos implicitamente associados, até que os agentes do utilizador venham a suportar associações explícitas entre rótulos e controlos de formulários.
    
    O rótulo tem de estar imediatamente antes do respectivo controlo, na mesma linha (permitindo mais do que um controlo/tabela por linha), ou na linha que precede o controlo (com um único rótulo e um único controlo por linha).

11. Utilizar tecnologias e recomendações do W3C

    Utilizar tecnologias do W3C sempre disponíveis e adequadas a uma determinada tarefa; utilizar as versões mais recentes, desde que suportadas.
    
    Para saber onde encontrar as mais recentes especificações do W3C e suporte relativo à interface do usuário de WAI (com informações sobre os agentes que suportam as especificações W3C), consultar a lista de referências.

    A W3C lista tecnologias para acessibilidade:

    MathML para equação matématicas
    HTML, XHTML, XML para estruturar documentos
    RDF para meta data
    SMIL para criação apresentação multimidia
    CSS and XSL para definir folha de estilo
    XSLT para criação transformação de estilo
    PNG para gráficos

    > Evitar funcionalidades desatualizadas de tecnologias do W3C.

    Por exemplo, em HTML, não utilizar o elemento FONT, já desatualizado; utilizar, em seu lugar, folhas de estilo (por ex., a propriedade ‘font’ do CSS).

12. Fornecer informações de contexto e orientações.

    > Descrever a finalidade dos frames e o modo como se relacionam entre si, se isso não for óbvio a partir unicamente dos títulos.
    
    > Dividir grandes blocos de informação em grupos mais fáceis de gerenciar, sempre que for o caso.
    
    Por exemplo, em HTML, utilizar OPTGROUP para agrupar elementos OPTION dentro de um SELECT; agrupar controles de formulários por meio de FIELDSET e de LEGEND; utilizar listas hierárquicas sempre que for adequado; utilizar cabeçalhos para estruturar documentos.

    > Associar explicitamente os rótulos aos respectivos controles.

    Por exemplo, em HTML, utilizar LABEL e o respectivo atributo “for”.

13. Fornecer mecanismos de navegação claros Fornecer mecanismos de navegação coerentes e sistematizados — informações de orientação, barras de navegação, mapa do site — para aumentar as probabilidades de uma pessoa encontrar o que procura em um dado site.

    > Identificar claramente o destino de cada link
    
    O texto do link deve ser suficientemente ilustrativo para fazer sentido quando for lido fora de contexto - isoladamente ou integrado em uma seqüência de links. O texto do link deve, além disso, ser conciso. Evitar o famoso “clique aqui” nos textos.

    > Fornecer metadados para acrescentar informações semânticas a páginas ou sites.
    
    > Dar informações sobre a organização geral de um site (por ex., por meio de um mapa do site ou de um sumário).

    > Utilizar os mecanismos de navegação de maneira coerente e sistemática.
    
    

14. Fornecer mecanismos de navegação claros
    
    Não contém nenhum ponto sobre essa directiva.

Ultimamente vejo que pessoas têm dificuldade em descobrir as prioridades estabelicidas pela W3C para acessibilidade. Nesse post segue as prioridades 1 traduzido para o português e alguns comentários meus sobre os casos.

A prioridade 1 possibilitará o uso do site por todos os grupos. Para alguns grupos, esse é um requisito básico para permitir seu acesso às informações.

1. Fornecer alternativas ao conteúdo sonoro e visual

• Proporcionar conteúdo que, ao ser apresentado ao usuário, transmita, em essência, as mesmas funções e finalidade que o conteúdo sonoro ou visual;
• Fornecer um equivalente textual a cada elemento não textual. Esse ponto de verificação possui, exemplo:
  • Técnica HTML: Utilizar “alt” para os elementos IMG, INPUT e APPLET. Em casos de gráficos complexos, usar uma descrição adicional longdesc* para IMG ou FRAME, ou um link descritivo.
• Em apresentações multimídia baseadas em tempo (filme ou animação), sincronizar as alternativas equivalentes (legendas ou descrições sonoras dos trechos visuais) e a apresentação, exemplo:
  • Vídeo do acesso digital com legenda ou comando da televisão Close Caption.

  * longdesc é um comando html para redirecionar para uma página com descrição da imagem quando o alt não for suficiente.

1. Não recorrer apenas à cor

• Assegurar a percepção do texto e dos elementos gráficos quando vistos sem cores;
• Assegurar que todas as informações veiculadas com cor estejam também disponíveis sem cor, por exemplo a partir do contexto ou de marcações.

  Dicas

  • Complemente as informações fornecidas através da cor: utilize efeitos de estilo ou fontes diferenciadas - isso pode ser usado para realçar as diferenças nas informações;
  • Acrescente rótulos ou símbolos em links gráficos ou botões para comunicar sua função;
  • Os rótulos podem ser exibidos como um texto claramente associado ao link gráfico ou botão. O rótulo pode ser no formato de texto ou de um ícone ou símbolo exibido junto com o elemento gráfico. Também pode ser usado um texto Alt (texto alternativo) para associar um rótulo a um controle gráfico;
  • Forneça títulos de links que façam sentido quando lidos fora do contexto: quando fornecer um grupo de links, não confie somente na cor para transmitir as informações sobre os links (por exemplo, “clique nos links vermelhos para editar este documento” seguido de uma lista de links, todos com a inscrição “clique aqui”). Títulos de links devem fazer sentido quando lidos fora do contexto, por exemplo, “Editar a ortografia”, “Editar os estilos das fontes”.

  Links

  • Site que emula pessoas daltônicos:
    http://www.vischeck.com/vischeck/vischeckURL.php
  • Dicas sobre cores na internet para acessibilidade:
    http://www.intranetportal.com.br/acessibilidade/ua_3

1. Utilizar corretamente marcações e folhas de estilo

• Marcar os documentos com os elementos estruturais adequados. Controlar a apresentação por meio de folhas de estilo, em vez de elementos de apresentação e atributos.

1. Indicar claramente qual o idioma utilizado

• Utilizar marcações que facilitem a pronúncia e a interpretação de abreviaturas ou texto em língua estrangeira. Identificar claramente quaisquer mudanças de idioma no texto de um documento, bem como nos equivalentes textuais.
  • Técnica: Em HTML, utilizar o elemento “lang”. Exemplo:
    <html xml:lang=”pt” lang=”pt-br”>
  • Quando houver uma palavra no texto com outro idioma utilizar o comando abaixo:
    <span lang=”en”>take it easy!</span>

1. Criar tabelas passíveis de transformação harmoniosa

• Assegurar que as tabelas têm as marcações necessárias para poderem ser transformadas harmoniosamente por navegadores acessíveis e outros agentes do usuário;
• Em tabelas de dados, identificar os cabeçalhos de linha e de coluna.
  • Técnica: Utilizar TD para identificar as células de dados e TH para identificar os cabeçalhos.

1. Assegurar que as novas tecnologias sejam transformadas harmoniosamente

• As páginas devem ser acessíveis mesmo quando as tecnologias mais recentes não forem suportadas ou tenham sido desativadas;
  • Uso de Flash, JavaScript, Applet entre outras aplicações.
• Organizar os documentos de tal forma que possam ser lidos sem recorrer a folhas de estilo.
  • Técnica: Todo o conteúdo organizado de forma lógica deve ser apresentado em uma ordem compreensível, mesmo sem a funcionalidade das folhas de estilo.

1. Assegurar o controle do usuário sobre as alterações temporais do conteúdo

• Possibilitar a interrupção momentânea ou definitiva do movimento, intermitência, transcurso ou atualização automática de objetos e páginas. Exemplo:
  • Algumas pessoas com deficiências cognitivas ou visuais não conseguem ler texto em movimento com a rapidez necessária ou podem mesmo não serem capazes de lê-lo. Além disso, para pessoas com deficiências cognitivas, o movimento pode ser uma fonte de distração que faz com que o resto da página se torne impossível de ler. Os leitores de tela não são capazes de ler texto em movimento; as pessoas com deficiências físicas podem não conseguir se moverem com a rapidez ou precisão que a interação com objetos em movimento exige.

1. Assegurar a acessibilidade direta de interfaces do usuário integradas

• A interface do usuário deve obedecer a princípios de design para a acessibilidade: acesso independente de dispositivos, operacionalidade pelo teclado, emissão automática de voz (verbalização);
  • Exemplo: Para executar uma funcionalidade do site precisa fazer um movimento com o mouse.
• Criar elementos de programação, tais como programas interpretáveis e applets, diretamente acessíveis pelas tecnologias de apoio ou com elas compatíveis.

1. Utilizar tecnologias e recomendações do W3C

• Utilizar tecnologias do W3C (de acordo com suas especificações) e seguir as recomendações de acessibilidade. Quando não for possível utilizar tecnologia W3C, ou quando tal utilização produzir materiais que não possam ser objeto de transformação harmoniosa, fornecer uma versão alternativa, acessível do conteúdo;
• Se, apesar de todos os esforços, não for possível criar uma página acessível, fornecer um link a uma página alternativa que utilize tecnologias do W3C, seja acessível, contenha informações (ou funcionalidade) equivalentes e seja atualizada tão freqüentemente quanto a página original, considerada inacessível.

1. Fornecer informações de contexto e orientações

• Fornecer contexto e orientações para ajudar os usuários a compreenderem páginas ou elementos complexos;
• Dar, a cada frame, um título que facilite a identificação dos frames e sua navegação.
  • Técnica: Em HTML, utilizar o atributo “title” nos elementos FRAME.

1. Assegurar a clareza e a simplicidade dos documentos

• Assegurar a produção de documentos claros e simples, para que sejam mais fáceis de compreender;
• Utilizar linguagem a mais clara e simples possível, adequada ao conteúdo do site.
  • Técnica: A utilização de uma linguagem clara e simples proporciona uma comunicação eficaz. O acesso a informações escritas pode ser difícil para pessoas com deficiências cognitivas ou de aprendizagem, além de beneficiar pessoas cuja língua materna não seja a da página.

1. Validação

• A validação da acessibilidade deve ser feita por meio de ferramentas automáticas e da revisão direta. Os métodos automáticos são geralmente rápidos, mas não são capazes de identificar todas as nuances da acessibilidade. A avaliação humana pode ajudar a garantir a clareza da linguagem e a facilidade da navegação.

Veja como um daltônico vê o seu site:

http://www.vischeck.com/vischeck/vischeckURL.php