Resolução de Problemas de Layout

Design Responsivo: Entenda o que é a técnica e como ela funciona.

O conceito de design responsivo não é uma grande novidade, mas tem chamado bastante atenção nos últimos tempos com o crescimento do mercado de dispositivos móveis, principalmente por conta dos tablets e celulares de tamanhos e resoluções cada vez mais variadas.
Só para você saber, o layout do Midiatismo é um exemplo de design responsivo.
Neste novo contexto dos navegadores e várias resoluções, o design responsivo surge como uma evolução lógica do design de sites, também conhecido como web design. Antes grande parte da internet era acessada por resoluções e navegadores muito semelhantes. Até pouco tempo atrás bastava fazer um site que funcionava em Internet Explorer com resolução máxima de 1024×768 pixels que tudo estava resolvido, claro existiam outras características, mas a grande maioria estava nesse mesmo grupo – no máximo havia os usuários de Mozilla Firefox. Hoje tudo mudou, temos TVs de 50″ polegadas acessando internet, temos celulares que tem telas de 2″ até 5″, tablets de 6″ até 11″ polegadas e sem contar os próprios computadores, que tem telas de netbook até os mais novos iMacs da Apple, colocando uma margem de 11″ até 26″ polegadas.

Esta característica demonstra que um site pode ser visto de diversas formas e em diversos contextos, e é para isto que os sites devem estar preparados. O design responsivo, como o próprio nome já indica, consegue responder ao tamanho da tela para se adequar da melhor forma. Ao invés de criar dois sites separados, um para mobile e um para desktops, como era muito comum hoje, você faz apenas um site que vai se adaptar muito bem a qualquer tela em que ele for carregado.

Você faz um site responsivo ou vai fazer dez sites diferentes

Uma das principais vantagens do design responsivo também se torna um grande problema para as agências digitais. Se você quer que o seu site esteja adaptado aos celulares, smartphones, tablets, notebooks, desktops e TVs, você provavelmente teria que fazer pelo menos 5 sites diferentes. A evolução do design responsivo mudou bastante isto, conseguindo trazer a vantagens de ter diversos sites para um só lugar.
Mas esta facilidade de adaptação também cria um problema para as agências digitais e todos aqueles profissionais que trabalham no desenvolvimento de sites. Como cobrar um site com design responsivo? Você deve somar o valor de vários serviços ou deve ter um valor diferenciado? Você deve oferecer design responsivo em pacotes diferenciados onde cada um tem foco em certos dispositivos?

Claro que o design responsivo não resolve todos os problemas e talvez nem seja a solução para todos, mas definitivamente é um caminho a ser seguido e ainda mais explorado. Muitos defendem que o melhor caminho ainda é um site dedicado a cada dispositivo que pode – e deve – se aproveitar de técnicas de design responsivo.
Há também quem aponte que o design responsivo não é a solução completa, já que ainda não consegue ser totalmente otimizado aos celulares (principalmente no quesito peso e velocidade de carregamento), mas ainda parece ser a melhor solução em relação a custo benefício.

A importância da adoção de padrões na internet

Apesar da existência dos padrões da W3C para tentar igualar as ferramentas baseadas em web, quem desenvolve para web sabe que os padrões não são assim tão padronizados – quem diga o Internet Explorer.
Hoje em dia não há apenas dois navegadores centrais para você se preocupar. Até pouco tempo atrás você fazia o site funcionar no Firefox e – com muito trabalho – no Internet Explorer 6 e 7. Hoje temos Internet Explorer (7, 8, 9 e 10), Firefox, Google Chrome (Desktop, tablet e celular), Safari, Opera (desde desktop até o da televisão) e vários navegadores menores. Tudo isso sem contar a proliferação de sistemas operacionais, hoje em dia não existe “apenas” o Windows, também devemos nos preocupar com o Mac, Linux, Android, iOs, Windows Phone e por aí vai.

A adoção e evolução dos padrões de internet nunca foram tão necessárias como estão sendo agora.

Estes dois termos são essenciais para entender como os navegadores interpretam os sites. Em primeiro o user agent, comumente utilizado para diferenciar o usuário quando ele está acessando através do celular ou do navegador desktop. O “agente de usuário” (tradução literal, por favor, não utilizem ela) é a função dentro do site que identifica as questões técnicas que envolvem o usuário que esta o visitando.
Geralmente esta função é utilizada para diferenciar o site mobile do site normal fazendo apenas uma verificação de navegador e sistema operacional – na verdade ele verifica algumas outras questões mais técnicas que não vem ao caso agora. Mas o problema é que muitos dispositivos e navegadores acabam não entrando na lista, portanto não são direcionados para o site correto.
Por exemplo, quando você acessa o fictício www.exemplodesite.com.br e é redirecionado para om.exemplodesite.com.br é porque provavelmente ele identificou que o seu user agent era mobile. O problema é que se você usar, por exemplo, o Firefox para Android, ele não vai ser identificado e irá mostrar o www.exemplodesite.com.br (Obs.: usei Firefox para Android como exemplo porque isto ocorreu recentemente comigo).
O uset-agent do primeiro iPad era este:Mozilla/5.0 (iPad; U; CPU OS 3_2_1 like Mac OS X; en-us) AppleWebKit/531.21.10 (KHTML, like Gecko) Mobile/7B405
Já os media queries (que podemos traduzir como “Conferência de Mídia”[?]) são uma propriedade do CSS (“código de estilo” das páginas web) que identifica qual a mídia aquele site está sendo carregado e atribui determinado estilo a ela. O design responsivo atual trabalha basicamente com esta função, modificando tamanhos, dimensões e formatos conforme o tamanho da tela do usuário.
Por exemplo, se você abrir o Midiatismo e redimensionar a tela do seu navegador, quando esta função do CSS identificar que se trata de uma tela menor que 760 pixels de largura, ele irá mudar o visual do blog, sem ter nenhuma alteração no conteúdo carregado, apenas na forma como eles estão dispostos.
Você pode entender mais sobre as media queries através desta documentação da W3C.
Só media queries não bastam. Seria impraticável criar uma media querie para cada resolução existente — seriam milhares! Devemos usar poucas media queries e fazer o layout fluir entre os breakpoints.
O segredo é não usar pixels nas medidas, mas priorizar um layout mais fluído e flexível baseado em porcentagens e ems.
Seria até possível criar um site mobile apenas com essa ideia, sem usar media queries. Se tudo for porcentual, o design se adaptaria a todas as resoluções. Mas, na prática, não seria um design capaz de aproveitar o potencial de cada dispositivo. As media queries permitem ajustar o design pensando em adaptar e melhorar a experiência do usuário.

A verdade é que você provavelmente precisará reconstruir boa parte do seu site. Mas para ter um pouco menos de trabalho, recomendo que procure utilizar frameworks que já trabalhem com o design responsivo. Frameworks são estruturas de código já prontas que trazem consigo diversas linhas em CSS, JavaScript e HTML já escritas, facilitando bastante o trabalho do desenvolvedor do site.

Entre os frameworks mais conhecidos podemos citar os seguintes:
Foundation (http://foundation.zurb.com/)
Boostrap (http://twitter.github.com/bootstrap/)
Semantic Grid System (http://semantic.gs/)
Frameless (http://framelessgrid.com/)
Skeleton (http://www.getskeleton.com/)
Golden Grid (http://goldengridsystem.com/)
Fluid Baseline (http://fluidbaselinegrid.com/)
Initializr (http://www.initializr.com/)

Classes condicionais

Existem várias maneiras de se lidar com as diferenças entre browsers quando se trata de CSS. Eu mesmo já falei sobre CSS hacks, comentários condicionais e até uma biblioteca JS que corrige os problemas do IE tornando-o standards compliant. Cada uma delas tem suas vantagens e desvantagens, e ainda vou escrever um post sobre isso, prometo.
Os comentários condicionais costumam ser uma das maneiras mais aceitas e bem vistas de se encarar o problema. Com eles é possível entregar o layout perfeito, sem erros, mantendo o CSS limpo, sem hacks e válido à um custo razoável: o uso um arquivo CSS adicional para o Internet Explorer. Pra quem ainda não conhece, funciona assim:
01.<html>
02.<head>
03.<link rel="stylesheet" type="text/css" href="estilos.css" />
04.<!--[if IE 6]>
05.<link rel="stylesheet" type="text/css" href="estilos-para-ie6.css" />
06.<![endif]-->
07.</head>
08.<body>
09.<div id="menu">conteúdo do site....</div>
10.</body>
11.</html>

Tudo o que estiver dentro das tags <!–[if IE 6]> e <![endif]–> será interpretado apenas pelo Internet Explorer 6. Dessa forma você pode escrever o seu CSS sem nenhum hack, com código 100% válido, e colocar todas as correções em um outro arquivo específico para o IE. A desvantagem é ter 2 arquivos CSS ao invés de um, o que pode ser prejudicial em termos de atualização e manutenção.
Mas e se, ao invés de usar os comentários condicionais para linkar um novo CSS, os usássemos para fazer o seguinte:
01.<html>
02.<head>
03.<link rel="stylesheet" type="text/css" href="estilos.css" />
04.</head>
05.<!--[if IE 6 ]>
06.<body class="ie">
07.<![endif]-->
08.<!--[if !IE 6]>-->
09.<body>
10.<!--<![endif]-->
11.<div id="menu">conteúdo do site....</div>
12.</body>
13.</html>

Isso faz com que a classe “ie” [class="ie"] seja aplicada apenas quando o browser utilizado é o Internet Explorer 6 [if IE 6]. Caso contrário o <body> fica sem nenhuma classe [o sinal "!" significa "não igual"]. Assim, podemos escrever nosso CSS da seguinte maneira:

1.div#menu { color: inherit; } /* linha interpretada por todos os browsers */
2..ie div#menu { color: #ff8000; } /* linha interpretada apenas pelo IE 6 */

Ou seja, podemos colocar todas as correções precedidas pelo seletor de classe “.ie”, dessa forma apenas o IE 6 irá interpretá-las. Eliminamos assim a necessidade de um segundo arquivo e ficamos livres também dos hacks, podendo então escrever CSS 100% válido. 

Padrões de Repetição para Imagens

- Explicar e exemplificar a técnica de padrões de repetição para imagens.
- Aplicar padrões de repetição para resolver problemas de layout.

Os padrões de repetição ou patterns são muito utilizados no web design. HTML os têm e CSS, é claro, também. Todos nós já os teremos usado em muitas ocasiões, para conseguir a repetição de uma imagem que colocamos como fundo de uma página ou de qualquer outro elemento de uma web. O componente Canvas do HTML 5 também tem sua própria implementação dos padrões, com os quais podemos fazer facilmente um mosaico no que se repita constantemente uma imagem.

Definir um padrão

Para definir um padrão utilizamos o método createPattern() que pertence ao contexto do canvas. Este método recebe dois parâmetros. O primeiro é a imagem que desejamos utilizar como padrão e o segundo é o tipo de repetição que queremos implementar.

A imagem que desejamos utilizar podemos tirá-la de um objeto Image de Javascript e o tipo de repetição é similar ao que se utiliza quando se define um fundo de imagem em CSS: "repeat" (para um mosaico que se repete tanto na horizontal quanto na vertical, "repeat-x" (para repetições na horizontal), "repeat-y" (para repetir a imagem na vertical) e "no-repeat", que não produzirá nenhuma repetição).

Existem vários passos prévios a serem realizados antes de se poder utilizar uma imagem:
Criar um objeto Image de Javascript:
var img = new Image();
Associar o arquivo gráfico desejado:
img.src = 'logo-desarrolloweb.gif';
Definir o que desejamos fazer com a imagem, por meio do evento onload, que se ativa quando a imagem está pronta para usar:
img.onload = function(){
//código que desejemos fazer, onde sabemos ao certo que a imagem está disponível.
}

Uma vez que tenhamos definido um padrão, ainda temos metade do trabalho por diante. Esse padrão simplesmente estará declarado como objeto em Javascript e pronto para usar em um canvas, mas para isso devemos configurar o estilo de preenchimento e em seguida preencher de cor uma área.

var meuPadrao = ctx.createPattern(objeto_imagem, 'repeat');

Com a linha anterior teríamos criada uma variável meuPadrao que contem um padrão de imagem pronto para ser utilizado.

Configurar um padrão como estilo de preenchimento de cor

A propriedade fillStyle do contexto do canvas, que vimos ao falar da cor de preenchimento e de traçado em canvas, à parte de especificar a cor de preenchimento, indicar um padrão para utilizar para preencher uma área. Com isto, conseguiremos pintar uma área com um padrão ou mosaico de imagem, em lugar de uma cor plana.

ctx.fillStyle = meuPadrao;

Com isto conseguimos que, na próxima vez que se preencha de cor uma área, se faça com um mosaico de imagem ou pattern, em lugar de uma cor plana.
Agora podemos preencher de cor qualquer área, que será preenchida com o padrão definido anteriormente.
ctx.fillRect(0,0,ctx.canvas.width,ctx.canvas.height);
Com esta linha preencheríamos de cor toda a área disponível no elemento canvas, ou seja, um retângulo que vai desde a coordenada (0,0) até toda a largura e altura do canvas. Como previamente se aplicou o padrão à propriedade fillStyle, em vez de preencher com uma cor se preencherá com um mosaico de imagem.
Para terminar colocamos o código de um exemplo que faz uso de uma imagem para criar o pattern.
window.onload = function(){
//Recebemos o elemento canvas
var ctx = cargaContextoCanvas('meucanvas');
if(ctx){
//Crio uma imagem com um objeto Image de Javascript
var img = new Image();
//indico a URL da imagem
img.src = 'logo-desarrolloweb.gif';
//defino o evento onload do objeto imagem
img.onload = function(){
//Crio um "pattern" no canvas
var meuPadrao = ctx.createPattern(img, 'repeat');
ctx.fillStyle = meuPadrao;
ctx.fillRect(0,0,ctx.canvas.width,ctx.canvas.height);
}
}
}
Como vimos, não há muito mistério no uso de padrões. É um pouco mais trabalhoso que colocar uma imagem no canvas, mas muito menos que se tivéssemos que escrever um script para realizar o mosaico "à mão".
Outra forma: Você alguma vez ja teve vontade de colocar um gradiente em diagonal como plano de fundo no seu site ou blog mas percebeu que teria que criar uma imagem inteira e seria inviável, pois ficaria muito pesada?
Uma das coisas que aprendemos em HTML é criar backgrounds usando repetições de imagens. Para criar então um gradiente vertical ou horizontal é perfeitamente viável sem necessitar criar uma imagem inteira, ela só preceisa ter a largura da tela e espessura de 1 ou 2 pixels no caso de gradiente horizontal e vice versa para gradiente vertical. A repetição da imagem criará emendas perfeitas que no final parecerão uma imagem única.
Criar um gradiente diagonal com uma imagem pequena e que se encaixe perfeitamente, principalmente se tiver mais de duas cores acho que não é tarefa fácil.
Felizmente é possível fazer um efeito desses com CSS puro.
Veja o código abaixo:

Então entra em cena o Ultimate CSS Gradient Generator uma ferramenta online que lhe possibilitará criar gradientes lineares, diagonais e até mesmo radiais.

Padrão de repetição de imagens com a propriedade background

As propriedades background permitem definir efeitos para o pano de fundo de elementos

O CSS oferece as seguintes propriedades para definição de background (fundo) de elementos em HTML:
background-color: define uma cor de fundo.
background-image: define uma imagem de fundo.
background-repeat: define uma repetição para uma imagem, definida nas posições horizontal e vertical.
background-attachment: não suportados por todos os navegadores.
background-position: posicionamento da imagem no fundo da página.

Propriedade background-image - Imagem de fundo

A propriedade background-image define uma imagem para ser usada como fundo de um elemento.
Por padrão a imagem é repetida, então ela acaba cobrindo todo o elemento. Por isso é preciso tomar cuidado ao definir imagens menores que o tamanho do elemento na qual a mesma será carregada.
Vejamos como uma imagem pequena pode ser utilizada para preencher todo o corpo de uma página:

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Propriedade background-image em CSS</title>
  </head>
  <body style="background-image: url(imagens/fundo.gif);">
    <h3>Propriedade background-image em CSS</h3>
    <p>
      Esta página tem uma pequena imagem definida com
      a propriedade <strong>background-image</strong>.
    </p>
    <p>
      Como o padrão para essa propriedade é que a mesma
      seja repetida, todo o corpo da página recebe
      esse fundo.
    </p>
  </body>
</html>

A imagem utilizada na página acima é bem pequena, com apenas 10 x 10 pixels, veja:

Mas como a mesma é repetida, o corpo da página acaba sendo renderizado com um mosaico. 
Veja o resultado:

É preciso tomar cuidado para que a apresentação do texto não seja prejudicada pela imagem de fundo.

Propriedade background-repeat - repetição de background

A propriedade background-repeat utiliza geralmente os valores repeat-xe repeat-y, que determinam o eixo no qual uma imagem será repetida.
Há também o valor no-repeat, que evita que a imagem seja repetida, como veremos mais abaixo.
Os valores para a propriedade background-repeat devem ser utilizados em conjunto com a propriedade backgroun-image, para que seja possível determinar qual imagem será repetida.

Valor repeat-x - Repetição na horizontal

Por exemplo, digamos que você queira aplicar um fundo de uma imagem em background no topo da página, como a imagem abaixo:

Se você inserir uma imagem completa, cobrindo toda a largura da área desejada, a página pode demorar para carregar e ficar lenta.
Com CSS e a técnica background-repeat definido com valor repeat-x, é possível utilizar uma imagem bem menor, mais estreita, conhecida em Webdesign como "fatia". Veja a imagem abaixo:

Agora vejamos como utilizar essa "fatia" da imagem em degradê que queremos criar em uma página:

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Propriedade background-repeat na horizontal em CSS</title>
    <style type="text/css">
      body {
        background-image: url(imagens/background_degrade_fatia.gif);
        background-repeat: repeat-x;
      }
    </style>
  </head>
  <body>
    <h3>Background-repeat na horizontal em CSS</h3>
    <p>
      Esta página utiliza uma "fatia" de imagem em degradê
      que será repetida horizontalmente com a propriedade
      <strong>background-repeat</strong> com um valor
      <strong>repeat-x</strong>.
    </p>
    <p>
      Com o valor <strong>repeat-x</strong> a imagem
      será repetida até o tamanho da largura do elemento
      no qual a imagem está inserida, neste caso, no
      corpo do elemento <strong>body</strong>.
    </p>
  </body>
</html>

Ao visualizarmos o resultado, vemos que podemos utilizar imagens pequenas e repeti-las horizontalmente, podendo criar imagens de fundo interessantes:

Valor repeat-y - Repetição na vertical

Assim como podemos repetir imagens na horizontal com a propriedaderepeat-x também podemos repeti-las na vertical com a propriedaderepeat-y.
Essa propriedade é muito útil para criar um fundo para o corpo do documento, evitando a renderização de uma imagem muito grande e de tamanho fixo.
Se o desenvolvedor colocar uma imagem muito grande para o fundo da página inteira pode ocorrer de a página demorar para carregar.
Além disso, uma imagem com tamanho pré-definido no corpo da página limita a altura da mesma ao tamanho da imagem.
Vejamos como é possível definir um fundo para uma página completa utilizando somente uma imagem repetida no eixo y:

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Propriedade background-repeat na vertical em CSS</title>
    <style type="text/css">
      body {
        background-image: url(imagens/fatia_horizontal.gif);
        background-repeat: repeat-y;
      }
    </style>
  </head>
  <body>
    <h3>Background-repeat na vertical em CSS</h3>
    <p>
      Esta página utiliza uma "fatia" de imagem em degradê
      que será repetida verticalmente com a propriedade
      <strong>background-repeat</strong> com um valor
      <strong>repeat-y</strong>.
    </p>
    <p>
      Com o valor <strong>repeat-y</strong> a imagem
      será repetida até o tamanho da altura do elemento
      no qual a imagem está inserida, neste caso, no
      corpo do elemento <strong>body</strong>.
    </p>
  </body>
</html>

A imagem utilizada nesse código é a seguinte:

Visualiando a página:

Valor no-repeat - Evitar repetição de imagem

Como vimos anteriormente, a propriedade background-image por padrão repete a imagem definida até preencher toda a página.
Para evitar que isso ocorra, utiliza-se o valor no-repeat para a propriedade background-image.
Vejamos um exemplo:

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Propriedade background-image sem repetição</title>
    <style type="text/css">
      body {
        background-image: url(imagens/lemmon.png);
        background-repeat: no-repeat;
      }
    </style>
  </head>
  <body>
    <h3>Background-image sem repetição.</h3>
    <p>
      Esta página utiliza uma imagem de fundo
      que foi determinada para não ser repetida
      através do valor <strong>no-repeat</strong>
      para a propriedade <strong>background-image</strong>.
    </p>
    <p>
      Se o valor não for definido como
      <strong>no-repeat</strong> a imagem será
      repetida por toda a página, como é o padrão.
    </p>
  </body>
</html>

Ao visulizarmos a página, vemos que a imagem aparece somente uma vez:

Veja o que aconteceria se não fosse definido o valor no-repeat para a propriedade background-repeat:

Técnicas de Substituição de Imagens

- Usar técnicas apropriadas para gerar conteúdos acessíveis e amigáveis (pessoas cegas e motores de busca).

Equivalente Textual

Todas as informações de uma página acessível devem ser apresentadas em texto. Isso significa que, se for usada alguma outra mídia, como imagens e sons, as informações que elas contêm devem ser repetidas numa descrição textual. Essa descrição deve ser "equivalente", isto é, deve transmitir as mesmas informações que os elementos disponibilizados.
Podemos dizer que os exemplos mais comuns de elementos não textuais são imagens de figuras, fotografias, botões, animações, linhas horizontais separadoras, mapas, filmes e sons.
Esses elementos não textuais podem ser tranquilamente utilizados numa página acessível, apenas devemos usar equivalentes textuais, a maioria deles com conteúdo, para dar oportunidade de todos os usuários percebê-los, caso isso seja adequado.
Sons incluem fala, sinais de áudio, sons de alerta, narrativas e trilhas de áudio em vídeo. Nem todos os usuários podem acessar ou utilizar esses elementos diretamente, especialmente surdos e deficientes auditivos, e, assim, necessitam também que a informação ou funcionalidade seja fornecida de outra forma, ou seja, no formato texto ou visual.
De qualquer maneira, o equivalente textual tem a função de traduzir em texto, em linguagem clara e simples, a imagem ou som, especialmente se ele for necessário para o entendimento do conteúdo.
Assim, os equivalentes textuais também são fundamentais para pessoas surdas, só que, ao invés de descreverem imagens, deverão descrever sons. Se existirem sonorizações na página, como mensagens sonoras ou vídeos com informações orais, estas devem estar redundantes em texto, para que a pessoa surda ou com uma deficiência auditiva severa possa absorver o conteúdo transmitido pela sonorização. Nesse caso, a língua gestual também pode ser importante.

Fornecer um texto equivalente para cada elemento não textual

"ALT", "LONGDESC" e "D.LINK" são técnicas para a criação de textos equivalentes.

Instruções e Técnicas

Use o atributo ALT para objetos não textuais simples, tais como figuras e títulos gráficos ou botões, deve-se especificar a descrição textual utilizando o atributo HTML "Alt" (alternativo).
O texto do atributo ALT deve ser escrito cuidadosamente para que possa fornecer informações equivalentes. Se o texto do ALT não transmitir com eficácia as informações que a imagem mostra, ele será inútil. Ao se usar um texto no atributo ALT para fornecer textos equivalentes para imagens utilizadas como links, o texto deve ter sentido como um título do link quando for lido fora do contexto. Para imagens meramente decorativas que não contêm informações, tais como espaçadores, linhas e enchimentos, usa-se o texto Alt vazio. No caso de imagens decorativas do tipo utilizadas em menus e itens de lista, barras separadoras, "coloca-se a imagem em background, através de CSS".

Uso do atributo Alt com texto vazio para objetos que não contêm informações

Para imagens que são meramente decorativas e não contêm informações, tais como espaçadores, marcadores, linhas e enchimentos, usa-se o valor vazio para o atributo ALT (alt=" "). Ele será ignorado pela maioria das tecnologias de auxílio, tais como leitores de tela, e evitará bombardear o usuário com centenas de descrições inúteis, tais como "um espaçador, uma linha azul, marcador, marcador...". Deve-se notar que o texto vazio no atributo Alt tem espaço entre as aspas. Ele não é o mesmo que alt="", que não contém um espaço e, portanto, não é um atributo Alt com texto vazio. Tecnologias de auxílio podem não ignorar objetos com atributo Alt que não contenham espaço.
ALT=" " - ALT Vazio - correto;
ALT="" - ALT Nulo.

Fornecimento de uma longa descrição quando o texto Alt não for adequado

Realmente, o atributo ALT não é útil para explicações complexas demais para serem descritas em poucas palavras. Por exemplo, se for exibir um gráfico que mostre o crescimento populacional de três países (Brasil, Argentina e Uruguai) de 1995 a 2001, pode-se utilizar o atributo ALT para dar uma descrição básica do gráfico, tal como: "Gráfico que mostra o crescimento populacional de Brasil, Argentina e Uruguai, de 1995 a 2001".
Entretanto, as informações contidas no gráfico podem ser muito complexas e exigirem uma descrição muito maior e pormenorizada da informação. O gráfico pode mostrar linhas coloridas com os parâmetros de cada país, permitindo ao usuário identificar rapidamente tendências globais e fazer comparações.
Isto está além da capacidade do atributo ALT e, nesse caso, deve-se utilizar o atributo HTML "LONGDESC" ou um "D" link. Essas duas técnicas permitem aos usuários acessarem um texto separado que descreve o contexto. Longdesc, embora seja parte da especificação do HTML, não é suportado por grande parte dos navegadores. A técnica alternativa "D" link envolve a inserção, além da imagem, de um link apresentado como a letra maiúscula "D". O alvo desse link deve ser uma página web separada com uma longa descrição detalhada para pessoas com deficiência visual. Quando o usuário tiver lido esse texto, ele pode retornar à página com a imagem. "Longdesc" significa "longa descrição".

Imagens em Background acessíveis

Os leitores de tela não possuem somente a função de ler os textos de conteúdos web, mas também de descrever a estrutura das páginas e executar as tarefas propostas por seus aplicativos. Quanto à descrição da estrutura, o leitor ao encontrar elementos (X)HTML os sonoriza e é por isso que se torna importante o desenvolvimento das páginas dentro dos padrões web. Quando um leitor de tela passa por um elemento <a> ele sonoriza "link", quando encontra um elemento <TABLE> ele, da mesma forma, sonoriza "tabela" complementando ainda quantas linhas e colunas essa possui e revelando ao usuário cego a estrutura de células que vem a seguir, quando passa por um elemento <UL> ele "diz" "LISTA DE ITENS" etc. Da mesma forma, ao encontrar um <IMG> ele sonoriza "gráfico" revelando a existência de uma imagem. São essas descrições que facilitam as pessoas cegas entrarem nos links, navegarem nas tabelas de dados de forma mais adequada etc. No caso das imagens, se esta é apenas decorativa e sem outra função que altere o conhecimento dos usuários de leitores de tela, cegos em geral, pode-se colocar essas imagens não como um elemento de marcação (HTML/XHTML), mas apenas no plano de fundo, em CSS, através da propriedade background. Isso faz com que o leitor de tela passe e ignore completamente a existência da imagem.
A grande vantagem disso é não saturar os ouvidos da pessoa com deficiência visual, que passa o tempo todo ouvindo tudo sobre a página, além das informações a que estão interessados. É importantíssimo escutar a existência de um link, de um formulário e de todos ou quase todos os elementos de uma página, mas algumas informações são exageradas e sem utilidade. A página pode ficar "verborrágica" demais. Dessa forma, o uso do atributo ALT vazio e da imagem em background são extremamente utilizados em acessibilidade na web
Entretanto, é bom observar que muitas imagens colocadas em plano de fundo, como aquelas que indicam o destino de um link para um site externo, fartamente utilizadas, deveriam, ao contrário, estarem em (X)HTML, pois possuem informação relevante. Ou seja, se o usuário clicar naquele link sairá do site e pode não ser esse o seu desejo. As pessoas que enxergam estarão avisadas do destino do link, mas as pessoas cegas e de baixa visão, pelo fato do leitor de tela ignorar imagens desse tipo, poderão entrar nele desavisadamente. Deixe essas imagens disponíveis no próprio texto do link e com o seu atributo ALT, por exemplo:
<a href="http://www.bengalalegal.com">Bengala Legal
<img src="img/ext.gif" width="17" height="11" alt="Site Externo." title="Site Externo." /></a>

Imagem sem o atributo ALT.
<img src="img/imagem123.gif" width="43" height="43">

Imagem com o atributo ALT.
<img src="img/imagem123.gif" width="43" height="43" alt="Símbolo de Acessibilidade">

Exemplo de quando a imagem está associada a um link.

Link com imagem sem o atributo ALT.
<a href="http://www.bengalalegal.com"><img src="imagem125.gif" width="100" height="99"></a>

Link com imagem com o atributo ALT.
<a href="http://www.bengalalegal.com"><img src="imagem125.gif" width="100" height="99" alt="Conheça a Bengala Legal"></a>

Exemplo com Atributos ALT, LONGDESC e D.LINK.

O exemplo abaixo irá demonstrar a equivalência textual da imagem do selo da campanha "Acesso de Humor".

D

Código

<img src="selo-humor.jpg" width="100" height="120" alt="Selo da Campanha Acesso de Humor." title="Selo da Campanha Acesso de Humor." longdesc="desc-acessodehumor.php"><br>
<a href="13-desc-acessodehumor.php" title="Descrição textual da imagem do selo">D.</a>

Quando a imagem parece ser um texto.

Letras e textos artisticamente planejados, desenhados na imagem, usados para títulos, cabeçalhos ou logos de empresas não são texto. Texto significa somente o que é chamado de "texto real", digitado no teclado.
Na imagem abaixo temos um exemplo de texto "desenhado", que está na própria imagem e de "texto real", que se apresenta no atributo ALT. A imagem é de um "Quem Somos" e o texto, colocado no ALT, deve ser o mesmo:

Imagem de um texto:  <img src="img/imagem127q.gif" alt="Quem somos" width="106" height="20" />

- Listar e descrever as técnicas de substituição de imagem. Identificar as vantagens e desvantagens de cada técnica.

"Image replacement" pode ser traduzido para "Substituição por imagem". É o termo usado para designar a técnicaCSS de escrever um texto usando uma imagem. Isto amplia as possibilidades de uso de fontes decorativas para escrita, uma vez que o designer não fica restrito às fontes instaladas no dispositivo do usuário, podendo compor seus textos com imagens ao seu inteiro gosto. Na prática a substituição se faz para pequenos textos, em sua grande maioria para o nome ou a designação do site.
Não se vai projetar um texto longo em uma imagem pois isto demandaria um tempo de carregamento da página infinitamente superior ao tempo requerido pelo texto escrito com fonte Arial, Times, Verdana ou seja lá a que for.
A substituição de um texto por uma imagem com uso de CSS deve ser feita de modo a não bloquear a acessibilidade ao texto substituido. Assim é preciso considerar basicamente as seguintes situações em que o texto deverá estar legível:
· CSS desabilitada;
· imagens desabilitadas;
· CSS e imagens desabilitadas;
· navegação com leitor de tela.

Fahrner Image Replacement (FIR)

Todd Fahrner membro do W3C, colaborador da WaSP, desenvolvedor e autor consagrado no universo Web Standards é inventor da técnica de substituir texto por imagem. A técnica inventada por Fahrner recebeu seu nome e é conhecida pelo acrônimo FIR iniciais para Fahrner Image Replacement.

O código FIR:

Radu Darvas <img> Replacement

A técnica de Radu Darvas propõe o uso do elemento IMG na marcação estrutural, para abrigar uma imagem GIF transparente de um pixel com o atributo "alt" definido com o texto da informação passada pela imagem.
O código de Radu Darvas:

Stuart Langridge Image Replacement

A técnica de Stuart não usa o elemento extra SPAN e esconde o texto declarando padding igual a altura da imagem e height igual a zero. Devido ao box model quebrado do IE são acrescidas algumas regras CSS extras para aquele navegador.

Malarkey Image Replacement (MIR)

Na técnica de Malarkey também não aparece elemento extra SPAN e o texto é escondido com uso de letter-spacing muito grande e negativo.
É necessário um 'hack' para o Ópera que interpreta erroneamente a declaração letter-spacing.

Lindsay Image Replacement

Nesta técnica o texto é escondido declarando-se um tamanho de fonte muito pequeno, igual a 1px e fazendo a cor do texto igual a cor do fundo.

Dave Shea Image Replacement

Dave Shea usando a técnica original com um elemento SPAN extra, proposta por Fahrner desenvolveu uma versão usando o atributo title para fornecer um toltip quando o ponteiro do mouse passa sobre a imagem e deixando o elemento SPAN vazio! 

Meu site pessoal

Clique aqui e visite meu site pessoal, deixem comentários.