Hacker News Reader

Comment by whylo | Hacker News Reader

I'd really encourage you to download a screen reader such as NVDA (or use VoiceOver if you're on a Mac), make use of the Lighthouse accessibility audit in Chrome dev tools, and try using your site with just a keyboard to test for accessibility. At the moment the biggest problem is you've used divs with click handlers rather than <a> tags for your product links, which can't be focussed with the keyboard, so anybody using a keyboard to navigate (such as someone with reduced mobility or using a screen reader) won't be able to use the site.

View on HN

And for people reading this and going "In my app, I don't care about that demography, b/c that niche is too small/effort too big etc": Search engine bots are almost exclusively "disabled" users of your site.

So, if you need to convince your managers or yourself to spend effort/money/time on accessability, SEO and traffic from search may be convincing if other reasons are not.

I'm not usually a nut for accessibility, but you make a good point. Using semantic HTML tags and a few other basic best practices (e.g. alt/title attributes, sufficient color contrast) goes a long way.

I'm more of a nut ;) but I think anyone selling a service like this, or building any kind of front-end framework, has even more of a responsibility than individual site owners to make their stuff accessible, because any issues are multiplied out across all of your customers, and ultimately affect any of their customers with accessibility needs.

Depending on the juristiction your customers operate in, any accessibility issues could also expose them to legal liability for non-compliance with various laws (eg ADA in the US, the Web Accessibility Directive in the EU for public sector bodies)

Agree. Thanks for this feedback. I'll put it on top of my backlog. :-)

I think for some common patterns e.g. (clickable or partial clickable) cards, and similar we could use some good guidance documentation. Maybe my Google skills aren't up to scratch but I can't really find out how to handle these correctly. There always seems to conflicting issue e.g. selecting text and using an anchor element for the whole card etc.

Additionally you loose out on basic browser features such as opening in a new tab and copying the link.

Reply on news.ycombinator.com