April 12, 2020
Estimated Post Reading Time ~ < 1 Min

Adding accessibility 'skip to' links

<div id="accessibility">
<a href="#skiptonavigation" accesskey="n">Skip to navigation</a>
<a href="#skiptocontent" accesskey="c">Skip to content</a>
</div>

<a name="skiptocontent"></a>

#accessibility {display: absolute; }
#accessibility a
{
position:absolute;
left:-10000px;
top:auto;
width:1px;
height:1px;
overflow:hidden;
}
#accessibility a:focus
{
position:static;
width:auto;
height:auto;
}

Reference: http://webaim.org/techniques/css/invisiblecontent/
aem4beginner.blogspot


By aem4beginner

No comments:

Post a Comment

If you have any doubts or questions, please let us know.

Ad Blocker Detected :(

Please consider supporting us by disabling your ad blocker.

Please Disable your adblocker and Refresh the page to view the site content.