N'utilisez pas l'attribut d'espace réservé

L'attribut placeholder contient une quantité surprenante de problèmes qui l'empêchent de tenir ses promesses. Expliquons pourquoi vous devez arrêter de l'utiliser.

Introduit dans le cadre de la spécification HTML5, l'attribut d'espace réservé "représente un bref indice (mot ou expression courte) destiné à aider l'utilisateur à entrer des données lorsque le contrôle n'a aucune valeur. Un indice pourrait être un exemple de valeur ou une brève description du format attendu. "

Cet attribut apparemment simple contient une quantité surprenante de problèmes qui l'empêchent de tenir ses promesses. J'espère que je pourrai vous convaincre d'arrêter de l'utiliser.

Techniquement correct

Les intrants sont les portes par lesquelles presque tout le commerce électronique doit passer. Indépendamment de vos sentiments sur la place de l'empathie dans la conception les intrants inutilisables laissent de l'argent sur la table

La présence d'un attribut d'espace réservé ne sera pas signalée par un logiciel automatisé de vérification de l'accessibilité. Cependant, cela ne signifie pas nécessairement que c'est utilisable. En fin de compte, l'accessibilité concerne les personnes, pas les normes il est donc important de penser à votre interface en termes autres que la liste de contrôle.

Appelez cela remédiation, conception inclusive, accès universel, etc. L'esprit de toutes ces philosophies se résume à faire des choses que tout le monde peut utiliser. Vu par cette lentille, placeholder ne tient tout simplement pas debout.

The Problems

Translation

Les navigateurs avec des fonctions de traduction automatique telles que Chrome ignorent les attributs lorsqu'une demande de traduction du courant la page est lancée. Pour de nombreux attributs, c'est le comportement souhaité, car une valeur mise à jour peut casser la logique ou la structure de page sous-jacente .

Un des attributs ignorés par les navigateurs est placeholder . Pour cette raison, le contenu de l'espace réservé ne sera pas traduit et restera la langue originale.

Si une personne demande une page à traduire, on s'attend à ce que tout le contenu de la page visible soit mis à jour. Les espaces réservés sont fréquemment utilisés pour fournir des instructions de formatage d'entrée importantes ou sont utilisés à la place d'un élément label plus approprié (plus sur cela dans un peu). Si ce contenu n'est pas mis à jour avec le reste de la page traduite, il y a de fortes chances qu'une personne non familière avec la langue ne soit pas capable de comprendre et d'exploiter correctement l'entrée.

Cela devrait être une raison suffisante pour ne pas utiliser l'attribut.

Alors que nous sommes sur le sujet de la traduction, il vaut également la peine de souligner que l'emplacement n'est pas la même chose que la préférence linguistique. Beaucoup de gens définissent leurs appareils pour utiliser une langue qui n'est pas la langue officielle du pays rapportée par l'adresse IP de leur navigateur (sans parler de VPN ), et nous devrions respecter cela. Assurez-vous de garder votre contenu décrit sémantiquement – vos voisins vous en seront reconnaissants!

Interopérabilité

L'interopérabilité est la pratique qui consiste à faire en sorte que différents systèmes échangent et comprennent des informations. C'est une partie fondamentale d'Internet et de la technologie d'assistance.

La description sémantique de votre contenu le rend interopérable. Une entrée interopérable est créée en associant par programmation un élément label à cet élément. Les étiquettes décrivent le but d'un champ de saisie, en fournissant à la personne qui remplit le formulaire une invite sur laquelle elle peut intervenir. Une façon d'associer une étiquette à une entrée consiste à utiliser l'attribut pour avec une valeur correspondant à celle de l'entrée id .

Sans ce pour l'appariement / id la technologie d'assistance sera incapable de déterminer à quoi sert l'entrée. L'association par programme fournit un crochet d'API que des logiciels tels que des lecteurs d'écran ou reconnaissance vocale peuvent utiliser. Sans cela, les personnes qui dépendent de ce logiciel spécialisé ne pourront pas lire ou exploiter les entrées.

La raison pour laquelle je mentionne ceci est que placeholder est souvent utilisé à la place d'un élément label . Bien que je sois personnellement déconcerté par la pratique, il semble avoir gagné du terrain dans la communauté du design. Ma meilleure estimation pour sa popularité est l'effet de grille géométriquement précis qu'il crée lorsqu'il est placé à côté d'autres champs d'entrée sans étiquette agit comme designer Catnip.

L'effet de l'étiquette flottante un cousin proche de ce phénomène, utilise aussi souvent l'attribut d'espace réservé à la place d'une étiquette .

Une chose intéressante qui mérite d'être soulignée est que si une étiquette est associée à une entrée par programmation, cliquer ou tapoter sur le texte de l'étiquette mettra l'accent sur l'entrée. Cette petite astuce fournit une zone supplémentaire pour interagir avec l'entrée, ce qui peut être bénéfique aux personnes ayant des problèmes de contrôle moteur . Les espaces réservés agissant comme étiquettes, ainsi que les étiquettes flottantes, ne peuvent pas le faire

Cognition

Le Recensement des États-Unis de 2016 répertorie près de 15 millions de personnes déclarant avoir des difficultés cognitives. choisir de s'auto-signaler. En extrapolant cela, nous pouvons supposer que les problèmes d'accessibilité cognitive touchent une grande partie de la population mondiale.

L'auto-déclaration mérite d'être mentionnée, car une personne peut ne pas savoir ou être à l'aise de partager une condition d'accessibilité cognitive . Malheureusement, il y a encore beaucoup de stigmates attachés à la divulgation de ce genre d'information, car cela affecte souvent des choses comme les perspectives d'emploi et de logement.

La cognition peut être inhibée en situation, ce qui signifie qu'il peut très bien arriver. toi. Il peut être affecté par des choses comme le multitâche, la privation de sommeil, le stress, la toxicomanie et la dépression. Je pourrais être un peu blasé ici, mais cela ressemble beaucoup à des conditions que vous trouverez dans la plupart des emplois de bureau.

Rappel

Le parapluie des préoccupations cognitives couvre des conditions telles que perte de mémoire à court terme, traumatisme cérébral, et le trouble d'hyperactivité avec déficit de l'attention. Ils peuvent tous affecter la capacité d'une personne à se rappeler des informations.

Lorsqu'une personne entre des informations dans une entrée, son contenu d'espace réservé disparaît. La seule façon de le restaurer est de supprimer les informations saisies. Cela crée une expérience où le langage de guidage est supprimé dès que la personne qui tente de remplir l'entrée interagit avec elle. Pas génial!

Lorsque votre capacité à vous rappeler des informations est inhibée, cela rend ces règles disparues agaçantes. Pour les entrées avec des exigences compliquées à satisfaire – par exemple en créant un nouveau mot de passe – cela transcende les ennuis et devient une barrière difficile à surmonter.

Grand aperçu )

Tandis que des personnes plus technologiquement avancées ont appris des astuces comme couper des informations saisies, passer en revue le contenu de l'espace réservé pour rafraîchir leur mémoire, puis le recoller pour le modifier, Les personnes moins alphabétisées techniquement ne comprennent pas nécessairement pourquoi le contenu de l'aide disparaît ou comment le ramener.

Digital Literacy

Considérant que de plus en plus de la population mondiale est en ligne, il incombe à nos concepteurs responsables et les développeurs pour que ces personnes se sentent bien accueillies. Votre petit coin d'Internet (ou intranet!) Pourrait très bien être l'une de leurs premières expériences en ligne – en supposant que l'utilisateur final «saura juste» est une arrogance simple.

Pour les lecteurs américains, un petit rappel que peut ne pas vouloir dire étranger. L'accès est en hausse pour les Américains plus âgés . Alors que l'alphabétisation numérique deviendra plus courante parmi les populations plus âgées à mesure que le temps avance, les questions d'accessibilité le seront aussi .

Pour quelqu'un qui ne l'a jamais rencontré, le texte d'espace réservé peut ressembler sauter l'entrée. Si c'est un champ obligatoire, la soumission du formulaire va créer une expérience frustrante où ils ne peuvent pas comprendre ce qu'est l'erreur, ou comment la réparer. Si ce n'est pas un champ obligatoire, votre formulaire risque toujours de ne pas collecter des informations secondaires potentiellement utiles.

Utility

Le contenu de l'espace réservé est limité à une chaîne de texte statique, ce qui n'est pas toujours suffisant. pour communiquer le message. Il peut avoir besoin d'un style supplémentaire, ou contenir un balisage descriptif, des attributs, des images et une iconographie.

Ceci est particulièrement pratique dans les systèmes de conception matures. Les options de style supplémentaires créées en déplaçant la chaîne de texte hors de l'élément d'entrée permettent de tirer parti des jetons de conception du système et de tous les avantages qui en découlent.

Dans notre monde réactif et mobile-premier, il y a de très fortes chances que des informations importantes soient tronquées:

Vision

Contraste des couleurs

Les styles par défaut des principaux navigateurs pour le contenu des espaces réservés utilisent une couleur gris clair pour communiquer visuellement qu'il s'agit d'une suggestion. Beaucoup de conceptions d'entrée personnalisées suivent cette convention en prenant la couleur du contenu d'entrée et en l'éclaircissant.

Malheureusement, cette technique risque d'aller à l'encontre des problèmes de contraste des couleurs. Le contraste des couleurs est un rapport déterminé en comparant la luminosité du texte et les valeurs de couleur d'arrière-plan; dans ce cas, c'est la couleur du texte de l'espace réservé sur l'arrière-plan de l'entrée.

Voir le stylo Taux de contraste du par défaut du navigateur par défaut par Eric Bailey ( @ericwbailey ) CodePen .

Si le contenu de l'espace réservé a un taux de contraste trop faible pour être perçu, cela signifie que les informations essentielles au remplissage d'un formulaire peuvent ne pas être visibles par les personnes malvoyantes. Pour la taille de police d'entrée la plus commune, le rapport est de 4,5: 1

Comme toutes les préoccupations d'accessibilité, les conditions de basse vision peuvent être permanentes ou temporaires, biologiques ou environnementales ou une combinaison. Les handicaps biologiques comprennent des conditions telles que l'hypermétropie, la daltonisme, les pupilles dilatées et les cataractes. Les conditions environnementales incluent des conditions telles que l'éblouissement du soleil de midi, un réglage de luminosité faible, des écrans de confidentialité, de la graisse et du maquillage laissés sur votre écran lors de votre dernier appel téléphonique, et ainsi de suite.

Ce rapport n'est pas t une préférence esthétique personnelle que j'essaie d'imposer aux autres arbitrairement. Cela fait partie d'un ensemble de règles minutieusement élaborées qui aident à faire en sorte que la plus grande partie de la population puisse utiliser la technologie numérique, indépendamment de leurs capacités ou de leurs circonstances. Consciemment ignorer ces règles est d'être complice dans la pratique de l'exclusion.

Et voici le frotter: En essayant de rendre les attributs d'espace réservé inclus, la couleur du contenu de l'espace réservé mis à jour peut devenir assez sombre pour être interprétée comme une entrée numérique. les gens instruits. Le champ d'adresse e-mail de la page de réinitialisation du mot de passe de GoFundMe a un espace réservé qui lit email@address.com et est défini sur une couleur noire foncée qui lui donne l'apparence d'une entrée entrée. Capture d'écran. « />

Mode contraste élevé

Le système d'exploitation Windows contient une fonction appelée Mode contraste élevé . Lorsqu'il est activé, il attribue de nouvelles couleurs aux éléments d'interface à partir d'une palette spéciale à fort contraste qui utilise un nombre limité d'options de couleur. Voici un exemple de ce à quoi cela peut ressembler:

En mode Contraste élevé, le contenu de l'espace réservé est associé à l'une de ces couleurs à contraste élevé, ce qui donne l'apparence d'une information pré-remplie. Comme discuté précédemment, cela pourrait empêcher les gens de comprendre que l'entrée peut avoir besoin d'informations.

Vous vous demandez peut-être s'il est possible de mettre à jour le style en mode Contraste élevé pour rendre un espace réservé plus compréhensible. Bien qu'il soit possible de cibler le mode Contraste élevé dans une requête multimédia, je vous implore de ne pas le faire. Développeur front-end Hugo Giraudel l'a dit le mieux :

"Le mode contraste élevé n'est plus une question de design mais une facilité d'utilisation stricte. Vous devriez viser la plus haute lisibilité, pas l'esthétique des couleurs. "

Les gens qui s'appuient sur le mode Contraste élevé l'utilisent à cause de la façon dont est prévisible . Modifier indûment la façon dont il présente le contenu peut interférer avec la seule façon dont ils peuvent utiliser de manière fiable un ordinateur. Dans le cas de l'allégement de la couleur du contenu de l'espace réservé pour le faire apparaître comme son traitement en mode non-contraste élevé, vous courez un risque très réel de leur rendre impossible de percevoir.

Une solution

Attribut d'espace réservé:

• Ne peut pas être traduit automatiquement;
• Est souvent utilisé à la place d'une étiquette, verrouillant la technologie d'assistance;
• Peut masquer des informations importantes lorsque le contenu est entré;
• Peut être trop léger-
• Possède des options de style limitées
• Peut ressembler à des renseignements pré-remplis et être sauté

Eesh. Ce n'est pas génial.

Conception

Déplacer le contenu de l'espace réservé au-dessus de l'entrée, mais sous l'étiquette:

Cette approche:

• Communique une hiérarchie visuelle et structurelle:
  • Ce pour quoi cette entrée est destinée,
  • Ce que vous devez savoir pour utiliser l'entrée avec succès, et
  • l'entrée elle-même.
• Peut être traduit
• Ne ressemblera pas à des informations pré-remplies.
• Peut être vu dans des circonstances de basse vision.
• Ne disparaîtra pas lorsque le contenu est entré dans l'entrée. 19659076] Peut inclure un balisage sémantique et être stylisé via CSS

De plus, le contenu de l'aide sera gardé visible lorsque l'entrée est activée sur un appareil avec un clavier logiciel. S'il est placé en dessous de l'entrée, le contenu peut être masqué lorsqu'un clavier apparaît en bas de la fenêtre d'affichage du périphérique:

Développement

Voici comment traduire notre exemple conçu en code:

  
     Votre numéro d'identification d'employé
  
  

     Peut être trouvé sur votre profil intranet employé. Exemple:  a1234567-89 .
  
  

Cela ne déroge pas trop de l'appariement d'attributs pour / id : L'élément est associé par programmation au ] input via sa id déclaration de "employee-id". L'élément p placé entre l'élément étiquette et élément d'entrée remplace un attribut espace réservé . vous vous demandez peut-être. "Pourquoi ne mettons-nous pas simplement tout ce contenu de remplacement d'espace réservé dans l'élément label ? Il semble que ce serait beaucoup moins de travail! »La réponse est que la commodité du développeur ne devrait pas avoir la priorité sur l'expérience utilisateur.

En utilisant aria-describedby pour associer par programme l'entrée avec l'élément p nous créons une priorité d'information pour les lecteurs d'écran qui a la parité avec ce qu'une personne parcourant sans lecteur d'écran pourrait expérimenter. aria-describedby s'assure que le contenu p sera décrit en dernier, après le contenu du label et le type d'entrée auquel il est associé.

En d'autres termes, c'est le contenu demandé par l'entrée, le type d'entrée, puis l'aide supplémentaire si vous en avez besoin – exactement ce que quelqu'un éprouverait si elle regardait la saisie de formulaire.

L'expérience utilisateur englobe tous les utilisateurs, y compris ceux qui naviguent à l'aide de lecteurs d'écran. Le contenu de l'aide est autonome et facile d'accès, si la personne utilisant un lecteur d'écran doit le référencer de nouveau. Comme il s'agit d'un nœud autonome, il peut également être désactivé (généralement avec la touche Ctrl) sans risquer d'ignorer d'autres informations importantes.

Inclure le contenu de l'aide dans l'étiquette le rend inutilement bavard . label s devrait être significatif, mais aussi concis . Ajouter trop d'informations à une étiquette peut avoir le contraire de l'effet désiré, le rendant trop long pour le rappeler ou simplement trop frustrant pour écouter tout le long. En fait, le Web Content Accessibility Guidelines a des règles qui répondent spécifiquement à cette question: Critères de réussite 2.4.6 et 3.3.2 .

Exemple

Voici la solution implémentée dans code en direct:

Voir le stylo Ne pas utiliser l'attribut fictif par Eric Bailey ( @ericwbailey ) le CodePen .

Et voici un vidéo montrant comment les lecteurs d'écran populaires le manipulent:

Une meilleure solution

"Moins une interface requiert de ses utilisateurs, plus elle est accessible."

- Alice Boxhall

Une dernière réflexion: avez-vous besoin de ces informations supplémentaires?

Les bonnes solutions frontales tirent parti des attributs d'entrée spéciaux et qui permettent des pratiques de validation pour éviter le déchargement travail supplémentaire sur la personne qui veut simplement utiliser votre site ou application avec comme peu de complication possible

Une bonne rédaction crée des étiquettes qui décrivent clairement et succinctement le but de l'entrée. Faites un bon travail ici et l'étiquette coupe l'ambiguïté, surtout si vous la teste auparavant

Une bonne expérience utilisateur consiste à créer des flux intelligents qui anticipent les besoins, désirs et désirs des gens en capitalisant sur les informations existantes pour supprimer autant de questions inutiles que possible.

Accueillir les personnes qui utilisent votre site Web ou votre application web, c'est porter un regard critique sur ce que vous tenez pour acquis lorsque vous naviguez sur Internet. En ne faisant aucune hypothèse sur la situation des autres - y compris la technologie qu'ils utilisent - vous pouvez faire votre part pour aider à prévenir l'exclusion.

Prenez le temps d'examiner votre conception et votre code et de voir ce qui ne résiste pas à l'examen. voyez si vous utilisez l'attribut placeholder pourrait être un bon endroit pour commencer.

Debout sur les épaules des géants. Grâce à Roger Johansson Adam Silver Scott O'Hara et Katie Sherwin pour leur publication sur le sujet.

(rb, ra, yk, il)