Secretaria Especial de Comunicação
Manual de Boas Práticas - Acessibilidade
Manual de Boas Práticas
Publicadores de Conteúdo
Download para o Manual de Boas Práticas
Descrição da imagem acima: Capa/Folha de rosto - Ilustração pessoa sentada no computador - Uma ilustração de um homem com óculos. Ele está sentado, com a coluna curvada, em frente ao computador, que está sobre uma mesa. A ilustração tem cor amarela e contorno roxo. Logo acima, saindo da tela do computador, há um balão de diálogo com o texto: Manual de boas práticas (na cor roxa) publicadores de conteúdo (na cor amarela). O fundo da imagem tem retângulos nas cores roxo, laranja, amarelo, azul e verde água. No canto inferior, à direita, está o logo da Prefeitura de São Paulo. Sumário: Um homem de óculos está sentado, com a coluna curvada, em frente ao computador, que está sobre uma mesa. A ilustração tem cor amarela e contorno roxo.
Sumário:
1 - Por que ser acessível?
1.1 - O que é acessibilidade digital
1.2 - Acessbilidade
2 - Boas práticas
2.1 - Redação
2.2 - Imagens
2.3 - Vídeos
2.4 - Redes sociais
A Convenção Internacional Sobre os Direitos das Pessoas com Deficiência, adotada pela ONU em 30 de março de 2007, em
Nova York, e ratificada pelo Decreto Federal n° 6.949 de 25 de agosto de 2009 [2], estabelece em seu artigo 9 º item 1:
“A fim de possibilitar às pessoas com deficiência viver com autonomia e participar plenamente de todos os aspectos da vida, os Estados Partes deverão tomar as medidas apropriadas para assegurar-lhes o acesso, em igualdade de oportunidades com asdemais pessoas, ao meio físico, ao transporte, à informação e comunicação, inclusive aos sistemas e tecnologias da informação e comunicação, bem como a outros serviços e instalações abertos ou propiciados ao público, tanto na zona urbana como na rural”.
A acessibilidade pode proporcionar a todos nós facilidade de uso, rapidez, eficiência, maior conforto, satisfação e segurança.
Para as pessoas com deficiência, a acessibilidade possibilita equiparação de oportunidades e uma vida com autonomia e com maior participação em todos os seus aspectos.
Podemos dizer que a acessibilidade digital se trata da possibilidade e da condição de alcance, percepção e entendimento para a utilização, em igualdade de oportunidades, com segurança e autonomia, dos sítios e serviços disponíveis na web.
A acessibilidade na web significa que idosos e pessoas com deficiência por exemplo, podem navegar, perceber, entender, interagir e até contribuir para a web.
O cidadão, habitante da cidade de São Paulo pode, por exemplo, realizar alguns serviços pela internet, como: agendamento eletrônico para cadastro no ISS Imposto Sobre Serviços, marcar um exame médico, ver o itinerário de ônibus, ver a programação cultural da cidade, escolher o local mais próximo para vacinar seu animal de estimação, solicitar a retirada de entulho, poda de árvore, conserto de calçadas, tapa-buracos, e outros serviços.
Mas, esta facilidade disponível ao cidadão pode ficar comprometida se os sites para estes serviços não forem acessíveis.
Por outro lado, quando há acessibilidade digital nos serviços oferecidos pela web, isto contribui para a eliminação de barreiras causadas pela impossibilidade de locomover-se até determinado local, ler material impresso, ouvir as informações transmitidas ou compreender informações publicadas em ambientes confusos e com muita estimulação.
Além dos sites serem acessíveis, seu conteúdo precisa estar acessível também. A redação deve ser clara, as imagens devem ser descritas e deve haver legendas para os vídeos.
.png)
Descrição da imagem acima: Ilustração bla-bla-blás - uma ilustração de um homem de cabelo preto e queixo grande – vestido de camisa rosa, calça azul e sapato preto - está sentado em uma cadeira vermelha com as mãos cruzadas sobre as pernas, em frente ao computador, que está sobre uma mesa – ambos na cor cinza. Em uma ilustração reproduzindo o que o homem vê na tela do computador, está escrita a palavra “legenda”. Uma outra ilustração, do lado direito, está um homem loiro vestido de terno e duas mulheres – uma loira de vestido azul e cabelo amarrado e outra morena de vestido vermelho e cabelo solto – conversando e gesticulando. Ao fundo, estão escritos vários “blá-blá-blás”.
O escopo de acessibilidade do presente manual contempla a deficiência visual parcial ou total. Eventualmente poderão ser incluídas orientações para acessibilidade para outras deficiências como a auditiva e motora, por exemplo.
As dificuldades encontradas pela maioria das pessoas com deficiência visual referem-se ao conteúdo não-textual, ou seja, imagens e vídeos. Isso ocorre, pois a ferramenta de leitura de tela comumente usada pelos deficientes visuais percorre todo o conteúdo e quando encontra uma imagem, por exemplo, procura pelo texto alternativo para informar ao usuário o que aquela imagem contém.
Se este texto alternativo não existe ou é superficial o usuário não tem acesso ao que a imagem representa e qual a relevância dela para a compreensão do texto.
O texto alternativo de imagens ou sinopse de vídeos não deve ser a cópia de um trecho do conteúdo que já está presente no texto, pois quem utiliza a ferramenta de leitura de tela receberá a informação duplicada. Esta duplicidade causa desconforto e confusão para o usuário.
.png)
Descrição da imagem acima: Pessoa cega imaginando quebra cabeça montado e desmontado - uma ilustração de uma mulher, usando óculos escuros, cabelo preto, preso em um coque e usando uma blusa verde com branco. Ela está usando um fone no ouvido. Um balão de conversa simboliza o pensamento dela. Dentro do balão, um quebra-cabeça com algumas peças faltando, formando um homem com um pirulito. Um ícone com uma mão “não curti” está ao lado da imagem. 2º imagem: a mesma mulher, usando o fone de ouvido com o mesmo balão de conversa e pensamento aberto, formando um quebra-cabeça completo, com a imagem de um homem com um pirulito nas mãos. Ao lado, o ícone com uma mão simbolizando um “curtir”.
A experiência de navegação em um site precisa ser fácil, agradável e interessante ao usuário, para isso é importante observar como o conteúdo está sendo oferecido neste meio, quais os caminhos que o usuário deve percorrer até chegar até uma informação específica e certificar-se que tudo funciona bem tanto no cognitivo quanto em suas funções.
Para que esta experiência seja boa é preciso atentar-se a forma como o texto é direcionado ao seu público alvo, se é de fácil entendimento, se tem clareza e termos de fácil compreensão, também é preciso que o site tenha um bom layout, as imagens e demais ilustrações da página precisam ter boa qualidade, nitidez, cores com bom contraste e serem de fácil entendimento ao que se propõem, da mesma forma precisam ser as demais mídias disponibilizadas como vídeo e áudios.
Todos os conteúdos publicado em uma página devem levar em consideração a facilidade de entendimento e navegação do seu público alvo.
Escrever é um processo de descobrimento, por isso se aprende na prática. Contudo, organização e disciplina são fundamentais nessa hora e quando se fala de comunicação institucional todo cuidado e atenção são importantes.
Vejam algumas dicas de redação para produzirem textos melhores:
1) Seja específico, definido, concreto e não disperse o foco. Isso mantém o leitor interessado.
Descubra o que pretende com o seu texto. Qual seu objetivo? Informar, persuadir, entreter, argumentar, avaliar, recomendar, provocar, inspirar, analisar… São inúmeras possibilidades. Você fala direto com o cidadão que vive na cidade de São Paulo, busque fazer conexões com situações do cotidiano, isso cria familiaridade e aproxima o leitor.
2) Defina quem é o seu público. Antes de começar a escrever, pense nessas questões:
Você escreve para: uma autarquia, secretaria, prefeitura regional, algum programa da PMSP, etc. Busque entender qual o nicho dos munícipes que mais consomem o seu conteúdo e use uma linguagem que fale diretamente com ele.
Qual o propósito da sua escrita?
Você está apenas informando?
É um artigo? É uma notícia?
Seu público é multicultural?
Será que seus leitores precisam de dados estatísticos para serem convencidos?
Quais conceitos você deve enfatizar ?
O que você tem a dizer que vai gerar uma nova perspectiva?
Que impressões você quer transmitir com o texto?
3) Leve em conta todas as circunstâncias, tais como: prazo, formato, tamanho e número de palavras.
Neste caso, os sistemas de publicação de conteúdo devem permitir trabalhar livremente no campo de texto, então, escreva o suficiente para dizer tudo o que o leitor precisa saber.
4) Abandone as ideias que não se encaixam no contexto ou não são relevantes. Foco no objetivo do texto, isso vai te ajudar com a síntese das ideias.
5) Reescreva as passagens que estiverem confusas. É melhor perder um tempinho a mais, do que despertar o desinteresse do leitor. Sempre que concluir um texto, peça para outra pessoa lê-lo e dizer qual foi sua compreensão sobre o conteúdo, nosso cérebro tende a não ver os erros quando estamos há muito tempo concentrado em apenas uma coisa, por isso a importância de ter alguém que o ajude na revisão, não apenas gramatical e ortográfica.
6) Capriche na revisão. Preste atenção na digitação, gramática, ortografia e pontuação. Desleixos com a escrita são imperdoáveis, ainda mais se forem constantes.
7) Muita atenção ao primeiro parágrafo. Ele deverá ter como propósito prender a atenção do seu leitor. Para isso use: linguagem clara, objetiva, bom humor, citações, dados de alguma pesquisa ou fatos interessantes. Assim, terá mais chances de cativar o leitor.
8) Trabalhe a coesão. Utilize conjunções para ligar corretamente uma frase à outra, um parágrafo ao outro e uma seção à outra. Isso direciona a leitura e a torna mais prazerosa. A coesão no assunto também é fundamental.
9) Tipo de fontes - Ao contrário da leitura em impressos no meio digital recomenda-se usar fontes sem serifas já que os pequenos detalhes das fontes serifadas pode não ter boa legibilidade nas telas. Evite o uso de fontes cursivas e fantasia.
Sinalize os links no texto com palavras sublinhadas e de cor diferente do texto corrido.
Use fontes em itálico para: grafia estrangeira, itálico sentido figurado, citação, título, indicações de fonte, etc.
9.1) Tamanho das fontes - Ler um texto em mídia digital requer uma distância maior entre o olho e o texto do que numa leitura em meio impresso, por isso é necessário que o texto esteja em um tamanho confortável em relação a esta distância. E isto deve ser customizado de acordo com a mídia, afinal, esta distância de leitura também vai variar em um smartphone, tablet, televisão, etc. Ao determinar a fonte num site, selecione um tamanho confortável: entre 14 e 16 pixels para a maioria das fontes de texto para tela é uma boa regra.
9.2) Contraste - O contraste de 100%, no caso de monitores, não é recomendável. Quando a cor do fundo for completamente branca um cinza bem escuro como #333 ou #444 é mais confortável para leitura do que o preto total (#000).
Uma boa escolha de fundo para um site é a baseada numa cor que permita o destaque do texto em contraste. Isto faz com que seja fácil e rápido do utilizador ler o título e o corpo de texto de forma mais clara.
10) Ler um texto em voz alta possibilita que você avalie a coesão dele. Evite as combinações de palavras que não soam muito bem. Caso perceba a existência dessas combinações ruins no seu texto, basta substituir as palavras por sinônimos ou expressões equivalentes. (Esse vício de linguagem se chama cacofonia e acontece quando a junção de duas sílabas, uma no final da palavra e outra no início de outra, se encontram e resultam em um “som desagradável”; acabam formando outra palavra.)
11) Recorra a ganchos e links. Utilize-os para aumentar ainda mais o envolvimento do leitor com o seu texto; unindo a sua informação a outras que estejam em outros lugares na web (especialmente dentros do sites da própria PMSP. Para criar links, insira-os na frase que melhor descreve o conteúdo de destino do link, e evite os textos “clique aqui” ou “saiba mais”.
2.2 - Imagens
Ao escrever um texto é comum incluir imagens para enriquecer o conteúdo. Essas imagens podem ser somente ilustrativas, como a foto panorâmica da cidade de São Paulo, ou altamente significativa, como a cerimônia de apresentação de um programa de governo. Em ambos os casos é necessário descrever a imagem de forma clara, objetiva e consistente.
Procure usar imagens que sirvam de apoio ao conteúdo textual ou que funcionem como complemento da informação. Nunca use textos longos em formato de imagem.
Busque sempre usar imagens de alta qualidade de baixo peso (as imagens precisam ter 72DPI considerando seu tamanho físico semperder a qualidade da imagem). Imagens pixelizadas ou desfocadas não trazem uma boa impressão sobre seu layout, prefira imagens nítidas com equilíbrio de cores, contraste e brilho.
Descrição da imagem acima: Garoto com bola de futebol com baixa e alta resolução - uma ilustração de um garoto enxergando uma bola de futebol desfocada. Acima da cabeça dele, tem um balão de pensamento, com o menino pensando na mesma bola de futebol, só que ela não está desfocada. A bola é preta e branca. O garoto é loiro e usa uma camiseta rosa.
Seja cauteloso ao usar imagens com fotos de pessoas comuns, as fotos precisam ter autorização de uso da imagem para divulgação.
Ao usar imagem em destaque num banner use figuras que transmitam a mensagem de forma clara e evidente e que necessitem de pouco apoio textual (títulos e sub-títulos).
Para garantir a acessibilidade das imagens é necessário informar o texto alternativo. É importante não utilizar adjetivos que possam conduzir a opinião do usuário, tais como “bela”, “linda”, “incrível”, da mesma forma que ocorre com qualquer usuário que não apresenta deficiência visual e que faz o julgamento da imagem da maneira que quiser.
Para que isso seja feito é importante informar três características que são encontradas na maior parte das imagens de forma sintética:
O que | Onde | Contexto
Veja os exemplos de Descrições:
Descrição inadequada da imagem acima:
- Vista panorâmica
- Lindo panorama da cidade
- Foto da cidade
Descrição adequada da imagem acima:
- Vista panorâmica da cidade de São Paulo com foco nos prédios da região central
Descrição inadequada da imagem acima:
- Carnaval
- Bloco de rua "Maluca Beleza"
- Imagem do Carnaval de Rua
Descrição adequada da imagem acima:
- Foliões do bloco “Maluca Beleza” na Avenida São Luiz, localizada centro, desfilam no Carnaval de rua de São Paulo
Descrição inadequadas da imagem acima:
- Centro temporário de acolhimento
- Foto do CTA
- Beliches
Descrição adequada da imagem acima:
- Beliches com um cobertor dobrado sobre cada colchão no centro temporário de acolhimento distribuídas em ambiente iluminado
Descrição inadequada da imagem acima:
- Daniela Mercury
Descrição adequada imagem acima:
- Cantora Daniela Mercury no palco localizado na Praça Júlio Prestes na região central de São Paulo faz discurso sobre preconceito na Virada Cultural 2013
Descrição inadequada da imagem acima:
- Logotipo
- Procon Paulistano
Descrição adequada da imagem acima:
- Logotipo do Procon Paulistano Digital
Descrição inadequada da imagem acima:
- Mapa da cidade de São Paulo mostrando o uso do solo
- Mapa da cidade com áreas coloridas
- Mapa
Descrição adequada da imagem acima:
- Mapa da cidade de São Paulo com foco no uso do solo por quadra fiscal mostrando áreas coloridas de acordo com a legenda
No caso de mapas e infográficos a informação visual pode ser mais significativa que o texto. É importante que o conteúdo do mapa ou infográfico também esteja presente de forma textual. Porém, o ideal é que este conteúdo acessível, que deve conter exatamente as mesmas informações do mapa ou infográfico, esteja presente em outra página (outra notícia ou outro artigo), sendo que o acesso a este artigo deve ser feito por um link “descrição acessível” no texto principal para manter a clareza.
Sempre que possível, prefira a publicação de vídeos curtos com mensagens diretas.
Atenção à qualidade de imagem e de som do vídeo.
Para garantir os critérios de acessibilidade é necessário incluir a sinopse que descreve o conteúdo. A descrição pode ser mais detalhada no formato de resumo. Por exemplo:
Vídeo:
Coletiva de imprensa da Virada Cultural 2017
Sinopse:
Cerimônia oficial de lançamento da Virada Cultural 2017 com a presença do prefeito João Doria, presidente da SP Turis David Barioni, representante da curadoria da Virada Cultural Hugo Passolo, Secretário da Cultura André Sturm e do cônsul geral de Portugal Paulo Lopes Lourenço. No vídeo as falas são de David Baroni, Hugo Passolo e André Sturm, nesta ordem.
Cada rede social possui recursos próprios de acessibilidade. Alguns mais maduros que outros, porém um projeto que está se popularizando na Internet propõe o uso de uma hashtag que identifique o conteúdo de uma imagem presente no post. A hashtag #PraCegoVer tem sido utilizada como alternativa à falta de recurso para inclusão do texto alternativo das plataformas. A vantagem é que é possível utilizar a hashtag nas redes sociais mais populares.
Veja exemplos:
Facebook:
https://ptbr.facebook.com/hashtag/pracegover?source=feed_text&story_id=1282608151769692
Instagram:
https://www.instagram.com/explore/tags/pracegover/
A Prefeitura de São Paulo também adotou esta hashtag no Facebook e ela deve ser usada para descrever imagens da mesma maneira descrita acima mantendo a consistência: o que, onde e contexto.
Abaixo seguem os recursos que cada rede social oferece quanto à acessibilidade:
Texto alternativo: o Facebook está aperfeiçoando um algoritmo para identificação do conteúdo das imagens para gerar o texto alternativo automaticamente.
Leia o artigo: Como o texto alternativo automático funciona?
https://ptbr.facebook.com/help/216219865403298?helpref=faq_content
Sinopse dos vídeos: Assim como deve ser feita a inclusão esta informação em textos dos sites e portais da PMSP também no Facebook é necessário incluir a sinopse no momento da publicação do vídeo.
Em 2016 o Twitter atualizou os aplicativos mobile para que seja possível escrever o texto alternativo de uma imagem na rede social.
O recurso já está disponível na versão para computador.
Leia o artigo: Imagens acessíveis a todos no Twitter
https://blog.twitter.com/pt/2016/imagens-acess-veis-a-todos-notwitter
Instagram
O Instagram ainda não oferece um recurso para inclusão de texto alternativo para as imagens. A única forma é utilizar a legenda.
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
Download para o Manual de Boas Práticas
.jpg)
João Doria
PREFEITO DA CIDADE DE SÃO PAULO
Fabio Santos
SECRETÁRIO MUNICIPAL DE COMUNICAÇÃO
Cid Torquato
SECRETARIA MUNICIPAL DA PESSOAL COM DEFICIÊNCIA
Daniel Annenberg
SECRETÁRIO MUNICIPAL DE INOVAÇÃO E TECNOLOGIA
CONTEUDISTAS:
Alcione de Godoy, Denis Sakamoto,
Douglas Bernardes de Souza, Igor Cavalcanti,
Kamila Aparecida Ferreira Camilo,
Laila Dell' Antonia Scarassati e Sidney Tobias de Souza
ILUSTRAÇÃO E DIAGRAMAÇÃO:
Erick Mendes e Francisco Ferreira