.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0); /* IE 6/7 */
clip: rect(0,0,0,0); // deprecated
clip-path: rect(0,0,0,0); // not fully supported
border: 0;
white-space: nowrap;
}
/**
* Makes elements visually invisible but still accessible to screen-readers.
*
* This Css has been carefully tested to ensure screen-readers can read and
* activate (in case of links and buttons) the elements with this class. Please
* use caution when changing anything, even seemingly safe ones. For example
* changing width from 1 to 0 would prevent TalkBack from activating (clicking)
* buttons despite TalkBack reading them just fine. This is because
* element needs to have a defined size and be on viewport otherwise TalkBack
* does not allow activation of buttons.
*/
.i-amphtml-screen-reader {
position: fixed !important;
/* keep it on viewport */
top: 0px !important;
left: 0px !important;
/* give it non-zero size, VoiceOver on Safari requires at least 2 pixels
before allowing buttons to be activated. */
width: 4px !important;
height: 4px !important;
/* visually hide it with overflow and opacity */
opacity: 0 !important;
overflow: hidden !important;
/* remove any margin or padding */
border: none !important;
margin: 0 !important;
padding: 0 !important;
/* ensure no other style sets display to none */
display: block !important;
visibility: visible !important;
}
.i-amphtml-screen-reader ~ .i-amphtml-screen-reader {
left: 8px !important;
}
.i-amphtml-screen-reader ~ .i-amphtml-screen-reader ~ .i-amphtml-screen-reader {
left: 12px !important;
}
.i-amphtml-screen-reader ~ .i-amphtml-screen-reader ~ .i-amphtml-screen-reader ~ .i-amphtml-screen-reader {
left: 16px !important;
}
https://github.com/ampproject/amphtml/blob/9dff4cc0/css/ampshared.css#L155-L195