L’attribut title

Pour citer le W3C, «cet attribut fournit des informations consultatives concernant l’élément sur lequel il se place ». Il n’est surtout pas une alternative à un élément graphique et ne doit donc pas apparaître lors du non-affichage de celui-ci.

Quel est son rôle et sa pertinence ?

L’attribut title est nécessaire si l’intitulé du lien ne peut se suffire à lui-même. Ainsi, s’il donne la même information que le lien (voir l’exemple ci-dessous), il est considéré comme non-pertinent.

Voici quelques unes de ses bonnes utilisations :

• Rendre explicite un lien hors contexte : nous trouvons souvent des liens sous la forme de « lire la suite » ou « en savoir plus » qui, mis hors contexte, ne servent à rien puisque l’internaute se demandera « lire la suite » de quoi ? « En savoir plus » sur quoi ?
  En y appliquant l’attribut title, la compréhension du lien est retrouvée. Pour comprendre, passez votre souris sur le lien suivant :  En savoir plus
• Informer de l’ouverture d’un nouvel onglet ou fenêtre
• Apporter une information supplémentaire sur un document à télécharger, tel que le poids, la taille…

Je vous propose 2 exemples afin d’illustrer son bon ou mauvais emploi.

1. L’utilisation du title sur les liens (survolez les liens avec votre souris)

Non pertinent

En septembre prochain, Perpignan sera le rendez-vous du Festival Visa pour l’image.

Pertinent

En septembre prochain, Perpignan sera le rendez-vous du Festival Visa pour l’image.

2. L’utilisation du alt et du title sur une image lien (survoler les images avec votre souris)

Non pertinent
Sur cet exemple, l’attribut alt de l’image et l’attribut title du lien sont similaires.
Le alt, décrit bien ce qu’est l’image (le logo du festival) mais l’attribut title n’apporte rien.
On ne sait pas où va nous mener le lien et nous n’avons aucune information complémentaire à l’image. Dans ce cas, il ne sert à rien d’insérer un title.

1
2

<a title="Logo du festival Visa pour l'image 2009" href="http://www.nethik.fr/wp-content/uploads/2009/08/logo-visa.png"><img class="alignleft" src="http://www.nethik.fr/wp-content/uploads/2009/08/logo-visa.png" alt="Logo du festival 'Visa pour l'image'" width="185" height="98" />
</a>

Pertinent
Sur ce second exemple, l’attribut alt de l’image et l’attribut title du lien sont différents.
Le alt, décrit bien ce qu’est l’image (le logo du festival) et l’attribut title apporte une information sur le lien.
On sait où va mener le lien et on a comme supplément d’information le thème du festival (le photojournalisme).

1

<a title="Accueil du site du Festival International de photojournalisme Visa pour l'image" href="../wp-content/uploads/2009/08/logo-visa.png"><img class="alignleft" src="../wp-content/uploads/2009/08/logo-visa.png" alt="Logo du festival Visa pour l'image 2009" width="185" height="98" /></a>

Pour terminer ce point, j’ai envie de dire prudence !

Il faut être vigilant à ne pas insérer de manière automatique un title à un lien. Le but serait d’avoir dans un maximum de cas un libellé de lien explicite qui se suffit.
Pour illustrer cette pratique avec parcimonie, je citerai Amélie Boucher, ergonome de référence : «Si l’internaute a l’impression de réfléchir et doute de l’issue de son clic, alors vous avez perdu la première partie de la bataille»…. mais ceci pourrait faire l’objet d’un autre article sur le bon usage et emploi des liens.

Comment est-il interprété par les navigateurs alternatifs ?

L’attribut title doit aussi être utilisé avec parcimonie car les navigateurs et les lecteurs d’écran l’interprètent différemment ce qui est souvent source de confusion.

Prenons par exemple Jaws, le lecteur d’écran synthétiseur vocal et interprète braille.

Logo du logiciel Jaws

Par défaut, ce logiciel donne la priorité au alt sur le title. Ce dernier ne sera lu que si le alt est absent (erreur html) ou vide.

Dans le cas où le title est lu, vous pouvez très vite comprendre l’intérêt de ne pas le remplir avec le même contenu que l’intitulé du lien. La synthèse vocale lira en effet l’intitulé du lien puis le title du lien…. et l’utilisateur entendra deux fois la même chose !

Les paramètres de configuration peuvent bien sûr être modifiés mais n’est-il pas préférable de tenir compte des paramètres configurés par défaut ?
Les utilisateurs non avertis ou non initiés ne gardent t-il pas la plupart du temps les paramètres prédéfinis ?

Pour finir, il est important de savoir que cet attribut n’est pas pris compte par la navigation clavier avec tabulations.

Et vous, connaissez-vous d’autres comportements pour cet attribut ?

Dans cette série d’articles, nous nous intéresserons aux attributs alt et title, souvent mal compris, qui méritent d’être utilisés à bon escient.

Pour simplifier leur rôle, gardons en tête que le alt définit une image alors que le title (l’attribut) fournit un complément d’information.

L’attribut « alt »

Commençons par clarifier l’ambiguïté sur l’emploi du alt.

Suite à un mauvais comportement de IE, certaines personnes pensent que cet attribut sert à afficher la bulle qui s’affiche au survol de la souris. Or, il s’agit du comportement dédié à l’attribut title.

Où se trouve le alt ? Où puis-je le renseigner ?

• Exemple dans Worpress : lorsque vous souhaitez insérer une image dans vos articles, vous devez renseigner les champs d’un formulaire, dans lequel se cache l’attribut alt !

les attributs alt et title dans le formulaire wordpress




• Exemple dans le code : le alt, élément indispensable de la balise img s’insère de la manière « clé=valeur ».
  

1

<img src="../images/visa.jpg" alt="logo visa pour l'image 2009" />

L’attribut alt et l’accessibilité

Depuis la version html 4.0, les recommandations du W3C précisent qu’il faut insérer l’attribut alt dans les balises d’images, sinon il encourt une erreur lors de la validation.

Son rôle en matière d’accessibilité est de fournir une alternative textuelle à l’élément auquel il est lié, si ce dernier n’est pas affiché :

• Les navigateurs en mode texte (Lynx, Links…) ou en synthèse vocale (Jaws…)  doivent interpréter l’image, le contenu du alt est alors lu ou écrit.
• Les images/animations peuvent être lentes à charger (images volumineuses, connexion lente), le texte alternatif est alors affiché en attendant le chargement complet.

Pour une utilisation optimum, ce texte alternatif doit avoir une longueur maximum de 80 caractères.
Pourquoi ? Tout simplement parce qu’une plage braille («dispositif permettant d’afficher en temps réel des caractères Braille») se compose de deux lignes de 40 caractères.

L’attribut alt et le référencement

• La recherche par image proposée par Google devient une habitude courante chez les internautes.

Si vous souhaitez y faire apparaître vos images, l’attribut alt doit être bien utilisé afin que Google les indexe correctement. En effet, les robots d’indexation des moteurs de recherche utilisent son contenu pour transcrire la signification d’une image. Pour en savoir plus, Sandrine vous donne ses astuces pour optimiser vos images dans son article comment bien référencer ses images sur Google ?.

Contrôler facilement le bon usage des attributs alt d’une page web

L’extension Web developer de Firefox, propose une fonctionnalité afin de désactiver toutes les images ou juste d’afficher les attributs alt de la page en cours :
Images > Désactiver les images
Images > Afficher les attributs Alt

Exemple :

Voici le contenu du alt qui s’affichera :

Logo du festival Visa pour l’image

Vous pouvez ainsi vérifier simplement la perspicacité du contenu de cet attribut.

Élément incontournable pour l’accessibilité et le référencement, l’alternative textuelle (alt) peut-être complémentaire d’un autre attribut qui sera lui à utiliser avec parcimonie … rendez-vous dans un prochain article pour le découvrir !

La technologie permet parfois un accès facilité à la culture aux personnes déficientes visuelles. Voici un exemple réussi au centre Georges Pompidou suivi d’un point général sur l’accessibilité des sites Internet.

Les arts visuels accessibles aux malvoyants

Depuis quelques temps les aveugles et malvoyants ont la possibilité d’apprécier plusieurs interprétations tactiles d’oeuvres du Centre Georges Pompidou à Paris.

Please touche me!

Réalisées grâce à une technologie innovante, par le créateur de lunettes Alain Milki, grâce à huit niveaux de reliefs et textures diverses gravées sur des plaques d’acétate de cellulose, ces interprétations tactiles peuvent ainsi être (re)découvertes du bout des doigts.

Exemple d'interprétation tactile d'un tableau de GEORGES ROUAULT (1871-1958) - Funicula (sous-titre Qui ne se grime pas)

Ainsi les malvoyants ont la possibilité de se créer une image mentale d’oeuvres prestigieuses (Picasso, Soulages, Ernst, Baselitz ou Piffaretti entre autres) en appréhendant les formes, les contours, les textures, mais aussi les notions abstraites de perspective ou de profondeur grâce au toucher des différentes strates du relief des images tactiles.

Cette aide peut être aussi couplée avec l’explication de l’œuvre écrite en gros caractère, en braille ainsi que par l’utilisation d’un audio guide prêté gratuitement aux personnes malvoyantes.

Les conférenciers spécialisés du Centre Pompidou proposent aussi des visites découvertes tactiles «Toucher pour voir» permettant de toucher des sculptures originales avec des gants et également des visites-conférences «Écouter voir» comprenant une audio-description.

Touchez, redécouvrez!

Le plus surprenant, c’est que ce parcours ouvert à tous permettra aux voyants de redécouvrir le tableau grâce au toucher et de discerner des éléments mis en avant par le relief qui leurs avaient échappés.

Imaginez-vous découvrir un tableau sans le voir, utiliser un autre sens que la vue, du coup l’imagination fait son travail et peut nous surprendre! Discutez-en avec une personne malvoyante, il y a des chances qu’elle ait remarqué des éléments que vous n’aviez pas vu et vice et versa! Après, la sensibilité de chacun, qui fait fi des handicaps, laissera une image de l’œuvre que chacun gardera en tête après la visite.
Cet exemple illustre encore une fois que l’ouverture sur la différence est au bénéfice de l’enrichissement de chacun d’entre nous.

Si son nom vous évoque son célèbre validateur XHTML, ce dernier ne constitue qu’une infime partie de son travail, ses missions étant très étendues et plus passionnantes les unes que les autres !

Qui est-il ?

Crée en 1994, le World Wide Web Consortium (W3C) est un organisme de « normalisation » dédié à la mise en place de standards afin d’assurer la pérennité et la compatibilité des différents formats du web.

Constitué d’une équipe fixe (environ 70 personnes) et d’un peu plus de 400 membres, issus de secteurs variés tels que l’industrie, la recherche ou encore  l’enseignement, il est financé par les cotisations de ces derniers.

Il me semble important de souligner qu’il s’agit d’un organisme à but non lucratif et qu’il ne joue pas un rôle législatif mais uniquement consultatif.

Le Consortium est piloté par 3 organismes :

• le Laboratoire d’Informatique et d’Intelligence Artificielle du MIT (États-Unis),
• l’Université de Keio (Japon),
• l’Institut National de Recherche en Informatique et en Automatique (France).

Hôtes permanents du W3C, ils mettent à  sa disposition des locaux et l’ensemble des services qui facilitent ses missions (documentation, ressources techniques, laboratoires).

Quel est son rôle ?

Le W3C agit à l’échelle internationale, en « inventant et en promouvant des langages et des protocoles universels, qui garantissent l’interopérabilité et une évolution homogène, décentralisée et standardisée du Web », selon les propos de l’un ses membres.

Ainsi, l’un de ses principaux travaux est la mise au point de standards et de spécifications techniques du Web.
Ces derniers sont publiés sous la forme de recommandations consultables directement sur le site du W3C.

Pour simplifier, voici ses principales motivations :

• Un Web accessible
  Rendre accessible à tous, cette source infinie d’information qu’est internet, que nous utilisions un simple navigateur Web, un synthétiseur vocal, un affichage braille ou encore un téléphone mobile.
• Un Web universel
  Un modèle stable et homogène, grâce auquel cette source infinie d’informations soit rendue disponible auprès du plus grand nombre.
• Un Web évolutif
  Une conception du Web simple et extensive pour permettre d’intégrer les futures innovations (par exemple, le Web mobile), Internet et ses nouvelles technologies étant en constante évolution.
• Un Web décentralisé
  Préserver ce média de tout contrôle de type pyramidal ou hiérarchique.

Un exemple d’actualité : le rôle du W3C dans le HTML5

Après avoir abandonné le XHTML 2.0 pour cause d’insuccès, le W3C travaille sur la standardisation du nouveau HTML. Il se base sur les recherches et développements du WHATWG, une collaboration non officielle des différents développeurs de navigateurs web, qui a initié cette implémentation du langage de balisage Web.

Ses groupes de travail destinés au HTML5 œuvrent à mettre en place une série de nouvelles recommandations/spécifications tout en garantissant la compatibilité de l’existant (HTML 4, XHTML 1.0).

Vous souhaitez en savoir plus sur le HTML5 ?
Consultez les articles de Cyril :

• HTML 5, vers un web plus sémantique
• Compléments d’informations sur la balise vidéo de HTML 5

Quels sont ses outils ?

Afin de nous aider à développer des sites Web dans le respect des standards, le W3C met à notre disposition plusieurs outils de validation :

• Validateur HTML
• Validateur CSS
• Validateur d’hyperliens
• Feed Validation Service, un service officiel de validation de flux du W3C, qui vérifie la syntaxe de Atom ou RSS.
• Validateur W3C Multipages, un outil qui permet de valider notre site Web en entier et d’un seul coup.

Pour se démarquer comme un site Web conforme au W3C, les développeurs y apposent un logo. Voici un petit échantillon de ceux que vous rencontrez :

Mais la plupart d’entre eux ne filoutent-ils pas en insérant cette marque de qualité ? Est-elle réellement justifiée sur leur site Web ? Voici un article qui réagit à ces interrogations.

Qu’est-ce-que le WAI ?

En 1997, le World Wide Web Consortium lance la Web Accessibility Initiative (WAI) destinée à solutionner les carences d’accessibilité du Web.

Ce projet se partitionne en 5 axes majeurs :

• Développer des guides pour l’accessibilité
• Assurer la compatibilité entre les principales technologies du Web et l’accessibilité
• Développer des outils pour évaluer et faciliter l’accessibilité
• Gérer la formation et l’information
• Se coordonner avec la recherche et le développement avancé

Pour aider les sites web à rendre leur contenu plus accessible, le WAI publie un guide, le WCAG2.0, regroupant un certains nombre de règles, réparties en 3 niveaux de conformité.

Une version française, créee dans un souci d’accessibilité aux ressources, est disponible pour permettre au plus grand nombre de le consulter et le mettre en pratique.

Le W3C et le web mobile

Un des tous derniers cheval de bataille du W3C est le Web mobile car force est de constater que les versions mobiles de la plupart des services mobiles ne sont pas compatibles entre eux.

Pour confirmer l’importance de cette mission, Dominique Hazaël-Massieux, directeur de l‘initiative Web mobile pour le W3C, précise que « La convergence des technologies du Web mobile offre une meilleure expérience aux utilisateurs mobiles et s’inscrit dans la mission du W3C visant à créer Un seul Web ».

Pour cela, en juillet 2008 est sorti le guide Les meilleures pratiques du Web Mobile 1.0… mais ce sujet sera le thème d’un prochain billet…

Carine Pedeux – 30 ans

Que fais-tu chez Nethik?

Je suis intégratrice web (XHTML, CSS, JavaScript) et je travaille dans le respect des standards du web (W3C), en collaboration avec les développeurs et la webdesigner.

De quoi vas-tu parler sur ce blog?

Je parlerai des bonnes pratiques du web en CSS et XHTML, des subtilités des navigateurs, de l’accessibilité numérique et des bonnes initiatives « éthiques et solidaires ».

Que peux-tu nous dire sur toi?

Depuis que je vis ici, je suis une adepte de la sieste, des marchés qui fleurent bon le sud, du basilic et du muscat …. .Et j’ai enfin compris les règles de la pétanque !

Quelles sont tes manies au bureau?

Prendre mon p’tit déj’ en arrivant le matin et faire une pause tea time (pour ça je ne suis pas la seule).

Délaisser mes collègues le midi pour aller promener mon toutou !

Quels sont tes centres d’intérêt hors internet?

La randonnée pédestre et aquatique, la cuisine, le roller (quand je tombe pas ! ) et les bonnes soirées entre amis !!

Alexandre Galiay, 24 ans

Que fais-tu chez Nethik?

Du développement en PHP / SQL / Javascript principalement, un peu d’intégration CSS, puis tout un tas d’autres choses! Par contre lire des docs de 5000 pages… j’ai un peu du mal!

De quoi vas-tu parler sur ce blog?

N’étant pas un grand rédacteur dans l’âme je ne pense pas être aussi à l’aise que mes chers collègues dans cette tâche, mais bon je compte quand même tenter de partager mes connaissances en conception de sites Web, et, pourquoi pas, évoquer des sujets moins « sérieux » comme la musique ou encore les sites de réseaux sociaux.

Que peux-tu nous dire sur toi?

Je suis passionné de musique, de batterie, de nouvelles technologies et de tout un tas de sites Internet du moment. Il paraît que je suis très (trop?) méticuleux, malgré tout je m’emploie à être quelqu’un de sympathique et de drôle… du moins je l’espère!

Quelles sont tes manies au bureau?

En vrac : taper sur l’autre développeur, faire galérer l’intégratrice pour un pixel, avoir la musique à fond dans le casque, faire galérer la rédactrice pour un espace, jouer de la batterie sur mon bureau, sortir des expressions que personne connait, mais aussi… apporter la bonne humeur au sein du bureau!

Quels sont tes centres d’intérêt?

J’en ai déjà cité pas mal quand même… Bon ok, je vais rajouter les soirées entre potes et les concerts pour ceux qui n’ont rien lu!

Un format universel ?

Le W3C, qui est en charge de la normalisation du web, ne fournira pas de spécifications concernant les codecs des balises audio et video de HTML 5. Le grands acteurs que sont Apple, Mozilla, Youtube ou Microsoft n’ont pas réussi à s’entendre sur un codec. Tout ceci est expliqué chez M.Nitot.
En attendant un consensus sur le format dominant, on peut toujours utiliser la balise « source » pour couvrir tous les formats vidéos et intégrer du Flash (par exemple) pour les navigateurs ne supportant pas cette fonctionnalité :

1
2
3

<video src="video.ogv" id="myVideo" controls>
  <object data="flvplayer.swf" type="application/x-shockwave-flash"><param value="flvplayer.swf" name="movie"/></object>
</video>

Contrôler la vidéo avec Javascript

Dans mon précédent article sur la balise vidéo, je n’ai pas parlé du contrôle des événements via Javascript. En effet, le working draft d’HTML 5, autrement dit le brouillon en cours d’écriture de la prochaine version d’HTML, prévoit un accès via le DOM pour contrôler une vidéo ou tout autre élément « media ». Quelques exemples :

1
2

var myVideo = document.getElementById("myVideo");
myVideo.play();

Tout un tas d’événements sont prévus tels que play, pause, end, seeked, volumechange, etc.

1
2

myVideo.addEventListener("seeked", function() { myVideo.play(); }, true);
myVideo.currentTime = 10.0;

Les développeurs vont-ils se lancer dès maintenant dans l’intégration des nouveautés de HTML 5 ?
En tout cas, à Nethik, on suit le sujet de près !

Cyril Lopez, 23 ans le petit jeune.

Que fais-tu chez Nethik?

Je suis Développeur Web et m’occupe principalement des applications PHP et Javascript des sites internet.

De quoi vas-tu parler sur ce blog?

Je vais parler de l’aspect technique du web, techniques de développement et astuces en PHP / SQL, javascript, CSS. Je m’intéresse aux standards et à l’accessibilité, bref à tout ce qui peut faire un web de qualité.

Ma fibre écolo me fera peut être dévier sur des sujets un peu plus « nature ».

Que peux-tu nous dire sur toi?

Faux calme, vrai amoureux de la nature.

Quelles sont tes manies au bureau?

Heu… Enlever mes chaussures ?

Quels sont tes centres d’intérêt ?

Jardin, Tennis de table, « Grilladaperozéconcerts ».

Le HTML dans sa version 5 nous promet de belles choses. De nouvelles balises qui vont permettre de sémantiser un peu plus encore le code des pages web : »nav« , « video« , « aside« , « section« , « audio« , « footer« , etc.

Quelques exemples d’utilisation

La balise « dialog » va signaler un dialogue.

1
2
3
4
5
6
7
8

<dialog>
  <dt>Jean</dt>
    <dd>Hey salut ! Quelle heure est-il ?</dd>
  <dt>Anne</dt>
    <dd>Il est 18h29</dd>
  <dt>Jean</dt>
    <dd>Super, merci bonne journée !</dd>
</dialog>

Bien plus intéressant, la balise « video » va permettre d’insérer dans la page web un lecteur vidéo sans utiliser un quelconque plugin (la plupart du temps : Flash).
Le code :

1
2
3
4
5

<video autoplay controls>
  <source src="foo.ogg" type="video/ogg"></source>
  <source src="foo.mov"></source>
  Votre navigateur ne reconnait pas la balise <code>video</code>
</video>

On peut proposer au navigateur plusieurs formats de vidéo. Ici Ogg et Quicktime. Le format ouvert Theora pourra aussi être utilisé. Pas de problème d’installation de plugin Flash Player, pas de javascript, cette balise ouvre des portes !

Exemple d'utilisation de la balise video dans Firefox

D’autant plus qu’un géant de la vidéo comme Dailymotion, annonce qu’il prendra en charge la balise d’ici peu. Une page de démonstration est en ligne à cette adresse : http://openvideo.dailymotion.com/fr/, à visiter avec un navigateur qui comprend cette balise comme Firefox dans sa version 3.5 ou Safari 4.

Quand pourra-t-on utiliser pleinement HTML 5 ?

Le site du W3C propose de ne pas attendre qu’HTML 5 devienne une recommandation (car cela peut se faire attendre je crois) et donc d’utiliser les nouvelles fonctionnalités du langage dès lors que les navigateurs l’implémenteront.
Quand on sait qu’Internet Explorer 6 détient encore une belle part de marché, et quand on voit en plus son implémentation très douteuse de CSS 2, on ne peut que se réjouir que la version 8 d’IE se vante d’un « strong support » d’HTML 5…

Edit : J’ai complété ce billet (codecs et API javascript) dans un complément d’informations sur la balise video.