Curso

Acessibilidade
Digital
 15.750.969 de brasileiros
com deficiência

6.562.910 2.143.173 4.433.350 2.611.536

Deficiência Visual Deficiência Auditiva Deficiência Física Deficiência Intelectual

Fonte: IBGE
 Acessibilidade Digital

É uma série de recursos que possibilita a

navegação, a compreensão e a interação de
qualquer pessoa na web (independentemente
de suas dificuldades), sem ajuda de ninguém.
Em outras palavras: uma internet acessível
pra todo mundo!
 Por que devemos pensar em
acessibilidade digital?
Lei Brasileira de Inclusão (LBI) - Obrigatória a acessibilidade para páginas web e site de qualquer
organização (empresas privadas, fundações e institutos, órgãos do governo) com sede ou
representação comercial em território brasileiro. Leiº 13.146, art.63 julho de 2015.

É bom para o seu projeto!

Estratégia de negócios.

Amplia o mercado

Diferencial: fazer a diferença e contribuir com uma sociedade mais justa e inclusiva!

EMPATIA!
 Acessibilidade dos Sites Brasileiros
14, 65% milhões de endereços (.br)

• 2019 – Sites sem problema nenhum: 0,61%

• 2019 – Sites com pelo menos um problema: 99,39%

• 2020 – Sites sem problema nenhum: 0,74%

• 2020 – Sites com pelo menos um problema: 99,26%

Fonte: Movimento Web Para Todos e BigData

 EXPER Experiência do usuário

Aperte o "play" nesse vídeo e, logo em seguida, feche os olhos. Tente absorver o conteúdo
utilizando apenas a audição. Simulação de uma compra online por meio do leitor de tela,
tecnologia assistiva e utilizada pelas pessoas com deficiência visual para interagir no mundo
digital.
 EXPERExperiência do usuário

Barreiras de acessibilidade que pessoas enfrentam na web. Um dos vídeos da

campanha do Movimento Web para Todos em parceria com a Publicis sobre
acessibilidade digital.
 Experiência do usuário

• Como cego vê EMOJI?

• Tania’s Story: Morse code meets machine learning

• CEGOS - DÚVIDAS DUVIDOSAS

A cada 5 segundos, 1 pessoa fica
cega no mundo.

Fonte: Organização Mundial da Saúde (OMS)


Sidney Tobias
(Analista de Sistemas PRODAM
e Consultor de Acessibilidade
Digital na SMPED)
Por que descrever?
Cegos ou pessoas com baixa visão
utilizam computadores e
smartphones via softwares de
acessibilidade, chamados Leitores
de Tela. Esses programas
reconhecem o material textual na
tela em que se está navegando e o
transforma em áudio, por meio de
vozes sintetizadas. Porém, essa
ferramenta não descreve arquivos
em formatos de imagem, como
JPEG e PNG, por exemplo,
tornando o conteúdo
inacessível.
 “Descrição de Imagem”
Não é um bicho de 7 cabeças!

• Descreva o que você vê na imagem, sem
julgamentos ou opiniões;
• Evitar o excesso de informações e
apontamentos desnecessários;
• Se possível, descrever características
físicas, vestimentas e cores, desde que o
texto não fique extenso;
• Seja objetivo na descrição;
• Em caso de memes, cujo intuito é, na
maioria das vezes, cômico, a descrição
também pode ser cômica, contanto que
não confunda o leitor;
• Sinalize, antes da descrição, com alguma
palavra ou expressão que mostre que a
imagem será descrita. Assim, além de ser
acessível, esta atitude será educativa para
quem nunca pensou sobre o assunto:
#PraCegoVer; #PraTodosVerem
#DesriçãoDaImagem
• Evite o uso de figuras de linguagem: não
facilita a interpretação do avatar de Libras
para surdos (ex: Hand Talk) e a
compreensão de pessoas com autismo e
síndromes diversas;
• Usar verbos no presente;
• Não usar verbo de movimento
em imagens estáticas.
 FORMATO
SUJEITO
+ PAISAGEM
CONTEXTO
AÇÃO

= FÓRMULA PARA
NÃO ESQUECER
Descrição de Imagem
com detalhes e sem detalhes
Ex.: 01
Descrição de Imagem com detalhes:
fotografia colorida de dois amigos Nicolas e Isac no hall
do Teatro Alfa, antes do início do espetáculo. Os dois
usam fones de ouvido e seguram os receptores de
audiodescrição. Nicolas, um menino de 7 anos, de
cabelos castanhos penteados para cima com gel, usa
camisa azul clara de mangas longas, com estampa de
bolinhas brancas. Isac, um menino de 6 anos, tem
cabelos curtos castanhos, usa camisa polo azul e óculos
escuros. (Foto: Raoni Reis) Material elaborado com o
apoio da audiodescritora Livia Motta, do Ver com
Palavras.
Ex.: 02
Descrição de Imagem sem detalhes:
(até 110 caracteres)
dois meninos de 7 anos usam fones de ouvido e seguram
os receptores de audiodescrição.
(Foto: Raoni Reis)
 Descrição de Imagem
destaque na foto

Na plateia lotada do Theatro Municipal, o

O prefeito Bruno Covas fala ao microfone, no secretário Cid Torquato está em uma cadeira de
palco do Theatro Municipal, na Premiação rodas motorizada, no corredor central. Ele
“Premia Sampa”. participa da Premiação da Prefeitura de São
Paulo “Premia Sampa”.
REDES SOCIAIS
 #PraCegoVer
#PraTodosVerem
#DescriçãoDaImagem
“Tenho muitos amigos cegos. Quando aderi
ao Facebook, eles me adicionaram, então eu
não me permitia postar fotos sem descrever,
como já fazia em meu blog. Até que em 2012,
na data de aniversário do criador do Sistema
Braille, Louis Braille, organizei um evento
virtual chamado ‘Pra Cego Ver’, convocando
Ex.: 02
pessoas a experimentarem descrever para
um cego. Foi um sucesso!”- Professora
especialista em Educação Especial, Patrícia
Braille, criou a #PraCegoVer.

Entrevista para a SMPED – 26/04/2017

Facebook
A rede social tem um texto
alternativo automático ou
editável, em post de fotos.
Exemplo de texto alternativo:
“12 pessoas, pessoas
sorrindo, pessoas sentadas e
sapatos”.

Observação: permite descrição

de até 100 caracteres.
Facebook
Descrição de Imagem
#PraCegoVer:
12 pessoas das equipes da
SMPED e do Estúdio MOL,
além dos intérpretes de
libras, reunidas no estúdio
de gravação. Todos estão
com expressões animadas e
sorriem. Alguns estão
sentados em bancos e
caixotes, outros de pé e um,
no chão.
CORES NAS DESCRIÇÕES!
Publicação do Google vídeo: Em uma sala, dois
pequenos elefantes se preparam para a
chegada do ano novo. O elefante da esquerda
usa um chapéu de festa e enche balões,
enquanto o elefante da direita usa um chapéu e
come pipocas. Os dois estão rodeados de
balões. No topo da imagem, bandeirinhas nas
mesmas cores dos balões trazem as letras que
formam a palavra "Google". Ao centro da
palavra, um relógio marcando 23h55 substitui o
segundo "O".
LinkedIn é acessível!
A rede social corporativa tem
descrição de imagem.
Existe ainda um limite de caracteres
que pode ser usado, entretanto, as hashtags
podem ser incluídas.
Instagra
m A rede social é lida por leitores
de tela e o usuário pode
adicionar a sua própria legenda
alternativa nas configurações
avançadas de publicação.

Como fazer?
 Dica: para não repetir a
descrição, sinalize no final
do texto: “Este post possui
texto alternativo
#PraCegoVer
#PraTodosVerem”
 Nos stories, a acessibilidade ainda é
Dica: aplicativo
restrita, uma vez que os leitores de gratuito para
tela não reconhecem o conteúdo. legendas: Clips e
Inclusive, tem aplicativos com
legendas automáticas, mas a Libras e a AutoCap
audiodescrição são essenciais!
Twitter

Você pode ativar o recurso de

acessibilidade em configurações e
adicionar a descrição na foto. O
limite é de até 1.000 caracteres.
Posts – Terminologia - Pautas
 Terminologia
Muitas vezes utilizamos termos pejorativos e
preconceituosos. Em lugar de “deficiente” ou “portador de
necessidades especiais”, utilize “pessoa com deficiência”.
Assim, será enfatizado o sujeito, a pessoa, e não sua
deficiência.

Link com todas as terminologias corretas:

https://www.prefeitura.sp.gov.br/cidade/secretarias/pess
oa_com_deficiencia/a_imprensa/index.php?p=10505
 Posts e Pautas
• Importante destacar obras de acessibilidade que estão sendo realizadas e
se estão dentro das normas de acessibilidade;

• Inclua pessoas com deficiência nas suas peças publicitárias de divulgação;

• Acessibilidade nos portais: Selo de Acessibilidade Digital;

• Serviços da sua pasta para o munícipe com deficiência;

• Siga influenciadores com deficiência, jornalistas que falam sobre o

segmento, educadores e formadores de opinião;

• Importante desenvolver aplicativos acessíveis;

#TEMQUEIR: O Treino que Muda Opiniões – Rio 2016
Design gráfico e textos acessíveis
 Boas práticas
• O tamanho das fontes deve facilitar a leitura (acima de 18 pontos);

• Evite texto em itálico, pois essa formatação dificulta a leitura;

• Deixe as cores escuras mais escuras, as claras mais claras, e aumente a

saturação da cor para torná-la facilmente identificável;

• Utilize imagens de fácil compreensão e sem muitos detalhes, preferencialmente

com contraste. Não adianta colocar textos grandes com fontes minúsculas, não
facilita para pessoas autistas, idosas, baixa visão e com dislexia;

• Evite parágrafos muito extensos e utilize marcações, como títulos, quebra de

linhas e numerações, para facilitar a leitura;
 Boas práticas
• Espaçamento duplo entre linhas;

• Use uma linguagem visual e textual simples, sem metáforas ou

abreviações;

• Texto alinhado à esquerda (melhor fluidez na leitura e as palavras não

ficam apertadas demais nas linhas, favorece uma leitura mais fácil e
facilita para o leitor de tela);

• Descreva imagens, gráficos, tabelas e outros elementos visuais;

• Não utilize as cores como única forma de transmitir um conteúdo;

Exemplo de pessoas com daltonismo
 Exemplo de pessoas com daltonismo:

Fundos com texturas são boas dicas!

 Dicas
Existem algumas ferramentas que podem te ajudar
• Color Contrast Checker: verificador de contraste de cores;

• Colour Contrast Analyser (CCA): o analisador de contraste de cores (CCA) ajuda a

determinar a legibilidade do texto e o contraste dos elementos visuais, como controles
gráficos e indicadores visuais;

• Inclusive Components: Um blog sobre componentes que são acessíveis;

• Color Oracle: Programa para simular daltonismo no Windows;

• Vox Product Accessibility Guidelines: Um Checklist sobre acessibilidade para

designers, desenvolvedores e analistas de produtos;

• NoCoffe Vision Simulator: Extensão para o Chrome para simular diferentes tipos de
daltonismo;
 Símbolos de Acessibilidade Comunicacional
Símbolo de Língua Brasileira de Sinais
A Língua Brasileira de Sinais é uma
linguagem usada por pessoas com
deficiência auditiva e intérpretes para a
comunicação entre eles, surdos e
ouvintes. O símbolo é utilizado para
indicar que o evento, palestra, visita
guiada ou algum tipo de mídia
audiovisual conta com intérprete de
Língua Brasileira de Sinais. Em sites, este
símbolo informa que oferecem um
tradutor de português para Libras.
Símbolo de Audiodescrição
A audiodescrição é uma modalidade de
tradução que consiste em transformar
o visual em verbal, para pessoas cegas
ou com alguma deficiência visual. O
símbolo é utilizado para indicar a
acessibilidade em eventos, programas
de televisão, exibições de vídeos e
projeções de filmes.
Símbolo de Closed Caption
O Closed Capition é um sistema de
transmissão de legendas via sinal de
televisão. O símbolo é utilizado para
indicar que a programação televisiva ou
um vídeo possui legendas ocultas que
podem ser ativadas. Este símbolo pode
ser visto em programas de TV, caixas de
DVDs ou em vídeos na internet.
 Dicas
• Libras e Legendas: a diferença entre surdos oralizados e não oralizados: alguns são
alfabetizados em português e outros em Libras. Exemplo: o movimento
#SurdosQueOuvem, que apresenta a diversidade na comunidade surda;

• Gravação da Libras: o processo de gravação pode ser feito em fundo neutro – branco,
preto, cinza. Legenda: tamanho médio, letras amarelas e contornos pretos. A média 5 a 7
palavras por linha para não atrapalhar as letras em cima da janela, que pode ser branca
transparente 30%.

• A recomendação da ABNT NBR 15290: estabelece que o tamanho da janela de

Libras deve ter no mínimo, a metade da altura e um quarto da largura do televisor. Este é
apenas um dos pontos para uma boa visualização dos sinais: 50% de altura e 25% de
largura (entre 22 a 25%). Outro material de apoio: A Classificação Indicativa na Língua
Brasileira de Sinais.
Exemplo:
Exemplo para teste:
Exemplo para teste:

Dica (não é regra): coloque

um post-it e deixe um
espaço para a janela de
Libras. É uma referência de
proporção, pois existe a
variação de equipamentos.
O que não pode acontecer:

Dica: use formatos de

retângulos para inserir
outras legendas
complementares,
como por exemplo: o
assunto do vídeo e o
nome/cargo, durante
a edição.
 Dicas
• Facebook possui a opção de legendas em tempo real para lives/transmissões. Importante
alterar nas configurações do perfil que administra a página e ativar;

• Tipos de audiodescrição: Pré-gravada: em estúdio, editada e mixada ao som original; Ao vivo

roteirizada: com audiodescritor e roteiro ao som original: teatro, dança...) e simultânea: com
audiodescritor, ao vivo e sem roteiro. Para saber mais: ABNT NBR BRASILEIRA 16452;

• Ao considerar utilizar conteúdo audiovisual, procure planejar a acessibilidade desde o início do

processo de criação;

• Aplicativo do Google: Transcrição Instantânea: reconhecimento automático de fala, esse app

realiza em tempo real a transcrição de voz e som em texto na tela. Ótimo para ferramentas de
streaming para transmissões no Youtube, Instagram e reuniões com funcionários com
deficiência auditiva;
 Samba com as Mãos
Secretaria Municipal da Pessoa com Deficiência
Libras e Audiodescrição
 DÚVIDAS
FREQUENTES
Preciso descrever os emojis
que coloco nos meus
textos?
Não é necessário! Há plugins e aplicativos
disponíveis que reconhecem o uso das famosas
“carinhas” e geram o texto compatível aos
leitores de tela. Muitas redes sociais, como o
Facebook, além de sites, também têm essa
preocupação. Seus desenvolvedores vêm
atuando para a acessibilidade, embutindo essa
informação no próprio código-fonte.
 Como compartilho
vídeos, fotos e GIFs no
WhatsApp?
O WhatsApp é um aplicativo dinâmico para
a troca rápida de informações. No
caso de fotos e GIFs, vale pensar na
descrição mais curta para incluir todo
mundo. Já no caso de vídeos, é mais
WhatsApp complexo, pois exige audiodescrição. Mas
vale recorrer às descrições
 MAIS INFORMAÇÕES SOBRE
ACESSIBILIDADE NA WEB
∙ Dicas e Informações – Secretaria Municipal da Pessoa
com Deficiência

∙ Cartilhas e informações do W3C Brasil – Padrões de

Acessibilidade na web

∙ Movimento Web Para Todos

∙ Google Acessibilidade

∙ Hand Talk

∙ Guia #PraTodosVerem
Canal no Youtube: Inclusão SP
 Agradecemos pela presença!

Sidney Tobias
sidneyt@prodam.sp.gov.br

Priscila Fonseca
(11) 96867-1874
prfonseca@prefeitura.sp.gov.br

Esta apresentação ficará disponível no nosso site / Menu / Imprensa.