Friday, February 7, 2014
“Skip to content” is an essentials needs for blind users.
Last few months I am working on a project which is supporting to blind users who are using web pages using screen readers like JAWS. While I was doing my development I have overcome lot of issues which are new for me.
Today I will share something about it. A screen reader likes JAWS reads the page aloud. When the page started to read, it will read from the beginning and go all over the page. For instance if we have a lot of links in the top menu bar with sub links the screen reader will reads all for long time and navigating through keyboard is difficult to do all the pages.
To overcome this issue we must have an option to go directly to the content page, so users can directly pressing a key and able to read the content. This will make the users easy navigation to content. “Skip to content” can be applied to resolve this issue.
Beginnings of the page we can add “Skip to content” so users can use the keyboard and directly navigate to the body content.
Normally we are adding the text as invisible as shown below class.
#skip a, #skip a:hover, #skip a:visited{
position:absolute;
left:-10000px;
top:10px;
width: 1px;
height: 1px;
overflow:
hidden;
}
#skip a:active, #skip a:focus {
left:auto;
width:auto;
padding:5px 10px;
top:33px;
height: auto;
background:#eee;
font-size:1.2em;
}
Example usage of skip to content
<body>
<div id="skip"><a href="#main">Skip to content</a></div>
......
<div id="main">
<h1>Heading</h1>
<p>This is the body contents</p>
</div>
Some wording which you can use for “Skip to content”
Skip to content
Skip navigation
Skip navigation links
Skip to main content
Skip main navigation
Subscribe to:
Post Comments (Atom)
No comments:
Post a Comment