DevFest Nantes 2016

Accessibilité,
par où commencer ?

Nathalie Rolland, @nroll82 & Julie Moynat, @juliemoynat

L’accessibilité : c’est quoi ? Pour qui ?

Le pouvoir du Web est son Universalité. Qu'il soit accessible par n'importe qui, quel que soit son handicap est un de ses aspects essentiels.

Tim Berners Lee - Directeur du W3C

Sensibilisons

Série d'affiches
« Dos and don'ts on designing for accessibility »
Exemple d'affiche de choses à faire / à ne pas faire pour les sourds et malentendants

Tout le monde n'est pas
super-développeur

sourd, malvoyant, personnes âgées, bras cassé, etc.
Icônes par Freepik, Zurb, Nas Ztudio, Hanan, OCHA sur Flaticon.com sous licence CC 3.0

Le RGAA, ce référentiel

RGAA, une méthodologie de tests

RGAA, un référentiel et une méthodologie de tests

  • 2005 : Obligation d'accessibilité numérique pour les services de communication au public en ligne des services de l'Etat, des collectivités territoriales et des établissements publics qui en dépendent
    (loi n°2005-102, art. 47)
  • RGAA v3 validé en 2015
  • 07/10/2016 : Obligation étendue pour les organismes délégataires d'une mission de service public et les entreprises dont le CA excède un certain seuil

Un niveau légal à atteindre

Niveau légal d'accessibilité = AA (double A)

Pour :

  • les sites internet
  • les sites extranet
  • les sites intranet
  • les applications mobiles
  • les progiciels
  • le mobilier urbain numérique

Le RGAA est là pour vous aider à y parvenir.

Comparons avec le référencement naturel

Comparaison de l'accessibilité avec le référencement naturel
SEO Accessibilité
Recommandations SEO Audit en fin de projet
Base déjà intégrée à vos outils Méconnaissance et erreurs
Rentable, prestation habituelle Surcoût, développeurs et graphistes mécontents

Si nous mettons l’accessibilité à la même étape que le SEO

Vous faites déjà des choses correctement

  • contenu mis en forme via le CSS
  • déclaration du type et de la langue du document
    
<!DOCTYPE html>
<html lang="fr">
  • présence d'un menu voire d'un plan de site

Vous pouvez tester pour progresser

Respect des standards du W3C

Un code robuste :

  • fermeture des balises
  • balises et attributs valides
  • pas d'identifiants dupliqués

Une seule adresse : https://validator.w3.org/

Test de la navigation au clavier & du lecteur d'écran

La touche TAB est votre amie, chérissez-la !

L'abominable lapin des neiges sert Daffy Duck dans ses bras (Lien vers le Gif animé - Nouvelle fenêtre)

  • visibilité du focus (Détestez le outline: none; !)
  • navigation dans le bon ordre
  • accès à tous les éléments interactifs

Enfin, écoutez votre site web ! (NVDA, JAWS, VoiceOver)

Masquer du texte en CSS : http://www.ffoodd.fr/cache-cache-css/

Test de la structuration du contenu

HeadingsMap, pour vous servir !

  • un h1 au moins
  • des h2, h3... structurant le contenu
  • titres clairs et représentatifs
  • abscence de sauts de titres

Test des ratios de contrastes de couleurs

Colour contrast analyser, votre nouvel outil préféré !

Tester le zoom texte à 200%

  1. Dans Firefox : menu "Affichage", sous-menu "Zoom", cocher "Zoom texte seulement", appuyer 6 fois sur les touches CTRL et +
  2. S'assurer que les contenus restent visibles et lisibles
  3. Si ce n'est pas le cas, vérifier :
    • l'absence de height et width en px
    • l'absence de tailles de police absolues

Le site du Devfest 2016 Nantes a des éléments mal affichés quand on zoome à 200% la taille de police

Automatisation des tests

Couvre moins de 50% des critères mais c'est un bon début !

Les tests simples ne sont pas suffisants

Les détournements de balises

Attention à la valeur sémantique des éléments...


<h1>Titre de la page</h1>
<h2>Titre de second niveau</h2>
<h2><a href="monlien">Télécharger le document</a></h2>

Ne pas reproduire chez soi

Les questions de pertinence

Il n'est pas rare de voir ces deux types de question se suivre :

  • Dans chaque page web, un fil d'ariane est-il présent ?
  • Dans chaque page web, le fil d'ariane est-il pertinent ?


Méthodologie pratique de tests : disic.github.io/rgaa_methodologie/

Comprendre le test, c'est aussi envisager comment bien mettre en oeuvre.

Les critères non applicables

Exemple : Dans chaque ensemble de page, le moteur de recherche est-il atteignable de manière identique ?

Le moteur de recherche existe : je réponds,
sinon : le critère est non applicable.

L'accessibilité ne repose pas que sur les développeurs et intégrateurs

L'accessibilité ne repose pas que sur les développeurs et intégrateurs

Grosminet se prend une brique dans la tête (Lien vers le Gif animé - Nouvelle fenêtre)

Toute l'équipe projet est concernée

  • Chef de projet
  • Ergonome
  • Webdesigner
  • Intégrateur / Développeur
  • Rédacteur

L'accessibilité c'est un travail d'équipe :
Accéder à la méthodologie AccedeWeb

Ne pas réinventer la roue

Les plugins

Exemples de plugins accessibles utilisant la spécification ARIA :

Exemple de l'accordéon ARIA de Nicolas Hoffmann

https://a11y.nicolas-hoffmann.net/accordion/

Comprendre ce que font les autres pour se l’approprier.

Si vous n'avez pas tout suivi, retrouvez la notice AcceDe Web : accede-web.com/notices/interface-riche/accordeons/

Industrialiser

  • Avoir un thème de base / parent
    où vous incluez toutes vos bonnes pratiques
  • Commenter...
    pour ne pas oublier pourquoi vous avez construit votre code d'une certaine manière et pour partager les bonnes pratiques à vos collaborateurs.
  • Ajouter Tanaguru ou Asqatasun sur votre plateforme d'intégration continue

L'important, c'est de commencer

Se faire accompagner et/ou se former

  1. Se faire accompagner
  2. Échanger et comprendre
  3. Suivre des listes de diffusion / d’échanges :
  4. Démarrer une formation complète... (AccessiWeb, Access42, Atalan, Temesis)

Merci !

Pour retrouver les slides de cette conférence :
conferences.lalutineduweb.fr/2016-devfest-nantes/

Des questions, envie d'échanger sur le sujet :

@nroll82 & @juliemoynat