Este site usa cookies para analisar o tráfego e para personalização de anúncios. Ao continuar a navegar neste site, você indica que aceita o uso de cookies. Para mais informações visite nossa Política de Privacidade.

Como tornar seu site acessível?

Você pode tornar seu site mais acessível
Porém, ao implementar algumas medidas e bastante flexibilidade, você pode tornar seu site mais acessível e também melhorar a experiência do usuário.

A acessibilidade é um assunto complexo. Muitas coisas podem dificultar o acesso ou a compreensão do seu site. Porém, ao implementar algumas medidas e bastante flexibilidade, você pode tornar seu site mais acessível e também melhorar a experiência do usuário. Este guia lhe mostrará maneiras de ajudar a tornar seu site mais acessível a outras pessoas.

Observação: este artigo não é sobre um padrão específico. Se você for obrigado a cumprir um padrão específico, como WCAG 2.0 ou Seção 508 da Lei de Reabilitação Federal dos EUA, verifique também o que esse padrão específico exige.

Parte 1 de 3: tornando o site acessível para tecnologias alternativas

O símbolo deve ter o texto alternativo "Pesquisar"
Por exemplo, o símbolo deve ter o texto alternativo "Pesquisar", não o texto alternativo "Lupa".

Nem todo mundo acessa o conteúdo da web lendo-o na tela do navegador. Algumas pessoas usam leitores de tela para ler o conteúdo em voz alta. Algumas pessoas usam o Modo Leitor de seus navegadores porque precisam de um design consistente que não lhes cause problemas. Separar corretamente o conteúdo do design melhorará significativamente a experiência do usuário para essas pessoas.

  1. 1
    Adicione texto alternativo para todas as imagens relevantes. As únicas exceções são as imagens apenas decorativas, que não são necessárias para entender o site ou interagir com seu conteúdo. O texto alternativo é um texto alternativo para uma imagem. Os leitores de tela lerão o texto alternativo em vez da imagem.
    • O texto alternativo deve ser funcional, não uma descrição da imagem. Por exemplo, o símbolo deve ter o texto alternativo "Pesquisar", não o texto alternativo "Lupa". Se a imagem for usada em um botão, forneça um texto alternativo do que o botão faz, por exemplo, "Enviar".
    • Se houver texto na imagem, por exemplo, se a imagem for um logotipo, o texto deve ser incluído no texto alternativo.
    • Incluir texto alternativo em uma imagem usando o altatributo. É usado assim:
      <img src = "ZXhhbXBsZS5wbmc =" alt = "O texto alternativo pertence aqui"> 
    • Se a imagem for apenas decorativa, defina o texto alternativo como alt="".
  2. 2
    Descreva a imagem em outro lugar se for muito complexa ou tiver muitas informações. Por exemplo, se for um gráfico ou gráfico, descreva seu conteúdo acima ou abaixo da imagem. Faça referência a isso no texto alternativo, por exemplo "Gráfico da renda familiar média na Europa de 2000 a 2017, conforme descrito abaixo". Você também pode vincular a um documento com todos os valores como texto ou uma tabela.
  3. 3
    Considere o uso de CSS apenas para imagens decorativas. Dessa forma, essas imagens também desaparecem se o usuário desligar o CSS.
    • Imagens de fundo podem ser incluídas usando o background-imageatributo CSS. Por exemplo:
      html {imagem de fundo: url ("exemplo.png"); } 
  4. 4
    Use tags semânticas HTML5. HTML5 adicionou muitas tags semânticas, ou seja, tags que são usadas para descrever o conteúdo. Essas tags permitem que tecnologias como um leitor de tela ou o Modo Leitor de alguns navegadores "entendam" o conteúdo e o exibam de maneira significativa.
    • Se você estiver usando texto em negrito e itálico para dar ênfase, não apenas para definir o estilo, use <strong>e <em>. Isso também é compatível com as versões anteriores do HTML.
    • Use <nav>para seções de navegação. Isso permite que os leitores de tela e outras tecnologias identifiquem essas seções e decidam se devem ou não exibi-las.
    • Use <article>para o conteúdo principal de uma página da web que seja significativo por si só, sem as outras partes da página. Por exemplo, a <article>tag geralmente deve ser usada para entradas de blog, artigos de notícias e postagens de fórum.
  5. 5
    Use ARIA quando necessário. Embora seja melhor usar os elementos HTML nativos, às vezes não há nenhum disponível para sua finalidade. Nesse caso, você pode usar ARIA (Accessible Rich Internet Applications).
    • Observe que você não deve alterar a semântica dos elementos HTML, a menos que seja absolutamente necessário. </ref> Por exemplo, este:
      <div role = "banner"> <h1> Este é um banner com um título de primeiro nível </h1> </div> 

      é preferível a este:

      <h1 role = "banner"> Este é um banner com um título de primeiro nível </h1> 
  6. 6
    Defina o idioma do documento e das partes que são diferentes. Isso é feito com o langatributo HTML. Ele permite que os leitores de tela pronunciem as partes e a página corretamente, e os navegadores convencionais para renderizar o texto com mais precisão (por exemplo, para alternar entre a direção da escrita da direita para a esquerda e da esquerda para a direita).
  7. 7
    Use elementos de formulário para formulários. Por exemplo, para fazer um botão, use buttonou input, não os elementos aou div. Os dois últimos contam com CSS e JavaScript para atuar como um botão, que nem sempre estão disponíveis. Além disso, você precisa fazer um trabalho adicional para focalizá-lo corretamente e informar ao navegador que é um botão. Portanto, é mais fácil e acessível apenas usar o elemento buttonou input.
  8. 8
    Rotule os formulários adequadamente. Para associar um rótulo a um controle de formulário, use <label>. Um leitor de tela lerá esse rótulo quando o usuário navegar até o controle de formulário, enquanto o texto sem rótulo geralmente é ignorado. Um exemplo de rotulagem adequada seria:
    <form action = "/ example_action.php"> <input type = "checkbox" id = "concorda"> <label for = "concorda"> Concordo com os termos e condições. </label> <br> <tipo de entrada = "enviar" value = "Enviar"> </form> 

Parte 2 de 3: tornando o site legível

  1. 1
    Permitir que os usuários mudem de estilo. Isso é muito importante, porque diferentes usuários preferem ou precisam de ajustes diferentes. Por exemplo, pessoas com algumas deficiências visuais precisam de alto contraste para ler o texto, enquanto algumas pessoas com deficiências cognitivas precisam de baixo contraste para lê-lo. Isso inclui tamanho da fonte, esquema de cores, contraste, estilo da fonte, espaçamento entre linhas e margens.
    • Desligue todas as folhas de estilo e tente navegar no site. Ele ainda deve ser legível e utilizável.
    • Fornece possibilidades em seu site para alterar o estilo, por exemplo, um botão para redimensionar o texto ou um menu para selecionar o esquema de cores.
  2. 2
    Defina espaçamento suficiente. Certifique-se de torná-lo relativo ao tamanho da fonte, de modo que, se o tamanho da fonte for alterado, o texto ainda possa ser lido.
    • A altura da linha (espaçamento entre linhas) deve ser pelo menos 1,5 vezes o tamanho da fonte. Em CSS, isso é feito da seguinte maneira:
      altura da linha: 1,5; 
    • O espaçamento entre parágrafos deve ser de pelo menos 2 vezes o tamanho da fonte. Isso pode ser feito definindo a margem inferior dos parágrafos:
      margem inferior: 2em; 
    • Você pode ajustar o espaçamento entre palavras com o word-spacingatributo CSS e o espaçamento entre letras com letter-spacing. O excesso também torna o texto mais difícil de ler, portanto, use seu bom senso. No entanto, certifique-se de que se o espaçamento entre letras for redimensionado para 0,12em e o espaçamento entre palavras para 0,16em, o texto ainda seja legível.
  3. 3
    Tenha contraste alto o suficiente. Algumas pessoas não conseguem ler o texto se o contraste for muito baixo. Existem muitas ferramentas automatizadas para verificar o contraste. Você também pode desativar a cor e acessar o site por conta própria.
    • Também oferece a opção de fazer baixo contraste, porque contraste muito alto também é difícil de ler para algumas pessoas.
  4. 4
    Evite justificar o texto em ambos os lados. Mantenha o texto justificado no lado esquerdo com a borda direita irregular. Esse estilo é mais fácil de ler, especialmente para pessoas com dislexia.
  5. 5
    Escolha uma fonte grande o suficiente. Uma boa aproximação é usar pelo menos 12px e, de maneira ideal, 16px ou mesmo 18px.
  6. 6
    Evite longas filas. Isso pode dificultar o acompanhamento do fluxo do texto. Use no máximo 80 caracteres (máximo 40 se o texto estiver em chinês, japonês ou coreano).
  7. 7
    Use as cores com bom gosto. Muitas cores brilhantes podem causar dor de cabeça em pessoas sensíveis. Use cores brilhantes apenas como acentos. Experimente uma paleta de cores mais suave com cores como cinzas, pastéis e cores que não são muito saturadas.
  8. 8
    Reduza as animações ao mínimo. Ou remova-os inteiramente. As animações podem ser uma distração e impedir que o usuário leia o conteúdo principal. Se você tiver animações, tem a opção de desativá-las.
    • Isso também se aplica a vídeos de reprodução automática e pop-ups / sobreposições.
  9. 9
    Não pisque nenhum elemento mais de 3 vezes por segundo. Como alternativa, mantenha os flashes abaixo do limite, restringindo-os a uma pequena área. Não fazer isso pode causar convulsões devido à fotossensibilidade.
Este guia lhe mostrará maneiras de ajudar a tornar seu site mais acessível a outras pessoas
Este guia lhe mostrará maneiras de ajudar a tornar seu site mais acessível a outras pessoas.

Parte 3 de 3: tornando seu conteúdo utilizável

Há uma diferença entre ser capaz de ler o texto do seu site
Há uma diferença entre ser capaz de ler o texto do seu site e ser capaz de entender o significado desse texto e interagir com o site.

Há uma diferença entre ser capaz de ler o texto do seu site e ser capaz de entender o significado desse texto e interagir com o site. Todas essas coisas são necessárias para que seu site seja acessível.

  1. 1
    Use uma linguagem clara e concisa, especialmente para obter instruções. Não use mais de uma conjunção e duas vírgulas. Use palavras que são comumente usadas no contexto. Não use negativos duplos. Evite metáforas e linguagem não literal.
  2. 2
    Dê ao usuário tempo suficiente para ler e processar o conteúdo. Informe o usuário com antecedência sobre quando sua sessão expirará. Alerte-os quando o tempo estiver prestes a expirar e forneça uma maneira óbvia de prolongá-lo.
  3. 3
    Estruture o conteúdo. Use títulos e subtítulos quando fizer sentido. Prefira listas com marcadores ou números a longos trechos de texto. Use parágrafos para quebrar longas paredes de texto.
  4. 4
    Torne seu site navegável pelo teclado. Algumas pessoas têm problemas de motor que as impedem de usar o mouse. Eles precisam navegar no site com um teclado.
    • Dê um esboço de foco claro. Não o remova. Mostra qual elemento foi selecionado com o teclado.
    • Se o usuário pode mover o foco para um elemento, ele também deve ser capaz de mover o foco para longe dele usando o teclado.
  5. 5
    Fornece diferentes formatos de mídia. Faça texto, vídeo (com legendas), áudio e imagens. Desta forma, cada usuário pode escolher o formato que preferir.
Aviso Legal O conteúdo deste artigo é para sua informação geral e não se destina a ser um substituto para consultoria jurídica profissional ou financeira. Além disso, não se destina a ser invocado pelos usuários na tomada de quaisquer decisões de investimento.
Artigos relacionados
  1. Como fazer o marketing do artigo?
  2. Como chegar aos Contatos do Google?
  3. Como adicionar o Google Analytics ao Blogger?
  4. Como adicionar o Google Analytics ao seu site?
  5. Como evitar os erros comuns no uso do Google Adwords?
  6. Como ganhar dinheiro com o Google Adsense?
FacebookTwitterInstagramPinterestLinkedInGoogle+YoutubeRedditDribbbleBehanceGithubCodePenWhatsappEmail