Jump to content

Reading/Web/Accessibility for reading

From mediawiki.org

The interface of Wikimedia projects must be accessible and readable, regardless of language or script. This includes both the majority as well as individuals with specific needs. The current typography on desktop and mobile makes readability difficult, though. Also, night mode can be helpful in low-light settings and for users who prefer low-contrast reading environments. Our interfaces do not provide this functionality now.

We would like to change the default typography. We will also build additional settings for typography and night mode as preferences. These changes will be available for both logged-in and logged-out users.

Project overview

[edit]

As part of the 23/24 annual plan, the Web team's goal is to bring appearance settings for all users and change the default typography of all wikis. The default font size and text line height for all users across wikis will increase. This increase will improve readability for the majority of users. The team plans to make this deployment alongside the deployment of a new appearance menu which allows controls for page width, typography, and the upcoming dark mode – meaning that users will easily be able to adjust the font size back to the previous default.

The team plans to initiate discussions across all wikis, focusing on debugging current features and generating ideas for future enhancements. Then, the team will proceed with deployments, bringing the appearance menu to all users and the new typography defaults to logged-in users only. The deployment will be conducted in two steps, initially targeting a small set of wikis for testing before implementing changes across all wikis.

The decision to modify default typography is informed by research findings and accessibility recommendations. Currently, the WCAG recommendations for font size start with a minimum of 16 pixels and a AAA recommendation of 18 pixels for easy reading. Our current default is 14 pixels. This makes it more difficult to read (when compared to similar sites for long-form reading that are following these guidelines). On the other hand, we are aware that scannability (being able to scan and quickly find specific information within the page) is important for Wikipedia and that we should limit changes in text density when setting a new font size. The planned default font size is 16 pixels. This is based on:

  1. Readability research, academic studies, and market research: these sources indicated that generally bigger is better in terms of font size.
    1. Most long-form reading websites (such as news websites or social media) opt for somewhere between 16 and 18 pixels. In the two studies that specifically focused on increasing the font size of Wikipedia, researchers determined that increasing size improves comprehension.
    2. Our own research has shown that most reading sessions are 20–30 seconds long. This isn't enough to digest and change a type setting. This option gives the readability benefits of the new default to the most people possible with the least amount of user effort.
  2. Accessibility recommendations
  3. Community-proposed designs: 632 logged-in users from 13 Wikipedias submitted designs with typography settings that they considered as comfortable for them. While many designs focused on keeping the default the same, the majority of designs chose a larger font size.

Updates

[edit]

June 2024: Typography and dark mode deployments, new global preferences

[edit]

Earlier this month: Appearance menu available for everyone and typography changes for logged-out users

In early June, we increased the default font size for logged-out users in Vector 2022. Learn more about this deployment. In a few months, we will study how many logged-in users switch to standard and start a conversation on whether it makes sense for logged-in users to make the switch as well.

Global preferences for the Appearance menu

It is now possible to select a preference for the text size, page width, and color applying to all wikis. To do that, go to your global preferences. Thank you all for questions and patience!

Dark mode coming out of beta!

  • Dark mode will soon be available for logged-in users on all Wikipedias, and for logged-out users on select Wikipedias. This will apply to the mobile web version first, and then desktop. The default will remain as "light mode", and we will ask users to opt into dark or automatic mode.
  • The audience that will receive dark mode will vary based on the wiki:
    • Tier 1 and 2 Wikipedias: wikis where the number of issues in dark mode when compared to light mode is not significant. These wikis will receive dark mode for both logged-in and logged-out users. Some small issues might still exist within templates, though. We will be adding ways to report these issues so that we can continue fixing templates together with editors.
    • Tier 3 Wikipedias: wikis where the number of issues in dark mode when compared to light mode is significant. These wikis will only receive dark mode for logged-in users. We would like to make dark mode available to all users. However, some wikis still require work from communities to adapt templates. Similar to the group above, these wikis will also receive a link for reporting issues that will help identify remaining issues.
  • Currently, we are aiming for the following dates for deployment:
    • Week of July 1: mobile website (Minerva skin) on the Tier 1 Wikipedias
    • Week of July 15:
      • desktop website (Vector 2022 skin) on all Wikipedias
      • mobile website: logged-in and logged-out on the Tier 2 Wikipedias, logged-in only on the Tier 3 Wikipedias

Work on dark mode continues

Next, we will turn dark mode on automatically based on the device preference. We also want to make dark mode available to logged-out users on all wikis. To do that, we continue to need your help updating templates and colors to be accessible in dark mode. As before, we encourage everyone to work on and report any issues with dark mode. Please see our FAQ and previous messages for details on how to help. Reach out to us if you have any questions!

Background

[edit]

Why it is important to work on this

[edit]

Over the past few years, we have introduced the Vector 2022 skin across many wikis. We have designed it to improve the reading experience. Another goal was to provide an experience that is comfortable for existing users and more welcoming to new users. However, there are still issues with readability we have yet to address. During the research for that project, one of the issues we recognized was the size of the text itself.

Compared to the more accessible digital text, it takes longer to read our content on desktop and mobile. The ability to remember text that was read is also affected. An important factor to keep in mind is that people engage both in in-depth reading and skimming of text.[1] We would like to improve our typography for both of these ways of using the projects.

Also, our desktop site does not allow to set a font size that is comfortable for the user. Instead, readers with specific needs and likings depend on browser functionality to alter the font size. These capabilities vary by browser and are not always supported by the rest of our user interface. This causes issues with tools or navigation.

Annual plan context

[edit]
Quotation from the Foundation's 2023/2024 annual plan 

Ensure a quality reading experience for all users by adapting the default experience for 15% of page views, based on the individual needs and constraints of the user.

This key result is focused on allowing the opportunity for our interface to adapt to individual needs when necessary. The theory here is that people will feel more engaged with a website and interface that can adapt based on their needs. This can include work such as dark mode, text and page density, and font size customizations. Some of this adaptation can be done automatically by the interface – for example, creating responsive versions of a feature or tool, or ensuring that dark mode turns on based on the browser or device settings of the user. In other cases, this adaptation can be done through intentional customization – allowing users to select non-default states in specific (but limited) cases. From an accessibility perspective, it will focus on the features that need to be built as standalone to allow for more accessibility, or to allow for setting defaults that are more accessibility friendly, while leaving the opportunity for customization to users who have different preferences. To set the specific number "15%", we looked at how users adapt the default experience in the Wikipedia iOS app. 59% of users of the app are using a non-default theme (dark, black, or sepia).

We used this number as a baseline, but factored in our assumption that it is more likely that habitual users of Wikipedia on the web take the time to adapt their reading experience, as opposed to sporadic users.


Goals

[edit]

Typography improvements

[edit]

The goals of this project are:

  1. To identify and better understand problems. Review and classify issues with the current typography on wikis
  2. To make the site easier to read. Improve readability on mobile and desktop sites
  3. To provide typography that better suits different languages and scripts. Optimize readability with the support and expertise of the different communities
  4. To allow readers to customize typography. Introducing typographical preferences, useful mostly for people with distinct needs and likings

Night mode

[edit]
  1. Improving the readability of articles in low-light settings
  2. Making night mode options and settings easily discoverable and usable

Timeline and phases

[edit]

Typography improvements

[edit]
Phase Timeframe Description
Research and literature review July– We learned what researchers say about typography for desktop and mobile
Prototype testing + discussing with communities October– Most editors taking part in the previous testing were open to a font size increase. They came from different communities.
Beta feature deployment December 2023 We released the typography improvements as a beta feature to all wikis and encouraged communities to try it out and give us their feedback
Release to pilot wikis Iteration based on testing results in collaboration with testing communities
Discussions with communities April/ Announcing the upcoming change and answering questions. This will take 2-3 weeks
Release to all wikis May/
  1. Deploy the menu to all logged-out and logged-in users as open by default (all users will be able to immediately collapse the menu) to a small set of wikis
  2. One week later, deploy the menu to all logged-out and logged-in users as open by default (all users will be able to immediately collapse the menu) to all wikis
  3. Change the default typography for logged-out users only
  4. Measure usage of appearance menu across logged-in users and gather additional data

Night mode

[edit]
Phase Timeframe Description
Technical review September– We reviewed ideas for implementation of night mode and decided what implementation we want to use. We reviewed the dark mode gadget, night mode on the apps, etc.
Discussing with communities We started working with technical editors to adjust the community-controlled code (like templates) so that night mode works well.
Pilot release March– The first version is only available for logged-in users. On mobile, it's only available in the advanced mode. On desktop, it will be a "beta feature".
Release for all users Not defined When community-controlled code is adjusted, night mode will be available for logged-out users.

Get involved and Contact

[edit]

Project evaluation

[edit]

We will measure the success of this project with qualitative and quantitative methods. In particular, we will be looking at:

  • Research-supported decisions in prototype creation and development
  • Qualitative improvements in readability based on user testing and community conversations
  • At least X% of all sessions longer than Ys who customize typography
    • Note: exact variables TBD
  • At least X% of all sessions use night mode
  • No significant change in reading depth

References

[edit]