Meu código é realmente acessível?

ramonvictor — Mon, 01 Mar 2010 17:16:57 +0000

Assistir ao vídeo “Acessibilidade Web: Custo ou Benefício?”, publicado pelo acessodigital, nos faz questionar se realmente estamos construindo códigos acessivéis, visto que detalhes importantes, muitas vezes, passam despercebidos e acabam comprometendo o acesso de usuários deficientes.

Como dito no vídeo, por Lêda Lucia, “Audição não é sintética como a Visão”, ou seja, para aqueles que apenas escutam, as coisas não são muito simples quanto para aqueles que veem.

Outro item importante, ressaltado no vídeo, é a importância do link “Ir para o conteúdo” no início de todas as páginas. O mesmo, dá autonomia ao usuário de escolher se realmente é necessário escutar toda navegação antes de iniciar a leitura do conteúdo.

Além de se preocupar com a forma que o conteúdo será lido, deve-se ter uma preocupação maior com as funcionalidades que podem comprometer o acesso daqueles que navegam apenas pelo teclado. Não visualizar itens de submenus, é um exemplo pratico de uma das dificuldades comuns existente em grandes portais na web, como citado no documentário.

Não quero me estender muito, pois o importante mesmo é que o vídeo seja assistido. Vejam-o e façam-se este questionamento: “Meu código é realmente acessível?”.

Designers também devem entender de acessibilidade na web

ramonvictor — Tue, 27 Oct 2009 14:32:38 +0000

A participação do Designer no processo de criação de um site tem o foco principal no desenvolvimento do layout, porém o que muitos não sabem é que ele é responsável (ou pelo menos deveria ser) por determinar interações de interface e até mesmo definir o tipo de linguagem que o site deverá ser implementado (Se deve ser usado Ajax, Flash, CSS e etc).

Para Designers estudar usabilidade é essencial, mas entender de acessibilidade acaba sendo um diferencial. Pois além de projetar algo fácil de usar o profissional estará disponibilizando seu projeto a diferentes plataformas e facilitando possíveis dificuldades do usuário.

Então quais tipos de funcionalidades, em questão de acessibilidade, o Designer poderia projetar?

Controlar o tamanho da fonte

Geralmente os Designers definem um tamanho padrão para a tipografia do site, mas aqueles que tem dificuldade na visão precisam de uma opção de aumentar esse tamanho. Pelo correto seria de total responsabilidade de quem faz o layout inserir ou não a opção de controle de tamanho, de acordo com a necessidade do projeto.

Uso de Ajax

Somente projetar a tela não vai dizer ao front-end se ele deve implementar determinado site com ajax ou não, para isso é necessário o Designer avaliar se é viável trabalhar com Ajax, sabendo que esta tecnologia tem suas vantagens e desvantagens.

Algumas limitações com questão de indexação, bem como as dificuldades em criar diferentes urls para cada página específica devem ser avaliadas na hora e optar ou não pelo uso da linguagem.

Usar flash ou não?

O uso de determinadas formas e a maneira como os elementos carregam no site são definidos pelo Designer e é a partir desta idéia que será definido se vai usar flash ou não. Desta forma o profissional precisa saber quais serão as dificuldades em relação a deficientes, indexação do google e diferentes dispositivos no caso da utilização do flash.

Esses são três das centenas de motivos para Designers incluir como uma das suas responsabilidades, durante o processo de criação, a autonomia de definir o que é mais viável para a acessibilidade do website.

Assim é necessário atentar para o fato de que o site com restrições de acessibilidade gera uma impossibilidade de alguns usuários visitá-lo e sabemos que perder acessos é a última coisa que o nosso cliente quer.

Importância da semântica no HTML

ramonvictor — Mon, 05 Oct 2009 13:06:06 +0000

Recebi o layout do Designer, como eu faço para definir o que cada elemento da interface vai ser no meu HTML? Essa é uma dúvida que prevalece entre a maioria das pessoas que começam a estudar XHTML e não foi diferente comigo. A resposta para a pergunta pode ser: “Coloca tudo numa tabela, pois fica bem mais prático de fazer” ou “Pesquisa sobre semântica para entender como usar as tags apropriadas, desta forma teu site será acessível a diversas plataformas e melhor indexado”. Ouvir a segunda resposta é meio difícil não é? Porém seria a resposta apropriada.

De início devemos entender o significado de semântica, “A semântica (do grego σημαντικός, derivado de sema, sinal) refere-se ao estudo do significado”. Semântica no HTML, nada mais é do que usar as tags para os devidos propósitos que foram criadas. Ou seja, usar

–

para representar títulos,

para endereços,

para listas, para dados tabulares e assim por diante.

Desenvolver um documento semanticamente correto é tornar o conteúdo acessível a humanos e máquinas. O que eu quis dizer com isso? É que não vai ser entendido apenas por pessoas, o conteúdo vai rodar em diversas plataformas, além de ser melhor indexado pelos motores de busca.

Como as 77 tags do XHTML não foram suficientes para representar alguns tipos de dados específicos como datas, localizações, descrições de links e etc, surgiram os microformatos (microformats), que através de atributos e classes predeterminados conseguem organizar pequenos formatos de dados. O objetivo do mesmo é justamente suprir as limitações das tags, acrescentando novas possibilidades de organizar essa imensa quantidade de informações que são disponibilizadas na web.

Ah! Entendi por que existem os microformatos, mais e esse tal de HTML5 porque surgiu? O HTML5 chegou com uma proposta de melhorar a implementação da semântica do seu antecessor HTML 4.01. Na nova versão o que precisávamos representar com ids e classes para definir seções do site (Ex.: #header, #sidebar, .post, #footer), ganharam um valor semântico muito maior, sendo representados agora por tags como:

Plugin jQuery Font Size 1.1

ramonvictor — Sun, 06 Sep 2009 18:13:35 +0000

Depois de publicar a primeira versão do plugin recebi várias sugestões de melhoria e acabei detectando também algumas funcionalidades que poderiam ser acrescentadas. Inicialmente só poderíamos utilizar 4 opções (alvo, tipoPaiLink, setCookie e variacoes) com a atualização ganhamos mais uma nova, opResetar, que iremos entender mais a frente sua função.

Demo da versão 1.0
Demo da versão 1.1

O que há de novo?

1. Opção de criar botão para restaurar o tamanho original.

Essa opção foi solicitada por pessoas que estão utilizando o plugin. E para implementá-la é bastante simples, só precisamos declarar o novo parâmetro da seguinte maneira:
```
opResetar: true
```
Perceba no demo que foi acrescentado um novo link, entre o que aumenta e diminui, que tem a função de resetar a fonte para o seu tamanho inicial.
2. Inserir os links manualmente

Antes só era possível inserir os links de controle pelo plugin, declarando o tipoPaiLink como ‘ul’ ou ‘p’. Agora o desenvolvedor tem a opção de inserir manualmente o seu código XHTML para dar maior flexibilidade na customização. Observe o exemplo abaixo.

XHTML
```
  tamanho da fonte:
  A-
  A
  A+
```
Perceba que é preciso manter o nome das classes que controlam o tamanho: menos, resetar e mais.

Na chamada da função teremos que modificar algumas coisas: iremos deixar o parâmetro principal vazio (já que não vamos inserir via DOM os links); não devemos declarar mais o tipoPaiLink e opResetar. Vejo o exemplo:
```
$(document).ready(function() {
  $().fontSize({
     alvo: '#content',
     setCookie: true
  });
});
```
3. Classe “desabilitar” para quando o link chegar ao limite

Nessa nova opção você precisa configurar apenas o CSS dando estilo a classe desabilitar, que será adicionada no link quando ele não estiver mais mudando o tamanho do texto.

CSS
```
#font_size li .disabilitar {
  color: #AFAFAF;
  background-color: #DFDFDF
}
```

Resumidamente temos duas opções:

Inserir manualmente os links de controle.

XHTML


  tamanho da fonte:
  A-
  A
  A+

Ou deixar o script fazer tudo sozinho.

<script type="text/javascript" src="jquery.js">

XHTML

Faça o download do Plugin Font Size 1.1 ou leia o post da primeira versão para entender melhor o funcionamento.

Plugin Font Size jQuery: Acessibilidade no controle do tamanho das fontes

ramonvictor — Tue, 04 Aug 2009 03:04:36 +0000

Cada projeto exige diversas funcionalidades, algumas mais fáceis e outras mais complicadas de implementar. Há muita coisa boa na web, porém às vezes faltam coisas que são fundamentais na maioria dos projetos.

Em diversos sites precisei de um bom plugin jquery para controlar o tamanho das fontes e não consegui encontrar. Foi a partir dessa necessidade que decidi desenvolver o plugin Font Size, que visa facilitar os desenvolvedores na tarefa de implementar esse controle. Vejamos como utilizá-lo.

Veja o demo.

Para a implementação do plugin precisaremos dos scripts: cookie e o fonSize + biblioteca jQuery.

O parâmetro principal deve ser a div onde ficarão guardados os links de controle. Em nosso exemplo usaremos a div#font_size.

$(document).ready(function() {
   $("#font_size").fontSize();
});

No XHTML declare apenas a div vazia que o script se encarrega de incluir os links.

Podemos customizar as funcionalidades do nosso plugin. Observe as opções.

alvo podemos declarar um ou mais alvos separados por virgula. Em nosso exemplo utilizamos a div#content. Caso o alvo não seja declarado todo documento sofre a alteração no tamanho da fonte.
tipoPaiLink informa se os links devem estar dentro de uma lista
- setCookie quando declarado true deixa salvo a ultima ação do usuário, de modo que quando houver uma nova visita o tamanho da última ação será mantido. Caso não queira usar a função de cookie declare como false (nesse caso não será mais necessário o script cookie.js).
- variacoes tem quantidade 7 declarado como padrão, onde 4 é o tamanho declarado como 100% no CSS. Caso aumente a quantidade de variações lembre-se de declarar todas as classes no CSS. Observe que a classe padrão separa igualmente o número de variações para mais e para menos. Por exemplo se eu declaro variacoes: 11 a classe padrão detectada pelo script será a 6 sendo 5 variações de aumento e 5 variações de diminuição.
Veja agora como nosso script ficou com o acréscimo dos parâmetros.
No CSS podemos customizar o quanto vai mudar a cada nova ação. No exemplo eu utilizei medidas em porcentagem, mas você pode usar outras medidas de acordo com a sua necessidade.
```
.tam1 p, .tam1 li { font-size: 80%}
.tam2 p, .tam2 li { font-size: 90%}
.tam3 p, .tam3 li { font-size: 95%}
.tam4 p, .tam4 li { font-size: 100%} /* tamanho padrão */
.tam5 p, .tam5 li { font-size: 105%}
.tam6 p, .tam6 li { font-size: 110%}
.tam7 p, .tam7 li { font-size: 120%}
```
Para estilizar os links de controle utilize as classes .mais e .menos. No exemplo criei um estilo simples.
```
#font_size ul { float: right; }
#font_size ul li { float: left; margin-right: 3px}
#font_size a {
  width: 20px;
  height: 20px;
  text-align: center;
  display: inline-block;
  font-size: 12px;
  line-height: 20px;
  background: #ccc;
  color: #4F4F4F
}
```
O que há de novo ?
- Opção de declarar aonde o script vai atuar. O desenvolvedor declara um ou mais alvos que sofrerão a alteração no tamanho da fonte.
- Gera via DOM um xhtml limpo. Com uma simples classe no alvo o fontSize controla o tamanho de seus textos descendentes.
- Dispõe da opção de salvar em cookie. Diminuindo a tarefa do usuário de esta sempre clicando para adaptar ao melhor tamanho a cada nova visita. Uma vez adaptado o cookie já guardará a informação e em uma nova visita tudo estará na mesma configuração.
- Por trabalhar com a biblioteca jQuery é completamente Cross-browser. Testado em FireFox 3+, Internet Explorer 6+, Chrome, Opera e Safari.
Faça o download do Plugin Font Size 1.0.

Criando listas clicáveis e acessíveis com Jquery

ramonvictor — Fri, 03 Jul 2009 17:45:42 +0000

O site já esta pronto, aquela lista de conteúdos relacionados (geralmente localizada na coluna direita) está funcionando perfeitamente. Porém o Designer faz uma proposta de melhoria de usabilidade, solicitando que não apenas o link do título seja clicável, mas o item da lista por inteiro (tag

). Como resolvemos esse problema?

Demo do resultado.

Para melhor entendimento, vejamos primeiramente o código XHTML abaixo:


 Título da notícia relacionada
   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed feugiat mauris et leo congue in fermentum neque volutpat. Aenean dignissim leo eu erat suscipit id condimentum mi adipiscing
 
 Título da notícia relacionada
   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed feugiat mauris et leo congue in fermentum neque volutpat. Aenean dignissim leo eu erat suscipit id condimentum mi adipiscing
 
 Título da notícia relacionada
   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed feugiat mauris et leo congue in fermentum neque volutpat. Aenean dignissim leo eu erat suscipit id condimentum mi adipiscing

Antes da prática de se trabalhar com DOM (javascript), esse problema era resolvido da seguinte forma, colocava-se a tag como pai da

, o que não é semanticamente correto. Pois a tag é do tipo inline e

do tipo block. Segundo as recomendações do W3C os elementos do tipo inline devem está contidos dentro de elementos block, logo não é válido declarar block dentro de inline.

A solução encontrada foi resgatar, via jquery, o atributo “href” da primeira tag e adicionar o evento click na

. Para complementar o script criei um efeito hover na

que pode ser personalizado na classe “.hover” no CSS.

O resultado:

CSS

* { margin: 0; padding: 0}   ul { list-style: none} //reset
body { font-family: "Trebuchet MS", Arial; font-size: 12px}
.lista_script li {
  border-bottom: 1px solid #e1e1e1;
  padding: 10px
}
.lista_script li h3 {
  margin-bottom: .7em;
  font-size:14px
}
.lista_script .hover { background-color: #ececec}
.lista_script li {cursor: pointer}

Javascript (jquery)

Não esquecer de colocar dentro da tag .

$(document).ready(function() {
//função efeito hover
  $(".lista_script li").hover(function () {
      $(this).addClass("hover");
    },
    function () {
      $(this).removeClass("hover");
  });
//função click
  $(".lista_script li").click(function() {
     var destino = $(this).find("a:first").attr("href");
     //resgatando link da primeira tag "a" dentro da "li"
     window.location = destino;
  });
});

Vantagens

Executa as funções do jquery via DOM, desta forma não é necessário adicionar novos atributos nos elementos do XHTML.
XHTML acessível, pois mesmo que o browser não tenha suporte a javascript o usuário poderá utilizar o link do título normalmente.
Funciona nos principais browsers: Internet Explorer 6+, FireFox, Chrome, Safari e Opera.

Faça o download do tutorial e ajuste às suas necessidades.

Ramon Victor » Acessibilidade