CursoAcessibilidade Digital

15.750.969 de brasileiros

com deficiência

6.562.910Deficiência Visual

2.143.173 Deficiência Auditiva

4.433.350Deficiência Física

2.611.536Deficiência Intelectual

Fonte: IBGE

É 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!

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!

Por que devemos pensar em acessibilidade digital?

• 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%

Acessibilidade dos Sites Brasileiros14, 65% milhões de endereços (.br)

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)

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.

Sidney Tobias(Analista de Sistemas PRODAM

e Consultor de Acessibilidade Digital na SMPED)

Por que descrever?

“Descrição de Imagem”

Não é um bicho de 7 cabeças!

• 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.

• 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;

FORMATOSUJEITO

PAISAGEMCONTEXTO

AÇÃO

FÓRMULA PARA NÃO ESQUECER

+

=

Descrição de Imagemcom detalhes e sem detalhes 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.

Descrição de Imagem sem detalhes:(até 110 caracteres)dois meninos de 7 anos usam fones de ouvido e seguramos receptores de audiodescrição. (Foto: Raoni Reis)

Ex.: 01

Ex.: 02

O prefeito Bruno Covas fala ao microfone, no palco do Theatro Municipal, na Premiação “Premia Sampa”.

Na plateia lotada do Theatro Municipal, o

secretário Cid Torquato está em uma cadeira de

rodas motorizada, no corredor central. Ele

participa da Premiação da Prefeitura de São

Paulo “Premia Sampa”.

Descrição de Imagemdestaque na foto

REDES SOCIAIS

#PraCegoVer

#PraTodosVerem

#DescriçãoDaImagem

Ex.: 02

“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 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

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

FacebookDescriçã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.

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?

Instagram

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 é restrita, uma vez que os leitores de tela não reconhecem o conteúdo.

Inclusive, tem aplicativos com legendas automáticas, mas a Libras e a

audiodescrição são essenciais!

Dica: aplicativo gratuito para legendas: Clips e AutoCap

Você pode ativar o recurso de acessibilidade em configurações e adicionar a descrição na foto. O limite é de até 1.000 caracteres.

Twitter

Posts – Terminologia - Pautas

TerminologiaMuitas 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/pessoa_com_deficiencia/a_imprensa/index.php?p=10505

• 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;

Posts e Pautas

#TEMQUEIR: O Treino que Muda Opiniões – Rio 2016

Design gráfico e textos acessíveis

• 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;

Boas práticas

Exemplo de pessoas com daltonismo

Exemplo de pessoas com daltonismo:

Fundos com texturas são boas dicas!

DicasExistem 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í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ímbolos de Acessibilidade Comunicacional

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ãosSecretaria 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. Nocaso de fotos e GIFs, vale pensar na descrição mais curta para incluir todomundo. Já no caso de vídeos, é mais complexo, pois exige audiodescrição. Mas vale recorrer às descrições

WhatsApp

∙ 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

MAIS INFORMAÇÕES SOBRE ACESSIBILIDADE NA WEB

Canal no Youtube: Inclusão SP

Agradecemos pela presença!

Sidney Tobiassidneyt@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.