Pinceladas da WebMovido a: XHTML, CSS, PHP e WebStandards

O atributo “longdesc” especifica um link com uma descrição longa sobre a imagem em que a tag foi colocada. Seu uso é complementar ao da tag alt sendo a única diferença onde você pode especificar informações mais detalhadas. Se associada a um mapa de imagem, essa deve passar uma descrição referente ao conteúdo do mapa.

Um estudo feito em Agosto de 2007 por Ian Hickson, onde foram analisadas cerca de 1 bilhão de imagens indexadas pelo Google, mostrou que cerca de 1.3 milhões (0,13%) dessas imagens fazem o uso do aributo longdesc. Isso pode ser compreensível, pois nem todas as imagens requerem o uso de longdesc.

Mas, dentro dessa porcentagem de utilização, a sua grande maioria se baseia em:

• Utilizam um valor em branco.
• A URL apontada não é válida.
• A URL apontada é a mesma da imagem.
• A URL apontada é para a raiz do domínio.
• A URL aponada é para a mesma página em questão.

Descartando os erros de utilização dessa propriedade, chega-se a conclusão de que menos de 1% das imagens possuem um atributo longdesc realmente útil.

Escreva atributos “longdesc” úteis

• Creating Accessible Images.
• The Imagem Problem.

Referências

• Estadísticas sobre el uso del atributo longdesc.
• The longdesc lottery.

O código para inserir vídeos do Youtube em sites que respeitam os WebStandards é uma dor de cabeça para desenvolvedores e para bloggers, pois o Youtube proporciona um código para você copiar e colar em nosso blog para reproduzir os vídeos de uma forma rápida e simples, mas o código não é correto como deveria:

<object width="425" height="373">
<param name="movie" value="http://www.youtube.com/v/O0G7iKj6PS0&rel=1&border=1"></param>
<param name="wmode" value="transparent"></param>
<embed src="http://www.youtube.com/v/O0G7iKj6PS0&rel=1&border=1" type="application/x-shockwave-flash" wmode="transparent" width="425" height="373"></embed>
</object>

Se você for validar o código, verá os seguintes problemas:

• Se utiliza a tag object corretamente, mas ocorre a falta de alguns parâmetros como data e type.
• As tags param em XHTML devem ser fechadas com a sua mesma tag de abertura.
• O uso da tag não standard embed podem produzir incompatibilidades em browsers que não a utilizam, como, dispositivos móveis e leitores de tela.
• Não se proporciona um método alternativo caso o dispositivo não tenha suporte a Flash.

A solução é bem simples, basta codificar-mos da seguinte maneira:

<object data="http://www.youtube.com/v/O0G7iKj6PS0" type="application/x-shockwave-flash" width="425" height="350">
  <param name="quality" value="high" />
  <param name="movie" value="http://www.youtube.com/v/O0G7iKj6PS0" />
  <img src="/img/video.png" alt="Vídeo (Objeto multimídia)" />
</object>

O código acima corrige vários conceitos, e além de tudo elemina o uso da tag embed, pois se trata de uma tag privada e totalmente fora dos padrões:

• Se utiliza a tag object corretamente com o link do objeto no atributo data e o tipo MIME no atributo type.
• As tags param agora são “unitárias” e compatíveis com XHTML, além de também serem compatíveis com HTML.
• Acessibilidade: Se utiliza um método alternativo, uma imagem que se mostrará caso o browser não tenha um plug-in do Flash instalado. E no caso de não haver suporte a imagens (leitores de tela, browsers de texto) é mostrado o aributo alt da imagem.

Abaixo, um exemplo de vídeo do youtube inserido corretamente em XHTML:

Referências

• Emezeta Blog - Youtube estándar con (X)HTML válido.

O Opera era um dos meus browsers favoritos quando eu utilizava Windows, mas depois acabei migrando para o Linux e estou utilizando mais o Firefox do que ele agora. O Opera, além de ter um grande suporte a CSS, também auxilia os usuários com algum tipo de descapacidade, que podemos citar algumas:

Pessoas com deficiências físicas

• As pessoas que não podem utilizar o mouse, podem usar navegação por tabulação, navegação seguindo os títulos, os vários atalhos de teclado que auxiliam a acelerar a navegação. Também suporta as teclas de atalho das páginas que acessamos, permitindo eliminar temporariamente os atalhos do Opera para não evitar problemas de conflito entre eles.
• Para pessoas que podem fazer o uso do mouse, é incluso a possibilidade de se fazer uso de gestos do mouse, onde dos quais se podem realizar operações frequentes com pequenos movimentos do mouse.

Pessoas com deficiência intelectual

• Pode bloquear pop-ups e certos conteúdos que podem distrair o usuário ou levar a janelas onde não é possível voltar.
• Pode recuperar páginas que foram fechadas por algum erro.
• Possui grande capacidade de configuração.

Pessoas com deficiência visual

• Pode efetuar zoom nas páginas ampliando não só os textos, mas também as imagens.
• Permite configurar facilmente as páginas para poder vê-las sem imagens.
• Possui um sistema de saída de voz para os documentos. As características das vozes são configuráveis: se pode escolher entre masculina, feminina e infantil, e se pode modificar o volume, o tom e a velocidade.
• Suporta navegação por reconhecimento de voz.

Referências

• Accesibilidad, Usabilidad y Estandares Web - ¿Cómo ayuda Opera a las diferentes discapacidades?

Jakob Nielsen e sua companhia Nielsen Norman Group, publicaram gratuitamente um guia de acessibilidade chamado: Beyond ALT Text:Making the Web Easy to Use for Users With Disabilities.

Ou seja: Além do texto alternativo: Fazendo a web fácil para usuários com descapacidades. Um Guia de desenvolvimento para Web Sites e Intranets baseados em estudos de Usabilidade de pessoas utilizando alguma tecnologia assistiva. Esse documento foi publicado inicialmente em outubro de 2001 e contém, entre outras coisas:

• Os resultados dos testes de usabilidade referente a 19 sites com usuários descapacitados e que usam diversos tipos de tecnologias assistivas.
• Dados coletados nos Estados Unidos principalmente.
• 75 guias detalhados de desenho.

Download

• Mirror 1
• Mirror 2

Referências

• estándares y accesibilidad - Gratis Reporte de Accesibilidad por Jakob Nielsen.

Abaixo uma lista para auxiliar desenvolvedores para que suas páginas sejam acessíveis a pessoas com deficiências cognitivas:

• Readability index calculator: Calcula o índice que indica a facilidade de leitura de um texto concreto, segundo uma série de fórmulas disponíveis para diferentes idiomas.
• Readability test: Outra ferramenta que nos permite avaliar a facilidade de leitura de nosso textos seguindo vários algorítimos.
• Distractability Simulation: Essa ferramenta permite ao desenvolvedor testar o nível de frustração similar a uma pessoa com deficiência cognitiva quando acessa a internet.
• Dyslexia simulation: Nos mostra o conteúdo de uma página web para ser vista tal como uma pessoa com dislexia veria.
• Misunderstood Minds: Aqui podemos encontrar uma série de vídeos e atividades que nos ajudam a compreender melhor as dificuldades das pessoas com problemas de concentração.
• PEAT (Photosensitive epilepsy analysis tool): Essa ferramenta serve para detectar os componentes de uma página web que poderiam causar ataques fotosensitívos de epilepsia em certos usuários.
• Flicker Rate Test for Gif Images: Permite ao desenvolvedor comprovar se as imagens de uma página web buscam cintilação, frequência de cintilação e contraste de cor.

Referências

• Accesibilidad, Usabilidad y Estandares Web - Simuladores para personas con discapacidades cognitivas.

Recentemente fora lançado um componente para agregar legendas a arquivos flash, chamado “CC for Flash”. A partir de agora podemos ter nossos vídeos acessíveis para pessoas que não possuem caixas acústicas em seus computadores, que se encontram em lugares com muito ruído, pessoas surdo-mudas, que não entendem línguas estrangeiras e vários outros motivos.

Essa aplicação é totalmente gratuita, e as legendas são inseridas no vídeo via um arquivo XML externo que respeitam as normas do formato DFXP do W3C. Além disso o componente nos permite alterar o tamanho e a fonte do texto, e também a cor.

Vejam um exemplo de um vídeo em Flash acessível. Se funcionamento é bem simples:

Como foram inseridas as legendas nesse vídeo flash?

Os arquivos com que vamos trabalhar são os seguintes:

• reproductor.swf: Esse arquivo contém o componente FLV Play Back que contém o reprodutor e chama o vídeo FLV.
• laaccesibilidad.flv: Esse é o nosso vídeo em formato FLV.
• subtitulos.xml: As legendas no padrão DFXP, onde definimos o tempo inicial e final de cada frase.
• index.html: Contém o objeto Flash para reproduzir o vídeo.

Faça o download completo dos arquivos de exemplo.

Primeiramente devemos efeuar o download do componente de legendas. Para instalar o “CC for Flash” no Flash, basta siplesmente dar 2 clicks no arquivo CCforFlash.mxp. Logo ele é instalado no Flash Extensions Manager. O novo acessório estará visível na aba de componentes.

Agora trabalharemos com o componente FLV Play Back, onde lhe agregaremos um nome de instância nsVideo e em parâmetros faremos as chamadas correspondentes. O mais importante é definir em contentPath o caminho correto de onde se encontra o arquivo FLV e o skin que definimos como nosso reprodutor. O nome da instância é muito importante pois é através dela que será feita a conexão com o componente de legendas.

O nosso componente reprodutor está pronto. Agora é a hora de inserir o componente que irá reporduzir as legendas. O colocaremos sob o vídeo e definimos os seguintes parâmetros:

O mais importante aqui é definir corretamente a instância do vídeo e em Caption Filename o caminho do arquivo XML que contém as legendas. Exportamos o arquivo swf com o nome de reproductor.swf. Quando é efetuada a exportação, é criado mais um arquivo swf que é o skin do reprodutor. No arquivo XML veremos que alí há uma tag onde definimos o tamanho e a fonte do texto, além da cor. Aqui é hora de alterar o texto e definir o início e o fim de cada legenda.

E por último criamos a página HTML que conterá o objeto Flash para a reprodução de nosso vídeo, onde devemos definir corretamente os caminhos e os nomes dos arquivos e informar que linguagem está o vídeo.

Pronto, você acaba de criar um vídeo em Flash acessível. No site do desenvolvedor você pode ver mais alguns exemplos de uso desse componente.

Referências

Esse artigo é uma tradução do original de: El Rallador - Video en Flash Accesible

É muito fácil se dar conta quando um site foi desenvolvido pensando no usuário ou não. Parece algo estúpido, mas não não todas as pessoas que entendem que o site irá ser visitado por pessoas que não são iguais a ela mesma. Nem todos se sentem bem em todos os lugares. Sem dúvida, sites que antes de seu desenvolvimento são extremamente “pensados” são muito mais ricos que os outros.

Esses sites compartilham algumas características que fazem a visita do usuário muito mais agradável e ajudam a cumprir seu objetivo pelo qual visitou o site de maneira muito mais simples e rápida.

Carregamento Rápido

Um site deve carregar o mais rápido possível. Se o visitante pode encontrar a informação solicitada em seu site em outro, não tenha dúvida que ele irá logo após seu site demorar alguns segundos para carregar. Existem várias maneiras de se fazer com que seu site carregue mais rápido, abaixo você pode ver algumas delas:

• Como fazer com que as páginas do Wordpress carreguem mais rápido.
• Arquivos CSS bem menores.
• Arquivos CSS menores.

Acessibilidade

Coo coentado anteriormente, nem todos visitam os sites com as mesmas condições, ou seja, não são todos que fazem o uso de um PC com uma conexão de 2.5 MB em um monitor de 17 polegadas com Firefox sob Windows XP. Você deve desenvolver os sites para serem acessíveis por todos os meios: PCs, Notebooks, Palms, Dispositivos móveis, etc.

Isso significa que nem sempre será possível ver as imagens, nem sempre será possível reproduzir Flash e nem ver Frames. Deve-se buscar uma forma alternativa de o conteúdo chegar ao usuário, muito mais hoje em dia onde a navegação móvel cresce rapidamente num futuro não tão distante.

Navegação

O usuário deve estar a todo momento a não mais de 2 clicks de seu destino. Isso não é fácil de fazer, mas facilita e muito as visitas. Além disso é importante que as áreas mais destacadas do site estejam á vista do usuário e sejam fáceis de acessar. Também é importante hierarquizar os links dentro de sua navegação, destacar seções em seu site, e essas também devem ser fáceis de acessar.

O que seu site não pode deixar de ter é uma área onde o usuário pode contactá-lo, é muito importane relacionar-se com seus visitantes. Os demais links e sua devida disposição servirão para orientar o usuário em uma espécie de visita guiada por seu site ajudando muitas vezes a cumprir o objetivo.

Informação

Cada visitante no geral chega a seu site buscando algo. Certamete aquilo que você sabe (ou deveria saber) é que deve servir aos usuários com uma bandeja de prata e uma boa taça de vinho. Ir ao ponto com o que você tem de dizer é uma boa maneira.

Referências

Tradução do artigo original de: Gran Impetu - Características de un sitio user friendly.

Abaixo uma lista com 10 principais simuladores para designers e desenvolvedores que ajudam as pessoas que possuem algum problema de visão:

• Low-Vision Simulator: Para usuários com baixa visão, catarata glaucoma ou degenaração muscular.
• aDesigner: Avalia o contraste de cores, a capacidade de alterar o tamanho da fonte, a existência de exto alternativo e outras recomendações sobre acessibilidade.
• VisCheck: Para pessoas daltônicas.
• Daltonize: Para corrigir imagens para melhor serem visualizadas por uma pessoa daltônica.
• Graybit: Converte uma página em uma escala de cinza e mostra no navegador.
• Visual Impairment Simulator: Para ver como visualizam as páginas pessoas com diferentes problemas de visão.
• Screen Reader Simulator: Permite ver como se visualizaria a página em um leitor de tela.
• Fangs: Emulador de leitor de tela.
• Lynx Viewer Text-Only Simulator: Visualize a página como se fosse no browser de texto Lynx.
• Web Page Backward Compatibility Viewer: Permite visualizar a página supondo que o browser utilizado não suporta certas características.

Referências

• Seraccesible: Simuladores para personas con problemas de visión.

Para aqueles que querem avaliar a acessibilidade de seu site em disposiivos móveis, o W3C dispõe em fase Alpha de um validador para isso. E se você quer mais informações sobre boas práicas sobre desenvolvimento para disposiivos móveis basta visitar o W3C Mobile Web Best Practices.

Referências

• Validador del W3C para webs accesibles desde móviles.

A poucos dias atrás descobri uma funcionalidade interessante que compõe a Web Developer Toolbar, ela possui uma lente de aumento que pode auxiliá-lo em muitas coisas, principalmente naqueles sites em que os desenvolvedores definiram tamanhos de fonte muito pequenas, ou até mesmo quando você está desenvolvendo e precisa fazer verificações minuciosas no layout.

Para acessá-la basta ter, obviamente, a barra instalada em seu Firefox, ir até Miscellaneous > Display Page Magnifier. Pronto, e ainda você tem a opção de aumentar ou diminuir a proporção de aumento. Abaixo vocês podem ver um exemplo: