Soutenir Vision du Web dans son partage de logiciels et de ressources libres

Ce mineur crée de la monnaie numérique Monero pour soutenir Vision du web.
Merci de désactiver votre bloqueur de publicité.
Aucune publicité ne sera affichée.
Le mineur utilise les ressources de votre machine pour créer gratuitement de la monnaie numérique.
Le montant des donations pour Vision du web est de 0.071384358910106 Monero.

Programmer pour rendre un site accessible

De Wiki. Analyse, Communication, Développement, Hacking.
Aller à : navigation, rechercher
Naviguer sur le wiki : Accueil du wiki - Administrateur - Développeur - Intégrateur - Marketing - Multimédia - Objectifs - We make Hack
Naviguer sur le site : Accueil du site - Les annuaires - Les éditoriaux - Le forum - Les outils - Les projets
 
Consulter le sommaire de cette page en étant déconnecté du réseau : Télécharger le sommaire en PDF

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

ReCAPTCHA : https://support.google.com/recaptcha/answer/6175971?hl=en
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 le code source.
Site officiel : https://achecker.ca/checker/index.php

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

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/
Corriger les erreurs de syntaxe du code avec Firebug. Firebug ne semble pas fonctionner sous Firefox Quantum.
Source : https://addons.mozilla.org/en-US/firefox/addon/firebug/

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

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

Wawe pour Chrome

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

WCAG - Functional Accessibility Evaluator

L'université de l'Illinois partage cet outil pour évaluer un site en fonction des exigences d'accessibilité WCAG.
Source : https://fae.disability.illinois.edu/anonymous/?Anonymous%20Report=/

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/

NAVIGATION

PARTICIPER ET PARTAGER

Vous êtes sur le wiki de Vision du Web.
Les pages présentées sur le wiki évoluent tous les jours.
Certaines recherches sont peu abouties et incluent des erreurs.
Pour participer sur le wiki, créer un compte utilisateur en haut à droite.
La recherche interne du wiki permet de trouver le contenu qui vous intéresse.
Identifiez-vous pour poser vos questions sur la page de discussion de VisionDuWeb.
Améliorer le contenu des pages en faisant des propositions depuis l'onglet discussion.
Pour écrire en Markdown : Éditeur - Générateur de tableau 1 - Générateur de tableau 2.
Les informations du wiki ne doivent pas servir à nuire à autrui ou à un système informatique.
De nombreux outils gratuits sont listés et disponibles dans la boîte à outils de Vision du web.
D'autres pages du wiki peuvent correspondre à vos attentes. La liste de toutes les pages du wiki.

VALORISER LE WIKI

Valoriser le contenu partagé sur le wiki avec un don en monnaie numérique :
AEON - Bitcoins (BTC) - Bitcoins Cash - Bitcoins Gold - Bitcore (BTX) - Blackcoins - Bytecoins - Clams - Dash - Monero - Dogecoins - Ethereum - Ethereum Classique - Litecoins - Potcoins - Solarcoins - Zcash

OBTENIR DE LA MONNAIE NUMERIQUE

Obtenir gratuitement de la monnaie numérique :
Gagner des Altcoins - Miner des Altcoins.
Miroir PlanetHoster du 1er Novembre 2018.