Maison > Article > interface Web > Résumé de la façon d'utiliser correctement l'attribut de titre HTML
De nombreux amis novices sont confus au sujet des deux attributs title et alt. Ils utilisent souvent l'attribut title pour remplacer l'attribut alt de l'élément img ou comme titre de l'image, etc. Ces comportements sont interdits aux amis qui le font. Je ne comprends pas, je peux me référer à l'article suivant
Si vous souhaitez masquer quelque chose aux utilisateurs utilisant des téléphones, des tablettes et des technologies d'assistance, mais l'afficher uniquement aux utilisateurs de clavier, utilisez l'attribut title.
Détails
Il y a un problème avec l'attribut de titre HTML lui-même. Le problème est qu'il ne fonctionne pas suffisamment bien dans certains domaines importants, même s'il existe depuis plus de 14 ans. Avec l’essor des appareils tactiles, le rôle de cet attribut a encore diminué. L'accessibilité de l'attribut title est devenue un problème en raison du manque de prise en charge des navigateurs, des lecteurs d'écran et de l'attention de l'auteur.
L'attribut title devient redondant en raison du manque de prise en charge dans les situations suivantes :
Pour les personnes accédant aux informations de contenu Web dans les navigateurs mobiles. Habituellement, le contenu de l'attribut title est affiché sous forme de message d'invite dans les navigateurs de bureau. Pour autant que je sache, aucun navigateur mobile ne prend en charge l'affichage d'info-bulles et il n'existe aucune autre méthode visuelle pour accéder au contenu de l'attribut title.
Informatif pour ceux qui ne peuvent pas utiliser de souris. Habituellement, le contenu de l'attribut title est affiché sous forme de message d'invite dans les navigateurs de bureau. Bien que le comportement des informations rapides ait un historique de plus de 10 ans, aucun navigateur n'a mis en œuvre la méthode consistant à utiliser le clavier pour afficher l'attribut titre.
Pour une utilisation sur la plupart des éléments HTML, il fournit des informations aux personnes utilisant diverses technologies d'assistance. Pour autant que je sache, les lecteurs d'écran ne prennent pas en charge l'accès aux informations sur les attributs du titre.
L'attribut titre n'est pas convivial comme suit
Utilisateurs de téléphones mobiles
Utilisateurs du clavier uniquement
Utilisateurs utilisant des loupes d'écran
Utilisateurs de lecteurs d'écran
Motricité fine Utilisateurs ayant des déficiences cognitives
Utilisateurs ayant des déficiences cognitives
Exemples d'attributs de titre utiles :
Étiquetage d'un cadre ou d'un élément iframe :
Fournir des étiquettes qui s'affichent dans des circonstances particulières nécessitant des programmes. L'utilisation directe d'étiquettes de texte visibles serait redondante :
Contrôle d'étiquette dans la table de données.
Exemples où l'attribut title est inutile ou peu utile :
Ajoutez des informations supplémentaires aux liens ou au contenu environnant qui ne peut pas être du texte :
newsletter
Au lieu de cela, ces informations doivent faire partie du texte du lien ou à côté du lien.
Fournissez les mêmes informations que le texte du lien :
newsletter
Il est recommandé de ne pas copier le contenu du lien car l'attribut title. Cela équivaut en fait à ne rien faire.
Titre de l'image :
alt="Le château a maintenant deux tours et deux murs.">
Les informations sur le titre sont probablement les informations les plus importantes et devraient être accessibles par tous les utilisateurs par défaut. Si tel est le cas, ce contenu doit se trouver juste à côté de l’image.
Utilisé à la place des balises de formulaire, supprimant les balises de texte visibles :
Les utilisateurs de lecteurs d'écran accéderont aux balises des éléments du formulaire, car l'attribut title est inclus dans le nom de l'attribut dans l'API d'accessibilité (qui n'est pas pris en charge lorsque les étiquettes de texte utilisent l'élément label). Ce n'est pas le cas de nombreux autres utilisateurs. Il est recommandé d'inclure une étiquette de texte visible dans la mesure du possible.
Fournissez à l'élément de formulaire les mêmes informations que le contenu de l'étiquette visible :
" n1">
La duplication du texte de l'étiquette visible est impossible, sauf pour ajouter une série de bruit cognitif de l'utilisateur. Ne le fais pas. La répétition du texte de l'étiquette visible ne semble servir à rien d'autre que d'ajouter un tas de bruit cognitif ennuyeux, arrêtez cette utilisation.
Fournit des directives supplémentaires pour les éléments du formulaire :
;
Si cette directive est importante pour une utilisation correcte d'un élément de formulaire, veuillez fournir des informations textuelles autour de l'élément afin que chaque utilisateur puisse la lire.
En extension de l'abréviation :
W3C
Bien que l'attribut title de l'élément abbr soit pris en charge par le logiciel de lecture d'écran, en utilisant cela reste problématique car il n'est pas disponible pour les autres groupes d'utilisateurs. Il est recommandé de fournir le nom complet au format texte lorsque l'abréviation apparaît pour la première fois dans le document, ou de fournir un glossaire du nom complet. Cela ne veut pas dire que l’attribut title ne peut pas être utilisé, car il a des limites et le nom complet doit être fourni sous forme de texte.
HTML 5.1 inclut des conseils généraux sur l'utilisation de l'attribut title :
Le recours à l'attribut title est actuellement déconseillé, car de nombreux agents utilisateurs sont incapables d'afficher cet attribut comme l'exige la spécification (par exemple, exiger un pointeur de souris pour provoquer l'affichage d'informations d'invite, excluant les utilisateurs utilisant uniquement un clavier et les utilisateurs d'écran tactile).
L'utilisation de l'attribut title à la place de l'attribut alt d'un élément img ou comme titre d'une image est interdite
S'appuyer sur l'attribut title est actuellement interdit en raison de la faible prise en charge de l'accessibilité pour cet attribut dans de nombreux agents utilisateurs...
Pour plus d'articles récapitulatifs sur la façon d'utiliser correctement l'attribut de titre HTML, veuillez faire attention au site Web PHP chinois !