Sign in

Accessibility Rant: Reader Mode

17 ▲
Unattributed
69 days ago · Tech · hide · 9 comments

Wolf looking directly into a camera at close proximity. There is a bit of an issue I have noticed lately: websites actively blocking Reading Mode in Firefox, and derivative web browsers. I was stunned to find out (just a minute ago) that Reading Mode doesn't appear to be a default feature in Chromium, but instead an add-on. So, I don't know if this is an issue for Chrome based browsers. This is getting frustratingly annoying for me. Why? There are multiple reasons that Reading Mode is a necessity for many people, myself included. Let's talk about a few of them. Poor Contrast Color Schemes This is a problem I see a lot with websites, it seems to be a trendy or fashionable aesthetic… Have a light gray background so it's not completely white, then have a “dark” gray for the text. In most cases probably not too bad, but for some people that's not enough contrast. My personal issue seems to be with blue versions of themes with this style. I understand quite a few people like pastel colored…

Log in to reply on the Fediverse. Comments will appear here.

  • Dan Q @dan@m.danq.me 69 days ago

    @unattributed I didn't even know it was POSSIBLE to block reader mode. I'm sure a semantically ill-designed website would stop it working (if it can't detect what the "main" content is), but blocking it entirely?

    Have you got a specific example of a site that does this? I'd love to work out how/why they're doing so (and see if a countermeasure can be made!).

    reply
    • unattributed 𓂃✍︎ @unattributed@gotosocial.social 68 days ago

      @dan @unattributed

      Hi Dan — I wish I had saved the examples of it happening in the wild. I jotted down the idea for this article a couple of weeks back after it happened to me two or three times in the course of a couple of days.

      I cut the part of the essay where I speculated about the cause of Reader Mode being disabled. Years ago there was a spat of websites that started including JavaScript in their pages that disabled the ability to highlight and copy the text of the web page. (They thought this was an anti-piracy move.)

      I'm not certain that Reader Mode is being blocked by this code, however I think the logic is similar… In some cases Reader Mode has been used to get around paywalled websites. So, in order to preserve their paywalls, some sites started including code that disabled Reader Mode. And from there, this code seems to have proliferated out to the wild.

      reply
    • unattributed 𓂃✍︎ @unattributed@gotosocial.social 68 days ago

      @dan @unattributed Oh the irony -- Bubbles has reader mode disabled. Although it kind of makes sense, IMO… But it does serve as an example of a website where it is disabled. How / why I'm not certain.

      reply
      • Dan Q @dan@m.danq.me 65 days ago

        @unattributed@gotosocial.social @unattributed@hub.vocalcat.com Ah! I can explain it then. It's not that Reader Mode is being disabled by the website... at least, not deliberately, or not usually. It's that the signifiers that Firefox looks for to work out which bits should be shown in reader mode... aren't there.

        Go to the comments page of a Bubbles article... and Reader Mode is available. But on the main list page it's not. See?

        The reason is: the comments page contains a single HTML <article> block. Firefox detects this and thinks "hey, THIS bit of the page is the important bit for Reader Mode; I'll make it available there".

        But the main list page doesn't have one... because: it isn't an article! It's a list of links to articles! That's not what Reader Mode is designed for, so it doesn't activate.

        (Firefox, I THINK, has a couple of other ways to detect which bit should be made available to Reader Mode, but they're not so bulletproof as "look for the bit that says it's an article")

        Now if you're on a page that's been written in a non-semantic way (there's a bad practice in web development these days to just wrap everything in a ton of <div>s and say "screw accessibility")... then yeah, Firefox won't know which bit to make available via Reader Mode. But that's not necessarily a deliberate action by the developers to prevent Reader Mode... it's probably just a general lack of understanding about the importance of Web semantics.

        But, and here's the magic bit: you can FORCE Firefox to attempt to use Reader Mode even on a page that doesn't support it.

        Put about:reader?url= before the (full) URL. E.g. about:reader?url=https://bubbles.town. This forces Firefox to attempt to use the various fallback ways to find the article. Note this DOESN'T work on Bubbles, but MIGHT work on some sites. Good luck!

        reply
        • unattributed 𓂃✍︎ @unattributed@gotosocial.social 65 days ago

          @dan @unattributed

          Bubbles was just an ironic example… But the sites that got me fuming about it weren't Bubbles… I actually figured Bubbles was a bad example because it's not really meant to be “read” per se.

          Your point about using a bunch of div's in a non-semantic way makes a lot of sense. And, I would argue that doing things in a non-semantic way is more likely deliberate than not. I'm hard-pressed to think how someone could come up with a way of doing this given modern templates and content management systems that even static site generators use. (Remember, I was ranting not just about handwritten HTML sites, but other professional looking sites.)

          I'll keep the trick in mind, but honestly, people just need to fix their sites. :)

          reply
  • rainer_perl @rainer_perl@mastodon.social 68 days ago

    @unattributed Interesting rant, especially the reader-mode blocking. I've been building an app that turns RSS/articles into short audio summaries — for triaging what's worth opening, not a full read-aloud replacement. Haven't specifically optimized the UI for accessibility, so if the premise is useful, I'd welcome any tips. Backstory: https://medium.com/@rainer.perl/there-are-many-ways-to-consume-news-this-is-mine-380fa42ac89c

    reply