Open main menu

Difference between revisions of "Template:Screen reader-only/styles.css"

(note directly)
 
m (1 revision imported)
 

Latest revision as of 17:17, 15 December 2020

/* {{pp-template}}

This implementation is from
https://cloudfour.com/thinks/see-no-evil-hidden-content-and-accessibility/#showing-additional-content-for-screen-readers
which is a slight tweak from https://accessibility.18f.gov/hidden-content/ .
https://webaim.org/techniques/css/invisiblecontent/#techniques
has slightly different CSS clip, rect (1px) for all dimensions.

WARNING:

Template:Frac and friends use this styles.css page and class directly rather
than going through the template.

*/
/* We retain .sr-only as the class name because it's used by the outside world. */
.sr-only {
	border: 0;
	clip: rect(0, 0, 0, 0); /* Removed from CSS specification */
	/* clip-path is the replacement for clip, but very few browsers support it.
	TemplateStyles also doesn't currently support the property. */
	/* clip-path: polygon(0px 0px, 0px 0px, 0px 0px); */
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	white-space: nowrap;
}