Like classes, vee-validate offers useful accessability tools to make it easier for everyone to use your forms.



The ValidationProvider slot props expose an ariaInput object which you can bind to your inputs:

The contents of the ariaInput object are:
  "aria-invalid": "false",
  "aria-required": "true",
  "aria-errormessage": "vee__vee_34"



  <ValidationProvider rules="required" v-slot="{ ariaInput }">
    <input type="text" v-model="value" v-bind="aria" />
    <pre>{{ ariaInput }}</pre>

input.invalid {
  border: solid 1px red;

input.valid {
  border: solid 1px green;


ariaMsg is another set of aria attributes, but you bind it to your error display element. A full example would look like this:

The ariaMsg object contains the following properties:

  "id": "vee__vee_35",
  "aria-live": "off"
<ValidationProvider rules="required" v-slot="{ errors, ariaInput, ariaMsg }">
    <input type="text" v-model="values.classes" v-bind="ariaInput">
    <pre>{{ ariaInput }}</pre>
    <span v-bind="ariaMsg">{{ errors[0] }}</span>

Ideally you should use both ariaInput and ariaMsg. The aria-errormessage is an id that references the element that displays the error message, which combined with the ariaMsg slot prop bindings you can have a wai-aria 1.1 compatible validation. The id is automatically generated for you so you don't have to bother with such details.