Reading/Web/Accessibility for reading/Updates
May 2024: User testing results, beta feature usage data, and the first version of dark mode now available
User testing results
We have performed usability testing on the Appearance menu. You can see the full results here. In short: in the Appearance menu (previously: Theme menu), the typography, width, and dark mode options are placed. The goal of the testing was to determine whether the menu is easy to use, and whether the names of the different settings are intuitive to most users. From this testing we learned:
- No significant usability issues were found.
- Users generally preferred to refer to a "dark" color scheme or "night" color scheme. As a result, we have changed the name of the feature back to "dark" color scheme or dark mode for short.
- It was difficult for users to find the menu icon once collapsed. As a result, we have added a notice that informs users of where the menu has been collapsed to.
Beta feature usage data
We have been tracking the usage of the new menu as a beta feature. You can see the full results here. In short, we learned that "standard" was the most popular option to select. We also saw:
- About 55% of clicks to the new menu were for a font size that was larger than the default (either standard or large font sizes)
- The majority of the clicks, 46.7%, were for the "standard" font size.
Dark mode is now available
Dark mode is now available to logged-in users on the mobile site (Minerva skin only)! To access this feature, you must be opted into advanced mode for mobile. Then, you can select "dark" from the list of color options. (Note: "automatic" will follow the preference of your device.) See the more detailed message about this change, and go to the FAQ page to see more information about the basics of this project.
April 2024: Early access to the dark mode (mobile web, logged-in)
Hi everyone, as announced in November, the Web team at the Wikimedia Foundation is working on dark (sometimes also called night) mode. Now, we have released the feature for logged-in users of advanced mobile mode across all wikis for testing purposes. But don't worry, the new feature is not disruptive! (See the "known limitations" section below.) It's just important for us to work together with you before we release this feature to a wider audience. Our goals for the early rollout are to:
- Show what we've built very early. The earlier you are involved, the more your voices will be reflected in the final version
- Get your help with flagging bugs, issues, and requests
- Work with technical editors to adjust various templates and gadgets to the dark mode
Go to the project page and the FAQ page to see more information about the basics of this project.
Known limitations of the initial release
- Currently, dark mode is only available on mobile, for logged-in users who have opted into advanced mode, as an opt-in feature.
- Gadgets may initially not work well with dark mode and may have to be updated.
- Our first goal is making dark mode work on articles. Special pages, talk pages, and other namespaces have not been updated to work in dark mode yet. We have temporarily disabled dark mode on some of these pages.
What we would like you to do (the broad community)
If you have questions - ask us! Also, where appropriate, consider linking to the Recommendations for dark mode compatibility on Wikimedia wikis on pages explaining how to define colors in code. Soon, this page will be marked for translation. We would like to emphasize that the recommendations may evolve. For this reason, we are not suggesting to create your local wiki copies of recommendations. At some point, the copy could become different from the original version.
What we would like you to do (template editors, interface admins, technical editors)
When most bugs are solved, we'll be able to make the dark mode available for readers on both desktop and mobile. To make this happen, we need to work together with you on reporting and solving the problems.
- To turn it on, use the mobile website and go to the settings part of your menu and opt into advanced mode, if you haven't already. Then, set the color to dark. (Later, we will be allowing the device preferences to set dark mode automatically).
- Next, go to different articles and look for issues:
- If you have noticed an issue with a template but do not know how to fix it
- Go to the recommendations page and find a relevant example
- If no relevant example is available or you're not sure of the fix, contact us
- If you want to debug many templates in dark mode
- Go to https://night-mode-checker.wmcloud.org/ and identify templates that need to be fixed. The tool flags the top 100 most read articles.
- Go to the recommendations page and find a relevant example
- If no relevant example is available or you're not sure of the fix, contact us
- If you want to identify problems beyond the top 100 articles.
- Install the WCAG color contrast browser extension (Chrome, Firefox) and visit some articles. Use it to identify problems
- Go to the recommendations page and find relevant examples
- If no relevant example is available or you're not sure of the fix, contact us
- If you have a bug report for dark mode that is not related to templates
- Take a screenshot of what you are observing.
- Contact us. If possible, please write down your browser version and operating system version.
- If you have noticed an issue with a template but do not know how to fix it
Thank you. We're looking forward to your opinions and comments!
December 2023: A new beta feature: Accessibility for Reading (Vector 2022)
The Web team from the Wikimedia Foundation launched a new beta feature. The goal is to make reading on desktop more comfortable. The feature is only available to logged-in editors using the Vector 2022 skin. To try it out, go to the "beta" option in the user menu and select "Accessibility for Reading (Vector 2022)". You may also enable it on all wikis using the global preferences.
In the new menu, there are three text settings – small, standard, and large. Small is the current default. Large is for users who need additional increase in size. The standard setting may later become the new default. This was recommended by both the literature research and prototype testing. To this menu, we have also added the page width setting. Before, it was available in the bottom corner of the screen. Now, it's easier to find. The menu is pin-able in a similar way to the Tools and Main menus, both placed in the side columns of the desktop interface. When it's not pinned, it's displayed next to the user name.
About the above mentioned prototype testing: in October and November, we shared a prototype with 13 Wikipedia language communities. It allowed editors to experiment with different text settings, and report which configuration was most comfortable for them. We received feedback from 632 users. They were interested in changes and preferred options that fit within three size categories – small, medium, and large. You may learn more about the testing here.
We welcome you all to try the new menu. We will collect your ideas and comments to make this feature better. Please, if you have the time, check it out and give us your thoughts!
November 2023: Prototype testing results and next steps
In October and November, we shared a prototype with 13 Wikipedia language communities and received feedback from more than 600 editors and other logged-in users. The prototype allowed them to experiment with different font sizes, line height, and paragraph spacing, and report which configuration was most comfortable for them.
The majority preferred a slightly larger font size and line height than the current default (around 15 – 17px). A large group showed a strong preference for the current default (14 px), while a smaller group preferred significantly larger font sizes (20–24px). See the full results of the testing.
We learned that editors who decided to take part in the test are interested in changes. We hope that small, medium, and large options to choose between will be received positively.
In the first half of December, on all wikis, we will launch a new beta feature which allows to select the preferred typography. The feature will be opt-in and available in your user preferences. Turning it on will display a new collapsible menu in the right sidebar, which will appear under the Tools menu.
We invite you to look out for it, try it out when it becomes available, and tell us what you think. In the meantime, if you have time – read over the report linked above and take a look at the mock.
October 2023: Dark mode and a prototype for readability improvements
Introduction to a new project
As the Wikimedia Foundation Web team, we are beginning a project called Accessibility for reading. The goal is to make the wikis more accessible and comfortable for reading. We are starting with the font size and typography for articles. In the next phase, we will focus on color palette customizations, such as dark mode. All these will be available for both logged-in and logged-out users as settings, on both desktop and mobile web.
This project is a consequence of the many requests from volunteers. We would like to thank everyone who has asked about this. On the technical side, dark mode is easier than the font size, but it will need more involvement from the communities. This is why we are asking you to follow our project. Watch the project page and subscribe to our newsletter.
Test out our prototype
Now, we would like to make articles easier to read and scan for casual readers. We aim for:
- Making the default font size bigger (but not too big) to improve readability
- Increasing the information density to improve scanning
- Increasing the space between paragraphs and sections to improve scanning
- Allowing readers (including logged-out users!) to customize the density of text
This will apply to articles in the reading mode and in VisualEditor, but not in the wikitext editor. We are planning these changes to apply across all the wikis. The default may vary based on the language or script of the project.
We have prepared a prototype that allows for various changes in the font size and spacing. To use the prototype, force a banner to appear and click on it. Next, try out different combinations and share what works for you. This prototype is not a reflection of the final design. Instead, we would like to learn what font sizes Wikimedians want to see across languages. We will use this data to determine the proposed default and options. Read more about the test.