Hacker News Reader

Comment by ghusbands | Hacker News Reader

Be very careful how you do this, unless you want to exclude blind users. I've seen a blind user have an online form silently fail at them because they filled in a field that wasn't visible. Using display:none applied indirectly via CSS is probably reasonably effective against bots and won't interfere with screen-readers.

View on HN

Are there tools or guides to help test how websites "appear" to people with disabilities ? It is difficult to design something if you don't have an idea of what will be the outcome, but I wouldn't know which software is used by (e.g.) a blind user, let alone how I would use it.

I couldn't find anything like it, which surprises me. It should be in the interest of companies selling screenreaders that the web is accessible with them. Creating a service where you can submit a link and it shows you a textual representation of how the screenreader sees the page would be immensely useful.

uh, there are a lot of services that do automated scans. These obviously arent completely failsafe, but still give an indicator.

just google relevant keywords https://www.google.com/search?q=accessibility+scan+website

and if you want the full experience: just enable the screen reader and try to use your website with it.

/edit: and i almost forgot: chromes build-in Audit tool in the Developer Panel includes some Accessibility tests as well

These scans are in my experience always just that: they read the source and match it against a set of common anti-patterns. I was talking about something that would tell me how common commercial screen readers interpret an arbitrary new construct. If you have a specific reference to something else, please send me a link!

Screen readers often cost significant amounts of money, and are not trivial to "just turn on".

I believe y4mi was referring to screen reading software, not a physical device. Like VoiceOver on macOS.

You could start here: https://www.w3.org/standards/webdesign/accessibility

I'm sorry - did I offend someone. Or did limited mobility cause a click on the fiddly and untitled downvote link instead of following the link :-)

Simply try to browse the page without using mouse, just the tab key. The next step would be to use screen reader, NVDA[1] (Windows) or Apple VoiceOver (MacOS). There are automated testing tools, but they don't cover the whole spectrum of problems. Nevertheless you can try

* WAVE (Chrome or FF plugin, https://wave.webaim.org/extension/)

* AXE (https://www.deque.com/axe/)

* AChecker (https://achecker.us/checker/index.php)

* Funkify (Chrome plugin, tries to emulate various disabilities)

* Lighthouse in Chrome Dev Tools also checks some accessibility rules

The full list of things that you need to take care of: https://www.w3.org/TR/WCAG21/ (it's huge I know, it takes 5-7 days to test everything from this list)

Please do the tab test. Some of us do this even if we don't need accessibility tools, as it can be faster (those who create forms which cannot be tabbed through are evil).

You can switch any iPhone to accessibility mode. Those with vision impairments love their iPhone because generally "it just works"

There are lots of options for automated accessibility scans, but there are many common accessibility issues that aren't feasible to test for with automation.

My team at Microsoft recently open sourced a tool called Accessibility Insights (https://accessibilityinsights.io). The web version is a chromium extension that includes both automated scans and also a guided assessment option that leads you through how to test for and fix the stuff that has to be found manually. This is the tool Microsoft pushes its own teams to use as part of their release processes.

Surprised no one has mentioned this yet, but pa11y was what a large enterprisey company I used to work at tried to adhere to. http://pa11y.org/

Everything everyone else has said. However, if you don't have a budget for this, you can do a few basic things that will greatly improve the usability of your site.

First, can you navigate your entire site without using a mouse (including any widgets, forms, embeded stuff)? You should also have a "Skip to main content" button that is the first element you hit when you tab into your page.

Next, download the NVDA screen reader, which is free, turn off your monitor (or close your eyes), and navigate your site using it. I recommend using FireFox for this.

Finally, use a color contrast analyzer plugin for your browser to ensure you have enough contrast between all of you elements.

From there, you can review the WCAG 2.0 spec to get into the fine details. If you have the budget, hire a consultant/contractor. What I described above doesn't make your site pleasent to use for a disable person, just usable.

We do this, but we've labeled our field very explicitly with something along the lines of "Please leave this field blank, it is for SPAM control.". We also provide a hidden error message if it is filled in to alert the user that it really should be blank.

It's also always place this field after the Submit button with the idea that a user with a screen reader would never make it that far. Bots still see it and add it to the post request since I don't think they care about the order of the form fields.

But then what if you disabled CSS or use Lynx? (You should also add text next to it to say don't use it, and hide that text as well sa the form field. Then, if the form field is visible for any reason, the user will know not to use it.) (Using scripts for it also applies, if you have scripts disabled or are using Lynx or something that does not implement JavaScripts.)

Can confirm, formerly used a spin of this technique and had to stop to better support blind users.

I've used this technique with a label that said "Leave Blank", also hidden with CSS. Seemed to work great, but now I wonder.

I wonder if using aria-hidden on the input field would work or if the bots would also ignore it.

On the face of it this looks like an issue with screen-readers reading the page simplistically.

An element that is not displayed should not be 'displayed' by screen-readers either.

Reply on news.ycombinator.com