Savez-vous que #NVDA ne lit pas bien les chiffres romains ? Dans mon article + sketchnote, je vous explique comment résoudre le souci, pour peu que vous puissiez modifier le #HTML 😉
#CSS #sketchnote #a11y #accessibilite #article #blog #SketchCode
▻https://sketchnote-style.netlify.app/sketchcode/nvda-et-les-chiffres-romains
]]>Pas le temps pour l’accessibilité ?
Faites ce minimum pour dérisquer !
▻http://romy.tetue.net/pas-le-temps-pour-l-accessibilite-faites-ce-minimum-pour-derisquer
▻https://blog.octo.com/accessibilite-faites-ce-minimum-pour-derisquer
Vous aimeriez bien faire des produits web qui soient accessibles à tous vos utilisateurs et utilisatrices, mais vous ne l’avez pas anticipé ou vous n’avez pas le temps ni le budget. C’est souvent le cas lors du développement de prototypes ou de MVP, où il s’agit de n’embarquer que l’essentiel, souvent dans un délai court, afin de faire preuve de concept. Quel objectif d’accessibilité se fixer dans ce cas ?
Vous pouvez décider de « rendre accessible plus tard ». Mais avant de reporter, il convient d’examiner les risques, car ils peuvent être coûteux à plusieurs niveaux, au point de compromettre une mise en accessibilité ultérieure. Prendre le temps de les considérer est d’autant plus intéressant que certaines actions simples peuvent les réduire.
]]>Les racines de l’accessibilité web
▻https://blog.octo.com/les-racines-de-laccessibilite-web
▻http://romy.tetue.net/les-racines-de-l-accessibilite-web
L’accessibilité est une préoccupation ancienne, qui s’enracine dans la volonté de partage et l’ambition d’universalité qui motivent le Web depuis ses débuts. Revenons à la source…
#WebForAll #W3C #WAI #a11y #WCAG #accessibilité #Web #Tim_Berners-Lee #histoire
]]>Accessibilité en agilité : retour d’expérience
▻http://romy.tetue.net/comptoir-octo-accessibilite-en-agilite
▻https://blog.octo.com/le-comptoir-octo-laccessibilite-en-agilite-retour-dexperience-sur-ile-de-
Comment pratiquer l’accessibilité en contexte agile, avec une équipe et un commanditaire peu familiers de l’accessibilité numérique ? Comment l’incorporer au sein de chaque itération, faire progressivement monter développeurs et designers en compétence, impliquer le commanditaire, prioriser les actions, préparer l’audit de conformité, ventiler les correctifs…
Retour d’expérience sur une année de pratique opérationnelle de l’accessibilité en contexte agile, au sein de l’équipe produit qui fabrique le portail des transports en commun d’Île-de-France Mobilités à destination de 11 millions d’usagers — ou comment nous avons gravi les échelons jusqu’à atteindre le seuil honorable « partiellement conforme » du nouveau RGAA 4.
#Web_et_compagnie #méthodologie #transports #accessibilité #agilité #a11y #RGAA #IDFM
▻https://fr2.slideshare.net/OCTOTechnology/le-comptoir-octo-accessibilit-en-agilit-rex-sur-idf-mobilits
▻https://www.twitch.tv/videos/814441502?t=00h09m20s
« Des #émojis accessibles »
"La synthèse vocale de mon téléphone le lit ainsi : « Singe qui se cache les yeux main avec index et majeur croisé teint clair main avec index et majeur croisé teint clair main avec index et majeur croisé teint clair okok bon bah bon courage visage envoyant un baiser visage envoyant un baiser visage envoyant une baiser »."
▻https://blog.hello-bokeh.fr/2020/07/23/des-emoji-accessibles
]]>Illisible carte du déconfinement - romy.tetue.net
▻http://romy.tetue.net/illisible-carte-du-deconfinement
Rouge, vert, orange… En cette période de crise sanitaire, le gouvernement communique sur le déconfinement progressif de chaque département à l’aide d’une carte colorée… malheureusement difficile à comprendre.
« Hier, mon fils de 24 ans, humilié, m’a demandé la couleur de notre département… Le codage des départements en vert, orange et rouge n’a pas été pensé pour les personnes avec daltonisme : 2 500 000 personnes en France, 4 % de la population »
#MapFail #cartographie #geocovid #daltonisme #sémiologie #accessibilité #a11y #RGAA
]]>Paris Web 2019
▻http://romy.tetue.net/paris-web-2019
Les conférences qui m’intéressaient le plus cette année portaient sur l’accessibilité : y’a pas que le RGAA dans la vie…
]]>Quel design system pour le service public ? | OCTO Talks !
▻https://blog.octo.com/quel-design-system-pour-le-service-public
▻http://romy.tetue.net/quel-design-system-pour-le-service-public
Disons-le tout de suite : il n’existe pas de design system pour le service public français. Pas encore. Pas tout à fait. Pour les designers et développeurs qui ont à cœur d’améliorer l’expérience usager, voici un état des lieux, pour mieux s’y retrouver entre documents officiels délaissés, ressources alternatives et initiatives prometteuses, sans oublier de prendre exemple hors de nos frontières. Car le vent tourne. Une révolution s’amorce dans l’histoire du design institutionnel.
]]>Signaler les champs obligatoires
▻http://romy.tetue.net/signaler-les-champs-obligatoires
Comment bien signaler les champs de saisie obligatoire ? Avec l’astérisque conventionnelle, mais attention : c’est moins simple qu’il n’y paraît ! Voyons cela pas à pas… Baliser les champs obligatoires comme tels Cela se fait très simplement avec l’attribut HTML5 dédié, required, qui s’utilise comme suit…
#required #HTML5 #a11yDesign #a11y #formulaires #forms #astérisque #tutoriel
]]>Les fourberies du Dark #UX
►https://framablog.org/2018/08/18/les-fourberies-du-dark-ux
L’expérience utilisateur (abrégée en UX pour les professionnels anglophones) est une notion difficile à définir de façon consensuelle, mais qui vise essentiellement à rendre agréable à l’internaute son parcours sur le #Web dans un objectif le plus souvent commercial, ce … Lire la suite
#Non_classé #a11y #Accessibilite #Amazon #DarkUX #Facebook #Utilisabilité
]]>ANDI Help - How To Use
▻https://www.ssa.gov/accessibility/andi/help/howtouse.html
#accessibilité #a11y #bookmarklet
inclusive-design-checklist: Aims to be the biggest checklist of inclusive design considerations ever
▻https://github.com/Heydon/inclusive-design-checklist
“Aims to be the biggest checklist of inclusive design considerations for the web ever. Includes items for accessibility, performance, device support, interoperability, and language.”
]]>Ressources #rgaa
▻http://gta2017.access42.net/2/ressources
Tableau récapitulatif des ressources RGAA
]]>Cache-cache #css – La vie en #ffoodd
▻http://www.ffoodd.fr/cache-cache-css
#webdev #masquer #hidden #focus #a11y
L’outil en ligne #Asqatasun est un logiciel libre pour commencer rapidement un audit d’accessibilité (#wcag, #rgaa) d’un site web ou d’une webapp.
La démo pour auditer vos pages web
▻https://app.asqatasun.org
Présentation de l’instance de démo
▻https://forum.asqatasun.org/t/la-demo-asqatasun-accessibilite-tester-facilement-vos-sites-web/311
pour contribuer c’est par ici :
▻https://github.com/Asqatasun/Asqatasun
pour l’histoire du projet #Asqatasun, c’est par là :
▻http://asqatasun.org/#asqatasun-history
Contrast-Finder, c’est un outil en ligne pour trouver les bonnes combinaisons de couleurs (entre le texte et l’arrière plan) afin d’avoir un contraste suffisant pour respecter les critères d’accessibilité (#RGAA, #WCAG).
la nouvelle version (par les concepteurs de Contrast Finder),
avec une nouvelle URL :
►https://app.contrast-finder.org/?lang=fr
pour contribuer c’est par ici :
►https://github.com/Asqatasun/Contrast-Finder
pour l’histoire du projet #ContrastFinder, c’est par là :
►https://contrast-finder.org/#contrast-finder-history
#ContrastFinder finds correct #color contrasts for web #accessibility (WCAG) ▻https://app.contrast-finder.org #a11y
]]>Tanaguru Contrast-Finder
▻http://contrast-finder.tanaguru.com/result.html?foreground=%2300C0BD&background=%23FFFFFF&algo
un outil en ligne pour ajuster les combinaisons de couleurs texte/fond afin d’avoir un contraste suffisant pour passer les tests d’accessibilité
]]>Les do-don’t de l’accessibilité - romy.tetue.net
▻http://romy.tetue.net/affiches-do-dont-accessibilite
Cette série d’affiches aide à concevoir pour tou·te·s en expliquant ce qu’il faut faire et ne pas faire (do & don’t) pour chaque type de déficience. Ces conseils simples et compréhensibles, généraux plutôt que trop prescriptifs constituent une excellente entrée en matière. À afficher, sans modération, dans vos locaux !
Des arguments pour l’accessibilité
▻http://nota-bene.org/Des-arguments-pour-l-accessibilite
« nous avons souvent du mal à faire prendre en compte le sujet [de l’accessibilité], et malgré l’idée qu’on ne doit pas faire de chantage affectif à nos interlocuteurs, les faire se retourner sur eux-mêmes est un moyen comme un autre, souvent assez efficace, de leur permettre de comprendre le problème et de se l’approprier en l’abordant sous un autre angle : le leur. »
]]>How Blind People Use YouTube & Twitter on the iPhone
▻https://www.youtube.com/watch?v=c0nvdiRdehw
“Tommy Edison, who has been blind since birth, demonstrates how people who are visually impaired use the iPhone 4S. He shows us how the Accessibility setting on the phone allows him to use the Twitter and You Tube applications.”
]]>#wai-ARIA Authoring Practices 1.1
▻https://www.w3.org/TR/wai-aria-practices-1.1
#aria #accessibilité #a11y #html
Accessibilité bureaucratique
▻http://romy.tetue.net/accessibilite-bureaucratique
▻http://romy.tetue.net/bureaucratic-accessibility
Mais pourquoi reste-t-il si difficile d’avoir des alternatives textuelles aux images ? Encore faudrait-il savoir faire un site web… En matière d’accessibilité, vous avez tous et toutes entendu parler du besoin de fournir une alternative textuelle aux images. C’est très loin d’être suffisant pour rendre un site web accessible, mais c’est l’exemple qui revient toujours à ce sujet. Parce que c’est le plus simple à comprendre et à expliquer. Pour rappel, le premier critère d’accessibilité — depuis des…
]]>Listening to the web, part three: working with screen readers
▻http://simplyaccessible.com/article/listening-web-part-three-working-screen-readers
“people who use screen readers are able to scan through and read the headings of a web page […]. This is a great way to quickly gain an understanding of the content available on the page and whether it’s something of interest and worth returning to.”
]]>eBay MIND Patterns - Accessibility Patterns for the Web
▻http://ianmcburnie.github.io/mindpatterns
“This site contains all working examples for the book eBay MIND Patterns - Accessibility Patterns for the Web.
Each example demonstrates our recommended semantic markup, keyboard interaction design and ARIA roles, states & properties for assistive technology. Each pattern follows a progressive enhancement strategy (where applicable) and aims to conform to WCAG 2.0 Level AA.”
]]>Dos and don’ts on designing for accessibility
▻https://accessibility.blog.gov.uk/2016/09/02/dos-and-donts-on-designing-for-accessibility
“The dos and don’ts of designing for accessibility are general guidelines, best design practices for making our services accessible. Currently, we have six different posters in our series that cater to users from these areas: low vision, deaf and hard of hearing, dyslexia, those with motor disabilities, users on the autistic spectrum and users of screen readers.”
]]>Signer la pétition… où ça ?
▻http://romy.tetue.net/signer-la-petition-ou-ca
C’est un exemple, parmi tant d’autres, des mauvaises habitudes langagières du Web, où abondent les énigmatiques « Lire la suite », « Pour en savoir plus » et autres « Cliquez ici ». Le pire d’entre eux est, comme ici, le lien sur le seul mot « ici ».
]]>Smile - Blog Pourquoi Ebay est-il si moche ?
▻http://blog.smile.fr/Pourquoi-ebay-est-il-si-moche
Ajoutons que la compatibilité est absolument primordiale pour les sites à très large audience. Une compatibilité totale, sans concession. Savez-vous qu’il y a encore des sites de compagnies aériennes où l’on ne peut acheter un billet si on a un Mac ? Quelqu’un a sans doutes déclaré : « mais ce n’est que 2% des internautes, on ne va pas se priver de toutes ces belles choses pour 2% des internautes ! Ils n’ont qu’à changer de navigateur, de machine, de site ». Quand 2% des internautes, c’est 10 000 internautes, on voit les choses différemment.
On sait également que beaucoup d’internautes novices ou peu habiles ont du mal avec les dispositifs trop sophistiqués : un simple menu déroulant, qui demande d’ajuster au millimètre le chemin de la souris car il se refermera au moindre écart, devient un obstacle pour une main qui tremble. Chercher les liens à tâtons dans la page parce qu’ils ne sont pas soulignés est fastidieux. Ces sites ont choisi de niveler par le bas : au moins on est sûr que tout le monde y arrivera.
#a11y
]]>Virez-moi ces CAPTCHA ! - romy.tetue.net
►http://romy.tetue.net/stop-captcha
Un vieux billet, toujours bon à relire :
Inconvénient majeur : le captcha constitue un frein plus important pour les humains que pour les robots. Comment faire mieux ? […] C’est aux responsables du site d’assurer la qualité du service. C’est à eux d’endiguer les spams, et pas à leurs internautes ni d’en faire l’effort, ni d’en pâtir. Il n’y a aucune bonne raison d’imposer ce travail aux internautes contributeurs. Faites votre boulot !
]]>Comment tweeter une infographie accessible ?
▻http://romy.tetue.net/comment-tweeter-une-infographie-accessible
La police nationale vient de tweeter un petit mémo de prévention des risques en montagne l’été. Comme j’adore randonner et que la montagne, ça me gagne, j’en profite pour vérifier que j’ai les bons réflexes. Sauf que… ce mémo est une image miniature où le texte est illisible ! Dites, les gens qui retweetez, réussissez-vous vraiment à y lire quelque chose ? Y’a-t-il une astuce pour voir ce genre d’infographie ? pour agrandir les images tweetées ?
#accessibilité #lisibilité #twitter #infographie #rando #a11y #a11yDesign #transcript
]]>Accessibilité du site du Pas-de-Calais
▻http://romy.tetue.net/accessibilite-du-site-du-pas-de-calais
Le site du département du Pas-de-Calais est exemplaire d’accessibilité web. Il est le résultat de la démarche engagée depuis 2007 par une équipe web motivée, sous la houlette du directeur artistique Bertrand Binois. Soucieux de design pour tous, celui-ci fait coïncider esthétique, fonctionnel, ergonomie et accès à tous et toutes.
Reste que je m’interroge sur ces fonctionnalités, d’autant plus que ce site est cité comme exemple. […] Est-ce vraiment au site de proposer cette variante de police, ici OpenDyslexic, alors que celle-ci est appliquable par les internautes, sur tous les sites (par paramétrage, extension du navigateur ou app mobile) ?
#accessibilité #a11y #RGAA #chti #dyslexie
]]>Accessibilité, c’est quoi le problème ? – Retour sur mon informelle à Paris Web 2014 | Accessiblog.fr
►http://accessiblog.fr/2014/10/accessibilite-cest-quoi-le-probleme-retour-sur-mon-informelle-a-paris-we
Une informelle à Paris-Web proposée par Olivier Nourry. Je n’y étais pas et je suis contente qu’Olivier ait trouvé le temps d’en faire une restitution.
Pas très surprise de me retrouver sur la même longueur d’ondes que Jean-Philippe et Aurélien :
Le second axe englobe la façon dont nous avons tendance à présenter l’accessibilité. Quelque soit la motivation des techniciens, on ne peut agir qu’à la marge des projets s’il n’y a pas adhésion et volonté politique de la part des décideurs, comme l’a rappelé Aurélien Lévy. Les anglo-saxons appellent cela le « management buy-in« . Le fait qu’il n’y ait pas d’équivalent clair dans notre langue est peut-être l’indice d’un problème culturel plus profond… Il a aussi été suggéré que le côté « niche » de l’accessibilité pouvait la desservir : plus difficile de motiver un décideur sur un sujet perçu comme limité (et limitant ?), que sur d’autres, comme le référencement, pour lesquels les arguments sont plus évidents. Jean-Philippe Simonnet a estimé que c’était peut-être une erreur d’envisager l’accessibilité comme un sujet à part. Le fait de l’isoler, dans les devis comme dans les processus, tendrait selon lui à faciliter la possibilité de ne pas la prendre en compte. Idéalement, on ne devrait pas avoir à en parler, et juste le faire, en « noyant » le coût dans le coût global du projet. Tout comme il est implicite qu’un site doit avoir des temps de réaction supportables, il est (ou devrait être) implicite qu’il doit avoir un niveau d’accessibilité minimal.
Je ne comprends pas que les travaux d’évolution du RGAA présentés non seulement comme une mise à jour du référentiel mais également comme une relance volontariste du sujet pour les sites publics n’ait pas été assortie d’une solide enquête en bonne et due forme sur les raisons qui ont conduit certaines (rares) entités à entreprendre la mise en accessibilité de leurs sites et d’autres non.
]]>Comment rendre des présentations accessibles à tous
▻http://www.braillenet.org/accessibilite/wcag20/accessible_fr.html
Tags : #a11y #presentations #powerpoint
]]>Mieux qu’une barre d’édition : des raccourcis
▻http://romy.tetue.net/barre-outils-edition-raccourcis
Les barres d’outils d’édition ne sont pas accessibles. Pire, elles constituent des obstacles pour certain·e·s. Si elles sont utiles à d’autres, elles ne sont pas la meilleure aide qui soit. Elles ne constituent donc pas une aide suffisante, mais secondaire ; l’aide principale doit être autre. Enfin, dans le cas où une barre d’édition est disponible, celle-ci doit être absente par défaut et affichable à la demande. Et chaque fonctionnalité devrait faire l’objet d’un raccourci documenté.
Même s’ils causent certaines difficultés, les raccourcis clavier standards sont davantage utilisables. Mieux encore, les raccourcis de saisie ou syntaxe de rédaction à balisage léger, de type wiki, sont ce qu’il y a de plus utilisable par tous et toutes. Trop peu mis en avant, ces raccourcis sont méconnus. Ils nécessitent d’être expliqués par l’interface, en contexte. Il suffit d’une phrase explicative, avant chaque champ de saisie.
#toolbar #WYSIWYG #raccourcis #syntaxes_légères
#handicap #accessibilité #a11y #ergonomie #UX #clicodrome
Comment symboliser l’accessibilité numérique ?
▻http://romy.tetue.net/symbole-accessibilite-numerique
Confondu avec le handicap moteur, critiqué pour sa passivité, le symbole international d’accessibilité a été conçu pour les lieux physiques. Comment symboliser l’accessibilité numérique ?
]]>Carte des #accidents
]]>L’accessibilité, une question de liberté ? Dialogue avec Richard Stallman - Framablog
▻http://www.framablog.org/index.php/post/2013/08/24/accessibilite-liberte-stallman-altinier
Il ne suffit pas de vouloir ou de faire un effort. Si on ne peut pas marcher, rien n’y fera. De même si vous êtes aveugles, inutile de dire à quelqu’un de faire un effort pour utiliser un logiciel qui n’est pas accessible. Et en poussant le raisonnement, dire à un non informaticien qu’il n’a qu’à développer ce qui l’intéresse s’il n’est pas content ne le dotera pas comme par magie d’un esprit capable de comprendre des algorithmes.
[…]
Vous aurez compris dans mon esprit que accessibilité et liberté font partie du même sujet. Mais si c’est une telle évidence, comment se fait-il que les logiciels libres ne prennent pas davantage en compte cette question ? […] Si un logiciel n’est pas exécutable par une personne handicapée, car non accessible, peut-on toujours considérer que les 4 libertés sont respectées ? Autrement dit, un logiciel est-il vraiment libre s’il n’est pas accessible ?
[…]
Non, il n’est pas juste d’être privé de l’accès à un programme parce qu’on a un handicap. […] la liberté théorique donnée par une licence ne permet pas de rétablir une égalité d’action, et de là les internautes n’ont pas tous la possibilité de partager. […] Me répondre qu’il suffirait de modifier le logiciel libre pour le rendre accessible est seulement une façon de ne pas prendre ses responsabilités. Nous sommes responsables de ce que nous créons et de l’impact que cela peut avoir sur les gens, qu’on en ait ou non conscience. […] Le Libre doit-il concerner la liberté face à l’ordinateur uniquement ou permettre de libérer la personne en lui apportant plus d’autonomie ?
#libre #liberté #liberte0 #LogicielLibre #accessibilité #a11y
]]>Keep the Underline
▻http://www.webaxe.org/keep-the-underline-text-links
“You want an accessible, usable website? Then please don’t remove the underline on text links, particularly in the main content.” Tags: #a11y #webdesign
]]>Actes - 7e Forum Européen de l’Accessibilité Numérique Faire de l’e-accessibilité une compétence professionnelle
▻http://inova.snv.jussieu.fr/evenements/colloques/colloques/article.php?c=78&l=fr&a=428
Ces bonnes pratiques, qui s’appliquent majoritairement au moment de la conception et de l’habillage graphique, garantissent une bonne lisibilité de la page #web et valident les critères Accessiweb précités.
Une présentation de @tetue sur les bonnes pratiques en matière de #typo sur le web. Peut être pratique quand il s’agit de sensibiliser quelqu’un à ce sujet.
WAVE Web Accessibility Tool
►http://wave.webaim.org
Web accessibility evaluation tool
#a11y
]]>