Feature Request: Invisible Content for Screen Reader Users

[neilmispelaar]

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:

.hidden-text 
{
position:absolute;
left:-10000px;
top:auto;
width:1px;
height:1px;
overflow:hidden;
} 

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

[adamwathan]

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!

[neilmispelaar]

Yay! Looking forward to the addition into the project.

On a side note:

The article below recommends a slightly different approach:

.element-invisible {
  position: absolute !important;
  height: 1px; width: 1px; 
  overflow: hidden;
  clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
  clip: rect(1px, 1px, 1px, 1px);
}

Source: https://snook.ca/archives/html_and_css/hiding-content-for-accessibility

[hacknug]

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.

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    -webkit-clip-path: inset(50%);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    white-space: nowrap;
}

[nternetinspired]

💯 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

[CreateSean]

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

[benface]

There is a great plugin for this: https://github.com/jack-pallot/tailwindcss-accessibility

[adrianparr]

Is there any news on this?

[adamwathan]

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.

[adrianparr]

Thanks for the quick reply @adamwathan . However, I couldn't get the 'tailwindcss-accessibility' plugin to work. I tried doing the following after installing with npm ...

// tailwind.config.js

module.exports = {

  // Other stuff here

  plugins: [
    require('tailwindcss-accessibility')
  ]
}

[hacknug]

Relevant link just in case anyone wants to update their plugins and config files: https://zellwk.com/blog/hide-content-accessibly/

[adamwathan]

lol jeez what a nightmare. display: screen-reader; please.

[hacknug]

ANOTHER ONE (DJ Khaled's voice): https://github.com/whatwg/html/issues/4623

[adamwathan]

Added classes for this in #964, will be out in v1.1.