JavaScript function not called when using VoiceOver
I have created and tested a webpage that includes full support for screen readers. It works fine with VoiceOver for Mac, but when I tried VoiceOver for iOS I found the problem. When I double click to invoke the link, the event listener is click
not called. Instead, the VO just echoes the aria-label
one I gave it and after that it doesn't declare "button". It works when I turn VoiceOver off by just clicking on it. The link is meant to behave like a button and not navigate to another web page. Is this a VoiceOver bug or is there a problem with my markup or code?
document.addEventListener('DOMContentLoaded', function() {
document.getElementById('link').addEventListener('click', triggerFunction);
});
function triggerFunction() {
alert('testing');
}
<a id="link" href="javascript:void(0);" role="button" aria-label="My Trigger">Trigger Function</a>
source to share
There is clearly no mouse for iOS, so you can't click
, but what you can do is listen to the event touch
.
document.addEventListener('DOMContentLoaded', function() {
document.getElementById('link').addEventListener('click', triggerFunction);
document.getElementById('link').addEventListener('touchstart', triggerFunction);
});
Is your link element nested within another element? Sometimes the VoiceOver click event will act on them instead, rather than flowing into nested items.
So, for example, if your html looks like this:
<li id="parent">
<div id="link" onclick="myFunction()">
</div>
</li>
then try to move the click handler up to the parent.
source to share