0 assinantes

Newsletter

Mantenha-se informado sobre as nossas novidades com nosso newsletter semanal, todas as segundas-feiras

Fabião's picture

Acessibilidade: Muito além do Acid3

Google Daltonico

Se você perguntar para qualquer pessoa: “Você acha correto que o governo tome medidas para inclusão plena do portador de necessidades especiais à sociedade?”, todos, sem exceção, dirão que sim. Porém, poucos são os desenvolvedores de websites e aplicações que realmente se preocupam com o acesso dos seus produtos ao público que possui deficiências motoras, auditivas e visuais, tornando a internet e o desktop uma espécie de “calçada sem guia rebaixada cibernética” e dificultando ao máximo a tarefa de navegação não convencional. No caso da web, pior ainda: Sites cheios de técnicas não ortodoxas de visualização, uso excessivo de AJAX, “captchas” imagens no lugar de texto em prol do visual e certas “gambiarras” que viram armadilhas pro coitado que tentar navegar na página usando um software leitor de tela, por exemplo.

A W3C, além de regular os padrões da web quando dizem respeito a renderização do conteúdo que aparece em nossos browsers, também mantém seus “padrões” para acessibilidade, na Web Accessibility Initiative (WAI), que sugere aos webdesigners algumas boas práticas no desenvolvimento e montagem de suas páginas. A maioria destas regras são de fácil execução e implementação, tais como sempre usar o atributo “alt” em suas imagens, para descrever textualmente a imagem que está no layout e permitir que um browser de texto (ou um daemon que leia páginas e envie para algum hipotético cara que não toma banho) exibir uma referência e possibilitar aos leitores de tela “dizerem” ao usuário o que aquela imagem é, entre outras.

Notem que não se trata de uma caridade, mas sim de respeito ao usuário e visão de mercado: Se seu site ou programa for acessível a todos, é um diferencial que pesará muito na escolha do mesmo por um portador de necessidades especiais, que também paga pelo seu programa ou conta nas visitas de seu site. Não se trata de um opcional, um “plus”, ou algo que você deva deixar por último (mesmo porque se fizer isso, vai sofrer bastante): É uma obrigação do desenvolvedor que se preze preocupar-se com a acessibilidade de seu produto, tanto quando um cozinheiro deve lavar as mãos antes de preparar o jantar.

Todavia, infelizmente, o assunto “acessibilidade” é muito pouco comentado nas discussões sobre desenvolvimento web (área da qual faço parte). Discussões sobre qual browser suporta SVG ou quantos pontos o mesmo fez a mais do que o do concorrente no teste do momento em tecnologias que não serão adotadas tão cedo, certamente são muito mais abundantes e emotivas do que recursos e técnicas de acessibilidade que podem (e DEVEM) ser adotadas já, e que os browsers já possuem suporte faz tempo.

PWNED

Diferente da validação mecânica do XHTML e do CSS que usamos nos sites, a validação do conteúdo de acordo com as WCAG (Web Content Acsessibility Guidelines), embora possa ser realizada de modo automático por validadores como o brasileiro daSilva, depende, acima de tudo, do bom senso e de testes.

A maneira mais segura de saber se seu site ou programa é razoavelmente acessível é tentando usá-lo como um portador de necessidades especiais usaria; este post, aliás, é motivado pela experiência desastrosa de uso de um site meu em um leitor de tela. Se você, desenvolvedor que leu este texto, achar que é prudente “acessibilizar” seu site (programas também, porque não?), pode usar algumas técnicas simples de teste:

  1. Exibir o conteúdo com as imagens bloqueadas.
  2. Exibir o site sem nenhuma folha de estilos.
  3. Verificar se a leitura do site não fica prejudicada para os daltônicos. Você pode testar facilmente isto usando o Visicheck.
  4. Testar seu site em browsers de texto, como o Lynx.
  5. Desligar o monitor e tentar usar um leitor de tela. Este é o maior soco na cara que um desenvolvedor web pode tomar, no que diz respeito a acessibilidade: Aquele ditado de “Pimenta nos olhos dos outros é refresco” vale bastante neste caso. Pelo menos pra mim, valeu.

O desenvolvedor interessado nesta brincadeira pode usar o Dosvox ou o NVDA no Windows, o Orca ou o LSR no Linux e, ponto pra Apple, se você usa o OsX depois do Tiger você já possui o VoiceOver por padrão. Aliás, neste ponto, a Apple é disparada a melhor opção para um usuário deficiente visual: Até a instalação do OSx tem suporte a braile.

Pode-se também obter mais informações no site do SERPRO, do Governo federal, ou ainda no site do Marco Antonio de Queiroz, o Bengala Legal: Marco é cego, aliás. Pra esclarecer: A imagem do acid3 é só pra encher o saco. Eu não verifiquei, porém, PRESUMO (e espero sinceramente estar certo), que algumas dos padrões validados por ele sejam sobre acessibilidade.E o título é uma licença poética, porque, definitivamente, não é um artigo questionando os browsers, mas sim os desenvolvedores.

E também vale lembrar que a deficiência que o potencial usuário do seu programa enfrenta não se resume a problemas visuais, eu resumo bastante a abrangência aqui. E que qualquer referência a pessoas reais neste post é mera coincidência.

Notícias relacionadas

emartsnet's picture

Realmente. Este é mais um problema que devemos contornar na hra de desenvolver um website. Principalmente um que seja acessado por uma quantidade enorme de pessoas. Mas creio que, no caso do google, eles já estão preparando (se não já o fizeram) alguma coisa para ajudar o público deficiente. Ou você acha que o padrão simples da página do google é só para economizar banda?

Eye-wink

Fabião's picture

A imagem do google não é para criticar a acessibilidade do site, e sim exibir um logo conhecido tal qual um daltônico o enxerga.

Aí, talvez o desenvolvedor pense:

Veja este post que escreví. Observe os links vermelhos. Imagine algum site que use este método, mas, não insira os underlines embaixo dos mesmos.

Agora, imagine um daltônico que não enxerga o vermelho lendo o texto. O cara não vai diferenciar link algum.

Aí você pensa: Isso é primário, né? Site grande jamais vai deixar isso escapar, não ?

http://g1.globo.com/

Imagine um daltônico acessando o G1, portal de notícias da globo.

Ederson de Oliveira's picture

Agora fiquei intrigado... como é que um não daltônico enxerga esse logo?

meirellez's picture

A figura é interessantíssima. Sempre quis saber como é que a visão do daltônico interpretava as diferentes cores.

---------------------------------------
Só a mudança é permanente.

Até que enfim alguém parando pra falar de navegador, sem discutir pontos no Acid3.

Parabéns pela relevância do assunto que levantou! Acessibilidade deveria ser levado mais a sério por quem desenvolve.

MicaelSilva's picture

Favoritadíssimo!!
Deixar visível pra não esquecer na hora das manutenções no meu site.

Heero's picture

Até hoje só lembro de uma vez ter visto um site que na hora de digitar os captcha tinha uma opção de lê-las para deficientes.

victorfranco's picture

Dei uma olhadinha no meu blog e pelo menos pros daltônicos ele me pareceu bem agradável... Quanto ao "alt" eu sempre tiro ele da imagem. Acreditava que ficava melhor assim... Agora sempre vou colocar... Depois vou testar ele num browser de texto e ver como fica... E tentar torná-lo cada vez melhor, em todos os sentidos.

Ótimo post! Às vezes precisamos de alguém para nos lembrar que existem pessoas que sentem o mundo de outra forma, não necessariamente do modo que sentimos. Parabéns!

Victor Franco

Bruno Gama's picture

Ótimo post todos deveriam antes de desenvolver aplicações e sites baseados em ajax dar uma lida na w3c e conhecer a wai. Estou escrevendo minha tese de conclusao de curso sobre isso Smiling

Efficiency is intelligent laziness. - David Dunham.

Shomer's picture

Excelente post!! Parabéns Fabião. Muita coisa aí eu já estava procurando e terminei por achar num único post. Fico satisfeito quando leio bons textos como este aqui no Meio Bit.

rafaeldfmelo's picture

otimo post. já vi muitos sites gringos com captcha com som, já até usei de curiosidade, essa questao dos daltonicos nunca havia pensado antes, interessante.
agora off topic, hoje de tarde percebi que alguma coisa aconteceu por aqui, uns post que apareceram no rss sumiram e um pos sobre a lideran;ca da apple no mercado de venda de musica, escrito pelo ubiratan tb sumiu, o que houve?

ººno mundo so existem 10 tipos de pessoas, as que entendem...e as que nao entendemºº
RafaelDFMelo'Blog

chow_digital's picture

Valeu,Fabião...parabens por tocar nesse assunto . Já é hora da sociedade acordar e perceber que os deficientes tambem existem no mundo virtual...

- Upset? You never have seen me upset...

kdoandre's picture

Poutz..cara, esse foi um exemplo de profissionalismo aliado a responsábilidade!!

..demorou pra cair a ficha da imagem do google hehe
como desenvolver pra usuários 'lentiuns' desse jeito? hehe
--
André Luiz de Paula

Fabião's picture

Eu tenho um colega daltônico que joga Winning Eleven comigo.

Tem os problemas das escolhas de time, que envolvem mais do que o problema das cores tradicionais de camisa. Aí eu converso com ele sobre como ele enxerga os sites.

Mas, quem não convive com isso, ai, normal que nem perceba.

Ubiratan.apo's picture

Muito bom artigo, e gostei das ferramentas de avaliação apresentadas.

Legal este computador conceito para cegos.

yawara.br além da tecnologia.

Maurone's picture

Kra, parabéns pelo artigo! Fala de um assunto extremamente importante e foi muito bem escrito. E como o Ubiratan.apo, tb gostei mt das referências.

"Havendo olhos suficientes, todos os erros são óbvios". Eric Steven Raymond

Flávio Amieiro's picture

Esse é um assunto que eu considero muito importante mesmo. Desde que eu comecei a ler sites como o tableless e o Revolução Etc que presto atenção a essas coisas.

Tanto que até hoje só fiz um site, pra revista da faculdade (A roda; o site tá desatualizadíssimo...). Ainda que o site seja muuuuito fraquinho, a coisa que eu mais tinha na cabeça era exatamente pensar em não atrapalhar totalmente a vida de quem tem alguma deficiência.

O único teste que eu fiz, na verdade, foi visita-lo pelo lynx, e consegui usar perfeitamente, mas nunca testei com leitor de telas. O site está longe de ser perfeitamente 'acessível', mas fiz o que eu podia (ei! já disse que foi meu primeiro - e único - site; não me julguem por ele...).

:wq

fabionics's picture

Eu sou tetra c4 e tive uma melhora na minha relação com meu computador (era ódioo puro)graças ao asssistente de acessibilidade no windows.
Reconhecimento de voz demora tanto quanto "catar milho"
Na internet, o mouse gestures do firefox ajuda muito

P.S. Levei 14min. para escrever isto

GeekPobre's picture

Adorei as maneiras de testar o proprio site, realmente a de desligar o monitor é um soco na cara, todo o tempo perdido com "aquele" skin e se vê que para alguns não serve para nada...

http://geekpobre.890m.com/
Acesse, Vale a pena.

candeeiro's picture

Parabéns pelo artigo. Levantou pontos que quase sempre são esquecidos pelos desenvolvedores de páginas.
Esta questão de desligar o monitor faz o cara sentir na pele como é navegar par quem tem este tipo de limitação (pior ainda, pois quem já é cego, é muito mais ágil e rápido para se sair numa situação dessas).
Acordei para padrões e acessibilidade quando fiz um trabalho acadêmico com esta finalidade. Fiz testes e pesquisas com pessoas cegas que usam a web, e-mail e aplicações, como editores de textos. O que notei é que eles são uns guerreiros, pois a maioria dos sites o deixam presos, ocultando informações ou simplesmente "mostrando animações" porretas que para eles não servem de nada!

Um exemplo, que não esqueço é de um site que tinha um formulário no topo da página e após o cursor entrar neste bendito "input", um javascript dizia que os dados digitados eram inválidos (pior era não ter nenhum texto alternativo para explicar o que aquele campo estava pedindo (o nome de usuário, caso fosse cadastrado). Um cego que acompanhei ficou preso(pois ele só usava a tecla TAB para navegar)... Ele olhou meio de lado (mesmo sem me ver) e com a cara sem graça, tascou um ALT+F4.

Você exemplificou ferramentas muito boas.

CandeeiroWeb

flep's picture

Esse assunto é muito bom, mas na minha opinião, na prática do dia a dia de desenvolvimento web, é bem complicado aplicar tudo isso.

Trabalho especificamente com construção de codigo HTML e CSS a pelo menos 8 anos, e é extremamente difícil algum cliente entender isso e pagar por isso.

Um site com full acessibilidade, precisa ter tudo corretamente escrito. Titulos com H1/H2/H3, formularios com tabindex, uso de span somente em textos sem importancia [span tem peso pequeno nos leitores, ele le mais rapido], e diversos outros itens. Aí, além de tudo isso, ainda tem toda a questão visual do site para ser levada em consideração, como o link sem underline citado no texto, e isso passa pela equipe de criaçao, não de produção.

E todo esse estudo e aplicação, com certeza aumenta o custo e o prazo de um projeto, isso é inevitável, e a maioria dos clientes não está disposto a pagar por isso.

E quando o site é em flash então? Ou possui elementos em flash? Devemos abandonar qualquer efeito/enfeite/gosto/preferência visual em pró da acessibilidade? Ou então todo site deve ter um conteúdo adicional, para ser acessivel por leitores de site? Mas e o tempo de produção/execução disso tudo, quem arca?

Infelizmente, olhando pelo outro lado, a internet ainda não é tão facilmente convergente como a TV por exemplo, onde o som e a imagem já são padrão, e o Closed Caption é automático.

Acessibilidade vai muito além da boa vontade de nós desenvolvedores colocarmos tag alt nas imagens. Vai da vontade do cliente, do designer, do programador [imagens dinamicas, textos dinamicos nas tags alt], do desenvolvedor, etc.

Fabião's picture

Eu devo discordar.

Se você desenvolve em HTML e CSS sabe que um dos mandamentos principais é a separação do conteúdo da formatação. Um HTML correto e semântico deve ser lido tanto quanto estilizado, tanto quanto não estilizado, sem problema algum. A folha de estilos deve ser responsável pela formatação.

Primeiro, que a acessibilidade é um fator que deve ser de consciência de todos, desde o desenvolvedor até a tal dita equipe de criação. Todos devem estar conscientes do que deve ser feito ou não, e quais as consequências disto.

Segundo, que as regras de acessibilidade NÃO são um bixo de sete cabeças que encarecem sites a níveis estratosféricos ou causam dias perdidos. A maioria delas é simples, e não causa influência alguma no layout.

Porém, vamos supor que cause. Os navegadores que prestam, possuem suporte para várias folhas de estilo. Sabendo que a semântica de um site não é apenas para facilitar leitores de tela, tendo muitas outras aplicações como manutenção mais simples, melhor legibilidade do código e melhor posição em sites de busca, é fato que o HTML produzido DEVE ser, como você diz, "corretamente escrito". Simples supor que a palavra "corretamente" já explicita que o outro jeito é errôneo.

Numa situação como esta, com o HTML válido, semântico e acessível, basta, caso se queira tacar mesmo links sem underlines dando uma banana pros daltônicos, não vejo porque não prover uma folha de estilos que ajuste estes pequenos pormenores. Não vai levar nem uma hora pra produzir uma, e todo mundo fica feliz.

Sobre o Flash, o negócio não foi feito mesmo para ser acessível. Ou, o cliente paga para ter conteúdo disponibilizado a parte, ou, não o tem. Isso é errado; mas, contanto que este problema seja passado para o cliente, e ele decida assim, não vai ser por isso que o site não será produzido.

A internet não é facilmente convergente, porém, PRECISA ser convergente. Também não é fácil instalar um elevador num ônibus, custa caro, mesmo assim é necessário. Mas acho que a dificuldade não é tanta assim. A questão é que o desenvolvedor, na maioria das vezes, não sabe ou não se preocupa com isso.

flep's picture

Fábio, entendo seu ponto de vista, mas na prática, nem tudo é possível fazer com alternação de folhas de estilo, e nem tudo é facil como se pensa.

Quando eu desenvolvo layouts like CSS Zen Garden, é simples, facil, e realmente não demora muito, como na época em que trabalhei em provedor e lidava com o layout do portal.

Mas hoje trabalhando em agência, onde existem diversos tipos de projetos, leva tempo sim cuidar da semântica do HTML.
Hoje já são feitas correções para browsers [muitos projetos eu preciso ter o CSS principal, o iE6Fix, o MacOsCSS, e o SafariCSS, porque muitas coisas são renderizadas de maneira diferente, até mesmo entre o FF do windows e do Mac]. Além disso, com certeza haverá também correções de JS, e nem sempre são correções fáceis ou que já tenho na ponta dos dedos. É impressionante como sempre surge um problema de renderização novo, principalmente com o uso de ajax e afins.

Eu concordo e adoraria que em todo projeto, eu tivesse tempo para fazer todos os meus titulos com H1/2/3..., todos os menus com Ul LI e A com image replacement, todas as listas com OL ou DT DD DL, mas simplesmente se isso não é solicitado pelo cliente [ou melhor, não é aprovado quando sugerirmos fazer assim], não dá para fazer, porque o tempo de execução não é o mesmo, não em projetos grandes e complexos onde um CSS básico do site fica com 800, 1000 linhas [CSS SEM aquela escrita identada, ou seja, uma classe/id por linha].
Web semântica, acessível e com prioridade AAA [maior nivel de certificação para acessibilidade] não é tão simples não.

Quando falei "corretamente escrito" estava falando de HTML semântico e acessivel, não de HTML como um todo. Um titulo com H1, CSS definido, text-ident e image replacement, é semântico, acessível. Uma div com uma imagem dentro não é errado dentro da linguagem HTML, mas não é semântico, e acaba sendo amplamente usado por ser mais prático e rápido de executar.

O que eu quis colocar, é que não se pode colocar toda a responsabilidade em cima do desenvolvedor [não estou dizendo que você fez isso], para que ele aplique por conta própria essa formatação. O cliente também precisa entender a importância disso.. só que se ele não entende, é como no caso do flash, paciência.

shimatai's picture

Excelente artigo!

Não sei se vc conhece, mas existe o Acesso Digital, que divulga relatos de deficientes visuais e presta serviços no aspecto de acessibilidade e usabilidade.

No começo do ano assisti a uma palestra deles e achei muito legal!

--
"Uma pessoa inteligente resolve um problema, um sábio o previne." Albert Einstein

shimatai's picture

Fabião disse:
se você usa o OsX depois do Tiger você já possui o VoiceOver por padrão

Se não me engano, o Ubuntu já tem guia de instalação para cegos, onde um leitor de tela é ativado (usando ORCA).

--
"Uma pessoa inteligente resolve um problema, um sábio o previne." Albert Einstein

danielmb's picture

Muito bom cara. curti demais seu artigo.
É um fator que deve ter cuidado redobrado, tiplicado.
Afinal, inclusão digital é oferecer ACESSO a todos.

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
Não tenho como assinar, eu não tenho BLOG

Olha só, sei que faz tempo q vc postou, mas estou fazendo uma pesquisa sobre usabilidade, e acabei me infiltrando em acessibilidade tbm...
Não sei quase nada sobre o assunto, mas foi uma achado...
Muito boa sua descrição, sua crítica e suas referencias! =D
Show mesmo...
Bom agora comentando sobre o que o FLEP falow, bom sei lá.
Acredito que não é muito mais caro fazer uma site mais acessivel. Claro que dependeria pra qm é voltado a página. Mas se o cara vai trabalhar com todos os tipos de público, é lógico que o cara vai aceitar numa boa, pois ele fideliza seu utilizador.

Eu tava conversando com um cara aqui da empresa sobre o assunto, no qual ele domina, e ele me deu um exemplo de acessibilidade que é impressionante... http://www.tableless.com.br/
Tbm pudera ne... mas vejam como o site é lindo aos nossos olhos.
Uma pessoa com deficiencia visual que usa regularmente a web tem o conhecimento de ferramentas que os auxiliam, bom pelo menos eu acho, bom, mas no firefox temos uma barrinha no qual podemos desabilitar o CSS, assim, aquela pagina maravilhosa, fica em modo de texto, ficando acessivel ao nosso usuário. Então Flep, podemos ate perder mais tempo, mas a questão visual do site está fora de questão... =D

Me corrijam se eu estiver errada... t+++ e Parabéns.

Opções de exibição de comentários

Selecione seu modo de exibição dos comentários favorito e clique "Salvar opções" para ativar suas mudanças.


Design Wenetus