1 of 61

2 of 61

Acessibilidade para turbinar as estratégias de Black Friday

Foto

AMANDA

LYRA

3 of 61

Quem sou eu

Especialista em Acessibilidade Digital

Líder de Novos negócios e Relacionamento corporativo ASID Brasil

Artista musical

Palestrante de Diversidade e Inclusão

Consultora de Acessibilidade e D&I

Pessoa com Deficiência

4 of 61

Análise

De cenário.

Pessoas com Deficiências, acessibilidade, legislação

01

5 of 61

\

População Global�7.7 Bilhões�

Pessoas com Deficiência

População em envelhecimento

Amigos e Família

Todos os demais

+ 3 bilhões

+ 2.4 bilhões

+ 700 milhões

+ 1 Bilhão

6 of 61

11 BILHÕES

de reais por mês

de renda disponível, segundo o IBGE

Pessoas com Deficiências movimentam

7 of 61

DADOS PROCOM

74,18%

tem dificuldades

em comprar

e acessar serviços no comércio virtual

Desafios:

  • site não acessível

  • fazer cadastro e/ou validar senhas e acessos

  • obter informações sobre os produtos

das pessoas

com deficiências e seus familiares compram

pela internet.

39,24%

8 of 61

SITE ACESSÍVEL

É lei desde 2016

Art. 63. É obrigatória a acessibilidade nos sítios da internet mantidos por empresas com sede ou representação comercial no País ou por órgãos de governo, para uso da pessoa com deficiência, garantindo-lhe acesso às informações disponíveis, conforme as melhores práticas e diretrizes de acessibilidade adotadas internacionalmente.

9 of 61

Mas apenas

0,89%

dos sites brasileiros

são acessíveis

Segundo pesquisa do Movimento Web Para Todos e Big Corp

10 of 61

Por que essas informações

são importantes para SEO?

“Organizar as informações disponíveis no mundo e torná-las acessíveis e úteis para todas as pessoas.”

Vamos começar refletindo sobre a missão do Google...

11 of 61

Think With Google

12 of 61

Think With Google

13 of 61

Think With Google

14 of 61

Think With Google

15 of 61

As coisas

começaram a mudar!

16 of 61

CONCEITO

ACESSIBILIDADE.

02

17 of 61

ACESSIBILIDADE

É A QUALIDADE DAQUILO

QUE TEM ACESSO FÁCIL!

18 of 61

Imagine

que o seu site está

no 20º andar de um prédio

sem acessibilidade

Seu conteúdo

Seus clientes

19 of 61

O que faria essa jornada ser fácil

e rápida?

você

usuários

20 of 61

Na web, a acessibilidade funciona como um

elevador digital

21 of 61

E o que isso tem a ver com SEO?

22 of 61

Quem visita as páginas de um site?

Humanos e Máquinas

23 of 61

Acessibilidade é bom pra quem?

+11

MILHÕES

+8

MILHÕES

+13

MILHÕES

2,5

MILHÕES

com deficiências

INTELECTUAIS

com deficiências

VISUAIS

e dificuldade de enxergar

com deficiências

AUDITIVAS

com DALTONISMO

+35

MILHÕES

com deficiências

FÍSICAS

24 of 61

Acessibilidade é bom pra quem?

+242

MILHÕES

+37.7

MILHÕES

+21.8

MILHÕES

Neurodiversos

Com mais 60 anos

Pessoas que usam celular

25 of 61

6 benefícios da acessibilidade

para a performance

  1. Usabilidade

  • Ranqueamento

  • Posicionamento de marca

  • Ampliação do público

  • Inovação

  • Proteção Jurídica

PCD

60+

Neurodiversas

Algoritmos

Tecnologias Assistivas

PSD

26 of 61

Aprendendo na prática

03

Como saber se

o site está acessível?

27 of 61

Avaliação técnica

com base na WCAG

(Web Content Accessibility Guidelines)

Existem ferramentas que mapeiam todo o site pelo código HTML e apontam o que é preciso corrigir para cumprir as diretrizes da WCAG. Como o Acces Monitor, Ases, Wave e IBM Equal Access.

28 of 61

Quais são os

princícios da WCAG

Perceptível

Informações

e componentes de interface apresentadas de forma que o usuário possa percebê-las usando UM de seus sentidos.

Robusto

O conteúdo deve permitir uma interpretação confiável por uma vasta quantidade de usuários, incluindo aqueles que usam tecnologias assistivas.

Operável

Os componentes de interface e navegação devem ser operáveis e não podem exigir do usuário uma interação que ele não possa executar.

Compreensível

A informação e a operação dos componentes da interface do site devem ser compreensíveis e diretas.

29 of 61

ACESSIBILIDADE

TURBINANDO O SEO DA BLACK FRIDAY (até rimou!)

04

30 of 61

65% da etapa de avaliação

é composta pela VALIDAÇÃO HUMANA!

31 of 61

�É preciso realizar testes, experimentações, uso de leitor de tela, simuladores de deficiências e outras tecnologias assistivas, além de unir tudo isso com o conhecimento de causa.

NADA SOBRE NÓS, SEM NÓS

32 of 61

Experiência do usuário

33 of 61

Experiência do usuário

34 of 61

O QUE TODO PROFISSIONAL DE SEO DEVE SABER SOBRE SOBRE ACESSIBILIDADE?

35 of 61

NAVEGAÇÃO ACESSÍVEL POR TECLADO

E ELEMENTOS FOCALIZÁVEIS

SÃO ESSENCIAIS

Para testes rápidos, experimente navegar no seu site utilizando apenas o teclado, usando a tecla TAB para navegar entre elementos clicáveis.

36 of 61

Alguns elementos como os links <a> já são focalizados como padrão, porém existem elementos que não tem esse padrão, por isso a tag deve ser usada.

Se não desejar definir a ordem, basta usar seu elemento com foco tabindex="0"em todos esses elementos.

O tabindex="-1" também pode ser usado para definir a hierarquia dos elementos, exemplo:

DICA:

37 of 61

38 of 61

LANDMARKS, SKIP LINKS E BREADCRUMBS SÃO PRIMORDIAIS

As LANDMARKS (ou pontos de referência), delimitam as áreas da página, para que os SKIP LINKS (links de pular conteúdo) sejam implementados e permitam que o usuário pule de uma área para outra facilmente.

Já os BREADCRUMBS auxiliam os usuários a entenderem o próprio fluxo de navegação no site!

39 of 61

SKIP LINKS

40 of 61

Alt Text deve ser usado com sabedoria

41 of 61

Heading Tag

vai além do H1

Quem usa leitor de tela, também navega por meio de Heading Tags

elas ajudam a organizar as informações da página de uma forma lógica – para o usuário e para o Google.

42 of 61

Heading Tag vai além do H1

H1

H2

H2

H2

H2

H2

H2

Quem usa leitor de tela, também navega por meio de Heading Tags

elas ajudam a organizar as informações da página de uma forma lógica – para o usuário e para o Google.

43 of 61

WAI-ARIA E DADOS ESTRUTURADOS SÃO PRIMOS

As tags de WAI-ARIA são atributos adicionados a elementos HTML para melhorar a acessibilidade para pessoas com deficiência, permitindo que elas compreendam e interajam com o conteúdo de forma adequada.

Melhora na

Acessibilidade,

experiência

do usuário e

desempenho

Orgânico!

WAI-ARIA

=

DADOS

ESTRUTURADOS

+

44 of 61

LEGENDAS OTIMIZADAS, melhoram

a performance em vídeos

45 of 61

  • Responsividade
  • HTML Semântico
  • Idioma da páginas
  • Sitemap
  • Formulários acessíveis
  • Legendas e transcrições de vídeos
  • Foco do teclado
  • Hierarquia de conteúdo
  • Etc

Outros fatores técnicos:

46 of 61

OTIMIZAÇÃO PARA

PÁGINAS DE PRODUTO

47 of 61

DESCRIÇÃO DE PRODUTOS

Que produto você imaginaria,

com base nas informações abaixo?

Alt Text:

INEXISTENTE

Descrição do site:

“BLAZER NAUTICO STRETCH

COMPOSIÇÃO

92% Poliamida 8% Elastano

CÓDIGO DO PRODUTO

Ref: 0064267040”

48 of 61

DESCRIÇÃO DE PRODUTOS

49 of 61

DESCRIÇÃO DE PRODUTOS

50 of 61

CONTRASTE DE TEXTO E IMAGEM

51 of 61

Pessoas com daltonismo ou deficiências visuais se guiam pelo nome das cores e muitas pessoas buscam por “esmalte vermelho” e não por “esmalte pura sedução” em sites de busca.

52 of 61

INFORMAÇÕES ADICIONAIS

SOBRE O PRODUTO NA DESCRIÇÃO:

  • TAMANHO/DIMENSÕES
  • PESO
  • OPÇÃO DE CUSTOMIZAÇÃO
  • CORES DISPONÍVEIS
  • FORMA DE ENTREGA

53 of 61

Incenso Massala Nag Champa Darshan Mix 6cx 15gr+ Brinde

54 of 61

O que poderia melhorar a experiência de todos os usuários:

  • O título poderia ser: Kit de incensos de massala Nag Champa variados – 6 caixas + Brinde

  • Deveria estar especificado que este kit contém aromas variados e que podem vir repetidos, que as imagens são ilustrativas e quais são opções que podem vir neste kit.

  • As informações sobre a empresa poderiam estar no final do texto, afinal o usuário busca mais detalhes sobre o produto, em primeiro lugar.

  • As imagens deveriam conter texto alternativo

55 of 61

CONCLUSÃO

56 of 61

Comece usando

Um validador automático

57 of 61

Crie estratégias pensando

em acessibilidade

  • Utilize validadores automáticos
  • Ative o leitor de tela e navegue pelo teclado
  • Navegue usando a tecla TAB
  • Desabilite as imagens
  • Dê zoom em 200% e 400%
  • Use simuladores de daltonismo e deficiências
  • Assista a navegação de Pessoas com Deficiências
  • Avalie o conteúdo escrito
  • CONTRATE ESPECIALISTAS PCD para te ajudar

58 of 61

ACESSIBILIDADE NÃO É PARA PESSOAS COM DEFICIÊNCIAS,

É PARA TODOS!

59 of 61

Quantos elevadores digitais você está construindo para seu cliente?

60 of 61

Preparei um material com plugins e ferramentas para te ajudar nessa missão!

Entre em contato

e solicite o seu =)

61 of 61

Obrigada!

Foto

Amanda

Lyra