Pyrat.net – Création de sites Internet

Trois outils pour estimer rapidement la qualité d'un site

2015-12-17T16:21:56Z

Extensions FireFox :

Et pour bien fonctionner, ça marchera mieux avec The Addon Bar (restored).

Ceux sont les outils que nous utilisons pour nos audits :

Mise en œuvre de l'accessibilité avec SPIP

2012-03-18T13:00:00Z

Quelques bonnes pratiques et outils pour produire un contenu accessible.

Cet article concerne plus particulièrement SPIP, mais les principes énoncés devraient être mis en œuvre avec n'importe quel CMS.

À quoi sert l'accessibilité ?

L'accessibilité consiste à permettre à tous, quelle que soit sa situation de handicap, de consulter le web à égalité avec les autres.

Autrement dit, faire un site accessible, c'est faire un site consultable par plus de personnes, dans plus de situations [1].

De plus, les moteurs de recherche étant techniquement aveugles (ils ne perçoivent que le texte d'une page), ils vont mieux indexer les sites accessibles.

→ Conséquence : l'accessibilité permet de toucher plus de monde en étant trouvé et lu par un plus grand nombre.

Quelques outils pour évaluer l'accessibilité d'un site

Comprendre l'accessibilité

Extensions FireFox

HTML Validator With Tidy : à régler en mode SGML
Permet de vérifier qu'il n'y a pas d'erreurs grossières dans le HTML
Headings Map
Permet de vérifier que les titres sont correctement utilisés dans la page

Plugins à installer dans SPIP

Quelques plugins suffisent :

Enluminures Typo V3 pour disposer de niveaux de titres supplémentaires
Bouton Changement de langue pour PortePlume
Accessibilité référencé dans Accessibilité pour les rédacteurs
Vidéo Accessible
Bouton Texte : pour grossir le texte de la page
Dictionnaires : pour définir de manière centralisée les sigles et acronymes

Bonnes pratiques rédactionnelles pour être accessible

Le premier principe est de se dire que dans un site web, toute l'information doit être textuelle, et que ce ne devrait être qu'après qu'on peut imaginer de l'enrichir visuellement.

Voir les chose sous cet angle renverse complètement la problématique !

Il ne s'agit plus de trouver les alternatives textuelles à des visuels, mais d'enrichir un texte par des visuels fournissant une alternative aux textes.

Du sens, du sens !

Tout texte lu sur Internet sera plus aisément lu si sa structuration saute aux yeux.

Il s'agit de se mettre au service de l'intelligibilité du message que l'on souhaite transmettre.

→ Voir : Les raccourcis typographiques indispensables de SPIP.

Sigles et acronymes

Tout sigle ou acronyme doit être défini explicitement au moins la première fois qu'il apparaît dans une page.

→ Utiliser le plugin Dictionnaires [2]

Du texte et des images

Il y a 3 types d'images :

les images purement décoratives : celles qu'on ne mentionnerait pas si on devait lire la page à un aveugle
→ Pas de titre
les images portant du sens : si ce sens n'est pas déjà dans le texte, le mettre dans le titre de l'image, et si beaucoup de texte, dans le descriptif de l'image (qui servira de longdesc)
→ Au minimum un titre
images servant de lien : le titre de l'image doit permettre d'anticiper l'action
→ Un titre indiquant l'action

Cas particulier : toute image ayant du « texte brûlé » doit avoir ce texte dans son titre.

Remarque : le titre de l'image sera l'attribut alt dans le HTML généré par SPIP.

→ voir : Comment insérer une image avec SPIP ?.

Les changements de langue

Ils doivent être indiqués, sans quoi les synthèse vocales et les moteurs de recherche ne sauront pas bien quoi faire des mots en langue étrangère.

Visuellement, il est conseillé de les manifester par de l'italique.

Le bouton de changement de langue du PortePlume permet d'appliquer rapidement un changement de langue à une locution étrangère.

Syntaxe : [en]God save the queen

Documents à télécharger

Il faut indiquer :

le format du document
son poids

Syntaxe : [->docNNN]

Vidéos

Le plugin Vidéo accessible permet de joindre à une vidéo :

les sous-titres
l'audio desciption
le transcript
l'image fixe alternative

Limitation de ce plugin, il faut que la vidéo soit accessible par une URL qui fournisse la vidéo au format Flash. du coup, la vidéo n'est pas lisible sur iOS (Apple).

Vous pourrez faire appel à un Prestataires sous titrage vidéo accessible

Sons

Il faut fournir l'équivalent textuel au son diffusé.

[1] Par exemple, en mobilité, dans le train, où le contraste est mauvais à cause de la luminosité ambiante.

[2] Ce plugin est disponible sur la zone de SPIP, mais il n'est pas encore documenté.

À partir du moment où vous avez compris que c'est le texte qui est primordial, tout le reste n'est que mise en œuvre systématique de ce principe.

Estimation de l'accessibilité d'un site web

2011-09-15T19:14:18Z

Remarque : Cette vidéo a été tournée durant une conférence destinée à des développeurs. Elle est donc remplie de jargon, de références à des concepts que les développeurs manipulent tous les jours et même des blagues de geeks. Le texte en dessous de la vidéo vous décrit les points de contrôle abordés dans la vidéo.

Estimer l'accessibilité de son site, 15 minutes top chrono !
par Paris Web

https://www.dailymotion.com/video/xh6fg0

Estimer l'accessibilité d'un site

Images et leurs alternatives textuelles

Vérification que les images ont une alternative textuelle correctement renseignée.

Avec la Webdev ToolBar : affichage des attributs alt :

Images contenant du texte
Images servant de lien

Avec FireBug : vérification quand c'est une image lien qu'elle ne s'ouvre pas dans une nouvelle fenêtre sans que l'alternative textuelle ne le précise.

Multimédia

Vidéo : est-ce que le Flash a une alternative, qu'il n'est pas en mode opaque, qu'il y a des sous-titrages, une audio description, et restitution sonore des éléments textuels de l'image.

Structuration du contenu textuel de la page

Titres de la page : hiérarchisation correcte et adéquation avec la présentation et l'organisation du contenu.
Paragraphes réels (pas des div)
Listes à puces réelles

Navigation au clavier

Pouvoir voir où je suis dans la page (visibilité du focus)
Présence de liens d'accès rapides
Vérification qu'il n'y a pas de perte d'information si les menus ne se déroulent pas
Navigation possible dans les éléments multimédias (Flash)

Remplissage des formulaires

Étiquettes associées aux champs : cliquables et donnant le focus aux champs
Champs obligatoires indiqués de manière explicite (une étoile n'est pas suffisante)
Erreurs indiquées de manière explicite et informative.

Et maintenant, que faire ?

Vous former : Plan de cours : Accessibilité & CMS SPIP
Refondre votre site : Refonte d'un site suite à la fermeture des sites Voila.fr
Faire estimer l'accessibilité de votre site : Audit accessibilité de votre site (à distance)

Voir en ligne : Estimer l'accessibilité de son site, 15 minutes top chrono !

Ces quelques tests permettent de se rendre rapidement compte si un site web respecte le b-a-ba de l'accessibilité.

Merci à Aurélien Levy et Laurent Denis d'avoir très largement inspiré cet article.

⇒ Besoin d'un Audit accessibilité de votre site (à distance) ?

Il ne faut pas découper un article en plusieurs pages

2010-11-25T19:54:08Z

On trouve régulièrement sur le web des articles dont le contenu est séparé en plusieurs pages.

L'intention de base, louable, conduit habituellement à plusieurs régressions fonctionnelles.

Le cas de la recherche

Dans SPIP, quand on utilise le moteur de recherche, la recherche se fait dans l'ensemble de l'article. Et le lien est fait vers la page qui affiche l'article.

Mais si l'article est affiché en plusieurs pages [1], alors, pour peu que le terme recherché précédemment soit présent uniquement dans la 2^e page (ou plus loin encore), on perdra le bénéfice du surlignage du terme recherché par SPIP.

De plus, on ne permettra pas non plus de faire CTRL-F pour chercher dans tous l'article.

Du coup, à partir d'une idée de découper en pages un article pour éviter de scroller dedans, on se retrouve avec une régression fonctionnelle non négligeable.

Un peu d'histoire

Autant, en 1997, 50% des gens ne savaient pas scroller dans une page.

Autant, en 2010, non seulement c'est passé dans les mœurs, mais en plus, la molette de la souris permet de le faire aisément.

Le cas des ancres dans une page

Autre régression fonctionnelle : poser des ancres internes à un texte : il devient alors impossible de gérer facilement des ancres qui feraient changer de page.

Solution ?

Pour faciliter la navigation de tes visiteurs, utiliser un sommaire automatique en début d'article serait probablement beaucoup plus efficace.

[1] Par le raccourcis typographique des 5 tirets, disponible par exemple avec une des lames du Couteau Suisse

Quand j'arrive dans un site qui pagine un article, la première chose que je fais, c'est chercher le bouton version imprimable pour avoir l'article en une seule page 😉

Cliquez-ici !

2008-03-27T17:25:15Z

« Cliquer ici » : une mauvaise pratique

La formulation « cliquez ici » est à fuir comme la peste.

Principe de base : tout lien doit être explicite et compréhensible, même lu hors de son contexte.

Pourquoi ?

d'une part, parce que les aides techniques dont disposent certains publics [1] permettent de lister l'ensemble des liens de la page. Dans ces conditions, « Cliquez ici » ne veut rien dire
d'autre part, parce que les moteurs de recherche utilisent le texte des liens dans leurs calculs sur la pertinence des pages
et enfin parce que si la zone cliquable est petite (exemple : « ici »), elle est moins accessible aux personnes en situation de mobilité réduite

Éviter les « Cliquez ici » et autres « Lire la suite », c'est une des bonnes pratiques de la création de sites Web.

Alors que faire ?

Prenez la formulation suivante :

Pour consulter les bonnes pratiques, cliquer ici.

Ce n'est pas le terme cliquer ici qui est problématique, c'est que ce soit « ici » la zone cliquable.

Transformons donc en :

Cliquer pour consulter les bonnes pratiques.

Ainsi, on conserver l'idée qu'il faut cliquer, mais la zone cliquable est bien claire sur la destination du lien.

[1] Les personnes aveugles par exemple

Pour aller plus loin : sur le site du W3C, Produire du contenu accessible.

Coup de gueule envers AccessiWeb

2006-03-22T11:33:45Z

Pourquoi la France à travers BrailleNet et AccessiWeb propose des normes d'accessibilité différentes de celles du W3C ?

Problématique

C'est quand même étonnant : sur 55 critères AccessiWeb de la norme Bronze vous pouvez lire :

10.3 : Avec les feuilles de style désactivées, l'ordre d'apparition de l'information est-il respecté par rapport à l'ordre d'apparition initialement défini ?
Commentaire : Certaines techniques permettent de construire la page HTML avec des feuilles de style. Lorsque les feuilles de style sont désactivées par l'utilisateur, il faut que la structure logique de la page soit respectée. Il faut veiller à ce que l'ordre d'apparition des divisions (DIV), par exemple, soit équivalent entre l'affichage sur un navigateur graphique et l'affichage sur un navigateur en mode textuel.

Or, sur Layout Gala on trouve 40 mise en forme HTML/CSS dont le contenu est régulièrement affiché avant la navigation, même si celle-ci peut être visuellement placée avant ce contenu.

Une recherche dans Google de CSS source ordering montre que le moyen d'obtenir cet effet est une préoccupation récurrente [1].

Résolution ?

Je propose donc de lire ainsi la directive 10.3 d'AccessiWeb : « Le contenu de la page doit rester cohérent, même si la feuille de style et désactivée. En particulier, le contenu doit conserver son caractère proéminent [2] »

[1] Parmi les bon articles sur le sujet : In search of the One True Layout et In Search of the Holy Grail

[2] Autrement dit, si le contenu saute aux yeux avec les styles, il doit sauter aux yeux sans eux.

Messieurs les experts d'AccessiWeb, j'attends vos commentaires [1] !

Flash et accessibilité ?

2006-03-19T21:54:38Z

Ceci est basé sur une intervention de Sébastien Maltret sur la liste des utilisateurs de SPIP.

Je la reproduis ici parce qu'elle illustre très bien ce que sont la pluspart des sites web créés en technologie Flash, lorsque le soucis de l'accessibilité de ce site n'a pas été intégré lors de la création du site.

1. La navigation est le point d'ancrage d'un site web, il doit fonctionner tout le temps et pour tout le monde.

Flash n'est pas un composant intégré de base au navigateur, il ne fonctionne donc pas tout le temps et ne marche que pour les gens ayant flash, sur une machine assez puissante avec l'ADSL.

Le meilleur test, c'est de prendre un Pentium II 400MHz sur une connexion 56K.

Les pauvres ont aussi droit au web.

2. Un site web doit être accessible à tous les handicapes

Flash n'intègre pas de support WAI (Web Accessibility Initiative), ce qui signifie qu'aveugles et mal-voyants sont exclus de ce site. 1 pour cent des internautes sont malvoyants, 1 pour 1000 aveugles. Baser un projet web dés le départ sur l'exclusion d'une cible d'internaute me semble gênant, et le papy boom avançant, cette cible va augmenter.

http://www.w3.org/WAI/intro/accessi...

3. Flash n'est pas scannable par le moteur de recherche

Un projet web intègre 2 axes : création du site ET indexation dans les moteurs de recherche. C'est bien de mettre des titres, jolis, qui font « gouzi-gouza » quand on passe dessus, mais si c'est pas scanné par yagle-goohoo, l'intérêt est discutable.

4. Utiliser spip et la licence libre

Flash est sous propriété intellectuelle de Macromedia, entreprise américaine trés, trés, trés loin d'être l'ami du libre… Ça serait tellement plus positif pour le moyen et long terme que l'on parle du future remplaçant de flash, en GPL.

Pourquoi pas du gif animé (licence tombée en libre) si ça peut remplacer ?

Ou du SVG ?

5. Problème de sécurité

Flash a déjà connu de grosses failles de sécurité, à ce jour, il n'existe aucune faille HTML. J'ai le droit d'être parano, j'ai le droit d'interdire flash sur mon réseau interne.

6. Traduction automatique de site

Le contenu n'étant pas scannable, les traductions automatiques de site (babelfish par exemple) ne sont pas possibles : c'est cool de savoir qu'un russe, un chilien, un indien ont apprécié son site ! Et toujours à l'esprit, augmentation de la cible.

Un site « référence » en xhtml valide me semble le bon départ, et pour les courageux (des héros oui !), faire une « nouvelle traduction » en langue « flash ». Quel boulot ! C'est d'ailleurs exactement une recommandation priorité 1 de wai :

6.3 Ensure that pages are usable when scripts, applets, or other programmatic objects are turned off or not supported. If this is not possible, provide equivalent information on an alternative accessible page. [Priority 1] http://www.w3.org/TR/WCAG10-TECHS/#...

Pour ceux qui pensent que le WAI n'est qu'un truc pour les webmaster au bon cœur, ils se trompent : Être capable de traduire son site en audio, et dans d'autres langues automatiquement ouvrira des marchés énormes vers les téléphones portables, les milieux professionnels bruyant (BTP, industrie), l'automobile (l'information visuelle est illégale en voiture), les connexions bas débits (satellite, basse fréquence), la vente internationale (Chine, Inde, Russie, Amérique du Sud)…

Et pour une fois, le logiciel libre a une réelle avance (sur Microsoft par exemple et au hasard).

Donc a mon avis, si c'est pour faire une œuvre graphique, au même titre qu'une image, oui au flash.

Et pour les fondations du site, dont la navigation, du bon, du pur, du dur HTML valide w3c.

Vous pourrez lire aussi avec profit :

Il est possible de réaliser un site Flash accessible (donc référencé correctement dans les moteurs de recherche), mais c'est rarement le cas.

Film : « L'ordinateur des aveugles »

2005-09-29T20:18:13Z

Voici un petit bijou trouvé via le standblog : un petit film qui montre comment une personne aveugle utilise quotidiennement son ordinateur.

Une vidéo à montrer à tous ceux qui se demandent comment diable un aveugle peut bien avoir accès à Internet.

L'ordinateur des aveugles
par Torgniole TT

https://www.youtube.com/watch?v=Kz1AQ4dqxgA

Et le même scénario actualisé en 2014

Voir autrement : l'ordinateur accessible.
par Association Scenari

https://www.youtube.com/watch?v=cCHGZLmJJgQ

Film : « L'ordinateur des aveugles ».

D'autres vidéos en anglais

Accessibilité d'un site web

2004-11-15T22:26:36Z

L'accessibilité recouvre 3 notions :

L'ouverture d'un site aux personnes présentant des handicaps
La possibilité de naviguer sur le site avec différents navigateurs
La possibilité de visiter le site depuis différents systèmes d'exploitation, voire des dispositifs autres qu'un ordinateur (PDA, Mobile, WebTV…)

Une fausse bonne idée consiste à réaliser plusieurs versions du contenu selon le visiteur (un contenu graphique par défaut et un contenu spécial aveugle).

Cette séparation, quoique partant d'un bon sentiment, contribue à renforcer le sentiment d'exclusion.

Pourquoi l'accessibilité ?

Pour les sites publics de l'État, ce sera bientôt une obligation légale. Pour les autres, c'est du bon sens.

Loi n° 2005-102 du 11 février 2005 pour l'égalité des droits et des chances, la participation et la citoyenneté des personnes handicapées, Article 47

Les services de communication publique en ligne des services de l'État, des collectivités territoriales et des établissements publics qui en dépendent doivent être accessibles aux personnes handicapées.

L'accessibilité des services de communication publique en ligne concerne l'accès à tout type d'information sous forme numérique quels que soient le moyen d'accès, les contenus et le mode de consultation. Les recommandations internationales pour l'accessibilité de l'internet doivent être appliquées pour les services de communication publique en ligne.

Un décret en Conseil d'État fixe les règles relatives à l'accessibilité et précise, par référence aux recommandations établies par l'Agence pour le développement de l'administration électronique, la nature des adaptations à mettre en œuvre ainsi que les délais de mise en conformité des sites existants, qui ne peuvent excéder trois ans, et les sanctions imposées en cas de non-respect de cette mise en accessibilité. Le décret énonce en outre les modalités de formation des personnels intervenant sur les services de communication publique en ligne.

Le texte de Loi n° 2005-102 du 11 février 2005 pour l'égalité des droits et des chances, la participation et la citoyenneté des personnes handicapées sur Legifrance.

Décret n°2009-546 du 14 mai 2009

Le décret n°2009-546 du 14 mai 2009 (pris en application de l'article 47 de la loi n° 2005-102 du 11 février 2005 sur l'égalité des droits et des chances, la participation et la citoyenneté des personnes handicapées) impose une mise en œuvre de l'accessibilité dans un délai de deux ans (à partir de la publication du décret) pour les services de communication publique en ligne de l'Etat et des établissements publics qui en dépendent, et de trois ans pour les services de communication publique en ligne des collectivités territoriales et des établissements publics qui en dépendent.

Le RGAA

Le Référentiel Général d'Accessibilité pour les Administrations constitue la référence à prendre en considération pour connaître les normes à respecter pour l'accessibilité d'un site web.

L'accessibilité, une question de bon sens

Accessibilité et référencement

Vous pourriez vous dire que votre site n'a pas besoin d'être accessible, votre public étant très ciblé et connu d'avance.

Mais avez-vous réalisé que vos visiteurs sont pour la pluspart guidés vers votre site par un aveugle ?

En effet, les moteurs de recherche ne « perçoivent » que le texte, pas les images !

→ Donc, si votre site est conçu pour les aveugles, il sera aussi conçu pour les moteurs de recherche.

Accessibilité et économies

En rendant votre site accessible, vous ferez deux types d'économies :

économie de bande passante : un site pleinement accessible prend 50% de bande passante en moins avec la même apparence
économie de maintenance : un site accessible est respectueux des standards, ce qui lui garantit une plus grande pérennité et une adaptation automatique à des navigateurs non prévus initialement.

La norme bronze

La norme bronze est constituée de 55 critères.

Points essentiels

Éléments graphiques : chaque élément graphique possède-t-il une alternative textuelle pertinente ?
Cadres : sont-ils nommés, redimensionnables et disposent-ils d'une alternative aux cadres ?
Couleurs : sont-elles suffisamment contrastées, y compris pour des personnes daltoniennes ?
Multimédia : le contenu multimédia dispose-t-il d'une alternative d'accès ?
Tableaux : disposent-t-ils d'un résumé et/ou d'un titre ? Lorsqu'ils sont utilisés pour la mise en page, le contenu adopte-t-il un ordre cohérent ?
Liens : sont-ils suffisamment courts et explicites ?
Scripts : l'ensemble du site est-il navigable si les scripts sont désactivés ? Dépendent-ils uniquement de la souris ?
Éléments HTML obligatoires : DOCTYPE, LANG, TITLE (qui doit être pertinent et unique dans tout le site)
Structuration de l'information : est-elle cohérente ?
Présentation de l'information : est-elle gérée par CSS et leur désactivation nuit-elle à la compréhension de la page ?
Formulaires HTML : Chaque champ est-il accompagné d'un LABEL ? Le bouton SUBMIT est-il pertinent ? Si un script est présent, est-il nécessaire ?
Aide à la navigation : la navigation dans le site est-elle cohérente ? Les raccourcis clavier sont-ils homogènes dans tout le site ?
Contenus accessibles : l'utilisateur reste-t-il maître de sa navigation (pas de popups…) ? Les documents téléchargeables sont-ils accompagnés d'un lien vers l'outil permettant de les lire ?

Logiciels de tests

IBM met à disposition des développeurs de le logiciel aDesigner permettant de vérifier la validité d'un site en terme d'accessibilité aux :

Aveugles par simulation du texte qu'ils entendent et du temps qu'il leur faut pour l'atteindre
Malvoyants par simulation du flou, de l'atténuation de contraste et diminution du nombre de couleurs (daltonisme)

Expertise dans l'accessibilité

Elle est donc, tout à la fois :

Une question de respects de normes
Un état d'esprit : se mettre dans la situation de ceux qui ne disposent pas de tous les sens
Une rigueur dans l'application
Une habitude de pensée

Menu dynamique accessible

2004-08-21T10:35:37Z

Vous avez pu utiliser le menu de ce site. Je vous le propose ici en téléchargement.

Cette page complète la contrib : Squelette : Menu dynamique accessible + 3 colonnes en CSS + géométrie variable

Licence

Je distribue ce menu en licence LGPL. Cela signifie en gros que vous pouvez l'utiliser comme vous le voulez dans vos développements, qu'ils soient commerciaux ou non.

Utilisation

Le script fourni dans l'archive (au format zip) combine en fait 3 fonctionnalités :

gestion d'un menu accessible
gestion des feuilles de style alternatives
gestion d'une mise en page 3 colonnes avec pied de page

Menu arborescent accessible

Ce menu est accessible à la navigation au clavier et contient suffisamment d'informations pour permettre sa navigation par un aveugle.

Quelques considérations :

le code HTML de la page ne nécessite que des listes (LI) contenant des liens (A)
les éléments de la liste ayant le tag STRONG sont automatiquement dépliés
si le navigateur ne gère pas le DOM, le menu est affiché en mode déplié
→ le menu ne fonctionne de manière dynamique que sur un navigateur récent respectant les standards
il est nécessaire de placer l'appel au .js du menu après celui-ci, sans quoi le script ne fonctionne pas !

Feuilles de styles alternatives

Possibilité de changer la mise en page du site en sélectionnant une des feuilles de style alternative
mémorisation par cookie du choix de l'internaute

Mise en page 3 colonnes avec pied de page

La taille des 3 colonnes est automatiquement ajustée à la plus haute
Le pied de page est automatiquement déplacé en bas des 3 colonnes

Mise à jour pour IE7

Évidement, l'affichage de ce menu bug sous IE7 [1].

J'ai trouvé un ~~hack~~ palliatif

Un simple :

#menu li { zoom : 1; }

suffit à résoudre le problème [2].

[1] en tout cas avec IE7 beta 2 preview du 20 mars 2006

[2] ce hack n'est pas inclus dans l'archive accompagnant cet article

Merci de me faire savoir où vous l'utilisez.