I came across a weird issue while doing an accessibility audit recently. NVDA announces the site logo as "clickable", and the cursor changes to a pointer (the little "hand") when hovering over it with the mouse. I assumed it was a link to the homepage, as is typical for header logos, but clicking it did nothing – on the homepage, at least.
On interior pages, clicking the logo takes you to the homepage. However, neither on interior pages nor on the homepage is the logo focusable using keyboard navigation.
I assumed they just weren't linking to the homepage on the homepage itself. However, on peeking more closely into the code, there's no actual link (<a> tag) on the interior pages' logo, either. Some kind of JavaScript event has been put on it with the framework used to build the site, and it has "cursor: pointer" set in CSS, but the correct, semantic HTML element was not used to provide the link. (Not the only occurrence of this type of issue on the site).
Two lessons from this, or maybe three:
- When you think you've seen every possible accessibility issue, you haven't.
- Always use the correct semantic HTML element for the job. Don't repurpose
<div>s or<span>s or<img>es and stick JavaScript spackling all over them. Chances are, it will not work accessibly. In this case, links programmed correctly using the<a>tag are keyboard focusable and operable and are announced as links — none of which was happening here. - Don't put cursor: pointer on anything that isn't interactive – really, don't put it on anything that's not a link.