Close Menu
Código Simples .NETCódigo Simples .NET
    Facebook X (Twitter) Instagram
    Trending
    • NewSQL em 2025: O Estado Atual, Tendências e o Futuro dos Bancos de Dados Relacionais Escaláveis
    • 12 Regras Essenciais para Reduzir a Latência de Aplicações
    • Cache Hit Ratio: Como uma Simples Métrica Pode Revolucionar sua Arquitetura
    • Como a Uber calcula o tempo estimado de chegada
    • 30 APIs Gratuitas para desenvolvedores
    • Por que escalar escrita é tão mais difícil do que escalar leitura?
    • MongoDB Analyzer para .NET: Visualize e otimize suas consultas de forma simples
    • Cardinalidade: O Conceito que Transforma o Desempenho de Bancos de Dados SQL e NoSQL
    Facebook X (Twitter) Instagram
    Código Simples .NETCódigo Simples .NET
    Código Simples .NETCódigo Simples .NET
    Home»Boas práticas»Corrija 85% dos seus problemas de acessibilidade na Web em 5 simples passos

    Corrija 85% dos seus problemas de acessibilidade na Web em 5 simples passos

    Jhonathan SoaresBy Jhonathan Soares20 de maio de 20197 Mins Read Boas práticas
    Share
    Facebook Twitter LinkedIn WhatsApp Copy Link

    Uma análise da WebAIM (Web Accessibility In Mind) sobre o estado atual da Acessibilidade na Web de 1 milhão de páginas (na grande maioria famosas) revelou resultados devastadores: os sites analisados mostraram em média quase 60 erros cada em relação à problemas de acessibilidade, e a porcentagem de sites com resultados “perfeitos” foi inferior a 3%. Mas havia um lado positivo: a maioria dos erros poderia ser agrupada em apenas algumas categorias. De um total de 59,6 milhões de erros, 52,1 milhões foram causados ​​por apenas cinco problemas fáceis de prevenir:

    • 36 milhões foram exemplos de texto com contraste insuficiente .
    • 12,3 milhões eram imagens sem um texto alternativo .
    • 2 milhões foram insumos sem um rótulo correspondente .
    • 1,3 milhão eram links ambíguos ou vazios .
    • 0,5 milhão eram títulos não ordenados .

    Corrigir esses cinco tipos de problemas resolveria a maioria dos problemas de acessibilidade detectados.

    Os 5 passos fáceis

    1. Aumentar o contraste da cor do texto

    Contraste de texto ruim foi o erro mais comum de acordo com o relatório WebAIM. Em média, as home pages analisadas continham 36 problemas com contraste insuficiente entre texto e seu fundo.

    A diferença entre contraste de cores válidas e inválidas é às vezes sutil.

    Para mim, este pode ser o requisito mais limitativo (pelo menos em termos de criatividade), pois muitas vezes encontro uma paleta de cores interessante que acabo por descartar porque não cumpre as especificações das WCAG. Uma opção é seguir os critérios de nível AA que são menos restritivos, pois não é possível satisfazer todos os critérios de sucesso de Nível AAA qualquer maneira mesmo.

    O WebAIM tem uma ótima ferramenta para verificar o contraste das cores , e você pode encontrar muitas outras ferramentas online. Na verdade, é muito fácil implementar o seu próprio. Requer alguma matemática, mas nada sofisticado, e pode ser uma ótima experiência de aprendizado. Por exemplo, existe um verificador de contrate muito bacana, você pode encontrá-lo aqui. Ele é ótimo para testar cores RGB, já que todos os verificadores online trabalharam apenas com valores HEX.

    2. Adicione texto alternativo às imagens

    Adicionar texto alternativo (famoso alt) a imagens é um dos principais pilares e princípios básicos da acessibilidade na Web .No entanto, é um dos problemas mais comuns em quase todos os sites, mesmo quando o atributo alt é necessário em imagens.

     <img src="guernica.jpg" alt="Guernica painting by Pablo Picasso" /> 

    Embora pareça tão simples quanto adicionar o atributo alt com uma descrição à tag <img> , o texto alternativo pode exigir um pouco de reflexão. Qual é o papel da imagem? Qual é o texto em torno dele? Podemos não querer ignorar a imagem (adicionando um alt="" ), e não queremos que os leitores de tela repitam a mesma informação duas vezes.



    alt="Guernica painting by Pablo Picasso"

    alt="Guernica: a large oil painting by Spanish artist Pablo Picasso completed in June 1937"

    alt=""

    Qualquer um dos alt à direita poderia funcionar para a imagem, O correto dependerá do contexto.

    E mais uma coisa a considerar: se a imagem é usada como um CTA , o alt deve ser uma descrição da ação a ser tomada e não da imagem! Os usuários podem querer saber que a imagem é uma impressora, mas o que o usuário realmente querem saber é que, se clicarem nela, o documento será impresso.

    3. Elementos label de um formulário

    Os labels apresentam muitos benefícios, como: (1) ajudam a identificar e fornecer informações adicionais sobre o campo; (2) quando clicados, eles se concentrarão no elemento do formulário vinculado; e (3) são simples de implementar. Você só precisa envolver o texto com uma tag <label> e usar o atributo for para apontar para o ID do elemento:

     
     <label for="username">Username:</label> 
        <input id="username" type="text" name="user"> 
        
     <label for="password">Password:</label> 
        <input id="password" type="password" name="pass"> 
    

    Às vezes, pode haver situações complicadas nas quais as entradas podem não ter um label específico para cada uma delas (por exemplo, uma tabela com linhas que permitem edição ou um label que deve ser aplicado a vários campos). Nesses casos, você pode usar o atributo aria-labelledby para apontar para o elemento que servirá como um label:

      
    <table>
      <thead>
        <tr> 
        <th id="namelabel">Name</th> <th id="addresslabel">Address</th>
        <th id="agelabel">Age</th> 
         </tr>
      </thead>
         <tbody>
          <tr> 
          <td><input aria-labelledby="namelabel" name="name" /></td>
          <td><input aria-labelledby="addresslabel" name="address" /></td>
          <td><input aria-labelledby="agelabel" name="age" /></td>
          </tr> ... 
        </tbody>
    </table> 
     

    Se você tiver um formulário ou componente que inclua elementos de formulário, como inputs ou radio buttons, não se esqueça de adicionar um label para os diferentes elementos do formulário ou adicionar um atributo aria-labelledby .

    4. Adicione significado aos links

    Quantas vezes você encontrou um site ou blog com resumos dos posts e links pedindo para “Ler mais”? Embora essa seja uma descrição da ação que o usuário executará, ela realmente não fornece significado real ao link . Vamos ler mais sobre elefantes, programação na web ou cirurgia cerebral? Leia mais sobre o que?

    Não faça essas coisas …
    Consulte Mais informação
    Faça essas coisas em vez disso …
    Leia mais sobre Acessibilidade na Web

    Um desses links fornece informações reais sobre o conteúdo vinculado.

    Agora, alguns podem dizer: ” Mas ter um link longo e significativo quebra a forma como nosso site é apresentado! Há apenas espaço para uma legenda” Leia mais “! ” E para eles há uma alternativa: use aria-label em seus links:

     <a href="#" aria-label="Read more about Web Accessibility"> Read more </a> 

    Os leitores de tela modernos lerão o aria-label vez do texto âncora , para que você possa deixar sua legenda de link curto enquanto fornece um texto significativo e acessível.

    5. Organize o conteúdo corretamente

    O conteúdo de cada página deve ser estruturado de forma semântica e organizada corretamente , usando os títulos certos de maneira ordenada. Isso pode soar como um acéfalo, mas é um erro muito comum: mais da metade das home pages analisadas apresentaram esse problema.

    Os leitores de tela permitem que os usuários pulem de um cabeçalho para outro. Um documento mal organizado se tornará confuso para todos: leitores, leitores de tela e buscadores.

    Cabeçallho 1

    Cabeçalho 3

    Cabeçalho 2

    Cabeçalho 4

    Cabeçalho 1

    Cabeçalho 2

    Cabeçalho 3

    Cabeçalho 4

    Seu documento deve ser organizado como a coluna da direita, nunca como o da esquerda

    Além disso, não esqueça de usar as tags semânticas apropriadas; é importante usar títulos ( <h1> , <h2> , etc.) em vez de estilizar outros elementos para parecer um título. Eles podem ser visualmente semelhantes, mas nem todos os usuários confiam em sua visão.

    Conclusão

    O fato de que 87% dos problemas de Acessibilidade na Web encontrados na análise do WebAIM foram realmente muito pequenos, e isto pode parecer uma ótima notícia, mas precisamos levar esses resultados com um pouco de sal: as páginas analisadas eram apenas home pages, que normalmente não possui componentes complexos (sujeitos a problemas de acessibilidade mais complexos.). Confesso que irei colocar um pouco mais do meu tempo aqui no blog para melhorar estas questões de acessibilidade (pelo menos estas mais simples), pois acredito que estas pequenas mudanças, principalmente no caso das imagens, poderão surtir um efeito muito positivo na vida de todos.

    Além disso, alegando que 85% de todos os problemas de acessibilidade podem ser corrigidos com as 5 etapas acima, é um pouco exagerado. (Desculpe pelo título de click bait.) Embora, as chances são de que a porcentagem real não esteja tão longe da realidade (o que tornaria boa a antiga regra 80/20 na computação ).

    A principal lição a ser retirada seria que melhorar a Acessibilidade na Web pode ser um desafio, mas não é tão complicado quanto parece, e todas as melhorias, mesmo as mais pequenas, contam.

    Fonte original: https://dev.to/alvaromontoro/fix-85-of-your-web-accessibility-issues-in-5-easy-steps-pnf

    Fonte WebAIM: https://webaim.org/

    Cartilha de acessibilidade na web pela W3C: http://www.w3c.br/pub/Materiais/PublicacoesW3C/cartilha-w3cbr-acessibilidade-web-fasciculo-II.html

    Um grande abraço a todos!

    Share. Facebook Twitter LinkedIn Telegram WhatsApp Copy Link
    Jhonathan Soares
    • Website
    • Facebook
    • X (Twitter)
    • LinkedIn

    Criador do blog Código Simples e com mais 15 anos de experiência em TI, com títulos de MVP Microsoft na área de Visual Studio Development, Neo4j Top 50 Certificate, Scrum Master e MongoDB Evangelist.

    Posts Relacionados

    Como escolher bibliotecas para seu projeto: Uma análise crítica de dependências

    Boas práticas 20 de setembro de 20245 Mins Read

    Comentários no código – Vilões ou Mocinhos?

    Boas práticas 24 de julho de 20246 Mins Read

    Boas práticas de criação, armazenamento e validação de senhas em .NET

    Asp.net Boas práticas 9 de julho de 20248 Mins Read
    Newsletter

    Digite seu endereço de e-mail para receber notificações de novas publicações por e-mail.

    Junte-se a 25mil outros assinantes
    Posts recentes
    • NewSQL em 2025: O Estado Atual, Tendências e o Futuro dos Bancos de Dados Relacionais Escaláveis
    • 12 Regras Essenciais para Reduzir a Latência de Aplicações
    • Cache Hit Ratio: Como uma Simples Métrica Pode Revolucionar sua Arquitetura
    • Como a Uber calcula o tempo estimado de chegada
    • 30 APIs Gratuitas para desenvolvedores
    Categorias
    • Arquitetura (14)
      • Testes (2)
    • Asp.net (120)
      • C# (89)
      • Mvc (13)
    • Banco de dados (90)
      • NoSql (58)
      • Sql (38)
    • Boas práticas (29)
      • Gestão & Produtividade (1)
      • Metodologias Ágeis (6)
    • Cursos (52)
    • Dicas (105)
    • Front-End (92)
    • IA (1)
    • Linux (6)
    • NodeJS (4)
    • Post do Leitor (9)
    • Python (5)
    • Seo (12)
    • Tecnologia (30)
      • ITIL (1)
      • Padrões de Projeto (4)
    • Testes (2)

    VEJA TAMBÉM

    Cursos
    12 de fevereiro de 20166 Mins Read

    1000 livros gratuitos sobre programação!

    Olha que dica bacana! A pagina só com livros sobre programação é mantida no GitHub…

    30 APIs Gratuitas para desenvolvedores

    Facebook X (Twitter) Instagram LinkedIn

    Type above and press Enter to search. Press Esc to cancel.

    Vá para versão mobile