Skip to content

Commit b0e3b11

Browse files
joe-watkinsJoe Watkins
andauthored
Add Accessibility section to Readme (jquery-validation#2149)
* Add accessibility section to readme - speaks to errorElement * Add link to errorElement in doc Co-authored-by: Joe Watkins <info@joe-watkins.io>
1 parent 79bed39 commit b0e3b11

File tree

1 file changed

+21
-0
lines changed

1 file changed

+21
-0
lines changed

README.md

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -73,6 +73,27 @@ $("#myForm").validate({
7373
});
7474
```
7575

76+
## Accessibility
77+
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.
78+
79+
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.
80+
81+
`aria-describedby` is added to the input field and it is programmatically tied to the error element chosen in the `errorElement` parameter.
82+
83+
``` js
84+
$("#myform").validate({
85+
errorElement: "span"
86+
});
87+
```
88+
89+
``` html
90+
<label for="name">Name</label>
91+
<input id="name" aria-describedby="unique-id-here">
92+
<span class="error" id="unique-id-here">This field is required</span>
93+
```
94+
95+
[Learn more about errorElement](https://jqueryvalidation.org/validate/#errorelement)
96+
7697
## License
7798
Copyright &copy; Jörn Zaefferer<br>
7899
Licensed under the MIT license.

0 commit comments

Comments
 (0)