30-seconds-of-code/offscreen.md at 11eff23e47b0cf8b0af706090127ebf3685ace3f

Files

atomiks 11eff23e47 Autoscoping (#103 )

* Add autoscoping with generated demo

* Remove manual demo from all snippets

* Add JavaScript inside IIFE

* Align mouse-cursor-gradient-tracking.md to demo code

* Match snippets to demo

* Update CONTRIBUTING.md

* Create reusable function for code extraction

2018-10-05 09:18:51 +10:00

1.4 KiB

Raw Blame History

Offscreen

A bulletproof way to completely hide an element visually and positionally in the DOM while still allowing it to be accessed by JavaScript and readable by screen readers. This method is very useful for accessibility (ADA) development when more context is needed for visually-impaired users. As an alternative to display: none which is not readable by screen readers or visibility: hidden which takes up physical space in the DOM.

HTML

<a class="button" href="http://pantswebsite.com">
  Learn More
  <span class="offscreen"> about pants</span>
</a>

CSS

.offscreen {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

Demo

Explanation

Remove all borders.
Use clip to indicate that no part of the element should be shown.
Make the height and width of the element 1px.
Negate the elements height and width using margin: -1px.
Hide the element's overflow.
Remove all padding.
Position the element absolutely so that it does not take up space in the DOM.

Browser support

✅ No caveats.

(Although clip technically has been depreciated, the newer clip-path currently has very limited browser support.)

https://caniuse.com/#search=clip

1.4 KiB Raw Blame History