Marketing e publicidade

5 Noções básicas para tornar um site acessível

Os tópicos de acessibilidade, leitores de tela e como os usuários interagem com aplicativos de comando de voz podem ser difíceis de entender. Mas, para 90% dos sites, existem opções simples que garantem que o site seja acessado em grande parte, mesmo sem um profundo conhecimento dos princípios de acessibilidade.

Neste post, escrito pelo time da UpSites – empresa de criação de sites em SP – você lerá cinco coisas que fazem uma diferença substancial na acessibilidade de qualquer site.

 

Botões são HTML padrão

Botões acionam ações. Talvez eles salvem o progresso, enviem um formulário, abram um painel ou enviem uma mensagem. Independentemente disso, eles são botões. Então, se você está fazendo alguma destas tarefas: você deve usar um botão HTML padrão. Isso pode ser um elemento de entrada do tipo “enviar”, um elemento de entrada do tipo “botão” ou um elemento de botão . Qualquer outra opção não é um botão.

Por que isso faz diferença? Botões são nativamente utilizáveis ​​pelo teclado. Isso significa que seu navegador e sistema operacional já sabem o que fazer com um elemento de botão. Você pode adicionar JavaScript para fazer qualquer elemento responder a um clique do mouse; JavaScript não se importa com o elemento usado. Mas esses elementos não estão disponíveis para um teclado. Um usuário não poderá encontrá-los ou ativá-los.

Se você criou algo parecido com um botão, mas na verdade é um intervalo ou div , muitos usuários não poderão encontrá-lo nem usá-lo.

Links são sempre links

Assim como os botões, os links servem um propósito específico em um site: eles levam você para algum lugar. Os links também são nativamente utilizáveis ​​no teclado, portanto, você pode se sentir tentado a usar um link para executar algumas de suas ações semelhantes a botões; mas você deve resistir a essa tentação. Os links são um dos muitos elementos aos quais você pode anexar JavaScript e iniciar um evento semelhante a um botão, como o envio de um formulário. Os links são uma opção melhor do que usar um elemento completamente não semântico como div ou span , mas ainda causam alguns problemas.

Um usuário com visão pode não ser capaz de dizer a diferença entre algo que se parece com um botão e algo que é realmente um botão; mas um usuário leitor de tela será informado exatamente. Como resultado, se um leitor de tela encontrar um link, o usuário pode esperar que ele a leve para uma nova página ou um novo local na mesma página. Se realmente executar uma ação imediatamente, isso pode ser frustrante e certamente dificulta o uso da interface.

Lembre-se também que um elemento não é um link. O elemento a é um elemento “âncora”. Se você adicionar o atributo href , ele terá um lugar para ir e se tornará um link. Caso contrário, ainda é uma âncora: um ponto de aterrissagem que você pode segmentar com um link. Mas uma âncora não é algo nativamente utilizável no teclado – apenas um link.

Imagens sozinhas são sem sentido

As imagens adicionam conteúdo emocional, informativo e contextual a um site. Eles podem transmitir um clima, ilustrar um gráfico ou indicar que um item no carrinho de compras está esgotado. Mas essas imagens só transmitem essa informação se você puder vê-las. A imagem em si não é acessível a pessoas com deficiências visuais. Para tornar essa imagem acessível, forneça um texto significativo para compartilhar o que está nessa imagem.

Uma imagem não significa simplesmente um arquivo .png ou .jpg inserido na sua página. Uma imagem é qualquer informação que represente graficamente o texto. Também pode ser um caractere de fonte de ícone usado para indicar um menu ou um recurso .svg. Não importa: se é visual, precisa de texto.

A maneira como você fornece texto alternativo irá variar dependendo da imagem. Se for um elemento img diretamente, use o atributo alt . Para fontes de ícones, você se beneficiará do uso do atributo aria-label . Fica complicado com .svg; mas você pode definitivamente fazer .svg acessível .

Identificar os méritos de uma imagem requer consideração. Uma imagem totalmente ornamental não precisa de mais contexto. Mas certifique-se de fornecer um atributo alt vazio nessa imagem para informar aos leitores de tela que essa imagem deve ser ignorada.

Rotular tudo

Você tem um formulário em qualquer lugar do seu site? Tem rótulos? Se isso não acontecer, então isso definitivamente está causando problemas para alguém. Não é difícil verificar rapidamente se um formulário tem rótulos. Primeiro, olhe para o formulário. Certifique-se de que haja texto ao lado dos campos do formulário indicando para que servem os campos. Esse é um bom primeiro passo. Agora clique no texto. Não o campo em si, mas o texto ao lado. Seu cursor se moveu automaticamente para o campo de entrada? Se sim, esse campo é rotulado apropriadamente.

Se um formulário não tiver rótulos, um usuário de leitor de tela não tem idéia do que pertence a esse campo, exceto por exploração – procurando texto próximo que possa indicar o que pertence a ele. Se houver texto próximo que não indique explicitamente o campo, o usuário provavelmente conseguirá encontrá-lo. Mas ela realmente não será capaz de dizer com certeza que o texto que ela está ouvindo pertence a esse campo.

Você já examinou seu processo de checkout recentemente? Não há nada como ter que resolver um quebra-cabeça complexo para inserir informações de cartão de crédito. Isso leva a um carrinho de compras abandonado.

Gerenciar ‘foco’

“Foco” é um termo de acessibilidade que descreve onde os comandos do teclado do site entrarão em vigor. Se você estiver digitando em um campo de texto, o foco estará nesse campo de texto. Se você apertar a tecla tab, você deve ser movido para o próximo campo no formulário, se houver um.

Nem todas as pessoas que navegam com o teclado são cegas. Na verdade, uma porcentagem significativa de usuários navega pelo menos parcialmente pelo teclado o tempo todo. As pessoas que preenchem formulários raramente pegam o mouse para clicar no próximo campo de formulário: elas pressionam a tecla de tabulação e avançam.

As pessoas que têm mais dependência do teclado para navegação geralmente usam a tecla tab para contornar o site. Se um usuário não puder ver onde ele está em seu site ao navegar pelo teclado, seu site poderá ficar quase inutilizável.

Navegar pelo teclado depende de duas características principais. Primeiro, um usuário deve conseguir acessar tudo na página. Isso significa que qualquer menu suspenso deve ser acessado pelo teclado. Controles e links criados corretamente – usando botões e links legítimos – não será um problema. Mas se você usou elementos div , span ou anchor, haverá problemas.

Segundo, quando um usuário alcança algo que é focável, ele precisa ver que ele o alcançou, de uma maneira óbvia e não sutil.

Não perfeito, mas melhor

Essas cinco áreas de desenvolvimento básico da Web cobrirão as necessidades da maioria dos usuários. Você terá um site perfeitamente acessível? Não necessariamente não. Esta lista está longe de ser exaustiva. Mas você terá uma experiência melhor e mais útil para oferecer a todos que visitam seu site.

Back To Top