{"id":8555,"date":"2024-05-24T08:11:28","date_gmt":"2024-05-24T06:11:28","guid":{"rendered":"https:\/\/stephaniewalter.design\/fr\/?p=8555"},"modified":"2024-05-24T12:25:00","modified_gmt":"2024-05-24T10:25:00","slug":"theme-sombre-dark-mode-et-mythe-daccessibilite","status":"publish","type":"post","link":"https:\/\/stephaniewalter.design\/fr\/blog\/theme-sombre-dark-mode-et-mythe-daccessibilite\/","title":{"rendered":"Th\u00e8me sombre (dark mode) et mythe d\u2019accessibilit\u00e9\u00a0"},"content":{"rendered":"
Il est temps de parler du th\u00e8me sombre (ou dark mode) et son accessibilit\u00e9 ! Il existe ce mythe selon lequel le th\u00e8me sombre serait \u201cmieux pour l’accessibilit\u00e9\u201d, car il am\u00e9liorerait la lisibilit\u00e9 du texte (entre autres choses). Lorsqu’il s’agit d’accessibilit\u00e9, tout n’est pas blanc ou noir (haha j\u2019assume ce jeu de mot tout nul). Il est difficile de g\u00e9n\u00e9raliser les besoins en termes d\u2019accessibilit\u00e9. La r\u00e9ponse est donc \u201c\u00e7a d\u00e9pend\u201d, ce mode peut am\u00e9liorer l\u2019accessibilit\u00e9 de certaines personnes, et la d\u00e9grader pour d\u2019autres. Et si vous avez l’intention de proposer un th\u00e8me sombre, j’ai s\u00e9lectionn\u00e9 des ressources sur la fa\u00e7on de le rendre plus accessible \u00e0 la fin de cet article.<\/p>\n\n\n\n
Je vous fais le r\u00e9sum\u00e9 rapide des ressources qui sont sous cet article : m\u00eame si le th\u00e8me sombre peut am\u00e9liorer la lisibilit\u00e9 pour certaines utilisatrices et utilisateurs<\/strong>, ce n’est pas le cas pour tout le monde. Il peut \u00e9galement poser des probl\u00e8mes \u00e0 d\u2019autres personnes et rendre les choses plus difficiles \u00e0 lire<\/strong>. C\u2019est le cas, par exemple, pour les astigmates<\/strong>, mais aussi les personnes qui naviguent au clavier (sans souris) lorsque l’indicateur de prise de focus est mal g\u00e9r\u00e9, ou encore, pour les personnes dyslexiques, etc.<\/em> Et juste pour que ce soit clair : je ne nie pas qu’un th\u00e8me sombre est utile pour certaines personnes, mais je ne suis juste pas d’accord avec les articles qui pr\u00e9tendent un peu trop rapidement que le th\u00e8me sombre est mieux pour tout le monde.<\/em><\/p>\n\n\n\n Il ne faut pas, pour autant, arr\u00eater de proposer des th\u00e8mes sombres. Ils peuvent \u00eatre utiles pour certains types de personnes. La solution consiste \u00e0 donner le choix, en proposant, <\/strong>si les deux modes, et laisser choisir les utilisatrices, le mode qui leur convient le mieux.<\/p>\n\n\n\n Autre d\u00e9tail : ne forcez pas le choix du mode en suivant les param\u00e8tres du syst\u00e8me d’exploitatio<\/strong>n. Certaines personnes ont un syst\u00e8me d’exploitation en mode sombre, mais ne sont pas capables de lire du texte clair sur fond sombre quand il est long (spoiler alert <\/span>: moi)<\/em>. Firefox mobile propose une alternative int\u00e9ressante : dans les options, il y a la possibilit\u00e9 de suivre votre syst\u00e8me d’exploitation, mais aussi forcer le th\u00e8me sombre ou fonc\u00e9 pour les sites qui le proposent. Ce param\u00e8tre sera ensuite pass\u00e9 \u00e0 la media-query CSS Enfin, n’oubliez pas que votre th\u00e8me sombre doit \u00e9galement \u00eatre accessible. Voici quelques points \u00e0 ne pas oublier :<\/p>\n\n\n\n Apr\u00e8s avoir publi\u00e9 la premi\u00e8re version de cet article, j’ai eu des discussions int\u00e9ressantes et certaines m’ont demand\u00e9 comment faire, si vous \u00eates astigmate par exemple, et que le site ne propose que le th\u00e8me sombre. Et la m\u00eame question dans l’autre sens : comment faire, si vous avez besoin d’un th\u00e8me sombre (parce que vous \u00eates photosensible par exemple), et que le site ne propose qu’un th\u00e8me clair.<\/p>\n\n\n\n Sur du long texte (article de blog, journal, etc.), ma pr\u00e9f\u00e9rence personnelle est le mode lecteur de Firefox<\/a> : il \u00e9limine les distractions et vous permet de choisir un mode (clair, sombre, sepia, etc.). De toute fa\u00e7on, la plupart du temps, je ne lis m\u00eame pas l’article, je laisse le lecteur d’\u00e9cran de Firefox me le lire \u00e0 haute voix. Safari et Edge (au moins sur mac) offrent la m\u00eame chose. Une autre solution, si vous avez besoin d’un th\u00e8me sombre, est dark reader<\/span><\/a>, une extension pour plusieurs navigateurs qui vous permet de forcer un th\u00e8me sombre sur n’importe quel site.<\/p>\n\n\n Petite note de Julie Moynat, experte accessibilit\u00e9 sur mastodon<\/a> :<\/p>\n\n\n\n \u201c\u00c0 noter qu’il est beaucoup plus facile pour les utilisateurices de changer un site qui ne laisse pas le choix en le passant du mode clair vers le mode sombre que l’inverse car les extensions pour passer au mode clair n’existent pas. Donc si seul le mode sombre existe sur votre site web et que le mode lecture de Firefox n’est pas activable (il est activable sur les articles uniquement et des fois, sur certains articles, \u00e7a ne fonctionne m\u00eame pas), je ferme votre site direct.\u201d<\/p>\n<\/blockquote>\n\n\n\n Enfin, Bramus s’est pench\u00e9 sur l’id\u00e9e que les bascules en th\u00e8me sombre devraient \u00eatre une fonctionnalit\u00e9 des navigateurs<\/a>. Je suis curieuse de voir o\u00f9 cela va nous mener.<\/p>\n\n\n\n Donc, oui, il n’existe pas solution magique qui marche pour tout le monde, et je suis heureuse qu’il y ait des options propos\u00e9es.<\/p>\n\n\n\n Les habitu\u00e9es du blog savent que j’aime donner des ressources aux lectrices et lecteurs pour explorer le sujet. Toutes les ressources qui suivent sont en anglais.<\/p>\n\n\n\n Voici quelques articles plus d\u00e9taill\u00e9s pour vous aider \u00e0 mieux comprendre certains probl\u00e8mes li\u00e9s au th\u00e8me sombre et \u00e0 l’accessibilit\u00e9<\/p>\n\n\n\n En prime, si vous \u00eates curieux de conna\u00eetre l’histoire du th\u00e8me sombre, je vous recommande : Br\u00e8ve histoire du \u00ab\u00a0th\u00e8me sombre\u00a0\u00bb, des \u00e9crans matriciels du d\u00e9but des ann\u00e9es 80 \u00e0 aujourd’hui<\/a> : les \u00e9crans sombres \u00e9taient autrefois une n\u00e9cessit\u00e9 techniques, ils sont aujourd’hui une option d’affichage \u00e9l\u00e9gante. Que s’est-il pass\u00e9 entre-temps ?<\/p>\n\n\n\n Comme expliqu\u00e9 en amont, si vous proposez un th\u00e8me sombre, vous devez \u00e9galement le rendre accessible. Voici quelques ressources pour vous aider :<\/p>\n\n\n\n Voil\u00e0, si jamais vous avez des ressources en fran\u00e7ais, n’h\u00e9sitez pas \u00e0 me les partager.<\/p>\n","protected":false},"excerpt":{"rendered":" M\u00eame si le th\u00e8me sombre (dark mode) peut am\u00e9liorer la lisibilit\u00e9 pour certaines personnes, il peut aggraver la situation pour d’autres (astigmates, les dyslexiques, les utilisatrices au claviers). Proposez les deux modes et laissez le choix \u00e0 l’utilisatrice. Et si vous cr\u00e9ez un th\u00e8me sombre, rendez-le \u00e9galement accessible!<\/p>\n","protected":false},"author":3,"featured_media":8572,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[223],"tags":[],"class_list":["post-8555","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-accessibilite"],"yoast_head":"\nTh\u00e8me sombre ou non ? Laissez le choix \u00e0 vos utilisatrices et utilisateurs !<\/strong><\/h3>\n\n\n\n
prefers-color-scheme<\/code><\/span><\/a>. M\u00eame chose dans Gmail.<\/p>\n\n\n
<\/figure>\n<\/figure>\n<\/div>\n\n\n
Rendez accessibles votre th\u00e8me sombre !<\/strong><\/h3>\n\n\n\n
\n
:visited<\/code> en CSS) de votre th\u00e8me sombre : ils sont violets par d\u00e9faut et leur contraste est faible lorsqu’ils sont utilis\u00e9s sur un fond sombre (merci \u00e0 Sheri Byrne-Haber pour le rappel !).<\/em><\/li>\n<\/ul>\n\n\n\n
Solutions navigateur, si un second th\u00e8me clair \/ fonc\u00e9 n’est pas disponible.<\/strong><\/h3>\n\n\n\n
<\/figure>\n<\/div>\n\n\n
\n
Ressources pour aller plus loin<\/strong><\/h2>\n\n\n\n
Th\u00e8me sombre et accessibilit\u00e9<\/strong><\/h3>\n\n\n\n
\n
Comment cr\u00e9er un th\u00e8me sombre accessible<\/strong><\/h3>\n\n\n\n
\n