From b0e3b11324a542813adf9a93c432a31d818f7c80 Mon Sep 17 00:00:00 2001
From: Joe Watkins <joewatkinspdx@gmail.com>
Date: Tue, 18 Aug 2020 01:10:33 -0700
Subject: [PATCH] Add Accessibility section to Readme (#2149)

* Add accessibility section to readme - speaks to errorElement

* Add link to errorElement in doc

Co-authored-by: Joe Watkins <info@joe-watkins.io>
---
 README.md | 21 +++++++++++++++++++++
 1 file changed, 21 insertions(+)

diff --git a/README.md b/README.md
index f02786c1c..bf109300a 100644
--- a/README.md
+++ b/README.md
@@ -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.