[Résolu] Attribut title

Bonjour à tous
Je constate que l'attribut "title", sensé afficher un texte au survol d'une balise, fonctionne de façon aléatoire, voir plus du tout, sous FireFox.
Par ailleurs cet attribut est bien entendu inopérant sur les appareils mobiles qui ne connaissent pas le concept de survol.
Question : comment remplacer cet attribut efficacement ?

Bonjour,

Il n'y a pas de raison que cela fonctionne moins bien sous Firefox ou alors très récemment ? J'en croise peu ou alors chez le même client pendant des mois alors ça a pu m'échapper
Un cas parmi d'autres où ça ne peut pas fonctionner : un SVG avec un title dans un lien lui-même avec un title (parce que les SVG n'étaient plus optimisés correctement). Le title du lien apparait sur 3px sur les bords...

Mais peu importe, parce que title est rarement ou jamais la bonne solution à un problème ou parfois la "solution" à un non-problème

Au préalable, ne pas confondre l'élément title et l'attribut.
(Hors-Sujet, précisions pour d'autres lecteurs que toi) Titre de page : élément unique dans une page, contenu unique par rapport à toutes les autres pages du site.
D'après Opquast
Règle n°97 Le titre de chaque page permet d'identifier le site.
Règle n°98 Le titre de chaque page permet d'identifier son contenu.
fin du HS

Attribut title
Il est utilisé dans beaucoup de contextes et je préfère distinguer ces cas :

1. Sur des liens en général
Variantes :
sur des liens de téléchargement,
sur des liens-images ou boutons-icônes,

2. Pour apporter une aide ("bouton" (?) ou (i))

3. Abréviation HTML (élément abbr)

4. Sur des div, p et autres éléments de contenu textuel

Je détaille dans le post suivant

1. Pour les liens, ces 2 fiches AcceDe Web :
5.3. Ne pas utiliser les attributs aria-label et title sur des liens ou boutons explicites. Ce n'est pas parce qu'il y a un champ "title" dans l'admin du CMS ("c'est pour l'accessibilité") qu'il faut s'en servir. Nan, vraiment rarement
5.2. Compléter les liens et les boutons non explicites avec aria-label ou title (ses commentaires apportent des infos)
Le Guide de l'intégrateur RGAA 3 résume ce qu'il ne faut pas faire : Liens - Titres de lien

Liens de téléchargement :
Idéalement faire figurer le format, le poids (et la langue du document si différente) dans l'intitulé du lien. Cf. article d'Orange Accessibilité Les bonnes pratiques pour les liens de téléchargement.
Sinon se servir du title, en automatisant si possible ce résultat (intitulé explicite, le title reprend à l'identique cet intitulé et le complète par le format et la taille - et la langue si différente mais c'est rare)

<a href="partition-53.pdf"
  title="Partition de la 12e inachevée par Compositeur - PDF, 1,5 Mo">
  Partition de la 12e inachevée par Compositeur
</a>

Liens-images : s'il y a besoin d'une infobulle pour rassurer l'utilisateur sur la fonction du lien, ptet que la solution est d'expliciter un picto que personne ne comprend plutôt que d'ajouter un title. Genre "Menu et les 3 barres horizontales", pas juste le "menu burger"...
Contre-exemple : dans un tableau d'admin avec plein de boutons par ligne, va pour un title. Mais on peut utiliser des infobulles personnalisées, voir 2. juste après.

2. Tooltips et Toggletips
https://inclusive-components.design/tooltips-toggletips/ qui décrit 3 choses différentes. De mémoire, j'avais le plus grand mal à me repérer dans cet article parce que je n'avais pas compris qu'il aborde 2 types de Tooltips aux usages différents puis plus loin le Toggletip qui est encore autre chose. On trouve ailleurs d'autres manières de faire, il n'y en a pas une meilleure que l'autre mais avec le recul je préfère ses choix.
Article bien long (et en anglais) mais il se suffit à lui-même.

3. Abréviations : privilégier le "en toutes lettres".
Notice AcceDe Web "éditoriale" Expliciter les sigles

4. div, p et autres balisages de texte : les lecteurs d'écran ne restituent pas ça. Ça ne sert à rien de rajouter un title là-dessus.

Reste les formulaires : trop de cas, j'y reviendrai plus tard
Modifié par Felipe (02 Jul 2024 - 15:17)

salut
bizarre, chez moi la balise 'title' semble fonctionner normalement dans firefox.
tu a un exemple ou çà ne s'affiche pas chez toi?

@Felipe : je vois que j'ai du grain à moudre, je vais essayer de comprendre ça et voir si je peux m'en servir

Voici le contexte : https://www.alma-musica.net/html/partitions/

Une section parmi d'autres dans cette page :

les boutons permettent d'ouvrir des pages ou des fichiers audio.
Compte tenu de la variété des boutons, une légende explicative serait bienvenue, mais je n'ai pas la place pour l'afficher en permanence, d'où l'utilisation de "title"
Actuellement on ne voit rien...

Voici le code d'un des boutons :

<button class="model" title="Monteverdi Choir Gardiner"></button>

L'ouverture du fichier .mp3 est déterminée par un addEventListener

Je crois avoir trouvé ce qui ne va pas :

<button class="model" title="Monteverdi Choir Gardiner"></button>
<!-- la balise <button> est vide -->
<!-- le "title" apparaît si j'ajoute un espace -->
<button class="model" title="Monteverdi Choir Gardiner"> </button>

en effet il n'y a pas de "survol" parce qu'il n'y a rien à survoler !

Je vais corriger mon code en conséquence.

Reste à savoir comment faire sur un support mobile, mais c'est une autre histoire.

Bonsoir,

Si ton bouton n'a pas de texte visible, alors l'attribut title n'est pas la bonne solution pour lui donner un nom accessible.
Il faut utiliser au choix soit l'attribut aria-label, soit du texte hors écran.

<button aria-label="télécharger machin.mp3"></button>

OU bien:

<button><span class="visually-hidden">Télécharger machin.mp3</span></button>

La première règle d'ARIA dit: ne pas en utiliser, sauf si tu en as vraiment besoin.

La solution avec le texte hors écran est donc préférable. Tu peux trouver le code CSS de visually-hidden aussi appelée sr_only dans plusieurs frameworks.

ET si tu ne fais ni l'un, ni l'autre, le bouton ne sera pas accessible aux lecteurs d'écran car rien ne pourra renseigner sur sa fonction.
Moi et mes semblables devrons donc jouer aux devinettes.

Bonjour, 
ce qui m'a toujours gêné dans ces "titles", c'est qu'ils s'ouvrent avec un léger retard, qui peut faire penser à un visiteur qu'il n'y a pas de title.
Pas de solution pour ça, je crois.

J'ai fini par remplacer les titles par du code javascript qui ajoute une

<div id="COMMENTS">texte à afficher</div>

avec le code qui va bien pou afficher/cacher cette div en fonction des évènements.
Il n'y a bien sûr qu'une seule <div> de ce genre dans la page, elle est déplacée dans le bouton actif et le texte est initialisé par le code js.