Acessibilidade Digital - Técnicas - Publicadores Web

 

Esta é uma página dedicada à promoção da acessibilidade digital no Tribunal Regional do Trabalho de Alagoas (TRT-AL). Reconhecemos que o acesso igualitário à informação e aos serviços online é fundamental para a construção de uma sociedade mais inclusiva. Como publicadores web, temos a responsabilidade de garantir que todos, independentemente de suas capacidades físicas ou cognitivas, possam navegar e interagir com nosso portal na web.

Neste guia, você encontrará uma série de informações e dicas valiosas para melhorar a acessibilidade digital em nosso portal, tornando-o mais acessível a todos os cidadãos.

 

Índice

 

 

Textos

Criar textos digitais acessíveis é fundamental para garantir que todas as pessoas possam compreender e interagir com o conteúdo. Aqui estão algumas dicas para criar textos acessíveis:

  • Siglas no texto: caso tenha que usar siglas, na primeira ocorrência, cite por extenso. Nas próximas não haverá necessidade. Exemplo: primeira ocorrência : Tribunal Regional do Trabalho de Alagoas. Próximas ocorrências poderá ser TRT/Alagoas  
  • Datas: sempre que possível digite a data por extenso. Exemplo: 8 de agosto de 2023.
  • Evite jargões técnicos em excesso. Sendo possível use expressões simples.
  • No publicador web, na barra de formatação, não use o ‘Titulo 1”. Podemos usar Titulo 2, Titulo 3 etc, mas não devemos usar a opção 'Titulo 1'
  • Não use alinhamento de texto justificado, isso pode prejudicar a efetividade dos leitores de telas. Use alinhamento à esquerda.
  • Utilize listas ordenadas (numeradas) ou não ordenadas (com marcadores) para destacar pontos importantes. Isso é muito útil para os leitores de tela.
  • Contraste Adequado: Certifique-se de que o texto tenha contraste suficiente em relação ao fundo para ser legível por todas as pessoas.
  • Evite combinações de cores que dificultem a leitura, especialmente para pessoas com deficiências visuais.Nosso  padrão é texto preto sobre fundo branco. Devemos usar, mas não abusar das cores
  • Não copie e cole diretamente textos produzidos no MS Word.

Caso deseje aproveitar  texto já existente em um arquivo texto do MS Word:

  1. Use o bloco de notas(Para abrir Bloco de notas, selecione o botão Iniciar do Windows, insira Bloco de notas e selecione Bloco de notas nos resultados.
  2. Copie o texto vindo do MsWord;
  3. Selecione tudo, copie e cole no editor do publicador web;
  4. Faça as alterações que deseja.

Se for feito o control+c, control+v diretamento do Word serão recebidas diversas formatações não desejadas para efeitos de acessibilidade e não aceitas pelo padrão de nosso site. O gerenciador de conteúdos fará a seleção automática da fonte padrão de nosso portal.

  • Texto Alternativo para Imagens: Se o texto incluir imagens, forneça texto alternativo para todas as imagens, explicando seu conteúdo e função.
  • Links Descritivos: Use textos descritivos significativos para os links. Evite termos genéricos como "clique aqui" ou "saiba mais". Descreva claramente o destino do link, para que os usuários saibam para onde estão sendo direcionados.
  • Evite Imagens de Texto: Em vez de incorporar texto em imagens, use texto real. Imagens de texto não são acessíveis a leitores de tela e podem dificultar a compreensão.
  • Teste com Leitores de Tela: Use leitores de tela para verificar como os textos são interpretados. Isso ajudará você a identificar possíveis problemas e melhorar a acessibilidade. É possível baixar o leitor de telas gratuíto LDVA no link https://www.nvaccess.org/download/nvda/releases/2019.3/nvda_2019.3.exe
  • Legendas e Transcrições: Para conteúdo de áudio ou vídeo, forneça legendas e transcrições para pessoas com deficiência auditiva.

Criar textos acessíveis é uma parte essencial de fornecer uma experiência online inclusiva. Certifique-se de que suas mensagens sejam compreensíveis e acessíveis a todos os usuários, independentemente de suas capacidades.

 

Imagens

Inserir imagens de forma acessível em páginas digitais é fundamental para garantir que todas as pessoas, incluindo aquelas com deficiências visuais, possam compreender e interagir com o conteúdo.Aqui estão algumas dicas para tornar as imagens mais acessíveis:

  • Textos Alternativos: Sempre forneça um texto alternativo descritivo para cada imagem.
  • Descreva o conteúdo e a função da imagem de maneira clara e concisa. Se a imagem não transmitir informações importantes, o texto alternativo pode ser vazio.
  • Informação Relevante no Conteúdo: Se a imagem contiver informações relevantes (como gráficos, infográficos, capturas de tela), certifique-se de que essas informações também estejam disponíveis em texto no conteúdo da página.
  • Textos Alternativos Não-Decorativos: Evite usar textos alternativos como "imagem", "foto" ou "gráfico" para imagens decorativas. Isso só adiciona ruído aos leitores de tela.
  • Se a imagem é puramente decorativa e não transmite informações, utilize um texto alternativo vazio (" ").
  • Imagens de Texto: Evite usar imagens para transmitir informações de texto. Em vez disso, utilize texto real para que ele seja acessível a todos os usuários.
  • Contraste e Legibilidade: Certifique-se de que o conteúdo da imagem (se houver) tenha contraste suficiente para ser legível por todas as pessoas.
  • Links em Imagens: Se uma imagem for um link, forneça um texto alternativo que descreva tanto a função da imagem quanto o destino do link.
  • Legendas e Descrições Adicionais: Para imagens complexas, como infográficos, forneça legendas ou descrições adicionais próximas à imagem.
  • Teste com Leitores de Tela: Use leitores de tela para verificar como as imagens são interpretadas. Isso ajudará você a identificar possíveis problemas e melhorar a acessibilidade.

Lembrando que a inclusão de imagens acessíveis é uma parte essencial da criação de uma experiência de usuário inclusiva e positiva em suas páginas digitais.

 

Descrições das imagens

Criar descrições acessíveis para imagens em páginas da internet é fundamental para garantir que pessoas com deficiências visuais possam compreender o conteúdo. Aqui estão algumas dicas específicas para criar descrições de imagens acessíveis:

  • Conteúdo Relevante: Foque nas informações mais relevantes e no propósito da imagem. Pergunte-se por que a imagem está lá e o que ela contribui para a compreensão do conteúdo.
  • Brevidade e Clareza: Seja conciso em sua descrição, mas forneça informações suficientes para transmitir o significado da imagem.
  • Utilize Linguagem Descritiva: Use linguagem descritiva e objetiva para criar uma imagem mental clara da cena ou do conceito representado.
  • Informação Contextual: Coloque a imagem no contexto da página. Se ela ilustrar um ponto específico, explique como ela se relaciona com o conteúdo circundante.
  • Transmita a Mensagem Principal: Se a imagem contiver informações importantes, como um gráfico ou um infográfico, certifique-se de que a mensagem principal seja transmitida.
  • Detalhes Significativos: Se a imagem contiver detalhes relevantes para o entendimento, inclua-os. Por exemplo, em uma foto de pessoas, mencione se elas estão fazendo algo relevante.
  • Evite Julgamentos ou Opiniões: Mantenha-se objetivo e evite adicionar opiniões pessoais ou interpretações à descrição.
  • Formatação Consistente: Mantenha um formato de descrição consistente em toda a página para que os leitores de tela possam prever onde as descrições estarão.
  • Links em Imagens: Se a imagem for um link, explique tanto o conteúdo da imagem quanto o destino do link.
  • Imagens Decorativas: Se a imagem for puramente decorativa e não transmitir informações, use um texto alternativo vazio (alt="") para indicar isso.
  • Teste com Leitores de Tela: Use um leitor de tela para ouvir suas descrições. Isso ajudará você a entender como as informações são apresentadas aos usuários com deficiência visual.É possível baixar o leitor de telas gratuíto LDVA no link https://www.nvaccess.org/download/nvda/releases/2019.3/nvda_2019.3.exe

Lembre-se de que as descrições de imagens são uma parte essencial da acessibilidade web e contribuem para uma experiência inclusiva para todos os usuários.

 

Documentos odt, ods e odp

Os formatos de arquivo ODT (Open Document Text), ODS (Open Document Spreadsheet) e ODP (Open Document Presentation) fazem parte do padrão ODF (Open Document Format), um padrão aberto e livre de royalties desenvolvido para documentos de escritório, como textos, planilhas e apresentações. Esses formatos são suportados por diversos aplicativos de escritório e são uma alternativa aos formatos proprietários.

Formatos e Aplicativos:
•    ODT (Open Document Text): Formato de documento de texto do padrão ODF.
•    ODS (Open Document Spreadsheet): Formato de planilha do padrão ODF.
•    ODP (Open Document Presentation): Formato de apresentação do padrão ODF.

Como Produzir Arquivos ODT, ODS e ODP:

•    LibreOffice: Site: https://www.libreoffice.org/
•    Apache OpenOffice: Site: https://www.openoffice.org/
•    Google Docs: Site: https://www.google.com/docs/

O Google Docs é uma ferramenta de processamento de texto online que também suporta a criação de arquivos nos formatos ODT, ODS e ODP.

Como Criar Arquivos ODT, ODS e ODP no Google Docs:

  1. Acesse o site do Google Docs (https://www.google.com/docs/) e faça login na sua conta do Google.
  2. Clique em "+ Novo" para criar um novo documento.
  3. Crie e edit o documento que deseja
  4. No menu suspenso, escolha o tipo de arquivo que deseja criar:
  5. Para um documento de texto (ODT), selecione "Documento".
  6. Para uma planilha (ODS), selecione "Planilha".
  7. Para uma apresentação de slides (ODP), selecione "Apresentação". O Google Docs abrirá o aplicativo relevante no navegador, permitindo que você crie e edite o documento, planilha ou apresentação como faria normalmente.
  8. Quando você terminar de criar e editar, vá para "Arquivo" no canto superior esquerdo.
  9. Escolha "Fazer o download" e selecione o formato correspondente (ODT, ODS ou ODP) na lista de formatos disponíveis.
  10. O Google Docs criará um arquivo no formato ODF correspondente e iniciará o download.

Lembre-se de que o Google Docs é uma opção conveniente para criar arquivos nos formatos ODT, ODS e ODP diretamente no navegador, tornando-os acessíveis e colaborativos. A possibilidade de trabalhar em

 

Cores

O uso adequado de cores é fundamental para criar designs acessíveis e legíveis em páginas da internet. Aqui estão algumas dicas sobre o uso de cores, juntamente com exemplos de bons contrastes que podem ser usados. Dicas sobre o uso de cores:

  • Contraste Significativo:Garanta um contraste significativo entre o texto e o fundo para garantir que o conteúdo seja legível. Isso é especialmente importante para pessoas com deficiências visuais.
  • Evite Relying on Color Alone: Não dependa apenas das cores para transmitir informações importantes. Além do uso de cores, utilize outros elementos visuais, como ícones ou texto, para transmitir mensagens.
  • Acessibilidade para Daltonismo: Considere as necessidades de pessoas com daltonismo. Evite combinações de cores que possam ser confundidas por indivíduos com dificuldades de percepção de cores.

Exemplos de bons contrastes:

  • Texto Preto sobre Fundo Branco: Uma combinação clássica de alto contraste que garante legibilidade.
  • Texto Branco sobre Fundo Preto: Outra combinação de alto contraste que pode ser útil, mas certifique-se de que o contraste seja suficiente.
  • Texto Escuro sobre Fundo Claro: Cores escuras, como azul-escuro ou verde-escuro, sobre fundos claros, como branco ou cinza claro, geralmente têm bom contraste.
  • Fundo Colorido com Texto Branco: Se usar fundos coloridos, escolha cores que forneçam contraste adequado para o texto.
  • Combinações de Cores Complementares: Cores complementares (opostas no círculo cromático) geralmente têm bom contraste. Por exemplo, azul e laranja.

 

Links

Inserir links de forma acessível em páginas digitais é essencial para garantir que todas as pessoas, incluindo aquelas com deficiências visuais ou motoras, possam navegar e interagir com o conteúdo. Aqui estão algumas dicas para tornar os links mais acessíveis:

  • Textos Descritivos Claros: Use textos que descrevam o conteúdo do link de forma concisa e significativa. Evite usar textos genéricos como "clique aqui" ou "saiba mais".
  • O texto do link deve dar uma idéia clara do destino do link. Por exemplo, em vez de "Leia mais sobre acessibilidade", use "Leia mais sobre dicas de acessibilidade em páginas digitais".
  • Evite Dependência de Cor: Certifique-se de que os links sejam distinguíveis mesmo para pessoas com daltonismo ou dificuldades de percepção de cores.
  • Evite usar apenas a mudança de cor como indicador de link. Sublinhar ou usar formatação em negrito também é útil.
  • Tamanho Adequado para Toque: Se a sua página é otimizada para dispositivos móveis ou touchscreens, garanta que os links tenham um tamanho adequado para toque. Isso facilita o clique em telas sensíveis ao toque.
  • Contraste de Texto e Fundo: Certifique-se de que o texto do link tenha bom contraste com o fundo em que está inserido, para facilitar a leitura.
  • Teste com Leitores de Tela: Utilize leitores de tela para verificar como os links são apresentados para pessoas com deficiência visual.
  • Evite repetir os mesmos links em várias partes da página, pois isso pode confundir os usuários.
  • Verifique a Funcionalidade: Certifique-se de que os links funcionem corretamente e direcionem para as páginas corretas.

Lembrando que a acessibilidade não se limita apenas aos links, mas a todos os elementos de uma página. Manter um design inclusivo e pensar nas diferentes formas como os usuários podem interagir com o conteúdo é fundamental para criar uma experiência acessível e positiva para todos.

 


Arquivos para download

Disponibilizar links para download de arquivos de forma acessível em páginas digitais é importante para garantir que todas as pessoas possam acessar e utilizar esses recursos. Aqui estão algumas dicas para tornar os links para download de arquivos mais acessíveis:

  • Textos Descritivos Claros: Use textos que descrevam o arquivo de forma clara e significativa. Evite usar termos genéricos como "clique aqui" ou "baixe agora".
  • Inclua informações relevantes sobre o conteúdo do arquivo e seu formato. Por exemplo, "Baixe o Guia de Acessibilidade em PDF".
  • Indicação do Tipo de Arquivo: Inclua o tipo de arquivo (PDF, DOC, ZIP, etc.) no texto do link para que os usuários saibam o que esperar. Exemplo: Relatório de Regras(arquivo odt)
  • Tamanho do Arquivo: Se possível, forneça informações sobre o tamanho do arquivo para que os usuários possam estimar o tempo de download, especialmente em conexões mais lentas. Em alguns casos o próprio gerenciador de conteúdos vai prover essa funcionalidade.
  • Destaque Visual: Use formatação visual, como negrito ou ícones, para destacar os links de download, tornando-os mais visíveis.
  • Teste os Links: Verifique se os links de download funcionam corretamente e que os arquivos estão disponíveis para download.
  • Alternativas para Arquivos Grandes:Se o arquivo for muito grande, considere fornecer alternativas, como dividir o conteúdo em partes menores ou fornecer resumos acessíveis.

Lembre-se de que a acessibilidade deve ser considerada em todos os aspectos do design da página, incluindo os links para download de arquivos. Isso garantirá que todos os usuários possam se beneficiar do seu conteúdo, independentemente de suas habilidades ou necessidades.
 

Ferramentas de acessibilidade

Dicas e Ferramentas para Conferir Acessibilidade Digital:

Leitores de Tela:

1.    NVDA (NonVisual Desktop Access): https://www.nvaccess.org/
2.    JAWS (Job Access With Speech): https://www.freedomscientific.com/products/software/jaws/
3.    VoiceOver (Apple)

Ampliadores de Tela:

1.    Zoom nativo do Windows
2.    Zoom nativo do macOS


Como Usar o Leitor de Tela NVDA (NonVisual Desktop Access):

1.   Instalação e Ativação:
•    Baixe o NVDA do site oficial e instale-o.
•    Abra o NVDA usando a combinação de teclas Ctrl + Alt + N.

2.    Navegação:
•    Use as setas do teclado para navegar por elementos na tela.
•    Use a tecla Tab para mover entre elementos interativos.

Comandos de Teclado:

Consulte a documentação do NVDA para aprender os comandos básicos e avançados.

Como Usar o Ampliador de Tela no Windows:

Usando o Zoom(Lupa):

Pressione Windows + "+" para aumentar o zoom.
Pressione Windows + "-" para diminuir o zoom.
Use o mouse ou as setas do teclado para mover a tela ampliada.

Desativar o Zoom:
Pressione Windows + Esc para desativar o zoom.

Lembrando que as instruções específicas podem variar com base na versão do sistema operacional que você está usando. O uso de leitores de tela e ampliadores de tela pode variar de acordo com as necessidades individuais, então, é sempre bom experimentar e explorar as opções para descobrir o que funciona melhor para você.

 

 

Conteúdo de Responsabilidade da(o) Coordenadoria de Comunicação Social