Ask HN: My eyesight is not good enough to read HN. What can I do? | Hacker News Reader

Ask HN: My eyesight is not good enough to read HN. What can I do?

44 pointswunderwaffe51 comments

I own an iPad and an Android phone. The text on HN is simply too small for me to read.

Before HN added CSP headers, I used a bookmarklet to change the font size. But since the CSP headers were added, FF and Chrome both refuse to execute the bookmarklet.

Some might suggest to use an app instead. But I don't use apps. As a programmer I know how bad the app security models are.

Is there any solution, or am I effectively cut off from HN?

View on HN

The existing HN CSP policy allows inline styles. A bookmarklet which just does the following would work:

document.querySelectorAll('*').forEach(d => d.style.fontSize='20px')

I find it odd that mobile browsers don't allow you to set the font size like desktop browsers do.

Firefox on Android allows scaling according to system font, under Settings > Accessibility.

I suppose though that OP is happy with system fonts and not HN fonts.

The font is still quite small on HN even with the system font set to the largest size.

Awesome! I was creating a style element and added it to the head. The CSP do not allow that.

Now that I know I can alter the elements directly, I will do that instead.

Hacker News - I'm back!

Using a style element should have worked too. The HN CSP policy has unsafe-inline which covers both of these things.

Perhaps your problem wasn't with CSP at all, but something else. Maybe a CSS specificity issue?

[edit] - Yeah, I just created this bookmarklet and it worked fine:

javascript:(function(){s=document.createElement('style');s.textContent='*{font-size:20px}';document.head.appendChild(s)})()

Even better!

My solution was a link element with a data: URI. Yours is much more elegant. And works!

Thank you very much!

That would be the problem. The HN policy for styles is:

style-src 'self' 'unsafe-inline'

This means they can include CSS from the same origin, or inline. It would need "data:" adding to the list to allow data URI's as an accepted source.

I have impaired vision myself and I find HN to be one of the most accessible sites around. I have set all font sizes to 32-point and do not allow any smaller fonts. Also I have chosen a font that easy to read for me and do not allow sites to select any other fonts. On bad days I disable CSS so I can have my default bright-on-dark color scheme.

Using these settings, HN is a pleasure to read! Other sites suffer, of course, because large fonts destroy their layouts, but those sites are FUBAR (from an accessibility point of view) anyway.

These sound like solutions for the desktop? I'm looking for a solution for mobile. Well, thanks to mike-cardwell, I have one now!

I'm using the same approach on my smartphone. Good to hear you found a solution!

I'm blind and am reading HN right now.

On an iPhone:

1. Hold down the home button to summon Siri.

2. Say "turn on Voiceover."

Now when you touch parts of the screen, that element will be read to you. If you're focused on a button or link, tap twice to activate it. Scroll with a three finger swipe.

Will definitely take some getting used to, but in some ways it's actually superior to sighted reading. No strain or fatigue, you can control your phone without taking it out of your pocket, and you can listen while walking around.

An alternative, and I also do this, is to do this workflow:

1. Get an RSS reader with HN hooked up to it.

2. Read all the article titles and open the ones you think sound interesting in the browser.

3. Use the Pocket for Chrome extension to add those items to the Pocket app. It's Mozilla, it's not particularly evil or leaky.

4. Read the articles on your phone in a readable font You can change the text size in settings.

There are some other alternative workflows for getting text read aloud on the laptop, message me if you're interested.

If you dont mind me asking, how do you reply on HN? Your post is very well formatted to have been done using any speech to text service.

I used my computer. But it's entirely possible to type while blind on the iPhone using Voiceover, though I admit I'm rather slow. If I have to send an email on the phone, I usually use TTS, then go through it one character at a time to correct formatting using Voiceover.

On iOS, it's possible for App Store apps to add actions to Safari's share sheet that execute arbitrary JavaScript on the current page. This can act as a substitute for bookmarklets. (There's no way to have extensions run automatically, though.)

From a quick search of the App Store, here are two apps that may help – I haven't tried either of them, though:

Font Size App Extension: https://itunes.apple.com/us/app/font-size-app-extension/id10...

Safari Snippets (lets you add custom JS snippets to execute): https://itunes.apple.com/us/app/safari-snippets/id1126048257...

I'm assuming that by "I don't use apps", you just mean you don't want to use a specialized HN reader app. If you don't want to install any apps at all, I guess the above won't help… though you could always write your own app.

edit: The above may be unnecessary if, as mike-cardwell suggested, the issue isn't that the bookmarklet isn't executing, but that it tries to add a style tag and isn't allowed.

Just wanted to comment to raise awareness for those of us without 20/20 eyesight.

HN staff: please consider having a typographer/UI designer make a few improvements to the base stylesheet. I realize the codebase may be old, but it's a paragon of Lisp purity so it should be easy to change, no? ;)

My experience ist that everytime a designer touches a website things get worse :)

Current example: The Reddit redesign. It's a nightmare.

Changes to HN that would help me are:

Get rid of the CSP headers

Change the output so that the browsers reader mode can understand it.

A white-on-black color scheme would go a long way!

That being said, in my experience HN is really one of the least problematic sites when it comes to accessibility! It even works fine with CSS off. Kudos to the designers!

Why don't you just zoom in? This seems so obvious to me that I am sure I am missing something.

I set the hn zoom level to 120%, and firefox remembers my zoom setting for the site so I don't have to set it every time.

On mobile Firefox, when I pinch zoom on HN, it means I end up having to constantly scroll horizontally to read anything. Maybe that's why?

You want Command + or the equivalent, not pinch zooming.

Yeah. I use that regularly on my laptops and desktops. No idea how to do it on mobile phones though, which is what is being discussed here.

I used to have bad eyesight, just zoomed-in the page with `Cmd +` to 110% or 125%.

Unrelated to reading HN, if LASIK or similar is an option for you I would suggest you to talk to your ophthalmologist. Having eyesight corrected has been one of the best decisions I've made. It had such a drastic impact on my quality of life.

Good to hear that it worked for you!

However, LASIK and similar approaches are not without problems when your vision is really bad (10 diopters or more), so I would recommend to inform yourself thoroughly before taking this step!

If you are using the Opera browser on Android, then when you zoom, the text resizes but then reflows to fit on the screen. I cannot fathom why the other phone browsers do not have this feature, it makes every site readable without any scrolling left or right.

Came here to say exactly this! Text Reflow works great and imho must have for every mobile browsers.

>> As a programmer I know how bad the app security models are.

Don't understand this. What does this mean? And then do you not use any apps at all?

No, I don't use apps.

Apps can do millions of things you don't want an untrusted party to do on your device.

Browsers are apps too and your statement is too vague.

Please explain what you’re afraid of.

To me, it sounds like you’re talking about third party apps, and your fear is about third party developers having access to your web accounts. In that case, that makes a bit more sense but then I hope you’re not using any browser extensions as well.

Yes, with untrusted parties I mean developers of third party apps.

And yes, I don't use browser extensions either.

Please take a look at Bookmarklets Context Menu, a WebExtension that allows to execute bookmarklets as privileged scripts:

https://github.com/mems/bookmarklets-context-menu

https://addons.mozilla.org/es/firefox/addon/bookmarklets-con...

Not sure if it'll work in the mobile version of Firefox though, works great in desktop.

Taking it one step further, you can install an add-on like Tampermoney and run full user scripts (works on mobile as well) https://addons.mozilla.org/en-US/firefox/addon/tampermonkey/

I use to make some js for that (Css filters, brightness, contrast etc): Here is a demo on this current page: https://media.giphy.com/media/8lZ5Cyp6rRvrLoXMc1/giphy.gif And the project sources with explanations: https://github.com/webdev23/ponyFilters HN disallow script embedding, but it still can be injected via console, then by using greasmonkey, settings are kept for next displays.

On Android I've been using Hacker News Reader for years - https://play.google.com/store/apps/details?id=com.manuelmaly....

It's open source (https://github.com/manmal/hn-android/), works great and it has a bunch of accessibility settings. It's basically a read-only experience, though - no commenting.

In Chrome just go to settings, accessibility and increase the font size. Works on my android phone.

I set the zoom level to 130% in Firefox for this site only. It is persistant. I don't have to do it every time I visit the site. And it doesn't effect other sites.

I do the same, except for me it's permanently at 240%.

How do you set the zoom in mobile Firefox?

For the iPad, you could try a browser app called iCab mobile. It comes with an extension to increase the text size. That works with HN as well.

See it in action in this screenshot: https://www.dropbox.com/s/nh9kjn4vgec694l/IMG_0073.JPG

(If alternate browsers count as „use an app“ advice, I apologize for my suggestion.)

iOS has excellent accessibility features built in. Take a look at VoiceOver or Zoom [1]. You should be able to toggle either on easily via the Control Center.

[1] https://www.apple.com/au/accessibility/iphone/vision/

There is a lot of stuff in the iOS accessibility tools, but unfortunately nothing that makes the text on HN bigger.

Ironically, setting the "dynamic text size" makes all kinds of text in the OS way too big but lets the text on HN as small as before.

And I don't want to "zoom" because that makes the text overflow the screen on the right.

What about reader mode in mobile Safari?

Or maybe some JS bookmarklet (never tried w/ iOS Safari), personally.

I also thought there was an "Accessibility Zoom" that uses 3-fingers (for all iOS, not specific app)?

Well, you could always try creating your own HN frontend[1]

I made one myself for about an hour or two. http://morphical.ml:4000/s/17111778

[1]https://github.com/HackerNews/API

Since I have no idea if Firefox also offers this on its mobile version, I would suggest the read function. In addition, the font could be made extra large.

https://postimg.cc/image/60ouxm7wr/

I can't help but wonder how you are going to read all the responses here?

Could use a front end on mobile, something like https://hn.premii.com which allows to change the font size.

Magnifying glass? Or how about a magnifying monocle?

Accessibility settings on ipad has some zoom features too.

Or just write a quick scraper.

Curious why Cmd+/zooming doesn't work?

Hint: can you tell me where to find the command key on your iPad?

(User is specifically asking about reading HN on mobile devices, not a desktop OS.)

Try a user stylesheet with your browser.

Afaik mobile browsers don't support user stylesheets.

A dark mode extension I'm using on Firefox for Android works as an css injector. One would only have to configure a custom stylesheet instead of a dark theme.

https://addons.mozilla.org/en-US/firefox/addon/dark-mode-web...

uBlock Origin, the content blocking extension I'm using on Firefox for Android, can inject css rules as well.

https://addons.mozilla.org/en-US/firefox/addon/ublock-origin...

Reply on news.ycombinator.com