vocab.design

accessibility

Reader mode

also called reader view (community), Immersive Reader (community), reading mode (community), distraction free reading (community)

A browser view that throws away your layout and rebuilds the article as plain text the reader can restyle, which is a verdict on how readable the original was.

Reader mode is the browser deciding it can do a better job of your article than you did. Safari, Firefox, Edge and Chrome all ship a version of it, and the mechanic is the same in each: a heuristic scores the elements on the page for content density, guesses which subtree is the article, extracts the title, byline and body, and re-renders that alone into a single measured column. Firefox’s version is open source as mozilla/readability, which is worth reading if you have ever wondered why one of your pages offers the button and another does not. What disappears is everything the scorer decided was furniture: the promo bar, the ad rail, the share row, the related links, the newsletter box.

The part that matters for design is that this is a reader-side override. You cannot request it, you cannot style what comes out, and you cannot opt a page out of it in any way the user cannot undo. Once the reader is in there they set the type size, the measure, the typeface and the background, and every one of those choices outranks yours. That makes reader mode the same shape of thing as dynamic type and a text spacing override: a control the person reading holds and the person designing does not.

It also makes it a free audit. Reader mode is built on the document structure rather than on the appearance, so what it gets right or wrong is a readout of your markup. A heading that was styled rather than marked up does not survive it. Images without alt text come through as nothing at all. A body split across sibling containers comes out with half of itself missing, and a page whose reading order only works because of CSS placement comes out in the order it was actually written in. Open your own article in reader view before shipping it: whatever is missing there is missing from the accessibility tree too, and everything downstream of that tree inherits the same hole.

There is a family resemblance worth naming, because designers reach for one when they mean another. E-ink aesthetic is a style that borrows the look of a reading device, and brutalist web design is a stance that leaves the browser defaults showing on purpose. Both are authored. Reader mode is neither authored nor a style: it is the reader taking the page away from you and getting a legible one back, which is worth remembering as a benchmark. If a meaningful share of your visitors reach for it on your article pages, they have told you something specific about the article pages.

Which word?

If you wantsay
checking what survives when the design is strippedreader mode
the copy is correct but nobody can act on itplain language
long prose has to be readable line by lineline focus

Related

See also: Semantic HTML · Measure

Sources