Ask HN: Best way to test accessibility of a website? • Hacker News Board

Re: Ask HN: Best way to test accessibility of a website?

#31

Post by quicklime » Mon, Mar 25, 2019, 7:15 AM UTC

dingus wrote: post #24

- Use blind accessibility tools with your website. If you're on iOS/macOS enable VoiceOver, figure out how it works, close your eyes and use your website. - Disable JavaScript and use your website. This may not be relevant for web apps, but regular websites should work normally. - Try to use your website with only the keyboard. - Try to use your website with extreme zoom levels and font size overrides. - Monitor your…

I'm lucky enough to have a low-vision person who works as a tester on my team, and does our accessibility testing. It's very impressive watching/listening to him use a screen reader - I was really amazed at how fast he has it set to read the screen.

He does suggest all the things you've mentioned above, and it's good advice.

However one thing he also says is: don't assume that low-vision is the only type of disability. You also need to build software for people who are: deaf, have slow motor skills (e.g. avoid putting strict time limits on user actions, or making things jump around on the screen too much while people are trying to hit a target), lack fine motor skills (e.g. don't make a target too small), etc.

Re: Ask HN: Best way to test accessibility of a website?

#32

Post by skibz » Mon, Mar 25, 2019, 7:22 AM UTC

qwerty456127 wrote: post #28

austincheney wrote: post #23

In your test environment send HTML as type application/xhtml+xml , block all CSS and images, and add JavaScript that locks the mouse cursor to the first pixel on the screen. Then test the site for content and usability as you normally would. Vision impaired persons do not benefit from CSS or images. All images should have proper corresponding alternate text. Changing the media type of the HTML does require a bit more…

> send HTML as type application/xhtml+xml What does this change?

> Changing the media type of the HTML does require a bit more strict syntax, but it also is a cheap trick to ensure the HTML tags and structure are arranged in a valid way.

Re: Ask HN: Best way to test accessibility of a website?

#33

Post by interfixus » Mon, Mar 25, 2019, 7:25 AM UTC

austincheney wrote: post #23

In your test environment send HTML as type application/xhtml+xml , block all CSS and images, and add JavaScript that locks the mouse cursor to the first pixel on the screen. Then test the site for content and usability as you normally would. Vision impaired persons do not benefit from CSS or images. All images should have proper corresponding alternate text. Changing the media type of the HTML does require a bit more…

> Vision impaired persons do not benefit from CSS or images

They might. You probably mean blind people.

Re: Ask HN: Best way to test accessibility of a website?

#34

Post by hikergirl1234 » Mon, Mar 25, 2019, 7:51 AM UTC

Switch the language option if one exists and try using the website in a language you don't understand. Has helped immensely for my side projects in improving UI clarity and ease of navigation.

Re: Ask HN: Best way to test accessibility of a website?

#35

Post by darekkay » Mon, Mar 25, 2019, 8:14 AM UTC

For automated testing, try pa11y[0] or Lighthouse (intergrated in Chrome, using web.dev or as a standalone NPM package - (it uses axe-core under the hood)).

Tools will only get you so far, though. To make your site fully accessible, you will need to actually test it yourself. Luckily, most issues can be solved/prevented by following some simple guidelines [1].

Recently, I've reviewed the accessibility of 21 popular CSS UI frameworks [2], so this might be also helpful to you.

[0] - http://pa11y.org/

[1] - https://moritzgiessmann.de/accessibility-cheatsheet/

[2] - https://darekkay.com/blog/accessible-ui-frameworks/

Re: Ask HN: Best way to test accessibility of a website?

#36

Post by jitl » Mon, Mar 25, 2019, 8:34 AM UTC

skibz wrote: post #32

qwerty456127 wrote: post #28

Earlier quoted context omitted.

> send HTML as type application/xhtml+xml What does this change?

> Changing the media type of the HTML does require a bit more strict syntax, but it also is a cheap trick to ensure the HTML tags and structure are arranged in a valid way.

This seems a bit bananas to me because there’s plenty of valid HTML5 is NOT valid XHTML or XML. For example, HTML5 allows common tags such as

and to be unclosed, which is not valid in XHTML. HTML5 written in this style is not “wrong” - it’s valid, and correctly presented by tools like VoiceOver. Screen readers will be a-okay with HTML5; this advice is going to send people down wild goose chases with no need.

XHTML is an alternative, dead-end branch of HTML evolution that time has forgotten.

To validate HTML, use an HTML validator.

Re: Ask HN: Best way to test accessibility of a website?

#37

Post by austincheney » Mon, Mar 25, 2019, 8:40 AM UTC

jitl wrote: post #36

skibz wrote: post #32

Earlier quoted context omitted.

> Changing the media type of the HTML does require a bit more strict syntax, but it also is a cheap trick to ensure the HTML tags and structure are arranged in a valid way.

This seems a bit bananas to me because there’s plenty of valid HTML5 is NOT valid XHTML or XML. For example, HTML5 allows common tags such as and to be unclosed, which is not valid in XHTML. HTML5 written in this style is not “wrong” - it’s valid, and correctly presented by tools like VoiceOver. Screen readers will be a-okay with HTML5; this advice is going to send people down wild goose chases with no need. XHTML is…

In modern browsers all modern HTML5 is valid XHTML so long as it conforms to the syntax and tag structure. In fact the only real difference, aside from closing tags like br and img, is that with XHTML the browser yells at you when you get HTML wrong.

On my personal sites I send all my HTML with a .xhtml file extension to force XML compliance, but the code is modern HTML5.

Re: Ask HN: Best way to test accessibility of a website?

#38

Post by austincheney » Mon, Mar 25, 2019, 8:43 AM UTC

interfixus wrote: post #33

austincheney wrote: post #23

In your test environment send HTML as type application/xhtml+xml , block all CSS and images, and add JavaScript that locks the mouse cursor to the first pixel on the screen. Then test the site for content and usability as you normally would. Vision impaired persons do not benefit from CSS or images. All images should have proper corresponding alternate text. Changing the media type of the HTML does require a bit more…

> Vision impaired persons do not benefit from CSS or images They might. You probably mean blind people.

No, I mean vision impaired. There are all kinds of different vision disabilities besides blindness and color blindness.

Re: Ask HN: Best way to test accessibility of a website?

#39

Post by interfixus » Mon, Mar 25, 2019, 8:50 AM UTC

austincheney wrote: post #38

interfixus wrote: post #33

Earlier quoted context omitted.

> Vision impaired persons do not benefit from CSS or images They might. You probably mean blind people.

No, I mean vision impaired. There are all kinds of different vision disabilities besides blindness and color blindness.

Yes, exactly. And many such impairments will not prevent you benefitting from layout, colors, typography, images, and sundry other kinds of graphical trickery.

Re: Ask HN: Best way to test accessibility of a website?

#40

Post by jitl » Mon, Mar 25, 2019, 8:52 AM UTC

warent wrote: post #26

dingus wrote: post #24

- Use blind accessibility tools with your website. If you're on iOS/macOS enable VoiceOver, figure out how it works, close your eyes and use your website. - Disable JavaScript and use your website. This may not be relevant for web apps, but regular websites should work normally. - Try to use your website with only the keyboard. - Try to use your website with extreme zoom levels and font size overrides. - Monitor your…

> "Use blind accessibility tools with your website. If you're on iOS/macOS enable VoiceOver, figure out how it works, close your eyes and use your website." I doubt this is going to be very effective. Sure, it's better than nothing at all, but this is akin to sighted person with zero blindness experience testing the effectiveness of a newly designed white cane, only a website is much more complicated. You should alwa…

>> Use blind accessibility tools with your website. If you're on iOS/macOS enable VoiceOver, figure out how it works, close your eyes and use your website.

> I doubt this is going to be very effective.

You are wrong. The only way for a primarily sighted team to build accessible software is to test and iterate on accessibility as part of day-in, day-out development practices. Think of it the same as localization for RTL languages or cross-browser testing: you should test in each environment you support before merging a change. Training and user-testing with blind community are important, but it doesn’t take a native Arabic speaker to notice broken layout in Arabic, nor does it take an Android device owner to notice usability problems in Android Chrome.

The best front-end engineers I know all have a VoiceOver hotkey on their dev machines and phones, and I regularly see them testing sites they visit for keyboard navigation, focus management, and VoiceOver usability.