Fiche: Un démonstrateur, comment et pourquoi ?
Pourquoi
Ce démonstrateur montre la simplicité de réalisation des modules de base des interfaces numériques. Cette démonstration propose d'intégrer à la fois le respect strict de l'accessibilité (en référence au RGAA RaWeb) et aux bonnes pratiques d'éco-conception.
Attention, la partie dédiée à l'éco-conception est toujours en cours de finalisation.
Les 2 boutons poussoirs permettent d'accéder soit uniquement à la partie accessibilité, soit uniquement à la partie éco-conception, soit les 2 en même temps.
Cet espace numérique illustre les bonnes pratiques et apporte un éclairage sur certaines techniques (ARIA notamment).
En termes de méthode, le code produit est testé avec différents outils afin de faciliter la production. Les tests sont réalisés comme pour un audit RGAA et les pages sont testées avec au moins une aide technique.
Quoi, la liste des 21 modules disponibles
Comment utiliser le démonstrateur
Les différentes sections du site correspondent à des usages spécifiques
- Meilleures pratiques présente des structure de code, de contenus ou des exemples qui utilisent les bonnes pratiques en termes de code sémantique et structuré.
- Comment présente une série de comment faire avec pour chaque module :
- Sa description ;
- Sa structure fonctionnelle ;
- Un exemple ;
- Le code HTML, CSS et JavaScript associé.
- Sémantique présente un tableau explicatif de la sémantique des balises HTML.
Les utilisateurs avec un accès privé peuvent avoir des rubriques supplémentaires en fonction de leurs besoins.
Remarques
Le démonstrateur et le code utilisé sont librement utilisables en respectant l'accord de licence indiqué en bas de page.
Si des erreurs ou des non-conformités apparaissent, n'hésites pas les signaler, elles seront corrigées au plus vite.
Les outils utilisés
Outils de conception
- Éditeur de code : Sublime ;
- Éditeur d'images au format SVG : insScape ;
- Intitulé absent : The Gimp ;
- Prise de notes : Joplin ;
Outils de validation
- Lecteur d'écran : Jaws ;
- Testeur de contraste : Kontrast ;
- Extension : Wave 4 (webAim) ;
- Extension : Web Developper Toolbar ;
- Validateur W3C: nu ;
- Outil d'analyse : Tanaguru Web Ext. ;
- Outil d'analyse : Arc ToolKit ;
- Outil d'analyse: Axe Dev. Tool ;
- Outil d'analyse : OCAA ;
Les autres outils
Les pages de ce démonstrateur sont générées en PHP et utilisent des requêtes vers une base MariaDB.
L'ensemble des outils utilisés sont open-source (hors JAWS).