In accessiblity settings in Firefox Android, there is a setting called “Zoom on all websites” that supposedly enables “pinch and zoom, even on websites that prevent this gesture.”

On paper, this sounds good; however, in practice there exist a number of web sites (e.g., https://abcnews.go.com/) that still manage to sabotage pinch and zoom, making them impossible for certain people, myself included, to read the content on the site.

First of all, why would they want to do this? It seems like an empty spiteful gesture that profits them in no way and, if anything, prevents people from using their site.

Second, and more importantly, how do they manage to sabotage the effectiveness of this setting, and is there a way around it? A setting in about:config, perhaps?

I did report it on webcompat, but it was closed as not a webcompat issue, since the site also prevents pinch and zoom on other browsers.

Also, this seems like an ADA violation, since they are deliberately restricting accessibility options, but I’m not educated enough in ADA to really know if this is true or not.

It just seems like a really dogshit thing to do.

Edit: I noticed pinch to zoom works in reader mode, once I click into an article.

  • Kevin@programming.devEnglish
    27·
    1 year ago

    I remember facing this once on a site, so i peeked at the source. Turns out they have an event handler for the pinch gesture, preventing the browser from doing its usual zoom

    • LinkOpensChest.wav@lemmy.oneOP
      5·
      1 year ago

      Thank you for this important information! I have emailed ABC and referenced this event handler, trying to persuade them to make their site accessible. It will probably go nowhere, but I also asked for advice on webcompat, and that is where they sent me.

      Thanks again!

        • LinkOpensChest.wav@lemmy.oneOP
          4·
          1 year ago

          I am a US citizen. I have emailed the web site about the problem, but I will do this as well. I’m not very educated about what constitutes non-compliance with ADA, but it’s worth asking them to look into. Many thanks!

          • Isho'ye@mastodon.social
            6·
            1 year ago

            @LinkOpensChest_wav You’re very welcome! I don’t know the full laws, but feel that actively sabotaging a browser setting explicitly labelled as an accessibility feature should count as some kind of violation. Submitted my own complaint.

            Though, as ABC News is owned by Disney, are we at all surprised of their Mickey Mouse operation over there?

            • LinkOpensChest.wav@lemmy.oneOP
              4·
              1 year ago

              News sites consistently provide one of the worst user experiences on the web, so I shouldn’t be surprised! I submitted my complaint as well. Hopefully it will go somewhere.

  • fiat_lux@kbin.social
    19·
    1 year ago

    First of all, why would they want to do this? It seems like an empty spiteful gesture that profits them in no way and, if anything, prevents people from using their site.

    It is unfortunately a very old legacy workaround for CSS scaling problems in some browser device combinations. It has historically been difficult to convince stakeholders they’re actively hurting their user base. Thankfully, the law in many places is catching up.

    Here is what you likely want to remove, if you know how to edit the HTML: ``

    Old explanation: CSS Tricks

    Edit: if you encounter this though, odds are the rest of the site will be pretty hostile to your needs as well though.

    • LinkOpensChest.wav@lemmy.oneOP
      1·
      1 year ago

      Oh by the way, I wish I could edit HTML. It’s one thing I’d like to learn just for personal use. I just need to set aside time to learn it, which is hard with my work schedule.

      • fiat_lux@kbin.social
        7·
        1 year ago

        Luckily for you, html does not need to be compiled and your built-in browser inspector is all you need to start messing with any webpage. Deleting a single line and setting what happens is a great way to start too.

        I see you’re a Firefox user, if you go to your shitty URL on desktop, right click somewhere on the page and select “Inspect Element”, a new window/docked window will pop up. (Or open the Inspector using a different method. This is the HTML and CSS page viewer and editor. One pane will have your highlighted/inspected element HTML. Ignore the element you highlighted, and scroll up to the big chunk of tags near the top of the HTML document - that's where you'll likely find the source of your pain, somewhere between the opening and closing tag. There should be a search box nearby in the UI you can use to do that. When you find the tag you want to change, right click on it (or otherwise open the context menu) choose Delete Node, and see if that has improved your zoom experience.

        Mobile is a bit trickier but it can still be done in Firefox… I think.

        Anything you edit won’t survive a page refresh or navigation to a new page though. Which is good, because you can’t actually ruin anything and can mess around deleting things on whatever page you want to your heart’s content.

        It’s not the only technique used to stop zooming, sadly, so no guarantees. But it is a common technique that’s very easy to work around in a few seconds, and can lead to hours of fun. And strangely, entire careers.

        • LinkOpensChest.wav@lemmy.oneOP
          1·
          1 year ago

          Nice, thanks. I’m definitely going to be playing around with this!

          I learned from a search that you can view the source on Firefox Android by adding view-source: before a URL, but I don’t seem to be able to edit it on mobile.

          • fiat_lux@kbin.social
            2·
            1 year ago

            Yeah that one will only let you look, you need the Inspector tools secret magic to make viewable changes on the fly.

            • LinkOpensChest.wav@lemmy.oneOP
              1·
              1 year ago

              Aw, that’s a bummer. It looks like the only way to do it is to connect it to a desktop PC for debugging.

              There’s this, but I’d have to create a custom collection since it’s not a recommended add-on, which is a pain. I’ve heard they’re planning to allow us more freedom in which add-ons we use in the near future, so that will be nice.

              I’m still going to start playing around in Firefox on WIndows and Linux though, so thanks for that.

              • fiat_lux@kbin.social
                2·
                1 year ago

                Huh, thankyou for introducing me to Eruda, this is a nice looking tool. I wouldn’t install it as a plugin just for this, but luckily you don’t need to. Do not use this tool on any page where you’re entering information or viewing private info though, these are dangerous powertools and allowing plugins to do arbitrary JS evaluation is like not using a safety guard.

                This should work though:

                1. Make a new bookmark on mobile Firefox
                2. Paste as the location: javascript:(function () { var script = document.createElement('script'); script.src="https://cdn.jsdelivr.net/npm/eruda"; document.body.append(script); script.onload = function () { eruda.init(); } })();

                This loads Eruda scoped to that tab only from their CDN, which hopefully limits possible damage it can do.

                Here is what you need Eruda to do: const naughtyMetaTag = document.head.querySelectorAll('meta[name="viewport"]'); !!naughtyMetaTag ?? naughtyMetaTag[0].setAttribute('content', '');

                It will fail silently if it doesn’t find the tag with the name viewport, otherwise it will empty the contents of it and you’ll be able to zoom.

                The much safer alternative is to use Android’s built in accessibility zoom functionality for this specific task though, to be honest.

                Edit: on second thought, we can avoid Eruda altogether for this task. I haven’t tested this at all but try bookmarking this instead javascript:(function () { const naughtyMetaTag = document.head.querySelectorAll('meta[name="viewport"]'); !!naughtyMetaTag ?? naughtyMetaTag[0].setAttribute('content', ''); })(); and visiting it when on a bad page. Much safer and worth trying first.

    • LinkOpensChest.wav@lemmy.oneOP
      1·
      1 year ago

      if you encounter this though, odds are the rest of the site will be pretty hostile to your needs as well though.

      That’s a good point. There are better news sites that don’t do this, and they should get my traffic.

  • exohuman@programming.dev
    17·
    1 year ago

    Honestly, most web articles are only worth reading in reader mode. It seems like that is the only setting that respects your phone’s brightness settings (dark or light) and font size.

    • LinkOpensChest.wav@lemmy.oneOP
      5·
      1 year ago

      I love reader mode. I wish it were available on all web sites. Even on the example I linked, it works within the individual articles, but not on the home page.

      I don’t really understand how reader mode works. Maybe there’s a reason for this, but a “reader mode on all pages” setting would be nice. Even if it introduced some bugs, I think it would still be worth it.

  • AnonymousLlama@kbin.social
    7·
    1 year ago

    I still occasionally run across the odd dodgy website that tried to disable zooming (along with other oddities like trying to disable right clicking on desktop) and it feels honestly that most of these annoyances come about because some asshole in the company (the CEO, lead designer, marketer, whatever) sees any changes to their websites from the user as “ruining the experience”, disregarding the whole concept of accessibility in the modern web

  • Knusper@feddit.de
    61·
    1 year ago

    They have this in their webpage header:

    meta name=“viewport” content=“initial-scale=1.0, maximum-scale=1.0, user-scalable=no”

    Not sure, if the Firefox toggle ignores all of that. They might have further non-sense preventing zoom.

    In principle, zooming is kind of tricky for web designers.

    When using pinch-to-zoom (touchscreen, touchpad), it should be no problem, as browsers then generally just scale up everything. The webpage may request to be as wide as the screen, but the browser will just display things wider than the screen and not tell the webpage about it.

    On a desktop, when using the traditional zoom or even text-only zoom, that’s when things become tricky. Suddenly, different measures on your webpage grow at different rates. The text that previously fit into 5cm width may now be cut off or reflowed.

    In particular, when zooming their desktop page, you’ll see that the header grows comically large. And since they’ve fixed it to the top, the webpage becomes unusable.

    In essence, there’s three things they could do:

    • Allow pinch-to-zoom, disallow other zoom.
    • Fix their stupid header and whatever else may be broken. It’s not that hard.
    • Throw away the whole webpage and start fresh. Browser were built to display documents and this page wants to display documents. The most basic webpage will work better than what they’ve built.