Programmer pour rendre un site accessible

Le wiki : Accueil - Administrateur - Bureautique - Développeur - Intégrateur - Marketing - Multimédia - Objets numériques - Jeux - We make Hack

Programmer pour rendre un site accessible

Accessibilité pour différents types d'handicaps

Source : https://github.com/UKHomeOffice/posters/tree/master/accessibility/dos-donts

Accessiweb

Source : http://www.accessiweb.org/index.php/accessiweb-cms-10-liste-generale.html

Accessibilité pour les équipes

Tous ceux qui travaillent sur les sites Web gouvernementaux ont un rôle à jouer pour rendre les ressources fédérales accessibles et inclusives.
Source : https://accessibility.digital.gov

Projet : Concevoir une page exemple des bonnes pratiques

Concevoir une page exemple des bonnes pratiques sur le modèle de patternlab : http://demo.patternlab.io

Exemples de codes accessibles sur le repo Github de scottaohara : https://github.com/scottaohara?tab=repositories

ARIA et accessibilité

Documentation Mozilla pour ARIA : https://developer.mozilla.org/fr/docs/Accessibilit%C3%A9/ARIA
Utiliser efficacement ARIA en HTML5 : http://beta.rdsign.net/articles/utiliser-efficacement-aria-en-html5
Le point sur les rôles ARIA : https://forum.alsacreations.com/topic-6-79484-1-Le-point-sur-les-roles-ARIA.html
ARIA, il serait temps de s’y mettre : https://letrainde13h37.fr/8/aria-il-serait-temps-de-sy-mettre/

Accessibilité et Captcha

Accessibilité pour Google ReCaptcha (NoCaptcha) : https://support.google.com/recaptcha/answer/6175971?hl=en
Accessibilité pour Aimy Captcha-Less Form Guard : https://www.aimy-extensions.com/joomla/captcha-less-form-guard.html

Accessibilité et clavier

Keyboard Accessibility : https://webaim.org/techniques/keyboard/accesskey

Accessibilité et Landmarks

Landmarks : https://www.scottohara.me/blog/2018/03/03/landmarks.html
ARIA Landmarks Example : https://www.w3.org/TR/wai-aria-practices/examples/landmarks/index.html

Accessibilité et WAI

Planning and Managing Web Accessibility : https://www.w3.org/WAI/planning-and-managing/
Legal and Policy Factors in Developing a Web Accessibility Business Case for Your Organization : https://www.w3.org/WAI/bcase/pol
Web Accessibility Tutorials - Labels de formulaires : https://www.w3.org/WAI/tutorials/forms/labels/
Captcha accessibles et alternatives : https://www.w3.org/WAI/GL/wiki/Captcha_Alternatives_and_thoughts

Accessibilité et ATAG

ATAG concerne l'accessibilité des outils de création, tels que les CMS.
Pour qu'un CMS soit accessible il faut être en conformité avec WCAG 2.1 et ATAG 2.0.

ATAG 2.0 Checklist : https://docs.google.com/document/d/1udF7GFWZRrDhXgppUF3uKlPB2PluZkCIGrLmCFFDX7Q

Accessibilité et WCAG

Web Content Accessibility Guidelines (WCAG) 2.0 : https://www.w3.org/Translations/WCAG20-fr/
WCAG concerne l'accessibilité du contenu. Web Content Accessibility Guidelines (WCAG) 2.1
Web Content Accessibility Guidelines : https://webaim.org/standards/wcag/
W3C Proposed Recommendation 24 April 2018 : https://www.w3.org/TR/WCAG/

Outils généralistes

Achecker

Analyser un site en ligne pour vérifier l'accessibilité.
Site officiel : https://achecker.ca/checker/index.php

ANDI

Analyser un site depuis son navigateur pour vérifier l'accessibilité.
Site officiel : https://www.ssa.gov/accessibility/andi/help/install.html

Aslint

Ajouter le code suivant dans un marque page : javascript:(function()%7Bvar%20s%20%3D%20document.createElement('script')%3Bfunction%20loaderCallback()%20%7B%7Dfunction%20resultsCallback(results)%20%7Bconsole.log(results)%3B%7Ds.type%20%3D%20'text%2Fjavascript'%3Bs.async%20%3D%20true%3Bs.src%20%3D%20(document.location.protocol%20%3D%3D%3D%20'https%3A'%20%3F%20'https%3A'%20%3A%20'http%3A')%20%2B%20'%2F%2Fwww.aslint.org%2Fapi%2Faslint%2Floader%2Floader.js'%3Bwindow.aslint%20%3D%20%7Bconfig%3A%20%20%7BasyncRunner%3A%20true%2CreportFormat%3A%20%7B'JSON'%3A%20true%7D%2CresultsCallback%3A%20resultsCallback%2CvisibleUI%3A%20true%7D%7D%3Bif%20(typeof%20s.addEventListener%20%3D%3D%3D%20'function')%20%7Bs.addEventListener('load'%2C%20loaderCallback)%3B%7Ddocument.body.appendChild(s)%7D)()

Lancer l'outil depuis une page du navigateur en cliquant sur le marque page ajouté précédemment.
Site officiel : https://www.aslint.org

Module C3RB pour Joomla

Le module pour tester l’accessibilité proposé par C3RB : https://github.com/c3rb-org/mod_c3rbrgaa_tools

CSS

La feuille de style a11y.css de Gaël Poupard permet de visualiser sur la page des erreurs potentielles à corriger.
Sources : https://github.com/ffoodd/a11y.css

Firefox Developer intègre un outil d'accessibilité

Le code de chaque page doit être conforme à la grammaire déclarée au début de la page.
Présentation de l'inspecteur d'accessibilité dans les outils de développement de Firefox : https://www.marcozehe.de/2018/04/11/introducing-the-accessibility-inspector-in-the-firefox-developer-tools/
L'extension Web Developer ajoute divers outils de développement Web au navigateur : https://addons.mozilla.org/fr/firefox/addon/web-developer/

Firebug, pour corriger les erreurs de syntaxe du code, ne semble plus être disponible sous Firefox Quantum.

Squizlabs

Un excellent outil équivalent à Aslint mais plus esthétique et plus simple lors de l'affichage des erreurs.
Peut être ouvert directement sur le site à analyser.
Source : http://squizlabs.github.io/HTML_CodeSniffer/

Créer un raccourci dans le navigateur avec le code suivant :
javascript:(function()%20{var%20_p='//squizlabs.github.io/HTML_CodeSniffer/build/';var%20_i=function(s,cb)%20{var%20sc=document.createElement('script');sc.onload%20=%20function()%20{sc.onload%20=%20null;sc.onreadystatechange%20=%20null;cb.call(this);};sc.onreadystatechange%20=%20function(){if(/^(complete|loaded)$/.test(this.readyState)%20=%20true){sc.onreadystatechange%20=%20null;sc.onload();}};sc.src=s;if%20(document.head)%20{document.head.appendChild(sc);}%20else%20{document.getElementsByTagName('head')[0].appendChild(sc);}};%20var%20options={path:_p};_i(_p+'HTMLCS.js',function(){HTMLCSAuditor.run('WCAG2AA',null,options);});})();

Functional Accessibility Evaluator 2.0 - WCAG

L'université de l'Illinois partage cet outil pour évaluer un site en fonction des exigences d'accessibilité WCAG.
Un outil d'évaluation pour l'accessibilité d'un site internet développé par L'Université d'Illinios à Urbana-Champaign.
Source : https://fae.disability.illinois.edu/anonymous/?Anonymous%20Report=/

Tenon

Nécessite une inscription pour pouvoir être utilisé.
Source : https://tenon.io

Wave pour Chrome

WAVE Evaluation Tool.
Source : https://chrome.google.com/webstore/detail/wave-evaluation-tool/jbbplnpkjmmeebjpijfedlgcdilocofh

Les couleurs

Color Oracle pour le daltonisme

Color Oracle est un simulateur de daltonisme gratuit pour Windows, Mac et Linux.
Site officiel : http://colororacle.org

Différents modes de rendu écran, pour différents types de daltonisme.
Deuteranopia or deuteranomoly: 5% of all males.
Protanopia or protanomaly: 2.5% of all males.
Tritanopia: Less than 0.3% of women and men.

Trouver un ratio de couleur adapté à votre site

Si le ratio de la couleur n'est pas adapté, cet outil, Contrast Finder propose des couleurs avec un bon ratio.
http://contrast-finder.tanaguru.com

WCAG Contrast checker - Extension pour Firefox

Firefox propose une extension : WCAG Contrast checker.
Source : https://addons.mozilla.org/en-US/firefox/addon/wcag-contrast-checker/

Les images

Alternative avec alt

Toute image doit avoir une alternative textuelle avec l’attribut "alt".
Les images contenant de l’information non présentes dans le contenu éditorial doivent avoir une alternative textuelle non vide. C’est le cas des infographies.
Les images décoratives doivent avoir une alternative vide, alt="".
Pour visualiser les alternatives, Firefox propose l’extension Web Developer. Dans son menu "Images", utiliser la fonction "Afficher les attributs alt".
Source : https://addons.mozilla.org/fr/firefox/addon/web-developer/

Lecteurs d’écran

Les lecteurs d’écran sont des logiciels utilisés par les personnes malvoyantes et aveugles, mais aussi par des personnes dyslexiques.
L’utilisation de ces outils est nécessaire pour tester l’accessibilité des composants d’interaction. Accordéons, Onglets, Carrousels...

NVDA

NVDA, Open Source : https://www.nvda-fr.org

Jaws

Jaws, version d’évaluation : http://www.freedomsci.de/serv_fra.htm

Les titres

Headingsmap

Firefox propose une extension pour vérifier les titres : Headingsmap.
La hiérarchie des titres de section d’un contenu éditorial doit être pertinente et sans rupture.
Cette extension affiche une table des matières basée sur les titres et signale les erreurs de rupture comme par exemple un titre de niveau 3 suivi d’un titre de niveau 5.
Source : https://addons.mozilla.org/fr/firefox/addon/headingsmap/

Les liens

Contrôler les titres

L’attribut title sur un lien n’est utile que lorsqu’il reprend l’intitulé du lien et qu’il le complète avec une information supplémentaire pour le rendre plus précis.
Les attributs title dont la valeur est identique à l’intitulé du lien doivent être supprimés, sauf si, seul cas autorisé, le lien ne contient qu’une seule image.
Pour afficher la valeur des éventuels attributs title sur les liens, Firefox propose l’extension Web Developer.
Aller dans le menu "Infos" et utiliser la commande "Afficher les attributs title".
Source : https://addons.mozilla.org/fr/firefox/addon/web-developer/

Les zones

Identifier les zones avec l'attribut role de WAI-ARIA

Les principales zones d’une page Web sont a identifier avec l’attribut "role" de la spécification Accessible Rich Internet Applications (WAI-ARIA).
Pour tester la présence de ces zones, Firefox propose l’extension Web Developer à utiliser avec le menu "Infos" et la fonction "Afficher les rôles Aria".
Les rôles suivants doivent être présent : banner, navigation, search, footer, main.
Le rôle navigation peut être présent plusieurs fois, les autres rôles sont uniques.
Source : https://addons.mozilla.org/fr/firefox/addon/web-developer/

Bibliographie

 Rendre le Web plus accessible : http://www.accesbilis.fr/boite-a-outils-pour-evaluer-laccessibilite-dun-site-web/
 Référentiel RGAA : https://references.modernisation.gouv.fr/publications/rgaa-accessibilite/
 Notice d’accessibilité des principaux composants d’interface riche : https://www.accede-web.com/notices/interface-riche/

NAVIGATION

PARTICIPER ET PARTAGER Bienvenue sur le wiki de Amis SH. De nombreuses pages sont partagées sur ce wiki. Créer un compte utilisateur pour participer sur le wiki. Les pages présentées sur le wiki évoluent tous les jours. Certaines recherches sont peu abouties et incluent des erreurs. Utiliser la recherche interne du wiki pour trouver votre contenu. La page de discussion de Amis SH vous permet de poser vos questions. Consulter le site amis-sh.fr pour installer votre propre serveur web. Améliorer le contenu des pages avec vos retours depuis l'onglet discussion. Ce contenu ne doit pas servir à nuire à autrui ou à un système informatique. Protéger votre système Linux ou Windows avec cette page dédiée à la sécurité.

SOUTENIR CE WIKI Soutenir le wiki avec un don en monnaie numérique : AEON - Bitcoins - Bitcoins Cash - Bitcoins Gold - Bitcore - Blackcoins - Basic Attention Token - Bytecoins - Clams - Dash - Monero - Dogecoins - Ğ1 - Ethereum - Ethereum Classique - Litecoins - Potcoins - Solarcoins - Zcash OBTENIR DE LA MONNAIE NUMERIQUE Obtenir gratuitement de la monnaie numérique : Miner de la cryptomonnaie.