averello/jquery-validation-mirror
1
0
Fork 0
mirror of https://github.com/jquery-validation/jquery-validation.git synced 2025-12-14 20:35:47 +01:00
Code Issues Packages Projects Releases Wiki Activity

Add Accessibility section to Readme (#2149)

Browse Source 
* Add accessibility section to readme - speaks to errorElement

* Add link to errorElement in doc

Co-authored-by: Joe Watkins <info@joe-watkins.io>
This commit is contained in:
Joe Watkins
2020-08-18 01:10:33 -07:00
committed by GitHub
parent 79bed393e6
commit b0e3b11324
1 changed files with 21 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
README.md
View File

@@ -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.