Starting from a comment by @TheDJ on https://gerrit.wikimedia.org/r/#/c/237870/4 it seems reasonable to integrate a (stateful) CSS class 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="is-aural" tabindex="0">Skip to navigation</a>
```
Less/CSS:
```lang=css
.is-aural {
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 !important;
width: auto;
height: auto;
margin: 0;
text-decoration: underline;
overflow: visible;
}
}
```
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.