Tabbing through links that are hidden on webpage (accessibility issue)
I have a web page with 3 links. 1 of the links is hidden by a parent div that has display:none. When I hover over another div however, the hidden div will be shown thereby revealing the link. How can I tab through all 3 links and get link 3 to display automatically when i tab to it?
<html>
<head>
<title>Skype Home</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<style>
a,.hoverMe{
display:block;
width:50px;
height:50px;
margin-bottom:10px;
background-color:#CCC;
}
.hoverMe{
background-color:pink;
width:100px;
height:50px;
}
.hiddenDiv{
visibility:hidden;
}
.hiddenDiv.shown{
visibility:visible;
}
</style>
<script>
$(document).ready(
function(){
$(".hoverMe").hover(
function(){
$(".hiddenDiv").addClass("shown");
},
function(){
$(".hiddenDiv").removeClass("shown");
}开发者_如何学编程
)
}
);
</script>
</head>
<body>
<a href="#1">Link 1</a>
<a href="#2">Link 2</a>
<div class="hoverMe">hover me to open Link 3</div>
<div class="hiddenDiv">
<a href="#3">Link 3</a>
</div>
</body>
</html>
Use JavaScript.
Add an onfocus and onblur handler to the anchor that toggle a class on the parent div. Edit your stylesheet to reveal it when the class is set.
Also add a flag to indicate JS is present, e.g.
<body>
<script type="text/javascript">
document.body.className += " js";
</script>
… and protect the rule that hides the div in the first place with body.js followed by a descendent selector (so non-JS users will still be able to access the content).
加载中,请稍侯......
精彩评论