I suggest dropping a line about this to dang at hn@ycombinator.com. He is extremely nice and helpful.
I've always felt HN should use nested lists for comments.
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.
Two that display comments: https://hackerweb.app/ https://hn.premii.com/ I don't know how good they are with screenreaders.
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.
[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.
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.
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.
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.
pg is very proud of HN's quirky implementation 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.
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.
Holy shit I didn't realise this? That's terrible!
(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.)
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