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

Introduit dans le cadre de la spécification HTML5, l'attribut d'espace réservé "représente une courte indication (un mot ou une courte phrase) destinée à aider l'utilisateur à saisir des données lorsque le contrôle n'a pas de valeur. Un indice peut ê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 pouvoir 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 le logiciel de vérification d'accessibilité automatisé. Cependant, cela ne signifie pas nécessairement qu'il 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 de parcourir une liste de contrôle.

Appelez cela remédiation, conception inclusive, accès universel, peu importe. L'esprit de toutes ces philosophies se résume à fabriquer des choses que les gens - tous les gens - peuvent utiliser. Vu à travers cet objectif, l' placeholder ne tient tout simplement pas le coup.

Les problèmes

Traduction

Les navigateurs dotés de fonctionnalités de traduction automatique telles que Chrome ignorent les attributs lorsqu'une demande de traduction de la page actuelle est lancée. Pour de nombreux attributs, il s'agit d'un comportement souhaité, car une valeur mise à jour peut rompre la logique ou la structure sous-jacente de la page.

L'un des attributs ignorés par les navigateurs est placeholder . Pour cette raison, le contenu de l' placeholder ne sera pas traduit et restera dans la langue d'origine.

Si une personne demande qu'une page soit traduite, on s'attend à ce que tout le contenu visible de la page 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 d' label plus approprié (plus à ce sujet dans un instant). Si ce contenu n'est pas mis à jour avec le reste de la page traduite, il y a de fortes chances qu'une personne peu familière avec la langue ne soit pas en mesure de comprendre et d'utiliser correctement l'entrée.

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

Pendant que nous parlons de traduction, il convient également de souligner que l'emplacement n'est pas la même chose que la préférence linguistique. De nombreuses personnes configurent leurs appareils pour utiliser une langue qui n'est pas la langue officielle du pays signalée par l'adresse IP de leur navigateur (sans parler des VPN), et nous devons respecter cela. Assurez-vous de garder votre contenu sémantiquement décrit - vos voisins vous remercieront !

Interopérabilité

L'interopérabilité est la pratique consistant à faire en sorte que différents systèmes échangent et comprennent des informations. C'est un élément fondamental d'Internet et des technologies d'assistance.

Décrire sémantiquement votre contenu le rend interopérable. Une input interopérable est créée en y associant par programmation un élément label . Les étiquettes décrivent l'objectif d'un champ de saisie, fournissant à la personne qui remplit le formulaire une invite sur laquelle elle peut agir. Une façon d'associer une label à une input consiste à utiliser l'attribut for avec une valeur qui correspond à l' id de l'entrée.

Sans cet appariement for / id , la technologie d'assistance ne pourra pas déterminer à quoi sert l'entrée. L'association programmatique fournit un hook d'API que des logiciels tels que des lecteurs d'écran ou la reconnaissance vocale peuvent utiliser. Sans lui, les personnes qui s'appuient sur ce logiciel spécialisé ne pourront pas lire ou utiliser les entrées.

La raison pour laquelle je mentionne cela est que l' placeholder est souvent utilisé à la place d'un élément d' label . Bien que je sois personnellement déconcerté par cette pratique, elle semble avoir gagné du terrain dans la communauté du design. Ma meilleure estimation de 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 de saisie sans étiquette qui agissent comme de l'herbe à chat.

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

Une chose intéressante à souligner est que si une étiquette est associée par programme à une entrée, cliquer ou appuyer 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 pour les personnes ayant des problèmes de contrôle moteur. Les espaces réservés servant d'é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 qui déclarent avoir des difficultés cognitives - et cela ne compte que les personnes qui choisissent de se déclarer elles-mêmes. En extrapolant à partir de cela, nous pouvons supposer que les problèmes d'accessibilité cognitive affectent une partie importante de la population mondiale.

L'auto-déclaration vaut la peine d'être signalée, dans la mesure où une personne peut ne pas savoir ou se sentir à l'aise de dire qu'elle souffre d'un problème d'accessibilité cognitive. Malheureusement, il y a encore beaucoup de stigmates attachés à la divulgation de ce type d'informations, car cela affecte souvent des choses comme les perspectives d'emploi et de logement.

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

Rappeler

L'ensemble des préoccupations cognitives couvre des conditions telles que la perte de mémoire à court terme, les lésions cérébrales traumatiques 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 lui. Pas génial!

Lorsque votre capacité à vous rappeler des informations est inhibée, il est ennuyeux de suivre ces règles qui disparaissent. Pour les entrées avec des exigences compliquées à satisfaire, par exemple la création d'un nouveau mot de passe, cela transcende la gêne et devient un obstacle difficile à surmonter.

Alors que les personnes plus sophistiquées sur le plan technologique peuvent avoir appris des astuces astucieuses telles que couper les informations saisies, revoir le contenu de l'espace réservé pour rafraîchir leur mémoire, puis le recoller pour le modifier, les personnes moins instruites sur le plan technologique peuvent ne pas comprendre pourquoi le contenu de l'aide est disparaître ou comment le faire revenir.

Littératie numérique

Étant donné que de plus en plus de la population mondiale se connecte, il nous incombe, en tant que concepteurs et développeurs responsables, de faire en sorte que ces personnes se sentent les bienvenues. Votre petit coin d'Internet (ou intranet !) pourrait très bien être l'une de leurs premières expériences en ligne - supposer que l'utilisateur final "saura juste" est une simple arrogance.

Pour les lecteurs basés aux États-Unis, un doux rappel que nouveau ne veut pas dire étranger. L'accès est en hausse pour les Américains plus âgés. Alors que la littératie numérique deviendra plus courante parmi les populations plus âgées au fil du temps, les problèmes d'accessibilité le seront également.

Pour quelqu'un qui ne l'a jamais rencontré auparavant, le texte de l'espace réservé peut ressembler à du contenu saisi, ce qui l'oblige à ignorer l'entrée. S'il s'agit d'un champ obligatoire, la soumission du formulaire créera une expérience frustrante où ils ne comprendront peut-être pas quelle est l'erreur ou comment la corriger. S'il ne s'agit pas d'un champ obligatoire, votre formulaire court toujours le risque inutile de ne pas collecter d'informations secondaires potentiellement précieuses.

Utilitaire

Le contenu de l'aide de l'espace réservé est limité à une chaîne de texte statique, et cela peut ne pas toujours être suffisant pour communiquer le message. Il peut être nécessaire de lui appliquer un style supplémentaire ou de 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 signifient qu'il peut tirer parti des jetons de conception du système et de tous les avantages qui en découlent.

La longueur du texte de l'espace réservé est également limitée à la largeur de l'entrée dans laquelle il est contenu. Dans notre monde réactif et mobile, il y a de fortes chances que des informations importantes soient tronquées :

Vision

Contraste des couleurs

Les styles par défaut des principaux navigateurs pour le contenu d'espace réservé utilisent une couleur gris clair pour indiquer visuellement qu'il s'agit d'une suggestion. De nombreuses 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 de se heurter à 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, il s'agit de la couleur du texte de l'espace réservé sur l'arrière-plan de l'entrée.

Si le contenu de l'espace réservé a un rapport de contraste trop faible pour être perçu, cela signifie que les informations essentielles pour remplir un formulaire avec succès peuvent ne pas être visibles par les personnes malvoyantes. Pour le dimensionnement de police d'entrée le plus courant, 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, le daltonisme, les pupilles dilatées et les cataractes. Les conditions environnementales incluent des circonstances telles que l'éblouissement du soleil de midi, un réglage de faible luminosité permettant d'économiser la batterie, des écrans de confidentialité, de la graisse et du maquillage laissés sur votre écran par votre dernier appel téléphonique, etc.

Ce ratio n'est pas une préférence esthétique personnelle que j'essaie d'imposer arbitrairement aux autres. Cela fait partie d'un ensemble de règles minutieusement élaborées qui aident à garantir que le plus grand nombre possible de personnes peuvent utiliser la technologie numérique, quelles que soient leurs capacités ou leurs circonstances. Ignorer consciemment ces règles, c'est être complice de pratiquer l'exclusion.

Et voici le hic : en essayant de rendre les attributs d'espace réservé inclusifs, la couleur du contenu de l'espace réservé à contraste plus élevé mis à jour peut devenir suffisamment sombre pour être interprétée comme une entrée saisie, même par des personnes plus alphabétisées en numérique. Cela ramène le problème au domaine des préoccupations cognitives.

Mode contraste élevé

Le système d'exploitation Windows contient une fonctionnalité appelée Mode de contraste élevé. Lorsqu'il est activé, il attribue de nouvelles couleurs aux éléments d'interface à partir d'une palette spéciale à contraste élevé 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' placeholder se voit attribuer l'une de ces couleurs à contraste élevé, ce qui le fait ressembler à des informations pré-remplies. Comme indiqué précédemment, cela pourrait empêcher les gens de comprendre que l'entrée peut nécessiter l'entrée 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. Kitty Giraudel, développeur front-end, l'a bien dit :

"Le mode contraste élevé n'est plus une question de design mais de stricte convivialité. Vous devez viser la lisibilité la plus élevée, pas l'esthétique des couleurs.

Les personnes qui comptent sur le mode Contraste élevé l'utilisent en raison de sa prévisibilité. Modifier indûment la façon dont il présente le contenu peut interférer avec la seule façon dont ils peuvent utiliser un ordinateur de manière fiable. Dans le cas d'éclaircir la couleur du contenu de l'espace réservé pour le faire apparaître comme son traitement sans mode de contraste élevé, vous courez un risque très réel de le rendre impossible à percevoir.

Une solution

Pour récapituler, l'attribut d'espace réservé :

• Ne peut pas être traduit automatiquement ;
• Est souvent utilisé à la place d'une étiquette, bloquant la technologie d'assistance ;
• Peut masquer des informations importantes lors de la saisie de contenu ;
• Peut être de couleur trop claire pour être lisible ;
• Options de style limitées ;
• Peut ressembler à des informations pré-remplies et être ignoré.

Eesh. Ce n'est pas génial. Alors, que pouvons-nous faire à ce sujet?

Concevoir

Déplacez le contenu de l'espace réservé au-dessus de l'entrée, mais en dessous de l'étiquette :

Cette approche:

• Communique une hiérarchie visuelle et structurelle :
  • A quoi sert cette entré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.
• Peut inclure un balisage sémantique et être stylisé via CSS.

De plus, le contenu de l'aide sera conservé lorsque la saisie est activée sur un appareil doté d'un clavier logiciel. S'il est placé sous l'entrée, le contenu peut être masqué lorsqu'un clavier à l'écran apparaît en bas de la fenêtre d'affichage de l'appareil :

Développement

Voici comment traduire notre exemple conçu en code :

 <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>

Cela ne s'écarte pas trop d'un appariement d'attributs accessible for / id traditionnel : l'élément label est associé par programmation à l' input via sa déclaration id de « employee-id ». L'élément p placé entre les éléments label et input remplace un attribut d' placeholder .

"Alors", vous vous demandez peut-être. « Pourquoi ne pas simplement mettre tout ce contenu de remplacement d'espace réservé dans l'élément d' label ? Il semble que ce serait beaucoup moins de travail ! La réponse est que la commodité du développeur ne doit pas primer sur l'expérience utilisateur.

En utilisant aria-describedby pour associer par programmation l' input à l'élément p , nous créons une priorité d'informations pour les lecteurs d'écran qui est à parité avec ce qu'une personne naviguant sans lecteur d'écran éprouverait. aria-describedby garantit que le contenu p sera décrit en dernier, après le contenu de l' label et le type d'entrée auquel il est associé.

En d'autres termes, il s'agit du contenu demandé par l'entrée, de quel type d'entrée il s'agit, puis d'une aide supplémentaire si vous en avez besoin - exactement ce que quelqu'un éprouverait s'il regardait l'entrée 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 à naviguer vers et depuis, si la personne utilisant un lecteur d'écran a besoin de s'y référer à nouveau. Comme il s'agit d'un nœud autonome, il peut également être réduit au silence (généralement avec la touche Contrôle) sans risquer de désactiver d'autres informations importantes.

Inclure le contenu de l'aide dans le cadre de l' label le rend inutilement verbeux. label doivent être significatives, mais aussi concises. Ajouter trop d'informations à une étiquette peut avoir le contraire de l'effet souhaité, la rendant trop longue à rappeler ou simplement trop frustrante à écouter jusqu'au bout. En fait, les directives pour l'accessibilité du contenu Web contiennent des règles qui traitent spécifiquement de cela : critères de réussite 2.4.6 et 3.3.2.

Exemple

Voici la solution implémentée en live code :

Voir l'attribut Pen Don't use the placeholder d'Eric Bailey (@ericwbailey) sur CodePen.

Et voici une vidéo montrant comment les lecteurs d'écran populaires le gèrent :

Une meilleure solution

"Moins une interface demande à ses utilisateurs, plus elle est accessible."

— Alice Boxhall

Une dernière réflexion : avez-vous même besoin de ces informations supplémentaires sur l'espace réservé ?

Les bonnes solutions frontales tirent parti d'attributs d'entrée spéciaux et de pratiques de validation adaptées pour éviter de décharger le travail supplémentaire sur la personne qui souhaite simplement utiliser votre site ou votre application avec le moins de complications possible.

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

Une bonne expérience utilisateur consiste à créer des flux intelligents qui anticipent les besoins, les désirs et les 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 signifie porter un regard critique sur ce que vous tenez pour acquis lorsque vous naviguez sur Internet. En ne présumant pas de la situation des autres, y compris de 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 - vérifier si vous utilisez l'attribut d'espace réservé peut être un bon point de départ.

Debout sur les épaules de géants. Merci à Roger Johansson, Adam Silver, Scott O'Hara et Katie Sherwin pour leurs écrits sur le sujet.