Création Sites Wordpress Accessibles

Techniques d’accessibilité web

Accessibilité web

Technologies d’assistance

Détection du lecteur d’écran :

Structure de page

Images et autres contenus non textuels

Alternatives textuelles

Descriptions longues

Remarque : certains des articles et billets de blog répertoriés ci-dessous n’ont qu’un intérêt historique et documentent un certain nombre de tentatives de prise en charge de longues descriptions après que la spécification HTML 5 a rendu obsolète l’ longdescattribut. La spécification HTML du WHATWG répertorie les fonctionnalités non conformes . longdesc

  • How to Write Long Descriptions , Metropolitan State University of Denver (sans date ; consulté le 16.05.2022).
  • How to Write Long Text Alternatives , Information Technology Systems and Services, University of Minnesota Duluth (sans date ; consulté le 01.07.2022).
  • Complex Images , Web Accessibility Initiative ( WAI ), W3C (sans date ; consulté le 16.05.2022).
  • Groves, Karl : Longdesc – Où sont les alternatives ? , www.karlgroves.com , 26.08.2014.
  • Recherche : longdesc : un site Web qui a été créé et maintenu par Laura L. Carlson après que HTML 5 ait déclaré l’ longdescattribut obsolète.
  • Çelik, Tantek : Déçu par @ W3C pour avoir recommandé Longdesc , tantek.com , 26.02.2015.
  • Décrire les images pour une meilleure accessibilité du Web , blog mediacurrent , 04.08.2015.
    Entre autres choses, ce billet de blog renvoie au plugin jQuery Accessible Longdesc de Dirk Ginader , qui n’a pas été mis à jour depuis 2012.
  • Lembree, Dennis : Longdesc et autres solutions de description d’image longue — Partie 1 : Les problèmes , SitePoint , 27.04.2011.
  • Lembree, Dennis: Longdesc & Other Long Image Description Solutions — Partie 2 sur 2 : Les Solutions , SitePoint , 11.05.2011.
  • Lawson, Bruce: longdesc en HTML5 , Site personnel de Bruce Lawson , 31.03.2011.
  • Surkov, Alexander : Firefox 14 : quoi de neuf pour les développeurs AT , blog d’Alex , 11.05.2012.
    Ce billet de blog décrit une nouvelle façon de prendre en charge les longues descriptions dans Firefox 14. Il contient également le commentaire suivant de Richard Schwerdtfeger : J’ai eu des discussions à ce sujet avec David Bolter, Dominic Mazzoni et Silvia Pfeifer. Nous nous sommes mis d’accord sur le fait que nous devrions avoir un attribut qui prend une URL. Nous concevions sur aria-dedicatedat. Lorsqu’il est fourni, l’agent utilisateur fournira un indicateur visuel de son choix. J’ai suggéré une icône avec la lettre i dans le coin supérieur droit de l’élément en cours de rendu pour indiquer que plus d’informations étaient disponibles. Nous avons également convenu que l’auteur devrait pouvoir redéfinir l’apparence de l’indicateur à l’aide d’une feuille de style. Sur une commande de touche, un geste, etc. (selon le navigateur), l’agent utilisateur afficherait un menu de choix parmi lesquels choisir (le menu contextuel) qui inclurait un élément de menu indiquant “plus d’informations” ou générerait automatiquement une nouvelle fenêtre avec le contenu. Une fois la nouvelle fenêtre activée, l’agent utilisateur doit fournir un véhicule (disons la touche d’échappement) pour ramener l’utilisateur à l’endroit du document d’origine où il s’était arrêté.
    Cela offre une réelle valeur ajoutée à tous les utilisateurs sans qu’il soit nécessaire de fournir un élément d’ancrage séparé. Les systèmes de points de vente, les kiosques d’information (musée ou bibliothèque), pourraient en faire usage.
    Il devrait appartenir au navigateur de définir comment la disponibilité des informations supplémentaires est rendue, comment l’information est accessible et comment l’utilisateur revient au document d’origine. C’est très important. Je pense que les pensées étaient que la spécification ARIA . les gens essayaient de dicter cette fonctionnalité dans le navigateur et nous ne le faisons pas. En fait, cela n’aurait aucun sens. 
  • Faulkner, Steven : Firefox 14 : description longue de l’image via un lien utilisant aria- dedicatedby , blog TPGi , 11.05.2012.
    Cet article fait référence au billet de blog d’Alexander Surkov et contient un autre commentaire de Richard Schwerdtfeger : J’ai une opinion très forte que cette utilisation de describeby n’est pas bonne. S’il vous plaît voir mes commentaires sur [ le blog de Sourkov ].
  • Configuration d’Internet Explorer pour gérer longdesc , Microsoft Accessibility Blog , 25.03.2011.

SVG accessible

Formules mathématiques et scientifiques

canvasAccessibilité

Hyperliens et navigation

Hyperliens

Fil d’Ariane

Menus de navigation et menus déroulants

Accessibilité du formulaire

Étiquetage des contrôles de formulaire

requiredetaria-required

Validation des champs de formulaire et messages d’erreur

  • Roselli, Adrian : Éviter la validation des champs par défaut , Adrian Roselli , 20.02.2019, mis à jour le 05.05.2022.
    Ce billet de blog identifie divers problèmes liés à la validation par le navigateur des champs obligatoires. Lorsqu’un champ pour une adresse e-mail qui doit correspondre à un certain modèle est validé, le modèle n’est pas communiqué à l’utilisateur par les lecteurs d’écran (ni à aucun autre utilisateur). Il s’agit d’un échec du critère de succès 3.3.5 (Suggestion d’erreur). Si l’identification d’erreur repose sur un changement de couleur dans la bordure ou le contour du champ, elle échoue au critère de succès 3.3.1 (Identification d’erreur) et, selon Roselli, également au critère de succès 4.1.2 (Nom, Rôle, Valeur). (Le critère de succès 4.1.2 n’est pas limité au contenu mis en œuvre à l’aide de langages de balisage, il s’applique donc également à l’état des navigateurs et aux messages d’erreur.) Ce n’est pas clair d’après Roselli’ s blog post si les messages d’état et d’erreur générés par le navigateur exposent leur nom, leur rôle et leur valeur aux technologies d’assistance ; s’ils ne le font pas, ils échouent au critère de succès 4.1.2. En fin de compte, écrire votre propre validation est préférable pour l’accessibilité, même si ce n’est pas facile.
  • Genovese, Greg: Erreurs de formulaire auxquelles les lecteurs d’écran peuvent accéder , blog Cantina , 29.03.2017.
  • Avila, Jonathan : Comment fournir une identification d’erreur de formulaire accessible , Niveau d’accès , 04.08.2014.
  • Création d’erreurs de saisie accessibles et d’un texte d’aide , Pulsar (sur Medium) , 16.05.2018 (lecture de quatre minutes).
    Ce billet de blog concerne les assistants du moteur de template Twig .

Regroupement des contrôles de formulaire ( fieldset,legende

L’ placeholderattribut

Autres aspects des formulaires

Les tableaux

Les fichiers CSS

Captcha

Problèmes avec CAPTCHA

CAPTCHA accessibles et alternatives CAPTCHA

Couleur et contraste

Modes sombres, thèmes sombres et contraste élevé

Aria

WAI – ARIA : Présentations et présentations

Panneau d’onglets

Curseurs

Carrousels

Dialogues modaux et non modaux

Autres composants ou widgets de l’interface utilisateur

Abréviations et acronymes

Langue

Lisibilité du contenu Web en allemand :

Lisibilité police et design

  • Latin, Matej : 5 clés pour une typographie Web accessible , Better Web Type , 16.06.2019 (lecture de 14 minutes).
    Cet article propose plusieurs conseils :

    1. Définissez votre taille de police de base en unités relatives. (L’auteur commence par définir html { font-size: 100%;} et utilise des remtailles pour d’autres éléments. Définir la taille de police par défaut en pixels est une mauvaise idée car cela remplace la taille de police par défaut du navigateur.)
    2. Vérifiez la couleur de votre type et seulement ensuite son contraste. (Étant donné que les polices claires peuvent être difficiles à lire, il est insuffisant de vérifier les couleurs de premier plan et d’arrière-plan dans un outil de vérification du contraste. Le contraste doit être suffisamment élevé sur le plan optique. L’auteur discute également des risques de lissage des polices.)
    3. Utilisez des polices très lisibles. ( La lisibilité concerne la facilité avec laquelle il est possible de distinguer une lettre d’une autre et la lisibilité concerne la facilité de lecture d’un bloc de texte.  Helvetica est notoirement mauvaise pour la lisibilité et doit être évitée. L’auteur déconseille également l’utilisation d’Arial. Humanist les polices de style et les polices serif ont moins de problèmes de lisibilité.)
    4. Formez bien vos paragraphes. (La hauteur de ligne, la longueur de ligne et la taille de la police ne doivent pas être choisies indépendamment mais doivent être en parfait équilibre. La longueur de ligne idéale est comprise entre 45 et 75 caractères, et des longueurs de ligne plus longues doivent être combinées avec une hauteur de ligne plus grande. Il faut également éviter de justifier ou des paragraphes centrés. Pour plus de détails, consultez l’article de l’auteur The Equilateral Triangle of a Perfect Paragraph ou son livre Better Web Typography for a Better Web .)
    5. Utilisez correctement les niveaux de titre.
  • Veroniiiica : Mes huit polices gratuites préférées pour les troubles de l’impression , Perkins eLearning blog , 14.08.2018.
    Ce blog traite d’Arial, Helvetica, Bebas Neue (uniquement les majuscules, peut être utilisé pour les titres), Calibri (haute lisibilité), APHont (spécialement conçu pour les utilisateurs malvoyants), Comic Sans (anciennement souvent utilisé comme une police adaptée à la dyslexie ), Lavanderia (une police cursive qui semble appropriée pour les personnes malvoyantes ou dysgraphiques) et OpenDyslexic (spécialement conçu pour les personnes dyslexiques).
  • Cannon, Cara : une étude montre que les polices personnalisées accélèrent la lecture et maintiennent la compréhension , University of Central Florida News , 06.07.2022.
    Sous-titre : les chercheurs ont découvert que le fait de changer la police pour une police mieux adaptée à un individu entraînait une augmentation de 35 % de la vitesse de lecture tout en maintenant la compréhension.
  • The Readability Group et Gareth Ford Williams: A Guide to Understanding What Makes a Typeface Accessible , Blog UX Collective , 14.08.2020.
    Le groupe de lisibilité a créé les visages de la police BBC Reith et Qalam sur la base de recherches incluant des personnes atteintes de dyslexie et de divers types de déficiences visuelles. BBC Reith a surperformé Helvetica, Arial, Gill Sans et Tiresias. Les articles fournissent les directives suivantes pour le choix des polices :

    1. Utilisez un style de police adapté à votre public.
    2. Minimisez l’apparition de formes de lettres d’imposteur conçues pour être très similaires à d’autres formes de lettres dans le cadre du style visuel de la police.
    3. Minimisez l’apparition de formes de lettres en miroir.
    4. Les lettres doivent être facilement distinguables les unes des autres.
    5. Les polices de caractères humanistes sont généralement plus lisibles à des tailles plus petites que les polices de caractères grotesques.
    6. Assurez-vous que la police de caractères a un espacement adéquat des lettres.
    7. Il devrait y avoir une différence visible entre la hauteur du capital et les ascendants.
    8. Testez la pertinence de n’importe quelle police de caractères/police en contexte.

    (Le site Web du Readability Group utilise la police Lustria.)

  • Fass, Simone : Mehr Barrierefreiheit im Grafikdesign , Simone Fass , 22.04.2018. L’article mentionne quelques polices qui sont bonnes pour l’accessibilité : Open Sans, Fira Sans et Neue Frutiger 1450.
  • Haley, Allan : It’s About Lisibility , Fonts.com (sans date).
  • Beier, Sofie : Lisibilité de la police de caractères : vers la définition de la familiarité , Sofie Beier (sans date). Ce billet de blog porte sur la thèse de doctorat de Sofie Beier au Royal College of Art, soumise en 2009.
  • Beveratou, Eleni; Maag, Dalton : L’effet de la conception et de la composition des caractères sur les lecteurs malvoyants , avril 2016 (hébergé sur ResearchGate)
  • Schriftgröße , Leserlich.info (sans date ; consulté le 11.03.2022).
  • Garnham, Phil : Familiarisez- vous avec la typographie Web accessible , Creative Bloq , 12.10.2017.
  • DTALE Design Studio : 10 meilleures polices pour améliorer l’expérience de lecture , The Productivity Revolution on Medium , 31.01.2017 (quatre minutes de lecture).
    Les polices de caractères répertoriées dans cet article de blog ont été principalement développées pour être utilisées sur des écrans ; certains d’entre eux peuvent également être bien lus dans de petites tailles. Cependant, ils n’ont pas été choisis pour améliorer la lisibilité des personnes dyslexiques ou ayant une déficience visuelle. Les auteurs ont choisi les polices suivantes : Merriweather, Montserrat, Pluto Sans, Tisa, Droid Sans, Playfair Display, Minion, Open Sans, Bookerly et Literata.
  • Reddy, Michael : Conformité ADA : comment une mauvaise taille de police peut vous entraîner en justice , partenaires de l’autorité numérique , 11.12.2019.
    (Cet article ne constitue pas un conseil de conception. Par exemple, il décrit les polices de caractères suivantes comme compatibles avec l’ ADA : Tahoma, Calibri, Helvetica, Arial, Verdana et Times New Roman.)
  • Soueidan, Sara : Design for reading : conseils pour optimiser le contenu des modes de lecture et des applications de lecture , Blog de Sara Soueidan , 10.05.2021.
  • Atkinson Hyperlisible Font , Braille Institute of America , 2021.
  • La police qui permet à tout le monde de lire plus rapidement – Cheddar explique ( Cheddar sur YouTube, 7 minutes, 25.09.2019).
    Ceci est une vidéo sur les polices Lexend développées par Bonnie Shaver-Troup. Notez que la vidéo traite d’une comparaison des vitesses de lecture pour Lexend avec Times New Roman et uniquement pour les textes en anglais, ce qui limite la validité de l’affirmation dans le titre de la vidéo.
  • Willliams, Gareth Ford : qu’y a-t-il dans un mot ? , Le groupe de lisibilité (sur Medium), 22.04.2021.
  • Simons, Bart : Welk lettertype est-il le meilleur leesbaar ? , Blog AnySurfer , 25.11.2014.

Conception web pour la dyslexie

Polices de caractère pour les personnes dyslexiques

  • Rello, Luz ; Baeza-Yates, Ricardo: Good fonts for dyslexia , ASSETS ’13: Proceedings of the 15th International ACM SIGACCESS Conference on Computers and Accessibility , Article n° 14.
    Résumé (publié par ACM ):

    Environ 10% des personnes atteintes de dyslexie, un handicap neurologique qui altère la capacité d’une personne à lire et à écrire. Il est prouvé que la présentation du texte a un effet significatif sur l’accessibilité d’un texte pour les personnes dyslexiques. Cependant, à notre connaissance, aucune expérience ne mesure objectivement l’impact du type de police sur les performances de lecture. Dans cet article, nous présentons la première expérience qui utilise le suivi oculaire pour mesurer l’effet du type de police sur la vitesse de lecture. En utilisant une conception intra-sujet, 48 sujets dyslexiques ont lu 12 textes avec 12 polices différentes. Les styles de police sans empattement, à espacement fixe et romain ont considérablement amélioré les performances de lecture par rapport aux polices avec empattement, proportionnel et italique. Sur la base de nos résultats,

  • Bigelow, Chuck : Typographie et dyslexie , Bigelow et Holmes , novembre 2014.
  • Gonzalez, Robbie : une police spéciale pour aider les dyslexiques ? Plus comme l’huile de serpent. , Gizmodo , 13.01.2015.
  • Quelle est la police la plus adaptée à la dyslexie ? , Échange de pile d’expérience utilisateur , 20.01.2015.
  • Roselli, Adrian: Typefaces for Dyslexia , Blog d’Adrian Roselli , 14.03.2015.
  • Roselli, Adrian : polices variables et dyslexie , blog d’Adrian Roselli , 19.08.2018.
  • Gabriel, Robert James: Research into Web Accessibility for Dyslexics and Dyslexia-focused fonts such as OpenDyslexia , Robert J. Gabriel on Medium , 23.02.2017 (lecture de quatorze minutes).
  • Polices de caractères pour la dyslexie , dyslexic.com (sans date). Cet article décrit plusieurs polices recommandées et utilisées par les personnes dyslexiques.  Il traite de Read Regular (par Natascha Frensch), Lexie Readable, Tiresias (conçu pour les déficiences visuelles mais pas spécifiquement pour la dyslexie), Century Gothic, Calibri, Sassoon, Myriad Pro et quelques autres polices.
  • Typefaces for dyslexia , British Dyslexia Association (pas de date, vraisemblablement janvier 2012 ; consulté le 01.03.2021).
  • D’Anna, Vincianne : Quand les livres numériques atténuent la dyslexie , Lettres numériques , 05.09.2013.
  • OpenDyslexic : cette police est libre d’utilisation ; il utilise la licence SIL-Open Font License ( OFL ) .
  • Lexie lisible , type K. Cette police était auparavant connue sous le nom de Lexia Readable. Il est gratuit pour un usage personnel, éducatif et caritatif ; les autres utilisateurs doivent acheter une licence.
  • Read Regular : une police de caractères développée par Natascha Frensch.

Accessibilité cognitive

Accessibilité pour les utilisateurs les plus âgés

Listes

  • Paladugula, Rakesh : Listes HTML et accessibilité , Maxability
  • Aperçu de la liste , ICITA (pas de date).
  • Watson, Léonie : Utilisation des listes HTML , Humanising Technology Blog , 08.03.2011.
  • Rutter, Richard : Listes, listes et plus de listes , Clagnut , 27.01.2003.
    Ce billet de blog est intéressant d’un point de vue « historique » car il contient des captures d’écran d’AvantGo sur un Palm Vx.

Animations et mouvement

Livres sur l’accessibilité du Web

Les livres ci-dessous sont classés par date de publication. La plupart d’entre eux sont déjà obsolètes.

  • Thatcher, Jim; Bohman, Paul; Burk, Michael ; Henry, Shawn Lawton; Regan, Bob; Swierenga, Sarah ; Urbain, Mark D. ; Waddell, Cynthia : Construire des sites Web accessibles . glasshaus, 2002. (415 pages) ISBN 978-1-59059-148-2 .
  • Clark, Joe : Créer des sites Web accessibles . Indianapolis, Indiana: New Riders, octobre 2002. (425 pages) ISBN 0-7357-1150-X.
    Voir aussi la version en ligne de Building Accessible Websites .
  • Horton, Sarah : Access by Design : Un guide de l’utilisabilité universelle pour les concepteurs Web . Berkeley, Californie : New Riders, 2006 [en fait 2005]. (264 pages) ISBN 0-321-31140-X.
  • Duckett, Jon : Sites Web XHTML et CSS accessibles : problème – conception – solution . Indianapolis, Indiana : Wiley, 2006 [en fait 2005]. (458 pages) ISBN 0-7645-8306-9.
  • Rutter, Richard, et al : Accessibilité Web : normes Web et conformité réglementaire . Amis d’Ed, 2006. ISBN 978-1-59059-638-8 .
  • Henry, Shawn Lawton : Just Ask : Intégration de l’accessibilité dans la conception . Lulu.com, 2007. (200 pages) ISBN 978-1430319528 .
  • Craven, Jenny (éditeur) : Accessibilité Web : Conseils pratiques pour les professionnels de la bibliothèque et de l’information . Londres : Facet Publishing, 2008. (168 pages) ISBN 978-1-85604-625-1.
  • O’Connor, Joshue : Joomla ! Accessibilité . Édition Packt, 2008. ISBN 978-1-847194-08-4.
    La préface du livre n’indique pas quel Joomla! version sur laquelle il est basé mais les quelques références à Joomla! les versions sont pour la plupart à la version 1.5, qui est maintenant obsolète.
  • Hellbusch, Jan Éric; Probiesch, Kerstin : Barrierefreiheit verstehen und umsetzen. Webstandards für ein zugängliches und nutzbares Internet . dpunkt.verlag , 2011. (812 pages) ISBN 978-3-89864-520-1 .
    Voir aussi la page Web de Hellbusch sur le livre .
  • Altinier, Armony : Accessibilité Web : Normes et bonnes pratiques pour des sites plus accessibles . Paris : Eyrolles, 2012. (331 pages) ISBN 978-2-212-12889-5.
  • O’Connor, Joshue : Pro HTML 5 Accessibilité : Créer un Web inclusif . Apress, 2012. (365 pages) ISBN 978-1-4302-4194-2 .
  • Narayanan Palani : Tests avancés d’accessibilité Web au sélénium : les secrets des tests d’automatisation des logiciels révélés . Momentum Press, 2019. (121 pages) ISBN 9781949449433 .
  • Firth, Ashley : Inclusion et accessibilité Web pratiques : un guide complet des besoins d’accès . Apress, 2019. ISBN 978-1-4842-5451-6 .
    D’après la description du livre de l’éditeur : allant au-delà des conseils adaptés uniquement aux développeurs, ce livre propose des améliorations potentielles pour les concepteurs, les développeurs, les professionnels de l’expérience utilisateur, l’ assurance qualité et les testeurs, afin que toutes les personnes impliquées dans la création d’un site Web puissent s’engager avec les concepts sans avoir besoin de comprendre comment coder.
  • Dowden, Martine; Dowden, Michael : Accessibilité accessible : Planifier pour réussir . Apress, 2019. (120 pages) ISBN 978-1-4842-4880-5 .
    D’après la description du livre de l’éditeur : ce livre rend le sujet de l’accessibilité Web aussi accessible que possible pour aider chaque professionnel du Web à devenir un défenseur de l’accessibilité dans son entreprise, sur ses projets et dans sa communauté.
  • Stratégies d’éducation numérique, The Chang School : Accessibilité Web pour les développeurs : compétences essentielles pour les développeurs Web .
    Publié en novembre 2019 et disponible sous les termes de la licence Creative Commons Attribution ShareAlike.
  • Livres sur l’accessibilité du Web , Web Axe , 26.11.2017.

Échecs et anti-modèles

  • Rupert, Dave : HTML : Les parties inaccessibles , daveruppert.com , 28.02.2020.
    Ce blog répertorie un certain nombre d’éléments qui ne sont nativement pas aussi accessibles ou utilisables qu’on pourrait s’y attendre. Cela inclut divers types d’entrées ( par exemple <input type="date"> , <progress>, <details><summary>et <video>.
  • Koss, Hal : Infinite Scroll : à quoi ça sert ? , Intégré , 21.12.2020.
    Tweeté par The Paciello Group, 22.12.2020 : Le défilement infini est un risque d’accessibilité et une pratique UX discutable, et ces experts sont d’accord : (…)
  • CSS : pointer-events:nonesur un labelélément. Voir le tweet de Patrick Lauke du 05.02.2021 : la deuxième fois que j’ai vu cela récemment, afin d’éviter aux autres une longue chasse aux bogues : si vous avez un <label>, mais que cliquer/appuyer dessus ne met pas le focus sur son <input>/<form>élément correctement associé … vérifiez si, pour une raison quelconque, le <label>pointeur-events:none en CSS .
  • Panneaux d’options d’accessibilité :
    • À la barre . Cet outil open source, développé à l’Université de Southampton au Royaume- Uni , peut être intégré à des sites Web et  est conçu pour ceux qui n’ont peut-être pas leurs technologies d’assistance à portée de main et qui ont besoin d’un moyen rapide d’accéder au texte à l’écran avec grossissement et/ ou texte à la parole, etc. Il peut aider les personnes ayant une basse vision, la dyslexie et d’autres difficultés de lecture, ainsi que ceux qui souhaitent simplement réduire l’éblouissement du texte noir sur des arrière-plans blancs brillants. Il n’est pas conçu pour les utilisateurs réguliers de lecteurs d’écran qui ont besoin de leur technologie d’assistance pour accéder à l’ordinateur ainsi qu’à leur navigateur.  Voir aussi la vidéo YouTube ATbar : une barre d’outils multi-navigateur gratuite fournissant des outils d’accessibilité (3 minutes, 29.08.2013).
    • Options de l’ interface utilisateur fluide  / Éditeur de préférences . Cet outil open source, développé à l’Université OCAD de Toronto, au Canada, peut être intégré à des sites Web. Voir également la vidéo YouTube Introduction aux options d’interface utilisateur (4 minutes, 15.09.2017). Pour le code source, consultez le référentiel Infusion sur GitHub .
      Pour des exemples de sites qui l’utilisent, voir Raising the Floor et GPII .
    • Capable d’inclure la couche d’accessibilité de .
    • Easy Reading : Easy Reading est un outil logiciel supportant l’accessibilité cognitive du contenu web. Nous voulons permettre aux personnes souffrant de troubles cognitifs de mieux lire, comprendre et utiliser toutes les pages Web. Notre objectif est de rendre les pages Web plus accessibles à tous.  (Consulté le 11.06.2022).
    • SkipTo par l’équipe d’accessibilité de PayPal combine un lien de saut avec une table des matières. (Il ne s’agit pas à proprement parler d’un panneau d’options d’accessibilité comme ci-dessus.)

Outils de superposition

Outils de superposition : articles

Les produits de superposition sont vendus comme des outils qui résolvent comme par magie les problèmes d’accessibilité d’un site Web.

Outils de superposition : liste des outils

Vous trouverez ci-dessous une liste d’outils de superposition (avec certaines de leurs affirmations exagérées et trompeuses). Étant donné que rendre un site Web accessible est un processus qui ne peut pas être automatisé, les affirmations de ces fournisseurs sont trompeuses.

 

  • FACIL’iti (France) : FACIL’iti est une solution d’accessibilité numérique innovante qui adapte l’affichage d’un site Web en fonction des besoins de confort visuel, moteur, cognitif, et/ou temporaire de l’internaute. . (Consulté le 12.05.2021.)
  • accessiBe (Israël) : la solution d’accessibilité Web automatisée n° 1 pour la conformité aux normes ADA et WCAG ; Une seule ligne de code pour une conformité automatisée 24h/24 et 7j/7 . (Il y a même un article Wikipedia sur accessiBe .) (Consulté le 12.05.2021.)
  • AudioEye (Tucson, Arizona, États- Unis ) : n° 1 de l’accessibilité Web 
    Lorsqu’il s’agit de comprendre la conformité de l’accessibilité Web, AudioEye est là pour vous aider. Le logiciel d’accessibilité de site Web d’AudioEye offre une accessibilité supérieure et une protection juridique éprouvée. 
    Une fois notre outil installé, AudioEye pourra détecter et corriger immédiatement plus de 400 erreurs d’accessibilité.  (Consulté le 12.05.2021.)
  • Agastya par Oswald Labs (New Delhi, Inde) : en ajoutant une seule ligne de code JavaScript, vous pouvez rendre votre site Web accessible à un public beaucoup plus large. Vous pouvez personnaliser le widget, afficher les analyses d’utilisation, installer des applications, etc.  (Consulté le 12.05.2021.)
  • UserWay (Floor Wilmington, DE , États- Unis ) : la principale solution d’accessibilité de site Web automatisée au monde pour la conformité ADA et WCAG
     Ne nécessite qu’une seule ligne de JavaScript . (Consulté le 12.05.2021.)
    Le plug-in de UserWay renforcera instantanément tous les points faibles susceptibles de causer des problèmes. Nous sommes fiers de dire que des dizaines de millions de pages sont aujourd’hui plus accessibles grâce à UserWay. 
    Un site Web qui utilise UserWay est Special Olympics , où l’outil de superposition s’ouvre lorsque vous appuyez sur la combinaison de touchesCtrl u(vous ne pouvez donc pas utiliser ce raccourci clavier pour afficher le code source de la page). (Consulté le 20.06.2022.)
  • EqualWeb (Kfar Yona, Israël) : Rendez votre site Web accessible en une seule étape facile : insérez une ligne de code et nous ferons le reste ! (Consulté le 12.05.2021.)
  • Max Access – Accessibilité Web alimentée par l’ IA pour la conformité aux WCAG et à la section 508 (Eugene, Oregon, États- Unis ) : INSTALLER UNE SEULE LIGNE DE CODE
    Max Access analyse, analyse et met à jour instantanément votre site Web. Ensuite, il recherche toutes les mises à jour du site ou tout nouveau contenu toutes les 24 heures !      (Consulté le 12.05.2021.)
  • Howling Access AI (Tampa, Floride, États- Unis ) : solution d’accessibilité Web entièrement automatisée pour la conformité ADA et WCAG
     L’ installation de Howling Access AI est aussi simple que l’ajout d’une seule ligne de code JavaScript à votre site Web. Vous pouvez également l’ajouter via Google Tag Manager, ou utiliser l’une de nos extensions CMS comme WordPress, Joomla, BigCommerce, Drupal, etc. (Consulté le 12.05.2021. Remarquez le faible contraste du texte blanc sur fond jaune et le jaune texte sur le fond blanc.)
  • Enable / EnableMyWebsite.com (Royersford, PA , États- Unis ?) : Accessibilité Web alimentée par l’IA. Automatique. Simple. Abordable. 
    L’installation de Enable Web Accessibility est extrêmement simple et rapide. Tout ce que vous avez à faire est d’implémenter une seule ligne de code JavaScript dans votre site Web. C’est aussi simple que d’installer Google Analytics ou Facebook Pixel ! De plus, vous pouvez même l’implémenter à l’aide de Google Tag Manager ou de nos plugins CMS intégrés ! 
    Ceci est en fait alimenté par AccessiBe; voir les Termes et Conditions d’Enable . (Consulté le 12.05.2021.)
  • Kiuloper (Canada) : L’installation d’une solution d’ IA est aussi simple que d’ajouter une seule ligne de code JavaScript à votre site Web. Vous pouvez également l’ajouter via Google Tag Manager, ou utiliser l’une de nos extensions CMS comme WordPress, Joomla, BigCommerce, Drupal, etc. (Consulté le 12.05.2021.)
  • Direction (McLean, Virginie, États- Unis ) : la solution d’accessibilité de site Web entièrement conforme à l’ ADA
     Nous ajoutons une seule ligne de code JavaScript au pied de page de votre site Web. Ne vous inquiétez pas, nous pouvons également vous donner ce code si vous souhaitez l’installer vous-même.  (Consulté le 12.05.2021.)
  • Maverick Media (Easton, Pennsylvanie , États- Unis ) : LA SOLUTION D’ACCESSIBILITÉ DE SITE WEB ENTIÈREMENT AUTOMATISÉE N° 1 POUR LA CONFORMITÉ ADA ET WCAG
     Nous créerons une seule ligne de code JavaScript et l’installerons sur la plate-forme de votre choix.  (Il s’agit d’un partenaire AccessiBe. Consulté le 12.05.2021.)
  • BeeSeen Solutions (New York, États- Unis ) : Accélérez votre activité avec les solutions d’accessibilité de sites Web de BeeSeen Solutions sans restructurer le code existant de votre site Web et sécurisez un cadre de conformité juridique et réglementaire complet couvrant ADA , Section 508, WCAG 2.1 AA, et bien plus encore. 
    Le widget d’accessibilité BeeSeen Solutions est compatible avec toutes les principales plates-formes CMS ainsi qu’avec les sites HTML / CSS / JS . Ce widget peut facilement repérer les zones faibles qui pourraient causer des problèmes, des obstacles ou des violations d’accessibilité.  (Consulté le 12.05.2021.)
  • Get ADA Accessibility ( USA ?) : Get ADA Accessibility prend en charge TOUTES les plateformes, en utilisant notre technologie de pointe basée sur des algorithmes d’ IA uniques. Nous pouvons vous aider à rendre votre site Web et tout votre contenu numérique accessibles sans modifier votre code.
    Insérez simplement une ligne de code et nous ferons le reste !      (Consulté le 12.05.2021.)
  • Purple Lens (Tel Aviv, Israël) : décrit comme suit dans la FAQ : L’outil d’accessibilité Purple-Lens est un plugin intelligent qui permet aux pages WordPress®️ de devenir accessibles à l’aide de nos technologies d’assistance.  et son fonctionnement est décrit comme suit : L’outil automatise la visualisation du site afin de le rendre plus agréable aux personnes handicapées. L’outil automatise la visualisation du site afin de le rendre utilisable par des personnes souffrant de divers handicaps : déficience visuelle, daltonisme, épilepsie, difficultés motrices, etc.  En ce qui concerne le niveau de conformité, la FAQ indique : L’utilisation de l’outil et l’accomplissement de chaque étape de Purple Lab permettent au site de répondre aux exigences du W3C WIA WACG LEVEL AA.  (Consulté le 10.06.2021.)
  • DIGIaccess (Bonn, Allemagne). Description sur la page produit : DIGIaccess ermöglicht es, Webseiten für jeden zugänglich zu machen. Der gesamte Prozess, inklusive der vollständigen Einhaltung der gesetzlichen Rahmenbedingungen, erfolgt zu 100 % automatisch und sofort, wobei KI -, Lern- und Bildverarbeitungstechnologien genutzt werden.  (Consulté le 10.06.2021.)
  • Adally (St. George, Utah, USA ) : Adally Free Accessibility Widget : ce widget ne nécessite qu’une seule ligne de code pour « s’installer ». La société souligne qu’il ne s’agit pas d’une solution complète : notre widget propriétaire ne rendra pas votre site Web conforme à l’ ADA , aucune solution de superposition ne le fera, mais c’est un excellent premier pas et crée une meilleure expérience globale pour les visiteurs du site Web souffrant de certains handicaps.  (Consulté le 10.06.2021.)
  • Deque Systems publie Amaze 3.0 pour une disponibilité générale , blog Deque Systems , 27.05.2014.
    Voir aussi Caitlin Cashin : Dylan Barrell Talks Amaze (21.02.2013). Il n’y a pas eu de nouvelles informations sur Amaze depuis 2014.

Accès au clavier et touches d’accès

Focus clavier / Visibilité du focus

Remarque : pendant de nombreuses années, Firefox avait un mauvais indicateur de focus par défaut qui consistait en un mince contour noir en pointillés. Firefox 100.0 l’a remplacé par un meilleur :

Firefox a un nouvel indicateur de focus pour les liens qui remplace l’ancien contour en pointillé par un contour bleu uni. Ce changement unifie les indicateurs de focus à travers les champs de formulaire et les liens, ce qui facilite l’identification du lien focus, en particulier pour les utilisateurs malvoyants.

Accesskeys, une fonctionnalité d’accessibilité défaillante

Balisage de la langue

Audit et rapports

Les erreurs les plus courantes

Liens d’accessibilité Web non triés

  •  

Creative Commons License Attribution-Partage dans les mêmes conditions
Les ressources d’accessibilité par Christophe Strobbe sont distribuées sous une licence internationale Creative Commons Attribution-ShareAlike 4.0 .

Article publié sur le site : https://cstrobbe.gitlab.io/AccessibilityResources/webaccessibilitytechniques.html

Retourner en haut de la page