Visually Hidden utility plugin for tailwindcss framework

  • By webdna
  • Last update: Apr 21, 2022
  • Comments: 3

Visually Hidden Utility Tailwind Plugin

Overview

Hide only visually, but have it available for screen readers: https://snook.ca/archives/html_and_css/hiding-content-for-accessibility

For long content, line feeds are not interpreted as spaces and small width causes content to wrap 1 word per line: https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe

Installation

Add this plugin to your project:

# Install via npm
npm install --save-dev tailwindcss-visuallyhidden

Usage

You can add the plugin to your tailwind config as follows:

require('tailwindcss-visuallyhidden')()

This plugin outputs the following

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

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    clip-path: none;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
    white-space: inherit;
}

As per the tailwind plugin docs you are able to pass variants (responsive, hover etc) as a parameter.

require('tailwindcss-visuallyhidden')({
  variants: ['responsive', 'hover'],
})

Github

https://github.com/webdna/tailwindcss-visuallyhidden

Comments(3)

  • 1

    Add not-visuallyhidden class

    This allows for toggling whether an element is hidden or not responsively (e.g. should be hidden on mobile but visible on medium screens and upwards).

  • 2

    Fix inverted VoiceOver reading

    This PR fixes an issue in VoiceOver where link text is read backwards. See example below.

    <a href="/stories/my-amazing-story">
  Read More
  <span class="visuallyhidden">About My Amazing Story</span>
</a>

    VO Reading (before fix): About My Amazing Story Read More VO Reading (after fix): Read More About My Amazing Story

    References: https://github.com/h5bp/main.css/issues/12 https://gist.github.com/nickcolley/19b80ed24d0364cfd3afd3b1b49c4014

  • 3

    Suggestion: use Tailwind's focus variant instead of a .focusable class

    <!-- Instead of this... -->
<p class="visuallyhidden focusable">I'm visible on focus!</p>

<!-- Maybe this? -->
<p class="visuallyhidden focus:not-visuallyhidden">I'm visible on focus!</p>

    Couple reasons:

    • More consistent with Tailwind's built-in utilities
    • Some projects might not need any visuallyhidden elements to become visible on focus
    • Responsive variants could switch between visuallyhidden and not-visuallyhidden:
    <p class="visuallyhidden lg:not-visuallyhidden">
On mobile, I'm visually hidden. On larger screens, I'm visible.
</p>

Popular Tag

Related