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 (
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
<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.