Na prática os principais problemas de acessibilidade, seus

impactos e como resolvê-los

Flávio e Maurício

Globalcode – Open4education
Introdução

Grande parte dos problemas de

acessibilidade se concentram
em falhas na implementação
semântica dos principais
componentes da interface
digital, os impactos que causam
são enormes e, por outro lado,
evitá-los é mais simples do que
parece.

Globalcode – Open4education
 Quem somos
Flávio Correia
Program Manager Accessibility
Specialists
Pai da Clara, Tallys e do Lucas.
Graduado em Musicoterapia.
Foi servidor público, mas há 11 anos
atua no mercado financeiro.
Já foi atleta de natação, atletismo,
futebol de cegos e atualmente tá só
no goalball.
Maurício Pereiro
Accessibility Specialists
Pai do Chang e de um papagaio
“loko” de pedra.
Atuando no mercado financeiro a
mais de 20 anos.
Amante de séries de TV de ficção
científica e terror.
Globalcode – Open4education
Alinhando expectativas
O que veremos hoje
Exemplos práticos de alguns dos principais problemas de acessibilidade;
Os impactos mais comuns que estes problemas geram;
Recomendações sobre como evitá-los e/ou corrigi-los.

O que não contemplaremos

Soluções técnicas.

Globalcode – Open4education
Conceituando Acessibilidade

Destinada a assegurar e a
promover, em condições de
igualdade, o exercício dos
direitos e das liberdades
fundamentais por pessoa com
deficiência, visando à sua
inclusão social e cidadania.

Fonte: Consórcio World Wide Web – W3C. Site em português,

disponível em:
https://w3c.br/

Globalcode – Open4education
Acessibilidade contexto digital

Categoria 2020 2021

Sucesso 0,74% 0,89%
Falha 0,01% 2,31%

Fonte: Estudo BigData Corp. Site em português, disponível em:

https://bigdatacorp.com.br/estudo -acessibilidade-em-sites-e-apps-brasileiros-ed-2021/

Globalcode – Open4education
Problemas mais comuns

Títulos sem marcação semântica

Links sem descrição adequada
Botões sem rótulo
Baixo contraste

Globalcode – Open4education
Títulos sem semântica
Impacto
Impede navegação mais rápida no conteúdo.

Benefícios
Encontrar o que se procura com agilidade;
Compreender as informações e como estão organizadas;
Compreender as relações entre as diferentes partes.

Globalcode – Open4education
Prática – Títulos
Cenário
Desativar notificações de “Novos pagamentos”

Frustração
Títulos da tela não estão sendo identificados

O que fazer
Passar por todos os elementos

Caminho feliz
Chegar na sessão, navegando por títulos

Globalcode – Open4education
Evitar problemas Títulos
Designers
Identifique a seção e/ou subseção claro e conciso;
Especifique a hierarquia de forma lógica.

Desenvolvedores
Use as propriedades/atributos disponíveis
nativamente;
Implemente adequadamente o nível hierárquico.

Globalcode – Open4education
Links e Botões sem descrição
Impacto
Impede a compreensão do componente.

Benefícios
Encontrar o que se procura com agilidade;
Aumentar a eficácia da Tecnologia Assistiva;
Evitar desgastes desnecessários;
Reduzir a desorientação cognitiva.

Globalcode – Open4education
Prática – Links e Botões
Cenário
Deseja o link para o Facebook da UNESP

Frustração
Tenta com Títulos ou com Busca

O que fazer
Explorar toda a página

Caminho feliz
Chegar no link desejado

Globalcode – Open4education
Evitar problemas Links e Botões
Designers
Rótulos claros e concisos para botões e links;
Quando necessário complemento para tecnologia
assistiva;
Complemento para botões e links com mesmo
descrição.

Desenvolvedores
Em WEB priorize HTML e se necessário atributos WAI-
ARIA;
Em mobile use propriedades nativas Android e iOS;
Botões ou links não descritos, procure o designer.
Globalcode – Open4education
Baixo contraste
Impacto
Dificulta leitura de conteúdos.

Benefícios
Aumentar autonomia de pessoas com baixa visão;
Reduzir dificuldade de identificar os elementos;
Reduzir dificuldade de operar os elementos.

Globalcode – Open4education
Prática – Baixo Contraste
Cenário
Deseja inserir o endereço de e-mail

Frustração
Dificuldade de ler e encontrar o campo Insira o seu e-mail:

O que fazer
Ampliar a fonte para leitura
Insira o seu e-mail:
Caminho feliz
Localizar a informação rapidamente

Globalcode – Open4education
Evitar problemas Contraste
Designers
Relação de contraste entre primeiro e segundo plano
de ao menos 4.5:1;
Fontes maiores (a partir de 18pt ou 14pt bold)
podem ter uma relação de contraste de 3:1.;
Imagens essenciais relação de contraste de ao
menos 3:1.

Desenvolvedores
Aplique as escalas de cores especificadas;
Componentes da interface com baixo contraste,
sinalize ao time de design.

Globalcode – Open4education
Obrigado

contato@insep.org.br
+55 11 3384-7284
Globalcode – Open4education