Skip to content

Commit

Permalink
Add Accessibility section to Readme (#2149)
Browse files Browse the repository at this point in the history
* Add accessibility section to readme - speaks to errorElement

* Add link to errorElement in doc

Co-authored-by: Joe Watkins <info@joe-watkins.io>
  • Loading branch information
joe-watkins and Joe Watkins committed Aug 18, 2020
1 parent 79bed39 commit b0e3b11
Showing 1 changed file with 21 additions and 0 deletions.
21 changes: 21 additions & 0 deletions README.md
Expand Up @@ -73,6 +73,27 @@ $("#myForm").validate({
});
```

## Accessibility
For an invalid field, the default output for the jQuery Validation Plugin is an error message in a `<label>` element. This results in two `<label>` elements pointing to a single input field using the `for` attribute. While this is valid HTML, it has inconsistent support across screen readers.

For greater screen reader support in your form's validation, use the `errorElement` parameter in the `validate()` method. This option outputs the error in an element of your choice and automatically adds ARIA attributes to the HTML that help with screen reader support.

`aria-describedby` is added to the input field and it is programmatically tied to the error element chosen in the `errorElement` parameter.

``` js
$("#myform").validate({
errorElement: "span"
});
```

``` html
<label for="name">Name</label>
<input id="name" aria-describedby="unique-id-here">
<span class="error" id="unique-id-here">This field is required</span>
```

[Learn more about errorElement](https://jqueryvalidation.org/validate/#errorelement)

## License
Copyright &copy; Jörn Zaefferer<br>
Licensed under the MIT license.

0 comments on commit b0e3b11

Please sign in to comment.