Question

I’m upgrading the HTML for a site, and there is currently a list of items presented as filters or refinements that are marked up as check-boxes with labels, but not in a form. Then for “SEO reasons” they added an <a /> tag that isn’t wrapped around it:

<label>
<input type="checkbox" name="one" value="one" /> Refinement One
</label>
<a href="/url-for-adding-one"></a>

This is obviously not really adding full SEO value, and its kind of clunky HTML since the checkbox isn’t necessary: the page works by listening for clicks on the label and firing an ajax load, all without a form. To be clear: there is no form, let alone a form submission, so the checkbox is there only as a visual cue. I want to replace it with background images on the anchor, and ditch the checkbox completely like the following:

<a href="/url-for-adding-one">Refinement One</a>
<a class="checked" href="/url-for-adding-two">Refinement Two</a>

The client is cool with this, but their main concern is with accessibility and how this change would be reflected to screen readers… my personal thought is that it must be better than checkboxes without a form, but I want a better answer that my gut-check.

Do you know of any accessibility implications of replacing checkboxes with links in this situation?

Answer 1

The correct answer here is to use ARIA, in particular the aria-checked attribute. It’s designed specifically for accessibility.

That said, I think your desire to get rid of the checkboxes is misguided. Anything that acts like a checkbox—i.e., it has a checked state and an unchecked state, which controls something on the page—should probably be a real checkbox. This gives you very nice behavior in terms of not only screenreaders, but also what keyboard and mouse users expect.

You can always wrap the <a> around the <label>.