Experiência ou ser encontrado: a escolha que você acha que está fazendo
Dá para construir um site que a máquina não consegue ler e ainda assim dizer a ela o que a tela mostra. A Leal fez os dois extremos num mês: o leal.st serve os 13 nomes de projeto em HTML puro, e o freitag.agency, um domo WebGL sem páginas, ainda nomeia cinco das seis marcas, dentro do rótulo do canvas.
Publicado · 3 min de leitura
Em resumo
- Experiência e ser encontrado não são as duas pontas de um mesmo botão. Quase sempre dá para ter as duas, e o custo são algumas linhas de marcação.
- O HTML descreve um grid de graça. Canvas, vídeo ou mapa não descrevem nada, então a descrição sai da marcação e passa a ser sua.
- Uma cena WebGL pode carregar role="img" e um rótulo que nomeia o que está dentro dela. Não é concessão no design, é a descrição dele.
- A forma deve seguir o jeito como as pessoas chegam. Quem vem da busca quer algo escaneável; público que chega por link direto libera a forma para argumentar.
- Busque a sua própria home com uma requisição HTTP simples. O navegador roda JavaScript e te bajula; a resposta crua não.
Existe uma escolha que designer acha que está fazendo: experiência ou site que pode ser encontrado. Escolhe o domo e abre mão da busca. Escolhe o grid e abre mão da ideia.
Quase nunca é essa a escolha.
O que uma máquina de fato lê
A Leal construiu os dois extremos no mesmo mês, o que é uma posição rara para escrever.
O leal.st é feito para que um robô que não roda JavaScript leia tudo. Buscando o HTML cru do índice de trabalhos, os 13 nomes de projeto estão lá. É o propósito do site.
O freitag.agency é o oposto por construção. O portfólio é um domo em WebGL: sem grid, sem páginas, sem um único link interno. Um robô deveria ler nada.
Ele lê cinco das seis marcas de cliente.
Porque o site declara o que a tela está mostrando
O domo é um canvas. Pixels. Ilegível por definição, e boa intenção nenhuma muda isso. Então o site declara:
O canvas carrega role="img" e um aria-label que nomeia os projetos dentro da cena e explica como abrir um. A linha da marca, que na tela é um objeto 3D, também existe como heading para leitor de tela na marcação.
Duas linhas de HTML. Não é concessão na experiência, nem remendo colado depois: é a descrição do que aquilo é, escrita para quem não pode ver.
O princípio embaixo disso
Um grid é legível para máquina porque o HTML já o descreve. Heading é heading, link é link, e o significado vem junto com a marcação, de graça.
Um canvas não descreve nada. Vídeo também não, nem mapa, nem animação. Quando você constrói um, a descrição não desaparece. Ela muda de lugar: sai da marcação e vai para você.
Então a pergunta real não é experiência ou ser encontrado. É se você está disposto a escrever o que a tela mostra quando a tela para de se explicar sozinha.
Quando cada forma é a certa
O domo funciona para a FREITAG porque o público dela chega por um link que a agência manda. Ninguém busca aquele site. A forma está livre para argumentar.
O grid funciona para o leal.st porque o público chega buscando, e grid existe para ser escaneado e comparado. Escolher um domo ali seria pagar por um argumento que ninguém pediu com a descoberta que paga a conta.
As duas estão certas, e nenhuma está certa por causa da forma. Estão certas porque batem com o jeito como alguém chega.
O que conferir no seu site
Busque a sua home com uma requisição HTTP simples e leia o que volta. Não no navegador, que roda JavaScript e te bajula: a resposta crua.
Se o que importa está lá, a forma está livre. Se não está, a pergunta é se dá para declarar. Quase sempre dá, e em menos linhas do que a discussão que você está tendo sobre isso.
O que medimos
- Nomes de projeto presentes no HTML cru de leal.st/work, sem JavaScript
- 13 of 13
- Buscamos o HTML cru de cada página com uma requisição HTTP simples, sem executar JavaScript, e procuramos na resposta os nomes dos projetos e das marcas. No freitag.agency os nomes aparecem dentro do aria-label do elemento canvas e num heading para leitor de tela.
- Marcas de cliente nomeadas no HTML cru do freitag.agency, um site cujo portfólio é uma cena WebGL sem links internos
- 5 of 6
- Buscamos o HTML cru de cada página com uma requisição HTTP simples, sem executar JavaScript, e procuramos na resposta os nomes dos projetos e das marcas. No freitag.agency os nomes aparecem dentro do aria-label do elemento canvas e num heading para leitor de tela.
Perguntas
- Um aria-label torna um site WebGL acessível?
- Ele torna a cena descritível, que é a parte que a marcação não faz sozinha. Não torna a cena operável: navegação, ordem de foco e controle por teclado são trabalho à parte, e um site que só se atravessa com mouse continua fechado para muita gente.
- O Google indexa um site assim?
- Ele indexa o que consegue ler. Um rótulo em canvas é texto no HTML, então conta. O que um site assim abre mão é da malha de links internos que o buscador usa para entender estrutura, e isso é custo real, não detalhe.
- Como sei qual forma o meu site precisa?
- Olhe como as pessoas chegam hoje. Se a maioria vem da busca, o site é uma ferramenta de ser comparado e precisa ser fácil de escanear. Se a maioria chega por um link que você manda, a forma está livre para argumentar.
Fontes
- The canvas element: fallback content and accessibility · MDN Web Docs
Os projetos por trás disso
- FREITAG® · Uma agência construída do jeito que ela cria.