Hacker News Reader

Comment by surprisetalk | Hacker News Reader

Ha! Thanks for catching that! I think that demonstrates how difficult it is to make even a simple website accessible.

I assumed that since my browser's "reader mode" was all good, then screen readers would know how to parse it too.

I do like the heart aesthetic, so how exactly would I make it more accessible?

role="presentation" will remove it from the a11y tree! Easy fix. Most browsers will notice the characters in the element are not human readable and make some tweaks to make "heartheartheartheartheartheartheartheart" less likely though, even in the current version!

Thank you! I added it.

In case you're maybe interested, I wrote up a little thing about how I think of accessible interfaces and designing for them:

https://graypegg.com/2023/11/25/the-private-definition-of-ac...

Edit: decided to post it here, https://news.ycombinator.com/item?id=38683774

Thank you!

The problem is that accessibility has been treated as an afterthought, so designers, UX and people crafting HTML usually are not in habit of embedding accessibility into their works. It often comes when someone disabled complaints or if there is a regulation they didn't know about and there is "oh sh..." moment where accessibility is tacked onto already done project.

So it's difficult in the sense that people don't think about it, there are not so many tutorials available and so on.

YES. I think it's this unique form of after thought, where people imagine accessibility as a "score" that you can "increase". The web developer lowest-common-denominator cares about it, but only at this weird surface level. More aria tags = more accessibility points. It becomes this weird game where we end up with insanely noisy markup, which creates a horrible described interface for anyone actually using assistive technology.

It's an interface like any other. We'd be weirded out if designers graded their screen specs as "visual" enough. More pixels are required in this area, think of our screen users! They need more pixels!

Depends - do you want screen readers to hear something? If so, add a `aria-label="heart"` or similar. If not, add `role="presentation"` to remove it from the accessibility tree altogether.

You might also want to change the element from a `header` to something else, like a `div` or a `span` or even a `figure` instead. Then put "potato.cheap is home of the... The "Cheap" Web" inside the `header` instead.

Reply on news.ycombinator.com