Bruce Lawson's personal site

Drive-by accessibility tweaks

Sometimes, if I’m fixing an unrelated bug I spot the opportunity to make a quick “drive-by” accessibility tweak that is quick and easy and will give a disproportionately big boost to the user experience for people with accessibility needs.

Here are some of my top faves (number 3 will have you in tears!). Your mileage may vary, of course, depending on your codebase and conventions.

Replace meaningless divs with landmark semantics

In some codebases, I see lots of HTML festooned with classes, which are used to style the element rather than apply styles to the element directly, so <div class="header"> and a CSS rule .header {display:block; color: goldernrod; …} instead of header {color: goldernrod; …} as Sir Uncle Timbo intended.

This allows me to change it to <header class="header"> with no need to rewrite the CSS, and assistive technology users get information and navigation assistance from the semantic of header (whereas div is meaningless).

If your codebase is similarly styled, you can do this with nav, main, footer too; my article The practical value of semantic HTML explains the benefits.

I often add a <search> element too, if the JS/ ARIA labyrinth isn’t too deep.

Make in-page links more accessible

Another sneaky quick win involves adding tabindex=”-1″ to the target of in-page links, so focus isn’t lost after the link is followed.

So if you have <a href="#mainContent">Skip to main content</a> in your page (and if you haven’t, why not??) the target of that link needs a tabindex:

<main id="mainContent" tabindex="-1">

I had thought this problem had gone away when Internet Explorer was laid to rest, but no.

Replace JS accordions with HTML

Depending on your codebase, this may not be as easy. But there are literally 735 trillion sites (and crusty old libraries and creaky tutorials ) that still use cobwebby JavaScript to make accordions and similar disclosure widgets, with fragile ARIA and focus management.

For years, HTML <details> and <summary> just do it for you, managing roles and states for free without any JavaScript, and they work everywhere. You might have to get more creative if you need an animated arrow (can you imagine the shame of a disclosure widget without an animation?!?) but it can be done.

You can also consider replacing your Penny Farthing JavaScript dialog boxes and popovers with HTML <dialog> which works everywhere and (soon) the HTML popover attribute and associated API, and get all your focus management, roles and states and z-index shenanigans handled by the browser for free.

Remember, kids: built-in beats bolt-on. Bigly. Happy drive-by accessibility tweaking!

(Last Updated on )

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

4 Responses to “ Drive-by accessibility tweaks ”

Comment by Charlie

Frameworks, frameworks, frameworks… Developers love using them so that they can focus on code. Of course, this begs the question: why don’t the framework developers up their game? They can’t be bothered, no one is going to pay them to do it, and their users don’t care.

I remember what a breath of fresh air HTML5 was and all the hard work that had gone into reasserting the importance of semantic HTML…

Thanks also for a reminder about the details tag. I’ve just checked my copy of “Introducing HTML 5” to wonder why I missed it, but there were no implementations of it at the time…

Comment by Amandeep

Always enjoy your tips and insights about Accessibility, Semantics, Web Standards and your insights regarding the compliance requirements and other legal things.

Good tip regarding Skip to main content – tabindex. Wasn’t aware of this.

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.