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 ([[ http://csswizardry.com/2015/03/more-transparent-ui-code-with-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:
```lang=html
<a href="#navigation-main" class="lnk--skip" tabindex="0">Skip to navigation</a>
```
Less/CSS:
```lang=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 [[ http://codepen.io/Volker_E/pen/JYYeGv?editors=110 | 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.