Accessibility

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

Aria-Attributes

ariaInput

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_4"
}


 



 










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

<style>
input.invalid {
  border: solid 1px red;
}

input.valid {
  border: solid 1px green;
}
</style>

ariaMsg

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_5",
  "aria-live": "off"
}
<ValidationProvider rules="required" v-slot="{ errors, ariaInput, ariaMsg }">
  <div>
    <input type="text" v-model="values.classes" v-bind="ariaInput">
    <pre>{{ ariaInput }}</pre>
    <span v-bind="ariaMsg">{{ errors[0] }}</span>
  </div>
</ValidationProvider>

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.