在“ <input> 无法访问。 是否有一种简单的方法使其可访问（JS），还是我必须放弃它？

Question

My form has several input fields (email, first name, last name, etc.) that all use the "required" property.

<input required></input>

This causes a nice universal error message to display in each browser, and lets the browser validate the inputs for me.

However, according to Accessible360, screen readers can't read those error messages.

Is there a way to fix this that doesn't involve adding a bunch of extra tags, attributes, aria attributes, text, and Javascript? Maybe just a little Javascript that will convert those in-browser errors into alerts? I'm trying to keep my code clean.

Thanks, I appreciate your help.

Answer 1

The problem is not the presence of the required attribute which should be encouraged. Back in 2012, Using the required attribute to indicate a required input field has been added a note about screenreader support. That was 7 years ago, and now the support is good with recent screenreaders.

Now the problem is that you must have a visual indication about required fields: H90: Indicating required form controls using label or legend and that you must indicate fields with errors G83: Providing text descriptions to identify required fields that were not completed

The Paciello group has a good up-to-date page about that subject : Required attribute requirements which provide more informations about screenreader / browser support (" with the exception of using TalkBack with Firefox and Chrome on Android. ") and using aria-invalid or aria-describedby if a field has errors.

Answer 2

I imagine you can use jQuery to dynamically add the tags you need to all inputs with required. For the required before HTML5 I think it's aria-required...

$(':input[required]').prop('aria-required',true);

According to Mozilla with aria-required screen readers should announce the field as required.

For an alert you can have a script checking if all required inputs have a value onSubmit.