0

I'm trying to work on a simple accessible form. It has a field for the user to input their full name.

<form onsubmit="validate()">
  <label for="full-name">
    <p>Full name</p>
    <input type="text" id="full-name" required aria-describedby="full-name-error">
    <em id="full-name-error" class="error">Enter your full name</em>
  </label>
  <button type="submit">Submit</button>
</form>

<script>
function validate() {
  var $label = $('label');
  var $input = $('#full-name');

  if ($input.val().length === 0) {
    $label.addClass('has-error');
    $input.attr('aria-invalid', true);
    $input.focus();
  }
}
</script>

<style>
.error {
  display: none;
}

.has-error .error {
  display: block;
}
</style>

Something seems to go wrong w/ VoiceOver on iOS with this code when I manually test it. The focus does move to the full name input but VoiceOver's announcement of "Invalid data" interrupts the error message, except sometimes it doesn't and actually works like it's supposed to? It's very strange. It will announce something like Enter yo— Invalid data., so the message is definitely getting interrupted. In other instances, it announces the entire message. I've tried programmatically setting the aria-describedby w/ JS and using aria-live on the em instead but I'm getting the same problem. Not sure if I'm doing something wrong or whether this is peculiar to VO.

Jack
  • 31
  • 1
  • Have you tried with aria-errormessage instead of aria-describedby ? – QuentinC Dec 21 '22 at 20:15
  • There are quite some cross-references here that might mess up things. Two independent techniques are used to provide an accessible name: Wrapping the text together with the input _and_ using the `for` attribute. Then, the description is referenced as an ARIA description via `aria-describedby`, but also included in the label, ergo in the accessible name. Can you try to a) remove the `for` attribute and b) put the description outside the label? – Andy Jan 16 '23 at 15:36

0 Answers0