Improved .sr-only

improved-sr-only.markdown

Improved .visually-hidden

Theorically bulletproof CSS class for visually hide anything and keep it accessible to ATs.

A Pen by ffoodd on CodePen.

License.

index.html

<button type="button">
	<span aria-hidden="true">&times;</span>
	<span class="visually-hidden">Close</span>
</button>

<a href="/" class="visually-hidden-focusable">Skippy</a>

<div dir="rtl">
	<button type="button">
		<span aria-hidden="true">&times;</span>
		<span class="visually-hidden">Close</span>
	</button>

	<a href="ffoodd.fr" class="visually-hidden-focusable">ffoodd.fr</a>
</div>

style.css

/*
	Improved screen reader only CSS class
	@author Gaël Poupard
		@note Based on Yahoo!'s technique
		@author Thierry Koblentz
		@see https://www.cssmojo.com/hide-content-from-sighted-users/
	* 1.
		@note Use to only display content when it's focused, or one of its child elements is focused
		@see http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1
		@note Based on a HTML5 Boilerplate technique, included in Bootstrap
	* 2.
		@note `clip-path` shortest syntax
		@author Yvain Liechti
		@see https://twitter.com/ryuran78/status/778943389819604992
	* 3.
		@note preventing text to be condensed
		author J. Renée Beach
		@see https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
		@note Drupal 8 goes with word-wrap: normal instead
		@see https://www.drupal.org/node/2045151
		@see http://cgit.drupalcode.org/drupal/commit/?id=5b847ea
	* 4.
		@note !important is important
		@note Obviously you wanna hide something
		@author Harry Roberts
		@see https://csswizardry.com/2016/05/the-importance-of-important/
*/

.visually-hidden,
.visually-hidden-focusable:not(:focus, :focus-within) {
	border: 0 !important;
	clip-path: inset(50%) !important; /* 2 */
	height: 1px !important;
	margin: -1px !important;
	overflow: hidden !important;
	padding: 0 !important;
	width: 1px !important;
	white-space: nowrap !important; /* 3 */
}

/*
	Prevent visually hidden caption from breaking table's collapsing borders
	@author Louis-Maxime Piton
	@see https://github.com/twbs/bootstrap/pull/37533
*/
.visually-hidden:not(caption),
.visually-hidden-focusable:not(caption):not(:focus, :focus-within) {
	position: absolute !important;
}


/*
	Prevent overflowing children from being focusable.
	@author Django Janny
	@see https://github.com/twbs/bootstrap/pull/41286
*/
.visually-hidden *,
.visually-hidden-focusable:not(:focus, :focus-within) * {
	overflow: hidden !important;
}

I came to the same conclusion. Thanks !