Web Semântica: transformando código em conhecimento

Com o surgimento dos rich snippets (RFDa, Microformats ou Schema.org) e das novas tags do HTML5, o tema “web semântica” voltou a ser explorado com mais força pela comunidade de desenvolvedores.

Esse tema torna-se cada vez mais importante diante de como realizamos nossas atividades diárias. Vivemos na era onde praticamente tudo o que fazemos tem a participação de uma entidade digital. Sim! Temos de admitir que somos dependentes de eletrodomésticos, computadores, celulares e claro, do Google. Mais do que isso, estamos cada vez mais perto de um futuro onde esses sistemas digitais deixam de ser meros objetos inanimados e passam a ser entidades artificiais capazes de entender os humanos.

De uma forma simples, web semântica é uma forma de dar significado humano ao código de um sistema – uma maneira de explicar para as maquinas o que determinada informação significa, e quão importante ele deve ser para uma pessoa.

Ok Leandro, isso é lindo, e a idéia é ótima. Agora seja legal e mostre como se faz.

Adicionando significado ao seu código

Veja três dicas para aumentar a semântica e a relevância do seu conteúdo.

HTML Semântico

O primeiro passo é entender as tags do HTML e usá-las de acordo com o seu objetivo. Cada tag possui um significado que define seu propósito no documento. Por exemplo, a tag <a> é responsável por criar links dentro da página, ou seja, ligações entre diferentes documentos.

Usar corretamente as headings tags (h1, h2, h3) é um ponto importante. Essas tags tem como objetivo definir os títulos das páginas e a importância de cada título e subtítulo. O H1 é o título principal. O H2 é um subtítulo do H1, o H3 é um subtítulo do H2, e assim por diante. Usá-los de forma hierárquica ajuda a entender com maior precisão o sentido lógico da informação.

O HTML5 nos trouxe novas tags de bloco: header, section, footer, article, aside e nav. Essas tags definem melhor o que cada bloco de conteúdo representa e qual a sua importância e relevância para o leitor. No entanto, mesmo o HTML5 tem suas limitações quanto ao uso semântico. Então vamos para o próximo passo: rich snippets.

Criando rich snippets com dados estruturados

“Os Rich snippets são projetados para resumir o conteúdo de uma página de forma que torna ainda mais fácil para os usuários entenderem no que consiste a página nos resultados de pesquisa.” – Definição do Google

Os rich snippets são criados através de informações inseridas na estrutura do documento, através de atributos do HTML. É possível adicionar informações semânticas em reviews, empresas e organizações, pessoas, produtos, lugares, eventos, entre outros.

Com essas informações, diversos sistemas conseguem entender e classificar melhor que tipo de conteúdo é apresentado em determinada página. Embora tenham sido criados para ajudar os buscadores no trabalho de indexar conteúdo e trazer resultados de busca relevantes, lembre-se que o foco deve ser sempre o usuário que terá acesso a essa informação. Portanto, quanto mais claras essas informações forem para o usuário, melhor.

Nas páginas de suporte do Google, você pode ter acesso a especificações e exemplos de cada um desses dados estruturados. Você pode implementá-los e testá-los usando a Ferramenta de teste de dados estruturados do Google.

WAI-ARIA: tornando seu site acessível

“WAI-ARIA (Accessible Rich Internet Applications) define uma forma de tornar o conteúdo e aplicativos web mais acessíveis a pessoas com deficiências.” – Definição traduzida do W3C

Sempre devemos nos lembrar que, embora o conteúdo do nosso site deva ser direcionado para as pessoas, em alguns casos, quem de fato irá ler o conteúdo será um “robô”. Muitas pessoas com diferentes tipos de necessidades especiais (como pessoas cegas) precisam das máquinas para consumir o conteúdo disponível na web. E você se lembra qual é mesmo o objetivo da web semântica? Ajudar a explicar o que determinada informação significa, e nesse caso, é extremamente importante que o leitor de tela entenda com precisão o conteúdo, para depois repassá-lo ao usuário.

WAI-ARIA é similar aos dados estruturados. São alguns atributos inseridos no código HTML, onde podemos descrever alguns elementos da página e sua finalidade. Por exemplo, como um cego vai saber onde está o botão de compra em uma loja virtual? Podemos identificar isso com as informações fornecidas através do WAI-ARIA.

No site do Maujor você encontra alguns exemplos de implementação de WAI-ARIA. Vale a pena conferir ;)

Confira o artigo original publicado no UX.BLOG: Web Semântica: transformando código em conhecimento