Most web browsers have a “reader mode" that strips away non-essential content, providing a simpler text-based presentation. Toggling reader mode typically removes ads, formatting, and other distracting elements, leaving behind the text (and in most cases, images).
Reader mode has several advantages for users: It speeds up page load times, reduces network usage, and provides more control over content. Users can change the text’s font or size, and since reader mode utilizes a simpler presentation, accessibility issues like poor color contrast are eliminated.
And while reader modes are useful for everyone, they’re especially helpful for many people with disabilities. For example:
- People with attention-related disorders can minimize distractions and improve reading comprehension.
- People with vision-related disabilities can enlarge text or switch to a more accessible font.
- People with mobility-related disabilities can eliminate clutter from web pages to avoid unnecessary scrolling and clicking.
We also believe that reader modes can be useful tools for designers and developers. By testing content with reader mode, you may get a new perspective on web elements that are distracting or unnecessary.
Here’s how to enable reader mode on your web browser
Reader modes aren’t available for all websites. To display content in reader mode, web browsers look for certain semantic HTML elements including the <article> HTML tag.
Here’s a quick guide to activating reader modes in four of the most popular web browsers.
Safari Reader View
When Reader View is available, Safari users can select the “Reader" button at the left end of the Smart Search field. After Reader is enabled, users can click the font button (an icon that appears as “aA") to choose a different font, font size, or background color. For more guidance, consult the Safari User Guide.
Firefox Reader View
Firefox also enables Reader View by default. When the feature is available, users can select a document icon in the URL bar. Reader View offers font controls, background options, a simple screen reader, and a “save to pocket" feature that allows for offline reading. For more information, read the Mozilla support page for Firefox Reader View.
Google Chrome Reader Mode
Google Chrome is the only browser without a standard reader mode. However, power users can enable reader mode on Chrome by visiting chrome://flags enabling the feature under “experiments.” HowToGeek provides a detailed guide for enabling reader mode on Chrome.
Microsoft Edge Immersive Reader
Microsoft’s Immersive Reader can be activated by selecting the “Enter Immersive Reader" icon in the address bar or by pressing the keyboard shortcut F9. Immersive Reader also includes Read Aloud, a basic screen reader.
When Immersive Reader is activated, users can change the text size, text spacing, font, and background. Read more on the Microsoft Edge Immersive Reader support page.
When viewing content with reader mode, pay attention to the details
If your website contains appropriate semantic HTML markup — including the <article> HTML tag — you may be able to view it in reader mode. This can be a helpful exercise for evaluating blogs and other content with a large amount of text.
Some questions to keep in mind when viewing your content in reader mode:
- How does the content presentation change? Does everything still make sense?
- Can you still interact with the site normally and access important controls (for instance, web forms)?
- Do your subheadings provide clear descriptions of each section of content?
- Does your content seem more understandable or less confusing in reader mode? If so, why?
If your website “breaks" within reader mode, you’ll need to examine your markup to find problems with semantic HTML and CSS implementation. For detailed guidance, we recommend reading developer Mandy Michael’s article on Medium: Building websites for Safari Reader Mode and other reading apps.
Reader modes can be helpful for checking semantic markup
Ultimately, your website should be accessible for as many users as possible, regardless of their browsing habits or the technologies they use to access your content. Checking your website in reader mode can help you find improper markup and find ways to optimize your content by cutting out clutter.
However, accessing your site in reader mode isn’t a comprehensive accessibility test — to build content that works for everyone, you’ll need to follow the best practices outlined in the Web Content Accessibility Guidelines (WCAG). Download our Ultimate Guide to Web Accessibility to learn more.
