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:
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.
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.
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 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 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’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.
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:
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.
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.