A Semântica e a Acessibilidade: um casal perfeito

A semântica, bem como a acessibilidade, podem ser aplicadas a tudo. Na construção de um prédio, na dissertarção de uma redação e claro, na criação de sistemas e websites.

Semântica, pode ser definido como: a realização de algo utilizando um padrão formal.

semantica

Como nesta imagem, você pode perceber a utilização da semântica quando se organiza os veículos de transportes com os tipos de transportes (terrestres, aéreos e aquáticos). Imagine que o “land”, “water” e “air” não estivesse nessa representação, ficaria uma bagunça, dificultando o entendimento e a leitura desta imagem.

 

 

No desenvolvimento de sites, é um pouco diferente, mas com o mesmo objetivo e conceito.

Nesta imagem ao lado (clique nela semantica_html5para ampliar), tento mostrar bem como a semântica pode ser utilizada na criação de sites com a nova versão do HTML, definindo bem os elementos em seu local correto e definindo tag’s corretas para cada informação que será exibida ao cliente. Mas e o cliente saberá que o site está utilizando uma boa semântica na sua estrutura? Não, mas os mecanismos de buscas, leitores de telas e navegadores saberão, e é aí que a acessibilidade entra. Somando a compatibilidade do navegador com a interpretação do leitor de tela, as pessoas com deficiência poderão usufruir do site como deveria e como todo mundo usufrui.

Acessibilidade, além da sua definição clássica que é permitir que pessoas com deficiências ou mobilidade reduzida participem de atividades que incluem o uso de produtos, serviços e informação, também podemos incluir o direito de eliminação de barreiras arquitetônicas, de disponibilidade de comunicação, de acesso físico, de equipamentos e programas adequados, de conteúdo e apresentação da informação em formatos alternativos.

Não é fácil, a princípio, avaliar a importância dessa temática associada à concepção de páginas para a web. Mas os dados da W3C (Consórcio para a WEB) e WAI (Iniciativa para a Acessibilidade na Rede) apontam situações e características diversas que o usuário pode apresentar:

  • Incapacidade de ver, ouvir ou deslocar-se, ou grande dificuldade – quando não a impossibilidade – de interpretar certos tipos de informação.
  • Dificuldade visual para ler ou compreender textos.
  • Incapacidade para usar o teclado ou o mouse, ou não dispor deles.
  • Insuficiência de quadros, apresentando apenas texto ou dimensões reduzidas, ou uma ligação muito lenta à Internet.
  • Dificuldade para falar ou compreender, fluentemente, a língua em que o documento foi escrito.
  • Ocupação dos olhos, ouvidos ou mãos, por exemplo, ao volante a caminho do emprego, ou no trabalho em ambiente barulhento.
  • Desatualização, pelo uso de navegador com versão muito antiga, ou navegador completamente diferente dos habituais, ou por voz ou sistema operacional menos difundido.

Um código HTML com uma boa formatação e semântica, pode ajudar muito o seu site tornar-se mais acessível.

10 Dicas rápidas para construir web sites

Guia completo e checklist: www.w3.org/WAI/

  • Imagens e Animações: Use o atributo alt para descrever a função de cada elemento visual.
  • Imagemaps: Use mapas client-side (o tag map) e texto para as regiões clicáveis.
  • Multimídia: Inclua legendas e transcrições para o áudio, e descrições para o vídeo.
  • Híperlinks: Utilize texto que faça sentido fora do contexto. Evite a frase “clique aqui”.
  • Organização da Página: Use cabeçalhos, listas e uma estrutura consistente. Use CSSpara layout e estilo sempre que possível.
  • Gráficos e Diagramas: Sumarize o conteúdo ou use o atributo longdesc.
  • Scripts, applets e plug-ins: Para o caso de estarem desabilitados ou de não serem suportados pelo browser, forneça conteúdo alternativo.
  • Frames: Use o tag noframes e empregue títulos significativos.
  • Tabelas: Torne compreensível a leitura linha a linha. Resuma.
  • Valide seu trabalho: Use as ferramentas, checklist e os guias disponíveis em http://www.w3.org/TR/WCAG.

 

Com a padronização da W3C, os designers e desenvolvedores estão sendo forçados a criar aplicativos mais acessíveis.

As novas tags que vem no HTML 5

  • <article>: Define um artigo.
  • <aside>: Define algum conteúdo relacionado ao artigo.
  • <audio>: Define um streaming de áudio em um documento HTML
  • <canvas>: Define a criação de gráficos em uma página web
  • <command>: Define um botão de comando, como um radiobutton, uma caixa de seleção ou um botão.
  • <datagrid>: Define uma lista de dados selecionáveis. O datagrid é exibido como uma árvore.
  • <datalist>: Define uma lista de dados selecionáveis. Utilize esse elemento juntamente com o elemento input, para fazer uma lista suspensa para um valor de entrada.
  • <datatemplate>: Define um recipiente para o modelo de dados. Deve conter elementos filho que são <rule> para definir um modelo.
  • <details>: define os detalhes de um elemento, no qual o usuário pode ver, e clicar para ocultar.
  • <embed>: Utilizado para incorporar conteúdo no HTML, atuando como um plugin.
  • <eventsource>: Define um destino para eventos enviados por um servidor.
  • <figure>: Especifica ilustrações, imagens, fotos, associado juntamente com alguma legenda.
  • <footer>: Define o rodapé de uma seção ou documento. Normalmente, contém o nome do autor, data em que o documento foi escrito e / ou informações de contato.
  • <header>: Define o cabeçalho de uma seção ou documento.
  • <mark>: Define texto marcado. Utilize a tag <mark> se você quiser destacar partes do seu texto
  • <meter>: Define uma medição. Usado apenas para medições com conhecimento de um valor mínimo e um valor máximo.
  • <nav>: Define uma seção de links de navegação.
  • <nest>: Define o ponto de incício para criação de elementos em um <datatemplate>, utilizado em conjunto com o elemento <rule>.
  • <output>: Define a saída de diferentes tipos de dados, por exemplo, o cálculo efetuado por algum script.
  • <progress>: Define o progresso de uma tarefa de qualquer tipo.
  • <rule>: Define as regras para atualização de um datatemplate. Usado em conjunto com os elementos <datatemplate> e <nest>.
  • <section>: Define as seções em um documento. Tal como capítulos, cabeçalhos, rodapés, ou quaisquer outras seções do documento.
  • <source>: Define recursos para elementos de mídia, como <audio> e <video>.
  • <time>: Define tempo ou data, ou ambos.
  • <video>: Define vídeo, como um clipe de filme ou vídeo de outros fluxos.
  •  

    TAGS PARA CONSTRUIR O LAYOUT NO HTML 5

     

  • <nav>: Define o local do menu
  • <section>: Define uma sessão de conteúdo da página
  • <article>: Define o conteúdo (artigo, textos, postagens, etc)
  • <header>: Define o cabeçalho (topo) de algum elemento (body, section, nav, etc)
  • <footer>: Define o rodapé de algum elemento (body, section, nav, etc)
  • <aside>: Define o local da barra lateral (como um layout em 3 colunas)
  • Lembrando que nada é mágico e nem deve ser, tudo precisa e continua necessitando de estilização com CSS.

    No próximo artigo, irei mostrar alguns exemplos e formas de utilizar essas novas tags.

    Abraços!

    Sobre o HTML 5

    HTML 5 No início de 2009, o W3C anunciou a primeira especificação do HTML5.

    A versão atual do HTML é a 4.0.1, e a versão final do HTML está prometida para 2012.

    Foram feitas grandes alterações que favorecem a semântica, que incluem:

    • novas API’s
    • Elemento <canvas> para desenhos dinâmicos;
    • Network status (online/offline);
    • Utilização de um plugin gratuito de áudio e vídeo via tags;
    • contentEditable – Editor rico de conteúdo;
    • Drag and Drop de elementos;
    • Cross-document e cross-domain messages;
    • Histórico de navegação em Ajax;
    • Geolocation API;
    • Maior controle de dados sobre formulários;
    • Armazenamento de dados no cliente;
    • Web worker threads;
    • Melhoria na depuração de erros;
    • Entre outros avanços.

    Esta evolução da linguagem padrão para web pode eliminar a necessidade de plug-ins para aplicações multimídia em navegadores. Diversos críticos consideram a tecnologia como um forte concorrente ao Flash do Adobe, Silverlight, da Microsoft, e o recente JavaFX, da Sun.

    Recentemente, Shantanu Narayen, diretor executivo do Adobe, disse que o Flash não irá perder mercado, porem a versão 5 do HTML já está sendo chamado de “Flash-killer”. Estas tecnologias precisarão se adaptar rapidamente para conseguir manter-se no mercado, tão popular quanto hoje.

    Na avaliação do co-diretor de ferramentas da Mozilla, Ben Galbraith, as tecnologias viabilizadas pelo HTML 5 como o Canvas para desenhos 2D e o armazenamento de conteúdos no desktop, permitirão que “usemos mais o browser do que nunca”.

    Após dez anos sem atualizações, a forma como se escreve páginas na Internet passa por uma boa transformação. O HTML 5 oferece uma experiência web totalmente diferente para usuários e embora exista um longo caminho para ser finalizado, os navegadores mais importantes, como o Opera, Google Chrome, Safari 4, o novo Firefox 3.5 e o Internet Explorer 8 já implementaram partes da linguagem, incluindo tags de vídeo e suporte à tecnologia Canvas.

    Na versão 4 do HTML, a atual, o navegador não distingue o que é topo, conteúdo, rodapé e menu, mas com o HTML 5 isso irá mudar, veja:

    Estrutura de código com o HTML 4:

    <body>
      <div id="topo">...</div>
       <div id="menu">...</div>
       <div class="content">...</div>
       <div id="barralateral">...</div>
       <div id="rodape">...</div>
      </div>
    </body>

     

    html5_estrutura Estrutura de código com o HTML 5:

    <body>
      <header>...</header>
      <nav>...</nav>
      <section>
        <header>...</header>
        <article>...</article>
        <footer>...</footer>
      </section>
      <aside>...</aside>
      <footer>...</footer>
    </body>

    Ou seja, agora o navegador terá um conhecimento real de como o layout está sendo renderizado, o que é o rodapé, o conteúdo, a barra lateral da direita e etc. E claro, isto irá auxiliar muito os mecânismos de busca a filtrar informações úteis ou não. Talvez o que está em “header” não interesse muito, talvez o mais importante será o que está dentro de “article”, e por ai vai as possibilidades de mudanças que a nova tecnologia nos dará.

    Repare pela imagem representando o layout que os elementos header e footer não são exclusivos da página, mas pode ser usado para representar o topo e o rodapé de qualquer conteúdo (ou article).

    Bom, não vamos extender muito o tópico, resumi bem e de forma simples o que é o novo HTML.

    Nos próximos artigos sobre o HTML 5 eu vou mostrar detalhadamente sobre as novas TAGs e atributos e quais são suas funcionalidades. Também irei mostrar um exemplo prático de como desenvolver o HTML 5.

    Abraços!

    Layouts Semânticos

    Um layout fixo permite ter mais controlo sobreo website porque as páginas terão sempre a mesma largura e os conteúdos irão comportar-se sempre da mesma maneira.
    Um layout líquido ou fluído permite que a página se adapte à largura do ecrã do utilizador, ocupando todo o espaço visível em vez de ficar encostada a um canto ou centrada como acontece com os layouts fixos.
    Um layout elástico é uma mistura do layout fixo com o layout líquido/fluído. Ou seja, a largura da página é extensível até um certo ponto a partir do qual se torna fixa.

    Cada site teu seu estilo de “vida”, e o layout pode ajudar muito na hora de apresentar o site ao público. Por exemplo, eu costumo seguir esse padrão que eu mesmo criei para os meus desenvolvimentos:

    Púbico-alvo jovem e/ou que tem o nível intermediário-avançado na internet: Layout Líquido ou Elástico com a resolução de 800 pixels de largura.

    Púbico-alvo de mais idade e/ou que tem o nível básico na internet: Layout Fixo ou Elástico com a resolução de 1024 pixels de largura.

    Um layout fixo permite ter mais controlo sobre o website porque as páginas terão sempre a mesma largura e os conteúdos irão comportar-se sempre da mesma maneira.
    Um layout líquido ou fluído permite que a página se adapte à largura do ecrã do utilizador, ocupando todo o espaço visível em vez de ficar encostada a um canto ou centrada como acontece com oslayouts fixos.

    Ambas as soluções têm os seus pontos positivos e negativos.

    Layout Fixo

    Pontos positivos:

    • O webdesigner tem controlo sobre a forma como a informação é apresentada;
    • As linhas de texto têm uma largura fixa e curta, o que facilita a leitura de texto no ecrã;

    Pontos negativos:

    • Num ecrã com uma resolução grande, o website fica encostado a um dos lados ou centrado na página, com muito espaço disponível à sua volta;
    • Menor acessibilidade, uma vez queo layout não se adapta às necessidades do utilizador;

    Layout Líquido/Fluído

    Pontos positivos:

    • Maior acessibilidade. Os conteúdos adaptam-se melhor à resolução de ecrã do utilziador;
    • Os conteúdos ocupam toda a área visível do ecrã, permitindo transmitir mais informação;
    • Deixa de haver espaço vazio à voltado website;

    Pontos negativos:

    • Maior dificuldade na leitura de linhas de texto demasiado longas;
    • Perde-se o controlo sobre o posicionamento de alguns elementos na página;

    Não sepode dizer que um doslayouts seja melhor do que o outro porqueambossão opções válidas, dependendo do contextodo website queestamosa desenvolver. No entanto, existe um ponto intermédio: o layout elástico.

    Layout Elástico

    Este tipo de layout é uma mistura do layout fixo com o layout líquido/fluído. Ou seja, a largura da página é extensível até um certo ponto a partir do qual se torna fixa. Na prática, isto significa que podemos ter uma página que tenha uma largura mínima de 800px e uma largura máxima de 1280px. A partir dos 800px para baixo ou dos 1280px para cima (valores de exemplo), a largura não se altera e a página funciona como uma páginacom layout fixo.

    Isto permite ter, ao mesmo tempo, controlo dos elementos na página por parte do webdesigner e controlo da largura da janela por parte do utilizador, eliminando assim alguns pontos negativosidentificados nosdois tipos delayouts anteriores.

    Outro factor interessante é o facto de, num monitor com uma largura muito grande(vamos imaginar um ecrãcom 2028px de largura ;)) o nosso website elástico ocuparia cerca de metade do ecrã e o texto poderia tornar-se demasiado pequeno para se conseguir ler. Ao aumentar o tamanho do textono browser (Firefox: CTRL+), a largura da página irá aumentar na mesma escala. Desta forma, o website irá aumentar a sua largura máxima consoante o tamanho do texto!

    Para conseguir este efeito, basta definir a largura máxima da página em unidades “EM”. Desta forma, a largura da página irá comportar-se da mesma forma como o tamanho do texto, ouseja, responde aos comandos do utilizador para aumentar ou diminuir o seu tamanho.

    Se tiverem um monitor com uma resolução grande (superior a 1024px) podem experimentar aumentar o tamanho do texto agora e verão que a largura desta mesma página irá acompanhar o aumento do texto. Caso a largura da janela seja inferior a 1024px, a página mantém-se fixa e o texto aumenta.