[bellweather49]

Sorry for the tangent, but as a blind user, how do you manage to use HackerNews? I can't get a screenreader to pronounce indentation as the indentation of the comments is done with gif images as spacers. Do you know of a HackerNews app or alternative website that works better form an accessibility poinf-of-view? (I'm using NVDA on Windows).

[kolanos]

I use the "[-]" next to comments. Collapsing/uncollapsing comment trees lets me know what is nested under what.

[bombcar]

Brilliant! Is there any minor css changes that would make life easier?

[gibolt]

Could a depth tag be added for accessibility? You could always know if you are moving up/down the tree

[bellweather49]

How do you "find" this? The NVDA "find" function can't seem to find it. What screenreader are you using?

[jraph]

I've noticed that in terminal browsers as well (as a non-blind person).

I suggest dropping a line about this to dang at [e-mail]. He is extremely nice and helpful.

I've always felt HN should use nested lists for comments.

[bramd]

Yes, a nested list would clearly be the better structure here. Or even a description list (dl) with the comment's metadata in a dt and the comment in dd.

[busymom0]

I built hacker news client HACK for iOS, MacOS and Android which scrapes the HN page HTML and this is how I implemented it - when you collapse a comment, it tells you how many child comments that comment has. You could try my app to see if it’s user friendly for accessibility (I don’t have much experience with it so I am not sure).

[techdragon]

Just wanted to take a moment to thank you for all your hard work. Your app is excellent and has quickly become the dominant way for me to interact with Hacker News. It lets me silo my reading and has been a valuable tool in preventing Hacker News from being a distraction in my work day. In the entire time I’ve been using it I’ve only come across one bug! (On the iPhone, the UI can very very rarely lock up when transitioning from the comment view to the post list view… and I do mean very rarely, it’s so rare I don’t care, it’s still 5 stars in my book. I only mention it because the thought occurred to me that having to force quit the app might interfere with crash diagnostics giving you information about this particular bug)

[busymom0]

Thank you very much for the kind feedback :)

I had someone else mention that rare bug too but unfortunately I haven’t been able to reproduce it to be able to narrow it down. I will see what I can do to fix it.

[bellweather49]

I'm on a PC and don't currently use a smartphone, but thanks for the suggestion and I will bear it in mind, and give you some feedback if I do use it. I'm sure others on hear could give you some feedback in the meantime.

[DominikPeters]

Here is a list of alternative UIs for HN: https://blog.luke.lol/tech/hacker-news-alternatives/

Two that display comments: https://hackerweb.app/ https://hn.premii.com/ I don't know how good they are with screenreaders.

[bellweather49]

Brilliant!

The hackerweb.app site seems very good for accessibility. It uses nested lists as others here have suggested.

hn.premii.com is a little more difficult to use (in terms of getting from the list of posts to the comments), but still quite usable. It uses a slightly more complicated layout of divs and lists.

[_r0ei]

That's awful... Why would it be done like that?

[krapp]

Funny enough, pg did it that way to stick it to the W3C and its recommendations about the proper use of tables.[0]

[0]http://paulgraham.com/arc0.html

>pg: "Arc embodies a similarly unPC attitude to HTML. The predefined libraries just do everything with tables. Why? Because Arc is tuned for exploratory programming, and the W3C-approved way of doing things represents the opposite spirit.

>(...)

>Tables are the lists of html. The W3C doesn't like you to use tables to do more than display tabular data because then it's unclear what a table cell means. But this sort of ambiguity is not always an error. It might be an accurate reflection of the programmer's state of mind. (...)

... and yes, that decision is baked into the server, web app, HTML and forum code (which to my knowledge have never been changed in the standard Arc distribition,) making it a de facto requirement for all Arc based webapps and a PITA to change.

[javajosh]

Like so many things, it only seems awful in retrospect. Perhaps it is time to revisit the indentation implementation Hacker News code and change it to use nested lists for threads. (I wonder how HN is implemented and how the code is updated. It could be anything from a single file lisp program running over a single text file to a whole cluster of more traditional specialized servers. (Is it rude poking around DNS looking for clues about a backend implementation?)

[JimDabell]

> Like so many things, it only seems awful in retrospect.

No, it seemed awful at the time as well. Table layouts were already long obsolete by the time Hacker News was launched. Here’s a discussion from over a decade ago on the subject:

https://news.ycombinator.com/item?id=2019950

Quotes:

> If this were anyone other than pg, you'd all be excoriating the developer for living in the 90s.

> The big benefit is to accessibility through screenreaders or other alternate clients.

> Look, do what you want. You want to write bullshit markup, be my guest. But there isn't a single web dev in this community who would code output like this for their own site. They're just too chickenshit to tell you.

And here we are, a decade later: nothing has changed, we’re still having the same discussion about the same flaws, and it’s still causing problems for people with disabilities. It doesn’t “only seem awful in retrospect” – it has been awful all along and people have been pointing it out for over a decade.

[jonah-archive]

Here's a talk by Sina Bahram from five years ago -- at around 6:30 he specifically addresses how inaccessible HN is to a visually impaired user. Nothing that he mentioned has been addressed: https://www.youtube.com/watch?v=G1r55efei5c

[frosted-flakes]

HN uses tables for layout. Switching it to use nested lists would likely be non-trivial.

[danShumway]

Usually when people say something would be a simple change, they're not aware of the underlying complexity.

This is a different case -- HN genuinely does not have a complicated UI, and it genuinely would not be difficult to make a UI that worked better with screen readers. It would not be difficult to rebuild a HN UI to stop using tables without even making any visual changes to what the site looks like.

There is very little complicated functionality going on in HN pages. They're paginated, they don't have a ton of content, they don't have a lot of complicated UI controls they need to support. They're mostly static pages with some very minor form controls.

In this specific case, there really is no excuse for HN to be screenreader inaccessible. This would not be a complicated conversion for even a single experienced web developer. You wouldn't need to use React, you wouldn't need to use any 3rd-party library or dependency at all. You wouldn't need complicated CSS features, you wouldn't need to redesign the UI.

Honestly in a lot of ways, the current HN table layout is more complicated than it needs to be, the generated HTML could be a lot simpler. Really, there's a difference between being "retro" and using what works instead of chasing modern trends, and having outputted HTML that's broken and hacky, and was broken and hacky even at the time it was released. HN is very solidly in the latter category.

[deadA1ias]

Actually, I think it would be rather straightforward. I'm a bit embarrassed for HN that they're still using tables and spacer gifs and see it as an intentional pushback on "caving" to modern web techniques. Despite CSS being 20 years old at this point.

[frosted-flakes]

Maybe you're right. I had a poke through the HTML a while back, and there are actually tables-within-tables for some reason. It was way more complicated than I expected it to be. It does seem kind of weird that it still uses tables for layout, when there are so many easier and better ways to do it.

CSS could match the current appearance exactly. I bet if dang put up the code on GitHub he'd get PRs fixing tons of stuff within a week.

[heartbreak]

The original author of the site has many talents, but web design is not one of them.

[alisonkisk]

The design is great. The implementation is bad, at least for screenreaders.

pg is very proud of HN's quirky implementation that does what he wants very efficiently.

[danShumway]

> that does what he wants very efficiently.

I'm not sure I agree that it does. HN ships a bunch of extra DOM content that it really doesn't need to ship. If you're optimizing for page size, the HTML could be lighter.

The site does what pg wants, but he really shouldn't be proud of it for doing what he wants well. It's not that the HTML is super-optimized but that the optimization has tradeoffs. It's more like whoever programmed it is very familiar with tables, and when all you have is a hammer everything starts looking like a nail.

[bellweather49]

That's fair, but if you might have blind users wanting to use your publicly-facing site, just making it do what you want isn't enough.

For visual use, I would agree that the site is great, far better than most of the bloated nonsense that is out there these days.

[kragen]

It was easier to get it to look right.

[fao_]

> as the indentation of the comments is done with gif images as spacers.

Holy shit I didn't realise this? That's terrible!

[floatingatoll]

Is there any HTML that can be wrapped around the spacer-indents that would mark them as indented for screenreaders? If I knew more about this I’d propose that as a unified diff, so that they could apply it to their templates and solve this, but I don’t :(

(I know there’s ways to restructure it completely to do this, but I like focused and surgical changes that don’t affect anyone who doesn’t notice them. Opinions vary on that.)

[bigblind]

For screen readers, there's the "tree" aria role[0] which lets you mark a specific element as a tree, and mark the elements within it as items at a certain level.

[0] https://www.w3.org/WAI/GL/wiki/Using_ARIA_trees

[kevin_thibedeau]

Nested DIVs also describe a tree but apparently that's too difficult to do with lambda calculus.

[TriNetra]

Tree wont' be a good fit for comments because one would want to read content by line/word/etc. while a tree item is presented as a whole thing by the screen reader so it's only good for small textual items.

[ogomez92]

There is also the aria-expanded role which could be added to a button if this [] were only changed to a button...

[alisonkisk]

The UL/OL tags for lists solved this problem 30 years ago.

[ogomez92]

Hi, I'm using the site, what do you need indentaiton here for? NVDA can beep when it finds a space before the beginning of the line, not sure what you mean with the gifs thing. IO'm new to this site anwyay I signed up when a friend told me this thing was #2.

[bellweather49]

Just to avoid any confusion, I'll preface this comment by saying that I'm not blind, but in the last few months have mostly been using a screenreader to avoid the migraines I was getting from even small amounts of screen use. So, in other words, I've used the site visually in the past and am now familiar enough with screenreaders and other sites to know waht an accessible site is like.

Basically, the comments on HackerNews are laid out in a tree form. When you first load the page, the comment tree is expanded. You can collapse them by pressing on the little '-' next to the comment.

With the tree expanded, NVDA just reads the comments as a linear stream. Of course, many forums are structured linearly, but the advantage of a tree layout is that you can have tangents like this one, without interrupting the main flow of the thread. Reddit is very similar in that regard. If NVDA can't read the tree structure, it's hard to know what is going on. From my experience, using the arrow keys ( e.g. CTRL + DownArrow ) will not report the indentation, whereas using the numpad keys ( e.g. Numpad 7 or Numpad 9 ) will report indentation, but will not indicate how deep the indentation is, so that isn't terribly helpful. It may be possible to change settings in NVDA to get this to work, but I doubt it, which leads us to the technical implementation.

As others have pointed out, the comments are in a complicated nested table structure, which NVDA seems completely blind to, not even recognizing it as a table. Then, the visual indentation is created by prepending the comments with gif images, which act as spacers. The width of the spacers is determined by a 'width=' attribute.

Others who are more knowledgeable than me have already pointed out alternative ways that this could be implemented, such as using <ol> or <ul> tags.

It wouldn't be hard to also criticize the lack of headings, but we can leave that for another day; if this indentation issue could be sorted out, the usability of the site would go up by about 300%. I've almost stopped coming on here since using a screnreader, whereas I used to browse on here a lot -- it's one of my favourite sites.

To the other commenters: thanks for the useful suggestions and insights; this had been bugging me for months.

Edit: typo