SEO e acessibilidade: SEO técnico [Series Part 3]

SEO e acessibilidade: SEO técnico [Series Part 3]

As opiniões do autor são inteiramente suas (excluindo o evento improvável de hipnose) e podem nem sempre refletir as opiniões de Moz.

Esperamos que você tenha gostado desta série sobre SEO e acessibilidade. Na parte final, Cooper mostra como as estratégias técnicas de SEO que você implementa em seu site podem ajudar a torná-lo mais perceptível, operável, compreensível e robusto.

Foto do quadro branco com notas manuscritas sobre como os SEOs técnicos podem se concentrar na acessibilidade.
Clique na imagem do quadro branco acima para abrir uma versão ampliada em uma nova guia!

Transcrição de Vídeo

Ei, fãs de Moz. Bem-vindo à última edição do Whiteboard Friday. Sou Cooper Hollmaier. Faço SEO desde 2016 e hoje trabalho para um grande varejista de outdoor ajudando nossa estratégia técnica de SEO a ganhar vida. Muito obrigado por participar desta série sobre SEO e acessibilidade.

Espero que você tenha obtido uma perspectiva ampla e novas dicas e truques para a criação de conteúdo que não apenas esteja ressoando com seu público, tenha um bom desempenho na pesquisa, mas também seja acessível a mais pessoas. Hoje vamos falar sobre SEO técnico e acessibilidade.

SEO técnico e acessibilidade

Vamos mergulhar. Da última vez que falamos sobre Diretrizes de acessibilidade de conteúdo da web, e você deve se lembrar que os quatro princípios de WCAG são perceptíveis, operáveis, compreensíveis e robustos.

Perceptível

Como um SEO técnico, você provavelmente está mais preocupado em ser perceptível porque suas operações diárias, seu fluxo de trabalho diário envolve garantir que as páginas, o conteúdo, as experiências que você está criando sejam acessíveis para pesquisa motores e perceptível para os motores de busca.

Muitas vezes, quando passamos por recomendações de SEO ou auditorias de SEO, ouço muitos temas comuns, como a tag do cabeçalho embutida na imagem e, portanto, um mecanismo de pesquisa não pode vê-la, ou o conteúdo que estou produzindo é visível para os bots, mas não para as pessoas. Esses são problemas com a percepção de nível básico. Eu quero que você pegue essa mentalidade e considere se você a aplica a todo o seu público também. Assim, todos os seus funcionários que desejam se envolver com seu serviço, produto ou experiência podem perceber todas as coisas que você tem a oferecer em um nível básico?

1. Estilos

Imagem de uma lista manuscrita de alterações de estilo, incluindo texto nativo, sem preenchimento de palavras-chave e contraste de cores.

Algumas coisas que você pode estar pensando seriam semelhantes ao que veria nesta auditoria, como: Todo o meu texto na página está visível? É um texto ativo? É nativo da página, então posso selecioná-lo e copiá-lo e colá-lo ou está embutido na imagem e inacessível por tecnologia assistiva ou navegadores ou o que você quiser? Você também pode estar pensando: a cor está em contraste com meu plano de fundo e meu texto, é o contraste certo?

Existe clareza e nitidez suficientes entre os elementos do meu layout? Se as coisas parecerem um pouco confusas ou se não estiver claro que algo está acessível para um mecanismo de pesquisa e um usuário, volte para a prancheta e descubra como fazer as duas coisas funcionarem bem.

2. Rich media

Imagem da lista manuscrita de melhorias de rich media.

Também gostamos de adicionar imagens, texto, vídeo e áudio às páginas que estamos construindo para nossos clientes. É importante que esses elementos ricos, agora que ultrapassamos o texto básico e os elementos de estilo, os elementos ricos que estamos colocando na página também podem ser percebidos por todos os seus usuários. Existem algumas coisas que podemos fazer para que isso aconteça. Para imagens, dar a elas uma alternativa em texto e fornecer algo que seja adicional a essa imagem ajudará a ser vista por um leitor de tela e entendida por alguém com deficiência visual.

Também nomear coisas com nomes amigáveis ​​para humanos versus “DSC1352.JPEG” vai ajudar os mecanismos de pesquisa, bem como a tecnologia assistiva, a ver essa imagem e entender o que ela é. Contexto na página, também é importante que você coloque imagens em páginas que agregam valor. Você quer iluminar um usuário com algum conteúdo adicional para dar a ele um pouco mais de sensação ou dar a ele um pouco mais de contexto sobre o que você está falando. Adicione imagens de valor, não apenas para aparecer na pesquisa de imagens do Google.

E quanto ao vídeo? Então, o vídeo é um pouco diferente. O vídeo contém uma série de imagens em movimento. Portanto, toda vez que penso em movimento, penso comigo mesmo: “Como posso ter certeza de que, se um usuário quiser parar esse movimento, ele pode?”

Ter controles de reprodução claros é crucial quando falamos sobre acessibilidade, bem como ter uma ótima experiência de player de vídeo para qualquer usuário. Além disso, equivalentes síncronos para essas alternativas de texto. Falamos sobre imagens com alternativas de texto. Os vídeos também precisam ter alternativas em texto, mas precisam ser sincronizados com o tempo. Caso contrário, eles não farão sentido no contexto.

Em seguida, certifique-se de que eles são distinguíveis. Isso é o mesmo entre vídeo e áudio. Queremos ter certeza de que o primeiro plano e o fundo são facilmente distinguíveis um do outro. Se o seu vídeo parecer turvo, se o áudio estiver turvo e forçar meus ouvidos ou olhos para conseguir ver o conteúdo e entender o que está acontecendo, você precisa ser um pouco mais nítido, um pouco mais claro essas duas distinções.

Em seguida, transcrições de texto. Assim como você precisa de legendas ocultas para vídeos, para áudio você quer ter uma transcrição de texto, então se eu estiver em um local barulhento e não conseguir ouvir o áudio ou não estou com meus fones de ouvido conectados ou preciso para usar tecnologia assistiva, consigo acessar esse áudio.

Todas essas são coisas que você verá ao revisar o código como um SEO técnico e das quais você deve estar ciente.

Se você não tem essas coisas acontecendo, em seu site, eu o capacitaria a fazer essas perguntas, as perguntas difíceis como: Ei, existe uma alternativa em texto para esta imagem? Como uma pessoa com deficiência visual, como uma pessoa com deficiência auditiva terá acesso a essas coisas?

3. Estrutura da página

Foto de imagens desenhadas à mão comparando diferentes estruturas de página.

Três e quatro são sobre a estrutura da página e HTML semântico. Então, isso é um pouco menos sobre isso é perceptível e é meio que compreensível.

É meio que compreensível, mas deveria ser um pouco sobre percepção também. Ter um monte de H1s em uma página, como você pode imaginar, um mecanismo de busca pode parecer muito confuso, certo? Eles são como, ok, há um monte de H1s nesta página. Não tenho certeza do que é esta página. Adicionar estrutura e cabeçalhos em cascata para significar relacionamentos pai-filho ajudará seu conteúdo a ser um pouco mais perceptível. Vai ser mais fácil entender o que está acontecendo.

4. HTML semântico

Mesma coisa com HTML semântico. Temos a tendência de colocar muitos divs e spans e elementos não identificáveis ​​em nosso HTML. Mas marcando-os de maneiras mais adequadas, para que possamos entender seu significado, entender o que essas tags contêm, seja navegação ou formulários ou tabelas, fornecendo essa camada extra de informação e compreensibilidade que permitirá mecanismos de pesquisa e tecnologia assistiva para ser capaz de analisar essas coisas, para permitir que eles percebam as coisas que você está colocando em sua página que são diferentes umas das outras e fornecem uma experiência mais rica.

Operável

Ok, então somos capazes de perceber o conteúdo. Mas como podemos ter certeza de que é operável?

1. Sitemaps HTML

Foto de um exemplo de sitemap HTML desenhado à mão.

Algumas recomendações de SEO que geralmente vejo as pessoas fazendo são construir um sitemap em HTML e colocar migalhas de pão em sua página. Muitas vezes você pode obter alguma resistência com isso. O mapa do site em HTML é muito importante que conhecemos para SEO, para descoberta dessas páginas profundas na hierarquia de nosso site.

Sabemos que migalhas de pão também são igualmente importantes para a descoberta. Ambos os elementos ajudam os usuários com tecnologia assistiva a navegar melhor no site. O mapa do site HTML permite se o seu menu não incluir todas as páginas do seu site ou se for confuso ou se você estiver usando JavaScript ou alguma outra tecnologia que não está acessível para minha pilha de tecnologia.

2. Pão ralado

Foto de exemplo de farinha de rosca desenhada à mão.

Em seguida, a localização atual permite que eu analise para cima e para baixo o particular, digamos que seja uma página de pesquisa de produto em um site de e-commerce, sem ter que voltar ao menu e analisar cada item do menu novamente. Portanto, esses dois são super importantes para a navegação, mas também especialmente para pessoas que navegam com um teclado e usam tecnologia assistiva.

3. Desenvolva primeiro o teclado

Foto do teclado e do computador desenhado à mão.

Então, uma coisa não-SEO, mas importante e identificável, desenvolva seu site e seu teclado de experiência primeiro. Nem todo mundo tem um mouse ou a capacidade de usá-lo devido a uma deficiência motora ou devido a uma deficiência ou devido à falta de tecnologia ou hardware. Portanto, certifique-se de desenvolver o teclado primeiro, e você irá encapsular mais daquelas pessoas que deseja encapsular com o seu público.

Compreensível

1. Língua

Foto de código HTML escrito à mão especificando LANG =

Compreensível. Então, falamos em SEO internacional, quando lidamos com diferentes países e diferentes idiomas, como é importante usar o HTML em nossa página para significar qual é o idioma da página. Ajuda os motores de busca a fornecer os resultados certos no contexto certo, talvez nacional ou internacional. Ele também ajuda os leitores de tela a ler seu conteúdo em voz alta no idioma certo.

2. Layout de navegação

Foto de exemplos de páginas da web de mão desenhada.

Em seguida, layout de navegação e intersticiais eu acho que são bastante comuns, mas ninguém gosta de uma navegação ou layout de um site que seja confuso. Quanto mais fácil você fizer isso, mais fácil será para as pessoas converterem ou fazerem o que você procura com este site, seja aprender, comprar ou se envolver em um serviço. É mais fácil quando a navegação e o layout são simplificados e não usamos palavras diferentes em lugares diferentes para significar a mesma coisa. É ainda mais importante para pessoas com tecnologia assistiva.

3. Intersticiais

Foto da página desenhada à mão com um

Intersticiais, ninguém gosta daqueles pop-ups na nossa cara, que não nos permitem navegar no resto do site. O Google também não os ama. Mas especialmente as pessoas com tecnologia assistiva, se não tratarmos esses pop-ups da maneira certa, vamos acabar em um cenário em que os usuários podem estar em uma armadilha de teclado e não podem sair do intersticial ou não entendem que um intersticial está até mesmo colocado na página. Portanto, é importante estar muito atento ao usar intersticiais.

Robusto

Por último, mas não menos importante, é robusto. Como podemos ter certeza de que o conteúdo que colocamos na página é compatível com uma grande variedade de dispositivos e cenários?

1. Validação

Foto de exemplo desenhado à mão de validação JSON + LD.

Usar o HTML adequado é uma ótima maneira de fazer isso. Você pode usar um validador e olhar seu HTML, CSS e JSON-LD. Criando o código certo e especialmente quando você estiver usando HTML semântico, além de fornecer significado a esse código, você terá uma experiência muito melhor e tudo o que sua construção será mais digerível.

2. Responsivo

Foto de imagem desenhada à mão de páginas da web redimensionadas para dispositivos móveis, telas médias e grandes.

O seu site é responsivo? Você já deveria estar fazendo isso. Mas se você não estiver, certifique-se de que esteja operando em um dispositivo móvel, desktop e tablet e que o layout permaneça o mesmo, talvez seja redimensionado ou recriado de uma maneira diferente.

3. Interactável

Foto de uma página da web desenhada à mão com setas para indicar as diferentes interações disponíveis.

Certifique-se de que seja interativo. Se um usuário deseja ser capaz de aumentar o zoom porque tem uma deficiência visual ou deseja alterar as cores, a tecnologia do seu site permite que ele faça isso? Deveria. Se você fizer essas três coisas na parte inferior, acho que vai fazer muito trabalho pesado e você vai ter que fazer muito menos trabalho porque você meio que construiu na estrutura, a base para ser acessível .

Isso é SEO técnico e acessibilidade. Se você tiver mais perguntas ou quiser algumas ferramentas de validação, existem algumas no lado direito aqui, ou você pode me contactar no Twitter @cooperhollmaier para mais alguns conselhos. Mas muito obrigado por ouvir Whiteboard Friday e acessibilidade junto com SEO. Espero que você aproveite isso e se torne cada vez mais inclusivo na maneira como fará SEO no futuro.

Transcrição de vídeo de Speechpad.com


Recursos

Fonte

Deixe uma resposta

Fechar Menu