Le blog de Sophie

Le pourquoi et comment de l’op­ti­mi­sa­tion ergo­no­mique et de l’ac­ces­si­bi­lité des sites web

Pour ce premier article du mois de décembre, j’aborde avec vous une théma­tique qui me tient parti­cu­liè­re­ment à cœur, puisque c’est cette dernière qui a fait naître chez moi, au début de mon adoles­cence, la passion que j’ai aujourd’­hui pour le web et tout ce qui l’en­globe (voir dernier point de cette article : « pour la petite histoire »).

Accessibilité web

Tout comme je suis inti­me­ment convain­cue qu’un site web mal réfé­rencé n’a aucune raison d’être (c’est bien beau d’avoir un site, mais s’il n’est visible pour personne, cela n’a aucun inté­rêt) ; un site ni ergo­no­mique, ni acces­sible peut rendre l’ex­pé­rience utili­sa­teur exécrable.

L’er­go­no­mie web et l’ac­ces­si­bi­lité web, c’est prendre en consi­dé­ra­tion l’in­ter­naute, le public auquel on cherche à s’adres­ser, et pas unique­ment faire un site « pour un site ». Non seule­ment est-ce primor­dial pour quiconque désir toucher un public, quel qu’il soit ; mais ces deux facteurs influencent égale­ment gran­de­ment le réfé­ren­ce­ment natu­rel ainsi que le taux de conver­sion, lorsqu’il s’agit d’un site a voca­tion commer­ciale.

Ergonomie web

« Cette notion d’ac­ces­si­bi­lité d’un site Inter­net est multiple, tant elle conjugue la tech­nique – avec le respect des stan­dards comme le W3C – et l’er­go­no­mie du site pour l’ou­vrir à tous » – Jour­nal du Net.

Cet article se consa­crera donc à vous donner quelques expli­ca­tions quant à ce qu’est l’er­go­no­mie et l’ac­ces­si­bi­lité des sites web ; mais égale­ment pourquoi opti­mi­ser ces deux aspects est impor­tant et, enfin, comment – dans les grandes lignes – garan­tir un mini­mum d’ac­ces­si­bi­lité et d’er­go­no­mie à votre site.

Qu’est-ce que l’ac­ces­si­bi­lité web ?

W3C

« Web acces­si­bi­lity means that people with disa­bi­li­ties can use the Web. More speci­fi­cally, Web acces­si­bi­lity means that people with disa­bi­li­ties can perceive, unders­tand, navi­gate, and inter­act with the Web, and that they can contri­bute to the Web. […] Web acces­si­bi­lity encom­passes all disa­bi­li­ties that affect access to the Web, inclu­ding visual, audi­tory, physi­cal, speech, cogni­tive, and neuro­lo­gi­cal disa­bi­li­ties. […] Most Web sites have acces­si­bi­lity barriers that make it diffi­cult or impos­sible for many people with disa­bi­li­ties to use the Web. […] Web acces­si­bi­lity also bene­fits people without disa­bi­li­ties. For example, a key prin­ciple of Web acces­si­bi­lity is desi­gning Web sites that are flexible to meet different user needs, prefe­rences, and situa­tions. This flexi­bi­lity also bene­fits people […] using a slow Inter­net connec­tion, people with « tempo­rary disa­bi­li­ties » such as a broken arm, and people with chan­ging abili­ties due to aging » – W3C.

Traduc­tion :

l’ac­ces­si­bi­lité web a pour objec­tif d’as­su­rer un accès à inter­net aux personnes ayant un handi­cap. De manière plus spéci­fique, cela signi­fie que des personnes atteintes d’un handi­cap sont en mesure de perce­voir, de comprendre, de navi­guer, et d’in­te­ra­gir avec le web ; et qu’ainsi ces indi­vi­dus puissent contri­buer au web. L’ac­ces­si­bi­lité web a pour but d’ou­tre­pas­ser toutes les inca­pa­ci­tés qui affectent l’ac­cès au web, en ce compris les handi­caps visuels, audi­tifs, physiques, verbaux, cogni­tifs et neuro­lo­giques. La plupart des sites web ont des barrières qui rendent diffi­cile, voire impos­sible pour de nombreux inter­nautes l’uti­li­sa­tion du web. Mais l’ac­ces­si­bi­lité web béné­fi­cie égale­ment aux personnes sans handi­cap. Par exemple, l’un des prin­cipes clés de l’ac­ces­si­bi­lité web est le design de sites web flexibles, qui permettent de rencon­trer les besoins, les préfé­rences ainsi que les situa­tions qui diffèrent d’un indi­vidu à un autre. Cette flexi­bi­lité béné­fi­cie égale­ment aux personnes qui ont une connexion à inter­net assez lente, les personnes à handi­cap tempo­raire (un bras cassé par exemple), et les gens dont les capa­ci­tés changent avec l’âge.

 

Accessibilité web pour personnes à handicap

Pourquoi rendre son site plus ergo­no­mique et acces­sible ne peut que vous être béné­fique

Un site ergo­no­mique et acces­sible pour amélio­rer votre réfé­ren­ce­ment natu­rel

Comme je l’avais évoqué au sein d’un de mes précé­dents articles : « Guide des dernières mises à jour de l’al­go­rithme de Google », le posi­tion­ne­ment sur les moteurs de recherche est le fruit d’une colla­bo­ra­tion entre le « bot » du moteur (lequel scan le contenu de votre site) et son algo­rithme qui, sur base d’une série de facteurs, défi­nira son posi­tion­ne­ment pour chaque recherche spéci­fique d’un inter­naute lambda.

Search Engine Spider

Pour être (méta­pho­rique­ment) plus clair, ce « bot » parcours votre site pour en « scan­ner » le contenu. Le terme anglo­phone « Web » signi­fiant « Toile », ce « bot » est souvent égale­ment consi­déré comme une « arai­gnée ». Cette dernière « rampe » (crawl en anglais) en utili­sant les « fils » (l’équi­valent des liens entrants et sortants / hyper­liens ou hyper­links en anglais) pour se dépla­cer de site en site, sur cette gigan­tesque « toile » que consti­tue l’in­ter­net d’aujourd’­hui. Mais cette arai­gnée est aveugle. Elle ne perce­vra pas votre design ni vos images. La seule manière qu’elle a de se repé­rer (à la manière d’une personne malvoyante dont les doigts caressent le braille) est de lire le contenu de votre site. Au mieux, vous avez opti­misé à la fois votre contenu et correc­te­ment complété vos balises au sein de votre code ; au pire, vous vous êtes dit que ce travail était facul­ta­tif (ou avez eu le malheur de tomber sur des incom­pé­tents) et vous voilà dans l’in­ca­pa­cité d’être correc­te­ment réfé­rencé sur Google. Triste constat.

« L’objec­tif de l’ac­ces­si­bi­lité pour le réfé­ren­ceur est de limi­ter au maxi­mum tous les obstacles pouvant bloquer l’in­dexa­tion par les moteurs. Il convient dès lors d’op­ti­mi­ser le contenu Web en privi­lé­giant les textes qui respectent des règles séman­tiques et syntaxiques. […] « Ces moteurs ne comprennent pas direc­te­ment les images et le texte qu’elles peuvent véhi­cu­ler. Pour être acces­sible, tout site doit être expli­cite avec des mots et des phrases en français. Chaque image doit être décrite textuel­le­ment et ces consignes s’ap­pliquent aussi aux liens qui doivent être rensei­gnés. Nous arri­vons à augmen­ter le ranking en augmen­tant le nombre d’ité­ra­tions sur une page. Le contenu est alors reva­lo­risé et plus clair pour le moteur » – Jour­nal du Net | Benoît Secher, direc­teur de l’in­no­va­tion au sein de Noheto, éditeur spécia­lisé en gestion de contenu Web.

Optimiser l'ergonomie et l'accessibilité web pour le référencement

« Factors such as content, usabi­lity issues and even conver­sion opti­mi­za­tion play growing role in how the search engines analyze a site for ranking purposes. Remem­ber, search engines want to deli­ver site’s that sear­chers find valuable » – Search Engine Jour­nal.

Traduc­tion :

des facteurs tels que le contenu, les ques­tions d’er­go­no­mie et même l’op­ti­mi­sa­tion des conver­sions, joue un rôle toujours plus impor­tant dans la manière dont les moteurs de recherche analyses un site web avant de le réfé­ren­cer.

Rappe­lez-vous, les moteurs de recherche veulent offrir aux inter­nautes qui effec­tuent une recherche des sites qu’ils trouvent de valeur.

Mais quel rapport existe-t-il entre l’op­ti­mi­sa­tion de l’er­go­no­mie et de l’ac­ces­si­bi­lité d’un site et son réfé­ren­ce­ment ?

Simple­ment parce que comme l’arai­gnée de Google parcours aveu­glé­ment votre site en scan­nant son contenu séman­tique, les logi­ciels de lecture pour malvoyant ou encore l’uti­li­sa­tion seule du clavier (dans le cas de personnes atteintes d’un handi­cap moteur) n’est possible que si vous avez correc­te­ment hiérar­chisé votre contenu séman­tique et complété vos balises et attri­buts.

L'internet des aveugles - clavier et lecteur braille

« Vous vous souve­nez de votre décou­verte d’In­ter­net ? […] il a fallu tâton­ner pas mal, faire des tests, contour­ner les sites non acces­sibles, les choses trop graphiques.

Comment ça se passe quand vous arri­vez sur un site ? […] je me fie à la façon dont une page est codée. Je vais cher­cher sa struc­ture et les diffé­rents objets sur lesquels je peux tomber : un menu, un titre, une photo, un formu­lai­re… Il faut que j’en fasse le tour avec mon logi­ciel de synthèse vocale.

C’est quoi un site bien fait pour vous ? Les déve­lop­peurs ne pensent pas toujours en prio­rité à l’ac­ces­si­bi­lité. Tous les sites ne sont pas forcé­ment utili­sables. Pendant plusieurs années, c’était la mode des sites en flash. Ca par exemple, c’est impos­sible pour moi d’y accé­der. Un site bien fait, pour moi, c’est quand il y a une struc­ture claire et pas de rafraî­chis­se­ment intem­pes­tif. Ça c’est atroce, vous êtes obligé de recom­men­cer à trou­ver des repères. Les sites char­gés sont aussi un enfer, mais j’ima­gine que visuel­le­ment, ça doit être la même sensa­tion s’il y a trop de choses, ou si c’est fouillis, vous allez avoir du mal à trou­ver ce que vous souhai­tez. Pour moi, c’est pareil. » – Rue89 | Témoi­gnage d’Hé­lène, 39 ans, aveugle.

En fin de compte, en opti­mi­sant le code et le contenu séman­tique de votre site, vous le rendez à la fois acces­sible à tout un chacun mais égale­ment ergo­no­mique. Vous conce­vez ainsi un site dit « propre » et permet­tez de surcroît aux bots des moteurs de recherche de correc­te­ment scan­ner votre contenu. Si au début d’In­ter­net, l’er­go­no­mie web et l’ac­ces­si­bi­lité étaient des notions peu courantes ; aujourd’­hui, vous n’avez plus aucune excuse.

Un site ergo­no­mique et acces­sible pour amélio­rer votre taux de conver­sion

Tunnel d'achat - tunnel de conversion - site e-commerce

Un site e-commerce dont le tunnel de conver­sion (ou tunnel d’achat) n’est pas opti­misé peut être source de nombreux aban­dons. Que le proces­sus d’achat soit trop long et fasti­dieux ; qu’une inscrip­tion soit impo­sée à l’ache­teur bien trop tôt dans le proces­sus d’achat ; ou encore que les frais de port ne soient indiqués nulle part (ou beau­coup trop tard) ; l’aban­don d’achat est alors monnaie courante.

Opti­misé d’un point de vue de l’er­go­no­mie et de l’ac­ces­si­bi­lité votre site e-commerce (en rendant l’in­ter­face plus intui­tive, mais égale­ment en prenant bien en compte la personne derrière son écran) vous assu­rera une dimi­nu­tion des aban­dons et une augmen­ta­tion des ventes / des conver­sions.

Le sujet étant suffi­sam­ment vaste pour faire l’objet d’un article à lui seul, je me conten­te­rai d’évoquer quelques points d’op­ti­mi­sa­tion du tunnel d’achat. Il convien­dra donc de :

  • Réduire à un maxi­mum de 4 étapes le proces­sus de commande / le tunnel de conver­sion, en indiquant toujours bien à l’ache­teur à quelle étape il se trouve (fil d’Ariane) ;

Tunnel d'Achat de Zalando

  • Affi­cher les frais de livrai­son avant la fina­li­sa­tion de la commande ;
  • Offrir la possi­bi­lité de dupliquer les données entre l’adresse de livrai­son et de factu­ra­tion ;
  • Mettre en évidence les Call-To-Action (par exemple : « ajout au panier », « sauve­garde », etc.) en leur assi­gnant une couleur autre que celle de la charte graphique ;
  • Offrir la possi­bi­lité de sauve­gar­der un produit « pour plus tard » dans une liste de favo­ris ;
  • Ne pas impo­ser d’ins­crip­tion avant la fina­li­sa­tion de la commande ;
  • Permettre à l’ache­teur d’in­sé­rer son code promo­tion­nel le plus tôt possible ;
  • Bien indiquer les diverses méthodes de paie­ment dispo­nibles ;

Méthodes de paiement - tunnel d'achat de Zalando

  • Toujours rassu­rer l’ache­teur sur la sécu­ri­sa­tion du proces­sus d’achat (adresse https, logo trus­ted shops, etc.).

trusted shops logo

Quelques grandes bases permet­tant de rendre son site web plus acces­sible

Cet article cher­chant à mettre en avant les grandes règles d’ac­ces­si­bi­lité, les points déve­lop­pés ci-dessous consti­tuent une liste non-exhaus­tive d’élé­ments touchant à l’er­go­no­mie, lesquels parti­cipent acti­ve­ment à l’op­ti­mi­sa­tion de l’ac­ces­si­bi­lité des sites web.

8 Astuces pour rendre son site accessible

1. L’at­tri­but <ALT> pour rendre les images acces­sibles

L’at­tri­but ALT pour les images permet d’at­tri­buer un contenu textuel alter­na­tif à vos images, de sorte que si un média n’ap­pa­raît pas, un texte expli­ca­tif pren­dra sa place et indiquera à l’in­ter­naute ce qu’il aurait dû voir. Dans le cadre de l’uti­li­sa­tion d’un logi­ciel de lecture vocale pour aveugle, celui-ci pourra scan­ner cet attri­but en lieu et place de l’image. C’est la raison pour laquelle il est primor­dial d’y insé­rer une descrip­tion et non un simple terme.

<img src="chaton.jpg" alt="chaton noir de 7 mois">

Pour reprendre les termes du site « Pompage.net », l’at­tri­but ALT devrait typique­ment :

  • Être précis et équi­valent au contenu et aux fonc­tions de l’image ;
  • Être court. Le contenu et la fonc­tion (s’il y en a) de l’image doivent être présen­tés en quelques mots, aussi peu que possible. On peut néan­moins dans certaines situa­tions aller jusqu’à une ou deux phrases courtes ;
  • Ne pas être redon­dant ou dupliquer le texte entou­rant l’image ;
  • Ne pas conte­nir « image de … » ou « graphisme de … ». C’est une préci­sion tota­le­ment inutile géné­ra­le­ment, et dans le cas d’une image porteuse de sens il est rare­ment utile de préci­ser qu’il est apporté par une image plutôt que par du texte.

2. L’at­tri­but « tabin­dex » pour permettre la navi­ga­tion au clavier possible

La touche « tabu­la­tion » permet, dans la grande partie des navi­ga­teurs, de parcou­rir les liens et contrôles de formu­laires dans l’ordre où ils appa­raissent dans le code HTML et consti­tue donc une alter­na­tive de navi­ga­tion à l’aide du clavier. L’at­tri­but tabin­dex permet de modi­fier ce parcours « natu­rel ». Cet attri­but s’ap­plique aux éléments <a>, <area>, <button>, <input>, <object>, <select>, <texta­rea> – Alsa­crea­tions.

<a href="lien.html" tabindex="1">intitulé clair et précis du lien</a>

Un parfait exemple de navi­ga­tion au clavier opti­mi­sée est la page d’ac­cueil de Google. N’hé­si­tez pas à la tester et à en obser­ver le code html.

3. L’at­tri­but <LABEL> pour rendre les formu­laires acces­sibles

Certains logi­ciels de lecture (screen readers en anglais) peuvent éprou­ver des diffi­cul­tés lorsque le texte asso­cié à un champ se trouve trop éloi­gné de celui-ci. L’at­tri­but Label permet de signa­ler au navi­ga­teur / à l’uti­li­sa­teur / au logi­ciel de lecture, à quoi corres­pond spéci­fique­ment un champ. Il élimine ainsi toute ambi­guïté quant à l’ap­par­te­nance entre ce champ et le texte qui l’ac­com­pagne.

<table>
<label for="nom"> Entrez votre nom </label>
<input type="text" name="nom" id="nom">
<label for="commentaire" > Laissez un commentaire </label>
<input type="textarea" name="commentaire" id="commentaire">
</table>

 

Static content presen­ted to the person visi­ting your site may be perfectly well unders­tood by someone using a screen reader, or perhaps a Braille compu­ter, assu­ming you’ve used seman­tic, struc­tu­ral markup (such as h1 – h6 for headings). When you see a news­pa­per story, you read the heading and know that the text to follow is rela­ted to that, and the text that appears under­neath a photo is the caption for that photo. Some­times a page layout may differ from that expec­ta­tion, and you may have to work harder to unders­tand what’s going on. Because of this, some adap­tive tech­no­lo­gies, such as screen readers, follow those prin­ciples when inter­pre­ting a page that contains a form. As such, if they encoun­ter a text input, they expect that the text rela­ted to it comes before that input … and so it goes looking for it! – Web Stan­dards.

Traduc­tion :

Le contenu statique de votre site peut être parfai­te­ment compris par quelqu’un utili­sant un logi­ciel de lecture, voire un ordi­na­teur braille, et ce si l’on consi­dère que vous avez correc­te­ment utilisé les marquages séman­tiques et avez bien struc­turé vos balises (H1 > H6 pour les titres). Lorsque vous lisez un jour­nal, vous commen­cez par le titre et vous savez que le texte qui suit est lié. De même lorsque vous voyez une photo­gra­phie avec le texte (juste en dessous) qui l’ac­com­pagne. Parfois, la mise en page diffère de ce cane­vas et vous devez faire un effort de concen­tra­tion supplé­men­taire pour bien comprendre à quel titre appar­tient quel texte, les sens de lecture, etc. À cause de cela, certains logi­ciels de lecture suivent ce prin­cipe lorsqu’ils inter­prètent le contenu d’un formu­laire. Ainsi, lorsqu’ils rencontrent un champ texte, ils s’at­tendent à ce que le texte qui l’ac­com­pagne se situe juste avant … et part donc à sa recherche.

 

4. Utili­ser des tailles de texte rela­tive (le % et le em)

Avec la démul­ti­pli­ca­tion des plate­formes (ordi­na­teur, portable, tablette, smart­phone, etc.) et l’im­por­tante augmen­ta­tion des consul­ta­tions mobiles, l’uti­li­sa­tion de tailles rela­tives pour le texte est devenu indis­pen­sable. La typo­gra­phie étant désor­mais flexible, elle permet à l’in­ter­naute d’agran­dir ou de dimi­nuer le texte à sa conve­nance (très utile pour les personnes âgées ou malvoyantes).

A current acces­si­bi­lity recom­men­da­tion is to use rela­tive font sizes such as percen­tages or units of em instead of abso­lute sizes such as pixels or points. This allows text to be more easily resi­zed appro­pria­tely across multiple devices and plat­forms – AccessA­bi­lity.

Traduc­tion :

d’un point de vue de l’ac­ces­si­bi­lité, il est recom­mandé d’uti­li­ser des tailles de police dites « rela­tives » (flexibles) tel que le pourcent « % » ou les unités « em » au lieu des tailles dites « abso­lues » tels que le pixel ou le point. Cela permet au texte d’être plus faci­le­ment ajus­table selon les multiples appa­reils et plate­formes.

body {font-size: 100% } /* 16px */ 
h1 {font-size: 1em } /* 16px */ 
h2 {font-size: 2em } /* 32px */ 
h3 {font-size: 100% } /* 16px */ 
h4 {font-size: 200% } /* 32px */

Il est à noter que si vous ne spéci­fiez aucune taille pour votre texte, ce dernier sera auto­ma­tique­ment défi­nit à 16px. Les unités de mesure « em » et « % » étant rela­tives à leurs parents (ou à la taille par défaut si aucune taille n’a été défi­nie précé­dem­ment), 1em ou 100% sera égale à 16px, tandis que 2em ou 200% sera égale à 32px.

body {font-size: 20px } 
h1 {font-size: 1em } /* 20px */
h2 {font-size: 100% } /* 20px */
h3 {font-size: 2em } /* 40px */
h4 {font-size: 200% } /* 40px */

Si précé­dem­ment, un parent a défini une taille de police (disons à 20px), 1em ou 100% sera alors égale à 20px, tandis que 2em ou 200% sera égale à son double.

Plus récem­ment, CSS3 a intro­duit une nouvelle unité de mesure : le « rem ».

L’unité em est rela­tive à la taille de la fonte du parent, ce qui crée un effet de cascade problé­ma­tique. L’unité rem est rela­tive à l’élé­ment racine : la balise html. Cela signi­fie que nous pouvons ne défi­nir qu’une seule taille de police sur l’élé­ment html, puis compo­ser toutes les tailles en rem comme pour­cen­tages de cette valeur initiale. Safari 5, Chrome, Fire­fox 3.6+, et même Inter­net Explo­rer 9 supportent cette unité. Le plus beau est qu’IE9 permet de redi­men­sion­ner le texte s’il est défini en rem. Hélas, Opera (jusqu’à 11.10, au moins) n’a pas encore implé­menté l’unité rem. – Pompage.net

html { font-size : 16px }
body { font-size : 1rem } /* 16px */
h1 { font-size : 2rem } /* 32px */

5. Respec­ter la hiérar­chi­sa­tion des titres (<H1>, <H2>, <H3>, etc.)

Respec­ter la hiérar­chi­sa­tion des niveaux de titre est utile à diffé­rents niveaux. La séman­tique a un impact sur le réfé­ren­ce­ment de votre site, sur son acces­si­bi­lité et, pour le webde­si­gner, il l’ai­dera à défi­nir de manière effi­cace ses styles.

L’ex­ten­sion « HTML 5 Outli­ner » vous permet de véri­fier sur votre page web respecte bien cette hiérar­chi­sa­tion des titres.

6. S’as­su­rer d’un contraste suffi­sant entre la couleur du texte et la couleur du fond

Opti­mi­ser le contraste entre la couleur du texte et la couleur de fond condi­tionne tant la lisi­bi­lité que le confort de lecture. En règle géné­rale sera donc favo­risé du texte noir sur fond blanc. Tandis que du jaune sur fond vert, noir sur fond bleu foncé ou encore noir sur fond rouge (par exemple) sont à exclure.

Ci-dessous, un aperçu du résul­tat de la combi­nai­son de diffé­rentes couleurs de textes et de fonds (sachant que la diffé­rence de contraste doit atteindre au moins 70 % pour être consi­dé­rée comme lisible).

contrastes entre le texte et la couleur de fond sur le web

L’ou­til en ligne Colour Contrast Analy­ser vous aidera à déter­mi­ner la lisi­bi­lité du texte ainsi que le contraste des éléments visuels.

7. Rédi­ger des liens et des titres (attri­but <TITLE>) à l’in­ti­tulé expli­cite

Il est primor­dial d’in­diquer de la manière la plus expli­cite possible, ce vers quoi le lien pointe. Ainsi, pour vous invi­ter à consul­ter mon dernier article sur le pourquoi et le comment de l’usage de la Typo­gra­phie en Design et Web Design, je place­rai le lien sur l’in­ti­tulé complet, mais je ne vous invi­te­rai pas à cliquer ici. Placer un lien sur la phrase « cliquez ici » ne permet ni de comprendre ce qui se trouve sur la page visée, ni aux logi­ciels de lectures de déter­mi­ner de quel lien il s’agit.

Dans le même ordre d’idée, veillez à propo­ser des titres (notam­ment au niveau du menu de navi­ga­tion prin­ci­pale) expli­cites. L’in­ter­naute doit pouvoir rapi­de­ment se faire une idée du type de contenu sur lequel il va débou­cher, une fois la page char­gée. De surcroît, cet élément est scanné par les moteurs de recherche et influen­cera le réfé­ren­ce­ment de votre page.

<html>
<head>
<title> La page d'accueil de mon site web </title>
</head>

À cette fin, pensez égale­ment à bien complé­ter la balise <TITLE> dans le <HEADER> de chaque page.

8. Quelques points supplé­men­taires à prendre en compte

  • Prévoir des alter­na­tives aux Scripts afin que votre page HTML reste lisible lorsque les feuilles de styles (CSS) ou le JavaS­cript sont désac­ti­vés.
  • Propo­ser un plan du site (site map).
  • Mettre à dispo­si­tion un moteur de recherche en interne si le site dispose d’une grande quan­tité de contenu.
  • Opti­mi­ser la taille de vos images pour dimi­nuer les temps de char­ge­ment de vos pages (PageS­peed)
  • Etc.

En conclu­sion – opti­mi­sa­tion de l’er­go­no­mie et de l’ac­ces­si­bi­lité pour amélio­rer le réfé­ren­ce­ment, les conver­sions et l’ex­pé­rience utili­sa­teur

Se montrer atten­tif à l’er­go­no­mique et l’ac­ces­sible des sites, c’est remettre au centre des préoc­cu­pa­tions l’in­ter­naute ainsi que son expé­rience utili­sa­teur. Si un manque d’er­go­no­mie et/ou d’ac­ces­si­bi­lité peut rapi­de­ment débou­ter de nombreux visi­teurs et les amener à quit­ter préma­tu­ré­ment un site, cela a des consé­quences encore plus désas­treuses sur le réfé­ren­ce­ment et le taux de conver­sion (dans le cas de sites à voca­tion commer­ciale).

Un départ préci­pité a pour effet d’aug­men­ter le taux de rebond, lequel consti­tue, pour les moteurs de recherche, un signal d’in­sa­tis­fac­tion et/ou de non perti­nence vis à vis de la recherche effec­tuée . De surcroît, les bots des moteurs qui scannent le contenu de votre site sont aveugles. Ainsi, une mauvaise séman­tique, un mauvais bali­sage ou encore la non prise en consi­dé­ra­tion des attri­buts vous permet­tant d’of­frir une alter­na­tive aux médias vous sera défa­vo­rable.

D’un point de vue commer­cial, un site e-commerce peut ergo­no­mique (notam­ment au niveau du tunnel d’achat) vous fera perdre de nombreuses ventes (ce qui pour­rait impac­ter de manière signi­fi­ca­tive votre chiffre d’af­faire).

Holy Grail of Ecommerce Conversion Optimization - 91 points checklist

En ligne, de nombreux outils peuvent vous aider à véri­fier le niveau d’er­go­no­mie et d’ac­ces­si­bi­lité de votre site. L’ou­til Quick Scan d’Any Surfer consti­tue une première bonne réfé­rence.

Enfin, il me semble primor­dial de prendre en compte la diver­sité de la popu­la­tion afin de contri­buer, chacun à sa façon, à la démo­cra­ti­sa­tion et l’ac­cès pour tous à ce merveilleux outil qu’est inter­net.

Mon site accessible

Pour la petite histoire …

Comme je l’avais évoqué dans l’in­tro­duc­tion, c’est l’er­go­no­mie qui a fait de moi la personne passion­née par le web que je suis aujourd’­hui.

Début des années 2000 – et, plus large­ment, au début d’in­ter­net à l’at­ten­tion du grand public – l’er­go­no­mie web faisait office de grande incon­nue sur la toile. À cette époque, je navi­guais occa­sion­nel­le­ment en ligne, en partie sur des sites sociaux (cara­mail, miss­cara, parano, etc.) ; en partie sur des sites dédiés aux jeux vidéo (et pas unique­ment la réfé­rence jeux­vi­déos.com) que je trou­vais via les moteurs de recherche Yahoo !, Alta­vista ou encore Lycos.

C’est égale­ment à cette époque que je décou­vris la saga Final Fantasy, et en grande fan que je suis rapi­de­ment deve­nue, je tenais (bien évidem­ment) à finir chaque opus à 100%. Je passais donc un certain temps en ligne à la recherche d’images, d’as­tuces et de solu­tions.

J’ai rapi­de­ment trébu­ché sur des sites qui rendaient mon expé­rience utili­sa­teur parti­cu­liè­re­ment exécrable. Qu’il s’agisse d’un abus d’ani­ma­tions et d’images beau­coup trop lourdes, lesquelles rendaient les temps de char­ge­ment atroces et la concen­tra­tion diffi­cile ; d’une archi­tec­ture bâclée, de sorte que je passais un temps fou à trou­ver l’in­for­ma­tion spéci­fique que je recher­chais ; ou encore du lance­ment d’un fond sonore sans aucune possi­bi­lité d’ar­rêt, laquelle se déclen­chait toujours quand mon volume sonore était trop élevé. Cette liste d’élé­ments était, à mon grand désar­roi, non-exhaus­ti­ve…

Ainsi, rebelle que j’étais (et que je suis restée ^^), j’ai décrété que je pouvais faire mieux et j’ai donc installé sur ma machine le logi­ciel Front Page 2000. Après un premier site dédié à Final Fantasy 8 – lequel m’avait permis de m’ac­com­mo­der aux diffé­rents outils et possi­bi­li­tés offertes par le logi­ciel – j’ai décidé de reprendre un nouveau site à zéro et j’ai alors conçu un site sur Final Fantasy 9 (lequel fut mis en ligne via l’hé­ber­geur « Multi­ma­nia »).

Final Fantasy IX

J’avais 13 ans et je m’en souviens comme si c’était hier. J’avais veillé à rendre l’in­ter­face la plus effi­cace possible, en évitant les erreurs que je repro­chais aux autres sites. Ainsi, j’avais opté pour un fond uni, quelques images (les moins lourdes possibles), et surtout, un soin parti­cu­lier accordé à l’ar­chi­tec­ture de l’in­for­ma­tion, de sorte que n’im­porte quel joueur puisse trou­ver, en quelques clics, l’in­for­ma­tion tant recher­chée.

Six années plus tard, je décou­vrais le cursus d’Ecri­ture Multi­mé­dia et je concluais mes études avec un mémoire inti­tulé « Ergo­no­mie web : analyse ergo­no­mique des sites de Veerle Peeters » – lequel compre­nait une partie sur l’ac­ces­si­bi­lité et me valut une grande distinc­tion.

J’avais donc 13 ans, je rece­vais des emails d’in­ter­nautes me compli­men­tant sur mon site, sur son effi­ca­cité et sa simpli­cité d’uti­li­sa­tion. J’avais 13 ans et j’étais fière de moi !

Strips - L'enfance du codeur - Les vieux sites

Pour termi­ner, une info­gra­phie très inté­res­sante

Infographie - accessibilité web