Hi,
I am working on a html 5/css/jquery website which has to be WCAG 2.0 compliant. Encountered few issues when using voice over screen reader.
1. On iPhone and iPad - IOS 10 the page title <title>page title</title> is not read by the screen reader on page load.
2. On page load - first time load or the post-back - always the first html element with content gets the voice over focus and being read by the screen reader. Even if you try with jquery to give focus to specific field doesn't work.
3. Aria role alert doesn't work on page load or page post-back. But it works for client side events.
Please let me know if you guys have faced the same issues and if there are any fixes/hacks?
Regards,
Sandeep
Comments
IOS 10 Accessibility issues
Hello,
you mentioned that you are testing a website for WCAG 2.0 conformance. What is the website you are referring to and do you have a link to it, to have others verify the Voice Over issues you mentioned in your post?
There is no link to indicate what site it is that you are referring to and if so do you want people to email you their comments or verify them by posting below?
sample html5/jquery code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test title</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function (e) {
$('#signup').submit(function () {
$('#errorsClient').html('');
if ($('#first').val() === '') {
$('#errorsClient').append('<p>Please enter your first name.</p>');
}
if ($('#last').val() === '') {
$('#errorsClient').append('<p>Please enter your last name.</p>');
}
return false;
});
$("#errorsServer").html('');
$('#errorsServer').append('<p>Error on page load or post back.</p>');
});
</script>
</head>
<body>
<h1>Test heading</h1>
<div>
<p id="errorsServer" role="alert" aria-atomic="true"></p>
</div>
<div>
<p id="errorsClient" role="alert" aria-atomic="true"></p>
</div>
<form name="signup" id="signup" method="post" action="">
<div>
<label for="first">First Name (required)</label><br>
<input type="text" name="first" id="first">
</div>
<div>
<label for="last">Last Name (required)</label><br>
<input type="text" name="last" id="last">
</div>
<div>
<input type="submit" name="button" id="button" value="Submit">
</div>
</form>
</body>
</html>
Hello,
Hello,
Okay, you posted the code that you've been working on, but can you try to open the file in a browser and post the link? I think that's what Pyro2790 was referring to, not the code itself.