Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add Accessibility section to Readme #2149

Merged
merged 2 commits into from Aug 18, 2020
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
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.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

maybe we should mention a example on how this "bad html" looks like

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.