Menu
Given the code below, for a user navigating with a screen reader, will the myHyperlink.onclick JavaScript still execute when they follow that hyperlink, and cancel the event? My goal is for users navigating with a screen reader to navigate directly to http://www.google.com since they won't really see the image anyway.
<!DOCTYPE html>
<html>
<head>
<title>Accessibility?</title>
<script>
window.onload = function() {
var myHyperlink = document.getElementById("slider-nav");
myHyperlink.onclick = function() {
document.getElementById("about-google").style.display = "block";
return false;
};
};
</script>
</head>
<body>
<div id="main">
<a href="http://www.google.com" id="slider-nav">Google</a>
<div id="about-google" style="display:none;">
<a href="http://www.google.com">
<img src="https://www.google.com/images/srpr/logo3w.png" alt="Google logo" />
</a>
</div>
</div>
</body>
</html>
Code also available from JSFiddle.
For context, I'm trying to make a carousel/slider widget more screen-reader friendly.
825
There's no difference in browser behavior whether the link is activated by a sighted user with a mouse, a sighted user using a keyboard, or a screenreader using the keyboard. In all cases, your onclick handler is called, the logo is shown, and the navigation is cancelled. For keyboard users (whether sighted or not), keyboard focus will remain on the initial text link. Sighted users will see the new image appear, screenreader users won't hear anything and may be left wondering why apparently nothing happened.
You can try this yourself: download the free NVDA screenreader (make a donation if you find it useful), and try it against the page running in IE or Firefox (Chrome support for accessibility is lagging slightly, but is catching up.) For JSFiddle pages, it's often easier to work with the result in a stand-alone page rather than as a pane, and you can do this by pulling out the frame URL and pasting it into a new browser page - http://fiddle.jshell.net/DXUqr/show/ in your case. NVDA isn't the only screenreader out there, but it's as good as any to use for checking basic web accessibility.
(Generally speaking, it's not possible to determine whether a user is using a screenreader in the first place. Your best bet is to write good accessible HTML that works for all users.)
116
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
