Buttons have cursor: pointer by default, but should not for accessibility reasons
Problem
What version of Tailwind CSS are you using? 3.1.6 What build tool (or framework if it abstracts the build tool) are you using? Vite 3.0.0 (rollup) What version of Node.js are you using? v16.13.0 What browser are you using? Chrome What operating system are you using? macOS Reproduction URL https://stackblitz.com/edit/react-tailwind-qds1vc?file=index.js Describe your issue While it's common to give `<button>`s `cursor: pointer;`, this is an anti-pattern. The CSS spec establishes that `cursor: pointer` indicates an element is a link. This article has some additional justification for this. I understand many users will want to override this behavior back to the common misuse of `cursor: pointer;`, but Tailwind should be correct by default.
Unverified for your environment
Select your OS to check compatibility.
1 Fix
Solution: Buttons have cursor: pointer by default, but should not for accessibility reasons
This is a fine stylistic choice but I think it's specifically bad for accessibility. I don't think the justification makes sense at all. All the buttons on the cited Microsoft article use `cursor:pointer`. (The article seems geared toward native app designers, not web UI norms) * All the buttons on Adam Silver's Medium article also use `cursor:pointer`. It's the regular, normal, expected be
Trust Score
8 verifications
- 1
This is a fine stylistic choice but I think it's specifically bad for accessibil
This is a fine stylistic choice but I think it's specifically bad for accessibility. I don't think the justification makes sense at all.
- 2
All the buttons on the cited Microsoft article use `cursor:pointer`.
(The article seems geared toward native app designers, not web UI norms) * All the buttons on Adam Silver's Medium article also use `cursor:pointer`.
- 3
It's the regular, normal, expected behaviour. Our alpha website just failed acce
It's the regular, normal, expected behaviour. Our alpha website just failed accessibility testing specifically because users thought our buttons were broken -- because they've stopped showing the "normal" interaction cursor. This is in the context of .gov.uk work where (for better or worse..) accessibility has become an obsession.
- 4
Don't expect this will change now it's in Tailwind 4. But I'll say that in our l
Don't expect this will change now it's in Tailwind 4. But I'll say that in our local context the accessibility argument points in exactly 180' the other direction. Here's the snippet for anyone backing it out:
Validation
Resolved in tailwindlabs/tailwindcss GitHub issue #8961. Community reactions: 56 upvotes.
Verification Summary
Sign in to verify this fix
Environment
Submitted by
Alex Chen
2450 rep