Starting from a comment by @TheDJ on https://gerrit.wikimedia.org/r/#/c/237870/4 it seems reasonable to integrate a CSS class mixin for screen reader and keyboard-only users into core for usage in skins or by templaters.
Copying from T112308
CSS namespaces (example) have in my experience a great potential to speed up coding collaboration with disperse people and projects on front-end side.
Example of an applied stateful class.
HTML:
<a href="#navigation-main" class="lnk--skip" tabindex="0">Skip to navigation</a>
Less/CSS:
.mixin-screen-reader-text() { display: block; position: absolute !important; clip: rect( 1px, 1px, 1px, 1px ); width: 1px; height: 1px; margin: -1px; border: 0; padding: 0; overflow: hidden; &[tabindex="0"]:active, &[tabindex="0"]:focus { position: static !important; clip: auto; width: auto; height: auto; margin: 0; overflow: visible; } } /* Exemplified usage */ .lnk--skip { .mixin-screen-reader-text; }
including tabindex attribute is even more stateful.
See my CodePen for testing purposes.
Why tabindex="0": As stated in the MDN article "[a]n element with a 0 value, an invalid value, or no tabindex value should be placed after elements with a positive tabindex in the sequential keyboard navigation order."
So if for unknown reason we decide to put an element in some sub-template that should receive tabindex, we don't have to worry about with what value to start, as no positive tabindex is taken before. Therefore 0 seems the neutral and best way to include it in this environment/under these preconditions.
Update 2016-03-02: Due to the current RL architecture, using an @extend approach might result in de-duplication throughout modules. Therefore a mixin seems to be the best way at the moment.