Não use o atributo placeholder

Introduzido como parte da especificação HTML5, o atributo placeholder “representa uma dica curta (uma palavra ou frase curta) destinada a auxiliar o usuário na entrada de dados quando o controle não tem valor. Uma dica pode ser um valor de amostra ou uma breve descrição do formato esperado.”

Esse atributo aparentemente simples contém uma quantidade surpreendente de problemas que o impedem de cumprir o que promete. Espero que eu possa convencê-lo a parar de usá-lo.

Tecnicamente correto

As entradas são as portas pelas quais quase todo e-commerce tem que passar. Independentemente de seus sentimentos sobre o lugar da empatia no design, insumos inutilizáveis ​​deixam dinheiro na mesa.

A presença de um atributo de espaço reservado não será sinalizada pelo software de verificação de acessibilidade automatizado. No entanto, isso não significa necessariamente que é utilizável. Em última análise, acessibilidade é sobre pessoas, não sobre padrões, por isso é importante pensar em sua interface em termos além de uma lista de verificação.

Chame isso de remediação, design inclusivo, acesso universal, seja o que for. O espírito de todas essas filosofias se resume a fazer coisas que as pessoas – todas as pessoas – possam usar. Visto através dessa lente, o placeholder simplesmente não se sustenta.

Os problemas

Tradução

Navegadores com recursos de tradução automática, como o Chrome, ignoram os atributos quando uma solicitação para traduzir a página atual é iniciada. Para muitos atributos, esse é o comportamento desejado, pois um valor atualizado pode quebrar a lógica ou a estrutura da página subjacente.

Um dos atributos ignorados pelos navegadores é o placeholder . Por isso, o conteúdo do placeholder não será traduzido e permanecerá como o idioma de autoria original.

Se uma pessoa está solicitando a tradução de uma página, a expectativa é que todo o conteúdo visível da página seja atualizado. Os espaços reservados são frequentemente usados ​​para fornecer instruções importantes de formatação de entrada ou são usados ​​no lugar de um elemento de label mais apropriado (mais sobre isso daqui a pouco). Se esse conteúdo não for atualizado junto com o restante da página traduzida, há uma grande possibilidade de que uma pessoa não familiarizada com o idioma não consiga entender e operar a entrada com sucesso.

Isso deve ser motivo suficiente para não usar o atributo.

Já que estamos falando de tradução, também vale ressaltar que localização não é o mesmo que preferência de idioma. Muitas pessoas configuram seus dispositivos para usar um idioma que não é o idioma oficial do país informado pelo endereço IP do navegador (para não falar das VPNs), e devemos respeitar isso. Certifique-se de manter seu conteúdo descrito semanticamente - seus vizinhos agradecerão!

Interoperabilidade

Interoperabilidade é a prática de fazer com que diferentes sistemas troquem e compreendam informações. É uma parte fundamental da Internet e da tecnologia assistiva.

Descrever semanticamente seu conteúdo o torna interoperável. Uma input interoperável é criada associando programaticamente um elemento de label a ela. Os rótulos descrevem a finalidade de um campo de entrada, fornecendo à pessoa que preenche o formulário um aviso sobre o qual ela pode agir. Uma maneira de associar um label a um input , é usar o atributo for com um valor que corresponda ao id do input .

Sem este emparelhamento for / id , a tecnologia assistiva não poderá determinar para que serve a entrada. A associação programática fornece um gancho de API que softwares como leitores de tela ou reconhecimento de voz podem utilizar. Sem ele, as pessoas que confiam neste software especializado não poderão ler ou operar entradas.

A razão pela qual estou mencionando isso é que o placeholder é frequentemente usado no lugar de um elemento de label . Embora eu esteja pessoalmente perplexo com a prática, ela parece ter ganhado força na comunidade de design. Meu melhor palpite para sua popularidade é o efeito de grade geometricamente preciso que ele cria quando colocado ao lado de outros campos de entrada sem rótulo, que age como catnip de designer.

O efeito de rótulo flutuante, um primo próximo desse fenômeno, muitas vezes também utiliza o atributo placeholder no lugar de um label .

Uma coisa interessante que vale a pena ressaltar é que, se um rótulo estiver associado programaticamente a uma entrada, clicar ou tocar no texto do rótulo colocará o foco na entrada. Esse pequeno truque fornece uma área extra para interagir com a entrada, o que pode ser benéfico para pessoas com problemas de controle motor. Espaços reservados que atuam como rótulos, bem como rótulos flutuantes, não podem fazer isso.

Conhecimento

O Censo dos Estados Unidos de 2016 lista quase 15 milhões de pessoas que relatam ter dificuldades cognitivas – e isso conta apenas os indivíduos que optam por se auto-relatar. Extrapolando a partir disso, podemos supor que as preocupações com a acessibilidade cognitiva afetam uma parcela significativa da população mundial.

Vale a pena chamar a atenção para o autorrelato, pois uma pessoa pode não saber ou se sentir à vontade para compartilhar que tem uma condição de acessibilidade cognitiva. Infelizmente, ainda há muitos estigmas associados à divulgação desse tipo de informação, pois muitas vezes afeta coisas como perspectivas de emprego e moradia.

A cognição pode ser inibida situacionalmente, o que significa que pode muito bem acontecer com você. Pode ser afetado por coisas como multitarefa, privação de sono, estresse, abuso de substâncias e depressão. Eu posso estar um pouco cansado aqui, mas isso soa muito como as condições que você encontrará na maioria dos trabalhos de escritório.

Lembrar

O guarda-chuva de preocupações cognitivas abrange condições como perda de memória de curto prazo, lesão cerebral traumática e transtorno de déficit de atenção e hiperatividade. Todos eles podem afetar a capacidade de uma pessoa de recordar informações.

Quando uma pessoa insere informações em uma entrada, seu conteúdo de espaço reservado desaparece. A única maneira de restaurá-lo é remover as informações inseridas. Isso cria uma experiência em que a linguagem de orientação é removida assim que a pessoa que tenta preencher a entrada interage com ela. Nada bom!

Quando sua capacidade de recordar informações é inibida, isso torna irritante seguir essas regras de desaparecimento. Para entradas com requisitos complicados para satisfazer – digamos, criar uma nova senha – ela transcende o aborrecimento e se torna uma barreira difícil de superar.

Enquanto pessoas tecnologicamente mais sofisticadas podem ter aprendido truques inteligentes, como cortar informações inseridas, revisar o conteúdo do espaço reservado para atualizar sua memória e colá-lo novamente para editar, pessoas menos alfabetizadas tecnologicamente podem não entender por que o conteúdo de ajuda é desaparecendo ou como trazê-lo de volta.

Alfabetização digital

Considerando que cada vez mais da população mundial está se conectando, o ônus recai sobre nós, como designers e desenvolvedores responsáveis, para que essas pessoas se sintam bem-vindas. Seu cantinho da Internet (ou intranet!) pode muito bem ser uma de suas primeiras experiências on-line – assumindo que o usuário final “simplesmente saberá” é simples arrogância.

Para os leitores dos EUA, um lembrete gentil de que novo pode não significar estrangeiro. O acesso está aumentando para os americanos mais velhos. Embora a alfabetização digital se torne mais comum entre as populações mais velhas com o passar do tempo, as questões de acessibilidade também.

Para alguém que nunca o encontrou antes, o texto do espaço reservado pode parecer conteúdo inserido, fazendo com que eles ignorem a entrada. Se for um campo obrigatório, o envio do formulário criará uma experiência frustrante em que eles podem não entender qual é o erro ou como corrigi-lo. Se não for um campo obrigatório, seu formulário ainda corre o risco desnecessário de não coletar informações secundárias potencialmente valiosas.

Utilitário

O conteúdo de ajuda do placeholder é limitado a apenas uma sequência de texto estático e isso nem sempre é suficiente para comunicar a mensagem. Pode ser necessário ter um estilo adicional aplicado a ele ou conter marcação descritiva, atributos, imagens e iconografia.

Isso é especialmente útil em sistemas de design maduros. As opções de estilo adicionais criadas ao mover a string de texto para fora do elemento de entrada significa que ele pode aproveitar os tokens de design do sistema e todos os benefícios que vêm com o uso deles.

O comprimento do texto do espaço reservado também é limitado à largura da entrada em que ele está contido. Em nosso mundo responsivo, que prioriza dispositivos móveis, há uma boa chance de que informações importantes possam ser truncadas:

Visão

Contraste de cores

Os estilos padrão dos principais navegadores para conteúdo de espaço reservado usam uma cor cinza claro para comunicar visualmente que é uma sugestão. Muitos designs de entrada personalizados seguem essa convenção tomando a cor do conteúdo de entrada e clareando-o.

Infelizmente, essa técnica provavelmente entrará em conflito com problemas de contraste de cores. O contraste de cor é uma proporção determinada pela comparação da luminosidade do texto e dos valores de cor de fundo; nesse caso, é a cor do texto do espaço reservado sobre o plano de fundo da entrada.

Se o conteúdo do espaço reservado tiver uma taxa de contraste muito baixa para ser percebida, isso significa que as informações críticas para o preenchimento bem-sucedido de um formulário podem não ser vistas por pessoas com condições de baixa visão. Para o dimensionamento de fonte de entrada mais comum, a proporção é 4,5:1.

Como todas as preocupações de acessibilidade, as condições de baixa visão podem ser permanentes ou temporárias, biológicas ou ambientais, ou uma combinação. As deficiências biológicas incluem condições como hipermetropia, daltonismo, pupilas dilatadas e catarata. As condições ambientais incluem circunstâncias como o brilho do sol do meio-dia, uma configuração de baixo brilho para economia de bateria, telas de privacidade, graxa e maquiagem deixadas na tela pela última ligação telefônica e assim por diante.

Essa proporção não é uma preferência estética pessoal que estou tentando impor aos outros arbitrariamente. Faz parte de um conjunto de regras meticulosamente desenvolvidas que ajudam a garantir que o maior número possível de pessoas possa operar a tecnologia digital, independentemente de sua capacidade ou circunstância. Ignorar conscientemente essas regras é ser cúmplice na prática da exclusão.

E aqui está o problema: ao tentar tornar os atributos do placeholder inclusivos, a cor do conteúdo do placeholder de maior contraste atualizado pode ficar escura o suficiente para ser interpretada como entrada inserida, mesmo por pessoas mais alfabetizadas digitalmente. Isso leva a questão de volta ao campo das preocupações cognitivas.

Modo de alto contraste

O sistema operacional Windows contém um recurso chamado Modo de alto contraste. Quando ativado, ele atribui novas cores aos elementos da interface de uma paleta especial de alto contraste que usa um número limitado de opções de cores. Aqui está um exemplo de como pode ser:

No modo de alto contraste, o conteúdo do placeholder é atribuído a uma dessas cores de alto contraste, fazendo com que pareçam informações pré-preenchidas. Conforme discutido anteriormente, isso pode impedir que as pessoas entendam que a entrada pode precisar de informações inseridas nela.

Você pode estar se perguntando se é possível atualizar o estilo no modo de alto contraste para tornar um espaço reservado mais compreensível. Embora seja possível direcionar o modo de alto contraste em uma consulta de mídia, imploro que você não o faça. A desenvolvedora de front-end Kitty Giraudel disse melhor:

“O modo de alto contraste não é mais sobre design, mas usabilidade estrita. Você deve buscar a mais alta legibilidade, não a estética das cores.”

As pessoas que confiam no modo de alto contraste o usam devido à sua previsibilidade. Alterar indevidamente a forma como apresenta o conteúdo pode interferir na única maneira de usar um computador de maneira confiável. No caso de clarear a cor do conteúdo do espaço reservado para fazê-lo parecer com o tratamento do modo sem alto contraste, você corre um risco muito real de impossibilitar a percepção deles.

Uma solução

Para recapitular, o atributo placeholder:

• Não pode ser traduzido automaticamente;
• Muitas vezes é usado no lugar de um rótulo, bloqueando a tecnologia assistiva;
• Pode ocultar informações importantes quando o conteúdo é inserido;
• Pode ser muito claro para ser legível;
• Tem opções de estilo limitadas;
• Pode parecer informação pré-preenchida e ser ignorada.

Eesh. Isso não é ótimo. Então, o que nós podemos fazer sobre isso?

Projeto

Mova o conteúdo do placeholder acima da entrada, mas abaixo do rótulo:

Esta abordagem:

• Comunica uma hierarquia visual e estrutural:
  • Para que serve esta entrada,
  • Coisas que você precisa saber para usar a entrada com sucesso e
  • a própria entrada.
• Pode ser traduzido.
• Não parecerá com informações pré-preenchidas.
• Pode ser visto em circunstâncias de baixa visão.
• Não desaparecerá quando o conteúdo for inserido na entrada.
• Pode incluir marcação semântica e ser estilizado via CSS.

Além disso, o conteúdo da ajuda será mantido à vista quando a entrada for ativada em um dispositivo com teclado de software. Se colocado abaixo da entrada, o conteúdo pode ficar obscurecido quando um teclado na tela aparece na parte inferior da janela de visualização do dispositivo:

Desenvolvimento

Veja como traduzir nosso exemplo projetado para código:

 <div class="input-wrapper"> <label for="employee-id"> Your employee ID number </label> <p class="input-hint"> Can be found on your employee intranet profile. Example: <samp>a1234567-89</samp>. </p> <input name="id-number" type="text" /> </div>

Isso não é muito diferente de um emparelhamento de atributo tradicional acessível for / id : O elemento label é associado programaticamente à input por meio de sua declaração de id de “employee-id”. O elemento p colocado entre o label e os elementos de input atua como um substituto para um atributo de placeholder .

“Então”, você deve estar se perguntando. “Por que não colocamos todo o conteúdo de substituição de espaço reservado no elemento do label ? Parece que daria muito menos trabalho!” A resposta é que a conveniência do desenvolvedor não deve ter prioridade sobre a experiência do usuário.

Ao usar aria-describedby para associar programaticamente a input com o elemento p , estamos criando uma prioridade de informações para leitores de tela que tem paridade com o que uma pessoa que navega sem um leitor de tela experimentaria. aria-describedby garante que o conteúdo p será descrito por último, após o conteúdo do label e o tipo de entrada ao qual ele está associado.

Em outras palavras, é o conteúdo que a entrada está solicitando, que tipo de entrada é e, em seguida, ajuda adicional se você precisar - exatamente o que alguém experimentaria se examinasse a entrada do formulário.

A experiência do usuário abrange todos os usuários, incluindo aqueles que navegam com o auxílio de leitores de tela. O conteúdo da ajuda é autocontido e fácil de navegar, caso a pessoa que usa um leitor de tela precise fazer uma nova referência a ele. Como é um nó independente, ele também pode ser silenciado (normalmente com a tecla Control) sem o risco de silenciar outras informações importantes.

Incluir o conteúdo de ajuda como parte do label o torna desnecessariamente detalhado. label s deve ser significativo, mas também conciso. Adicionar muitas informações a um rótulo pode ter o efeito oposto ao desejado, tornando-o muito longo para ser lembrado ou simplesmente muito frustrante para ouvir até o fim. De fato, as Diretrizes de Acessibilidade de Conteúdo da Web possuem regras que tratam especificamente disso: Critérios de Sucesso 2.4.6 e 3.3.2.

Exemplo

Aqui está a solução implementada em código ao vivo:

Veja a caneta Não use o atributo placeholder de Eric Bailey (@ericwbailey) no CodePen.

E aqui está um vídeo demonstrando como os leitores de tela populares lidam com isso:

Uma solução melhor

“Quanto menos uma interface exigir de seus usuários, mais acessível ela será.”

— Alice Box

Um pensamento final: você ainda precisa dessas informações adicionais de espaço reservado?

Boas soluções de front-end tiram proveito de atributos de entrada especiais e práticas de validação acomodadas para evitar descarregar o trabalho extra para a pessoa que simplesmente deseja usar seu site ou aplicativo com o mínimo de complicação possível.

Um bom copywriting cria rótulos que descrevem de forma clara e sucinta o propósito da entrada. Faça um bom trabalho aqui e o rótulo elimina a ambiguidade, especialmente se você testá-lo de antemão.

A boa experiência do usuário tem tudo a ver com a criação de fluxos inteligentes que antecipam as necessidades, desejos e desejos das pessoas, capitalizando as informações existentes para remover o maior número possível de perguntas desnecessárias.

Acomodar as pessoas que usam seu site ou aplicativo da web significa ter um olhar crítico sobre o que você considera certo quando navega na Internet. Ao não fazer suposições sobre as circunstâncias de outras pessoas – incluindo a tecnologia que elas usam – você pode fazer sua parte para ajudar a evitar a exclusão.

Reserve algum tempo para revisar seu design e código e ver o que não resiste ao escrutínio — verificar se você usa o atributo placeholder pode ser um bom ponto de partida.

Sobre os ombros de gigantes. Obrigado a Roger Johansson, Adam Silver, Scott O'Hara e Katie Sherwin por escreverem sobre o assunto.