Os humildes <label>. É comum. É simples. É básico. É mundano. À primeira vista, não há nada de especial nisso. Frequentemente usado como um mero alvo para CSS para estilizar algum texto. O que mais há para saber? Coloque aquele amiguinho acima do seu campo de formulário e voltaremos ao Javascript para CSS para tornar nossa página dinâmica e empolgante, certo?

Talvez não.

Preâmbulo

Aposto uma boa quantia que quase todos os profissionais com acesso a um servidor HTTP escreveram sobre rótulos. Seria fácil chamar isso de bater em um cavalo morto, mas de acordo com o WebAIM Million Report de 2023 , das milhões de páginas iniciais na Internet, 96,3% delas tiveram pelo menos um erro de acessibilidade detectado e, dessas páginas, 45,9% continha erros com rótulos de formulário. Isso o coloca no quarto problema de acessibilidade mais comum depois de contraste insuficiente de cores, imagens sem texto alternativo e links sem nome acessível. Ambos os números caíram nos últimos 5 anos, mas ainda há muito trabalho pela frente para reduzi-los. Se este post fizer pelo menos uma pessoa pensar “Uau, eu não sabia disso”, considerarei isso um grande sucesso

O propósito de um rótulo

Quando pensamos em um rótulo no enquadramento de um aplicativo da Web, provavelmente estamos imaginando um formulário adjacente a elementos como campos de texto, botões de opção, caixas de seleção e assim por diante. Eles transmitem valores esperados como nomes e datas ou o que outras seleções representam. Visualmente faz sentido, mas há mais em jogo.

Por que isso importa

Quando retiramos o termo monolítico “usuários”, devemos entender que os usuários são pessoas. As pessoas são únicas e complexas, e isso pode se perder no mundo acelerado do desenvolvimento de software. Para projetar com a inclusão em mente, é preciso uma mudança mental; quando imaginamos apenas o usuário “médio” como nosso alvo, corremos o risco de excluir faixas de pessoas de nossos aplicativos. As pessoas com deficiência suportam o peso dessa exclusão, mas não precisa ser assim.

E a boa notícia: rótulos acessíveis são fáceis. Eu diria que eles são uma das “vitórias” de acessibilidade mais fáceis que uma equipe pode alcançar. Vamos nos aprofundar e aprender o que torna um rótulo acessível e, tão importante quanto, utilizável.

Vamos torná-lo acessível

Imagine duas pessoas com situações diferentes.

Jeremy tem 41 anos. Ele trabalha como consultor financeiro em um banco local. Ele adora nadar, caminhar e acampar com amigos e familiares. Jeremy também é cego, resultado de complicações de uma cirurgia no cérebro aos 30 anos. Jeremy usa um leitor de tela para interagir com a tecnologia tanto em função de seu trabalho quanto em seu tempo de lazer.

Violeta tem 73 anos. Ela se aposentou após uma carreira de sucesso como advogada. Em sua aposentadoria, ela viajou pelo mundo para visitar locais históricos e as cidades natais de seus pais, que eram imigrantes da Europa Oriental. Recentemente, ela se mudou para morar mais perto dos netos. Violet tem artrite em ambas as mãos. Ela prefere usar software de reconhecimento de fala para interagir com seu computador e telefone para evitar dores desnecessárias.

Tanto Jeremy quanto Violet estão tentando usar a mesma página da web: um portal do paciente no site de seu médico, que oferece a possibilidade de pagar contas médicas, atualizar suas informações pessoais, marcar consultas e assim por diante.

Problema de Jeremy:

“Preciso usar meu cartão de crédito para pagar minha conta médica, mas não consigo identificar quais são os campos da página de pagamento.”

Se os rótulos não estiverem associados corretamente aos elementos do formulário, um leitor de tela lerá apenas o tipo de elemento, não qualquer texto próximo.

Problema de Violeta:

“Preciso alterar meu endereço no meu arquivo, mas não importa o que eu diga ao computador, o botão Salvar não clica.”

Como o exemplo do leitor de tela acima, o software de reconhecimento de fala também depende da associação de rótulos adequada para navegar e ativar campos e botões de formulário.

Isso mesmo. Ambos os problemas são causados ​​por elementos de formulário rotulados inadequadamente. Vamos dar uma olhada em algum código que normalmente produz esses resultados.

O problema de Jeremy no código

Vamos examinar a forma de pagamento.:

<form>
  <label>Card Number</label>
  <input type=”text” id=”card-number” />
  <label>Expiration Date</label>
  <input type=”text” id=”expiration-date”/>
  <label>Security Code</label>
  <input type=”text” id=”security-code”/>
  <button type=”submit” id=”submit”>Submit</button>
</form>

O forAtributo

A maneira mais simples é usar o foratributo. É um atributo nativo do <label>elemento. Seu valor esperado é o idatributo do elemento de formulário de destino. Em nosso exemplo, temos três entradas com ids: card-number, expiration-date, e security-code. Podemos adicionar o foratributo aos rótulos e definir seu valor para o ID de entrada correspondente. Vamos ver o que isso parece.

<form>
  <label for=”card-number”>Card Number</label>
  <input type=”text” id=”card-number” />
  <label for=”expiration-date”>Expiration Date</label>
  <input type=”text” id=”expiration-date”/>
  <label for=”security-code”>Security Code</label>
  <input type=”text” id=”security-code”/>
  <button type=”submit” id=”submit”>Submit</button>
</form>

Algumas coisas para manter em mente

• O foratributo deve estar no <label>elemento, não na entrada.
• O elemento de entrada deve ter um idatributo. O <label>ainda pode ter seu próprio idatributo, mas não é relevante aqui.
• A relação entre rótulo e entrada é um-para-um.

Usando ARIA

ARIA é um poderoso conjunto de atributos que podem ser adicionados a elementos para informar tecnologias assistivas sobre o nome, estado e função de um elemento. Em nosso caso, podemos usar o atributo aria-labelledby para associar um rótulo a uma entrada. Vejamos como isso funciona.

<form>
  <label id="card-number-label">Card Number</label>
  <input type="text" aria-labelledby="card-number-label" />
  <label id="expiration-date-label">Expiration Date</label>
  <input type="text" aria-labelledby="expiration-date-label"/>
  <label id="security-code-label">Security Code</label>
  <input type="text" aria-labelledby="security-code-label"/>
  <button type="submit" id="submit">Submit</button>
</form>

<form>
 <label id=”card-number-label”>Card Number</label>
 <label id=”card-number-instructions”>Enter the 16 digit number on the front of your card</label>
 <input type=”text” id=”card-number” aria-labelledby=”card-number-label card-number-instructions”/>
 ...
</form>

Agora que corrigimos o problema que Jeremy estava enfrentando, vamos examinar o que há de errado com a página que Violet está usando.

Problema de Violet no código

A página que Violet está usando contém campos de formulário para suas informações de contato e botões em uma barra de ferramentas para salvar e cancelar funções. Esses dois botões são representados apenas por ícones, sem rótulo textual visível. Isso por si só pode ser melhorado, mas no mundo real é uma situação comum de se deparar.

Aqui está o nosso código com o problema.

<form>
  <label for=”address1">Address 1</label>
  <input type=”text” id=”address1" />
  <label for=”address2">Address 2</label>
  <input type=”text” id=”address2"/>
  <button type=”button” id=”save” class=”icon-only”></button>
  <button type=”button” id=”cancel” class=”icon-only”></button>
</form>

Usando ARIA (novamente)

O aria-labelatributo pode ser usado para fornecer diretamente um nome acessível para a maioria dos elementos HTML. Seu valor é o texto que é exposto às tecnologias assistivas. Essa deve ser a linguagem humana, pois os leitores de tela anunciarão o texto do rótulo da ária e os usuários do software de reconhecimento de voz o usarão para interagir com o elemento.

<form>
  <label for=”address1">Address 1</label>
  <input type=”text” id=”address1" />
  <label for=”address2">Address 2</label>
  <input type=”text” id=”address2"/>
  <button type=”button” id=”save” class=”icon-only” aria-label=”Save”></button>
  <button type=”button” id=”cancel” class=”icon-only” aria-label=”Cancel”></button>
</form>

Existem muitas nuances com o rótulo de ária, mas elas merecem seu próprio artigo. Para nosso exemplo simples, isso será suficiente. Apenas tome cuidado para não usar demais aria-label when para or aria-labelledby would do the same job.

Estamos Acessíveis Agora!

Com essas mudanças simples, Jeremy e Violet podem concluir a tarefa que se propuseram a fazer em suas respectivas páginas. Usando essas técnicas, garantimos que os elementos do formulário sejam devidamente identificados por tecnologias assistivas e que as informações sejam transmitidas às pessoas que as utilizam. Cole um adesivo Accessible™ nele e termine o dia.

… Mas nós podemos fazer melhor

Nunca devemos parar no ponto em que apenas marcamos a caixa de seleção ao lado dos critérios de sucesso WCAG 2.1. As WCAG estabelecem uma linha de base para remover barreiras para pessoas com deficiência ao usar a web, mas devemos sempre buscar algo melhor do que meramente “possível de usar” e buscar “agradável de usar”. Acessibilidade e usabilidade andam de mãos dadas, e existe uma técnica muito simples que podemos implantar para melhorar drasticamente a experiência dos usuários que preenchem formulários.

Nossa Nova Persona

Vamos imaginar alguém em quem você não pensa imediatamente quando ouve a palavra “acessibilidade”.

Mia é caloura na University of Central Florida e está cursando Astrofísica. Ela é uma estudante muito brilhante e trabalhadora diligente. Sua atenção aos detalhes e senso de moda aguçado fazem dela a especialista quando qualquer uma de suas amigas está atualizando seu guarda-roupa. Enquanto se mudava para seu dormitório e desembalava uma caixa, ela acidentalmente cortou o dedo indicador de sua mão dominante com um estilete.

Algumas deficiências são temporárias. Mesmo uma pequena lesão pode reduzir a amplitude de movimento de alguém, tornando as tarefas que eles consideravam normais consideravelmente mais difíceis. Com o dedo cortado em uma bandagem de gaze, Mia tem que usar o telefone de uma forma que ela não está acostumada.

problema de Mia

“Preciso inserir minhas informações de saúde no site deste médico, mas continuo marcando as caixas de seleção erradas porque meu telefone é difícil de usar!”

Pode ser um desafio interagir com campos como caixas de seleção e botões de rádio em telefones na melhor das hipóteses, mas mesmo com uma lesão comum pode rapidamente cair em frustração. Mia precisa marcar caixas ao lado dos medicamentos para tireoide que toma para fornecer seu histórico de saúde, mas ter que fazer isso com a outra mão, ou outro dedo, está sendo difícil devido ao tamanho menor do elemento.

O problema de Mia no código

Vejamos as caixas de seleção. À primeira vista, eles parecem acessíveis, com associações de rótulos adequadas. Mas vamos olhar mais de perto.

<form>
  <label for=”synthroid”>Synthroid</label>
  <input type=”checkbox” id=”synthroid” name=”medications” value=”synthroid”/>
  <label for=”levothroid”>Levothroid</label>
  <input type=”checkbox” id=”levothroid” name=”medications” value=”levothroid”/>
  <label for=”levoxyl”>Levoxyl</label>
  <input type=”checkbox” id=”levoxyl” name=”medications” value=”levoxyl”/>
</form>

Existe uma técnica muito simples que podemos utilizar quando os controles de formulário têm rótulos visíveis para aumentar sua área clicável ou tocável, também conhecida como tamanho de destino . Tudo o que precisamos fazer é colocar o controle de formulário dentro do <label>elemento. Se um controle de formulário for filho de um, <label>clicar ou tocar no rótulo ativará seu campo de formulário associado. Vamos ver essa mudança agora.

<form>
  <label for=”synthroid”>
  Synthroid
  <input type=”checkbox” id=”synthroid” name=”medications” value=”synthroid”/>
  </label>
  <label for=”levothroid”>
  Levothroid
  <input type=”checkbox” id=”levothroid” name=”medications” value=”levothroid”/>
  </label>
  <label for=”levoxyl”>
  Levoxyl
  <input type=”checkbox” id=”levoxyl” name=”medications” value=”levoxyl”/>
  </label>
</form>

Alguns detalhes sobre esta técnica em particular

• Esta é uma característica do <label>elemento nativo. Se você estiver rotulando campos de formulário com elementos como <span>(e você não deveria estar!) Você não obtém essa funcionalidade de graça e terá que ser implementada manualmente.
• Esse recurso só é aplicável se o <label><elemento envolver seu campo de formulário. O uso aria-labelledbynão gera automaticamente o mesmo comportamento.
• O <label>elemento ainda deve conter o foratributo e deve corresponder ao idatributo no campo de formulário.
• Não envolva várias entradas em um único rótulo.

Antes de irmos

Vamos conhecer mais uma persona. Novamente, provavelmente não é alguém em quem você pensaria ao considerar a acessibilidade.

Ben é arquiteto de software em uma startup de tecnologia em San Francisco. Sua empresa está trabalhando na criação do Waffle Iron of the Future. Perfeitamente crocante o tempo todo e também ajuda você a pagar seus impostos. Ele está apaixonado pelo projeto e passa a maior parte do dia pensando em como pode torná-lo ainda melhor. Ben pega um ônibus para a cidade quando precisa ir ao escritório. Ele não tem nenhuma deficiência.

Ben, com o blazer da mente focado no waffle iron, esqueceu que tinha que preencher o mesmo formulário que Mia para sua própria consulta médica. Ele também está usando o telefone para preencher o formulário. O tráfego está parando e andando, então o ônibus avança inesperadamente enquanto ele trabalha.

Como os tamanhos-alvo foram aumentados nos campos do formulário de medicamentos, Ben consegue preencher o formulário facilmente. Ele não precisa se preocupar em clicar na caixa de seleção errada ou tocar no botão de opção errado. O pensamento nem passa por sua cabeça. Ele consegue terminar o formulário e voltar a pensar nos waffles.

Agora estamos projetando universalmente!!

Nesta postagem, vimos como um formulário simples pode apresentar barreiras para pessoas com deficiência e como podemos usar o elemento <label> para remover essas barreiras. Também vimos como uma simples alteração pode tornar o formulário mais fácil de usar para pessoas com e sem deficiência. Esta é a essência do Desenho Universal. Considerando as necessidades das pessoas com deficiência, podemos tornar nossos aplicativos melhores para todos.

Obrigado por ler. Espero que você tenha aprendido algo novo ou lembrado de algo que possa ter esquecido.