Bruce Lawson's personal site

A screen reader user’s weird tricks to make accessible websites. Number four will shock you!

On Friday, Vadim and I published episode 19 of our podcast, The F-word, with Léonie Watson as a special guest. Léonie is a web standards mover and shaker, a business owner, a total grooving cat, and also a screen reader user.

Leonie, Vadim and me on video chat. We're smiling. Although perhaps Vadim is snarling.

Some of her top tips for making sites accessible:

HTML5 introduced a whole bunch of elements nav, main, header, footer, aside and such. And from a screen reader user point of view these were one of the most amazing strides forward I can remember coming across.

So use them! Here’s my article on the practical value of semantic HTML to get you going.

Should you have very terse, or detailed descriptive alternate text for images? Léonie says,

Not everybody wants to listen to that detail, but you don’t have to listen to it. If it’s there, you can skip past it, or you can stop and listen to it. If somebody decides not to put it there, that choice has gone right out of my hands.

On ARIA:

should you be using ARIA at all? Because from experience the answer is almost always probably not. I’ve probably seen more websites brought down by using ARIA than I have made better for it. To be honest that’s probably one of the biggest accessibility problems I come across … you’ve got to use it sparingly and thoughtfully.

(This isn’t to say that ARIA is always bad. The W3C Using ARIA spec’s first rule of ARIA is “If you can use a native HTML element or attribute with the semantics and behavior you require already built in, instead of re-purposing an element and adding an ARIA role, state or property to make it accessible, then do so“.)

What’s the biggest accessibility bang for the buck a developer can achieve?

start off with just good quality code. That’s by far and away the best thing you could do for accessibility, especially screen reader accessibility. Screen readers are absolutely dependent on plain old semantic HTML. Divs and spans are our absolute worst thing you can do to us because they’re meaningless.

There you are! Use the right HTML elements for the job. There’s loads more nuance and InfoNuggetz™ in the podcast transcript.

Buy "Calling For The Moon", my debut album of songs I wrote while living in Thailand, India, Turkey. (Only £2, on Bandcamp.)

8 Responses to “ A screen reader user’s weird tricks to make accessible websites. Number four will shock you! ”

Comment by doodle jump

is it necessary to use ARIA? Reason being, I’ve learned the hard way that the answer is nearly never likely not. More websites have been negatively affected by ARIA than positively affected by it. If I’m being really honest, that’s among the most significant accessibility issues I encounter… Use it with caution and consideration.

Comment by Image Prompts

The point about ARIA being more often a hindrance than a help really resonates. I’ve definitely seen situations where overusing it caused more confusion than clarity for screen reader users.

Comment by FNAF

Wow, Bruce! Your insights on accessibility were eye-opening. I never thought about using sound cues in web design—such a simple yet effective trick! It’s crucial for inclusivity since everyone deserves a great online experience. By the way, I’ve been immersed in FNAF lately.

Comment by jame

I really appreciated the clever tricks you shared! As a web designer, I’ve implemented similar practices and noticed significant improvements in user engagement. Your number four tip is particularly eye-opening—such fnaf an easy addition can make a world of difference for screen reader users! Thank you for shedding light on accessible design; it’s truly invaluable for our digital community.

Comment by FNAF

What a fascinating read, Bruce! Your insights into screen reader techniques are eye-opening. I especially appreciated the emphasis on non-visual cues; they can truly enhance accessibility. Have you considered exploring how gaming sites like FNAF could also implement these tricks? That would be enlightening!

Leave a Reply

HTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> . To display code, manually escape it.