-
Notifications
You must be signed in to change notification settings - Fork 4.3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Feature Request: Invisible Content for Screen Reader Users #189
Comments
Hey @neilmispelaar thanks for bringing this up, we definitely want to add this and have plans for a dedicated accessibility module where we can keep these sorts of utilities. I'll keep this open until we have something in! |
Yay! Looking forward to the addition into the project. On a side note: The article below recommends a slightly different approach:
Source: |
That's also not the best way to do it since clip has been deprecated and it still has some accessibility issues with some screen readers (https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe). Taken from html5-boilerplate, this should be a better approach to accomplish the same in a very similar manner.
|
💯 for an screen-reader only text utility, and I would also recommend following the html5bp approach, which has been thoroughly tested recently: https://github.com/h5bp/html5-boilerplate/issues/1985 |
+1 for this. For now I've created a class .sr-only and using that... but would be nice to have it built in to tailwind. |
There is a great plugin for this: https://github.com/jack-pallot/tailwindcss-accessibility |
Is there any news on this? |
Nothing yet but in the mean time you can use the plugin linked above or follow the documentation to add any custom classes you want. |
Thanks for the quick reply @adamwathan . However, I couldn't get the 'tailwindcss-accessibility' plugin to work.
|
Relevant link just in case anyone wants to update their plugins and config files: https://zellwk.com/blog/hide-content-accessibly/ |
lol jeez what a nightmare. |
ANOTHER ONE (DJ Khaled's voice): whatwg/html#4623 |
Added classes for this in #964, will be out in v1.1. |
Fix typo in docs about apply removing important
Hello,
I would like to submit the following feature proposal for Tailwind: Invisible Content for Screen Reader Users. It's hugely helpful when building websites that have to meet WCAG 2.0 compliance.
WEBAim recommends the following:
More information about Invisible Content from WEBAim:
https://webaim.org/techniques/css/invisiblecontent/
Admittedly, this may exist already and I missed it, or perhaps this goes against the utility first approach, but I just wanted to throw it out there.
Thank you.
NM
The text was updated successfully, but these errors were encountered: