Inspired by my regular webdev work, i've got some screenreader-only elements on this site! What that means, is that there are bits of this site that most users can't see, only those that are using screen readers (although in my case most of those elements are also visible when focused). This is a super useful (and simple!) technique to give screenreader users more options for navigation, like a 'skip to content' button to skip past the repetitive header on every page.

 There are several ways to implement screenreader-only (or sr-only for short) elements on the web. The method i use is the same one the Tailwind CSS library uses. It looks like this:

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

 This pretty much just makes the element super tiny, too tiny to even be rendered. That way, it's not visible, but it's still content on the page so screenreaders can see it.

 Most of the time, i don't actually fully hide these elements from non-SR users. I often have them visible when focused, which is what it's called when an element has that lil box around it (usually from being selected with Tab) By doing it this way, anyone trying to navigate my website with their keyboard can get around quickly and see the extra tools i've given them to do so. It's super easy to add this bit, it looks like this:

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

 All that's changed is the selector. It's now targeting the .focus-only class, and only when not focused. That's it.

 As always, you (yes you! and anyone else!) are free to copy, modify, share, and distribute this as you please, with or without attribution. For more information, refer back to the playground home.