VoiceOver doesn't read the text inside window.alert in Chrome
Question
The following code snippet shows a window.alert if the user is using IE11 or lower versions:
function isIE() {
// If IE11 or bellow return true
return window.navigator.userAgent.match(/(MSIE|Trident)/);
}
if (!isIE()) {
window.alert("Your browser is outdated!");
}
It works, however, the window.alert should be accessible so that the screen reader should read the text inside the window.alert , which is "Your browser is outdated!".
I'm testing this on a MacBook with Apple VoiceOver.
It works in FireFox and the VoiceOver reads the text inside the window.alert.
But if I run the exact same test in Chrome, the VoiceOver doesn't read the text inside the window.alert .
Any help?
2 answers
solution1
3 2019-07-14 19:54:37
As alternative to it, you can use aria-live regions.
MDN: ( https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions ).
DEMO: ( https://support.freedomscientific.com/Training/Surfs-Up/AriaLiveRegions.htm ).
solution2
0 2020-04-30 08:40:40
Unfortunately, VoiceOver and Chrome, similar to firefox have a problem with reading alerts. I try to resolve them in many ways, bat none of one wont to work... Here are some examples:
This works correctly, but here I use focus(), so the user who uses the screen reader will lost his focus. Because of this it is completely wrong way...Not recommended method with focus()
The correct way ishere , but unfortunately didn't work with CHROME and FF when screen reader VoiceOver read content added to alert field
<html>
<head>
<title>Assertive test 3</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
</style>
</head>
<body>
<div>
<p>Click submit button to see message</p>
<p>
<input type="submit" name="button" id="button" value="Submit">
</p>
</div>
<div id="errors" aria-live="assertive">
<div id="divBlok" role="alert">
</div>
</div>
<script src="http://code.jquery.com/jquery.js"></script>
<script>
var elementX = document.getElementById("divBlok");
var alertText = document.createTextNode("Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.");
$("#button").click(function (e) {
elementX.appendChild(alertText);
});
</script>
</body>
</html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.