Comments (6)
While
aria-disabled
does indeed not prevent you from clicking the button itself, it's important to understand whyaria-disabled
is used to begin with. There's a great article on CSS Tricks about it that's worth a read https://css-tricks.com/making-disabled-buttons-more-inclusive/.@jenewland1999 Thank you for the additional information.
In my opinion,
disabled
seems more appropriate thanaria-disabled
for common examples.The
aria-***
attributes will inform people using assistive technologies, such as screen readers, that such elements are not meant to be editable or otherwise operable.Unlike HTML's disabled Boolean attribute, which will communicate a form control as semantically being disabled, change its styling to reflect its state and suppress all functionality along with disallowing the element's value from participating in form submission, the aria-disabled="true" only semantically exposes these elements as being disabled. Web developers must manually ensure such elements have their functionality suppressed when exposed to the disabled state.
I don't disagree that the disabled
attribute is more common/familiar and likely easier for the examples because it gives intended behaviour. That said the follow up comments on PR #63852 suggest the intention might be purposefully to promote more accessible examples/docs.
That said it is a bit of a grey area.
from next.js.
While
aria-disabled
does indeed not prevent you from clicking the button itself, it's important to understand whyaria-disabled
is used to begin with. There's a great article on CSS Tricks about it that's worth a read https://css-tricks.com/making-disabled-buttons-more-inclusive/.@jenewland1999 Thank you for the additional information.
In my opinion,
disabled
seems more appropriate thanaria-disabled
for common examples.The
aria-***
attributes will inform people using assistive technologies, such as screen readers, that such elements are not meant to be editable or otherwise operable.Unlike HTML's disabled Boolean attribute, which will communicate a form control as semantically being disabled, change its styling to reflect its state and suppress all functionality along with disallowing the element's value from participating in form submission, the aria-disabled="true" only semantically exposes these elements as being disabled. Web developers must manually ensure such elements have their functionality suppressed when exposed to the disabled state.
I don't disagree that the
disabled
attribute is more common/familiar and likely easier for the examples because it gives intended behaviour. That said the follow up comments on PR #63852 suggest the intention might be purposefully to promote more accessible examples/docs.That said it is a bit of a grey area.
The suggestion in that pr also looks good. I will change and update soon
from next.js.
I fixed it and PR. #63888
from next.js.
While aria-disabled
does indeed not prevent you from clicking the button itself, it's important to understand why aria-disabled
is used to begin with. There's a great article on CSS Tricks about it that's worth a read https://css-tricks.com/making-disabled-buttons-more-inclusive/.
from next.js.
While
aria-disabled
does indeed not prevent you from clicking the button itself, it's important to understand whyaria-disabled
is used to begin with. There's a great article on CSS Tricks about it that's worth a read https://css-tricks.com/making-disabled-buttons-more-inclusive/.
@jenewland1999 Thank you for the additional information.
In my opinion, disabled
seems more appropriate than aria-disabled
for common examples.
The aria-***
attributes will inform people using assistive technologies, such as screen readers, that such elements are not meant to be editable or otherwise operable.
Unlike HTML's disabled Boolean attribute, which will communicate a form control as semantically being disabled, change its styling to reflect its state and suppress all functionality along with disallowing the element's value from participating in form submission, the aria-disabled="true" only semantically exposes these elements as being disabled. Web developers must manually ensure such elements have their functionality suppressed when exposed to the disabled state.
from next.js.
This closed issue has been automatically locked because it had no new activity for 2 weeks. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.
from next.js.
Related Issues (20)
- sendGTMEvent doesn't work before GoogleTagMananger is initialised HOT 1
- Production Build failing when localFont function used with error 'An error occurred in `next/font`.' HOT 1
- HMR doesn't work in server component with <Link> or/and <Image> when css.module is imported. HOT 11
- Modal stays there even when navigating away HOT 2
- Docker standalone build is not working when adding layout to /app path HOT 4
- Next.js project in an npm workspace has broken standalone build
- devIndicators `buildActivityPosition` option doesn't work HOT 3
- Rewrites are in conflict with i18n HOT 3
- Build fails when calling `after` in server action HOT 2
- Instrumentation files not included in standalone output HOT 2
- NextJS /app router waits for server response before showing 'loading.tsx' HOT 3
- Scroll restoration does not work with pages router. HOT 5
- Incorrect typing of `ProcessEnv` HOT 1
- eslint-plugin-next → fast-glob only matching files HOT 8
- Strange multi-zone pattern(奇怪的多区域模式) HOT 3
- node:buffer error HOT 2
- Docker example does not work HOT 2
- Problem with tailwindcss HOT 3
- Cannot deploy my next.js app to vercel HOT 2
- [TurboPack] No Media Queries breakpoints in Chrome Device Emulation mode HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from next.js.