Raven Forms and Accessibility

First off, I love Raven and Statamic! I'm building a template site to use for my own projects and Accessibility is important. That said, Raven's handling of errors needs some work. Here are some features that'd be great to have in order to ensure Raven is accessible:

  1. Ability to have a single anchor to the first invalid field within the error message . This would allow a screen reader user to anchor to the first field without having to read all the invalid messages (see below). a. Would be great to choose this type of config either in the {{ raven:... }}tag or YAML.

    <!-- Single error message container: markup doesn't matter, only the message printed --> 
    <div aria-live="assertive">
       <p><a href="#idOfFirstInvalidOrMissingField">There were problems with your submission...</a></p>
  2. Conditional Tags available to mark an individual invalid/missing field with a css class or more importantly an aria-invalid attribute a. In addition to marking fields, the ability to output error messages inline with the field would allow a great degree of customisation.

    <!-- If/else tag:  -->
    <label for="name" class="Label">
        <span class="Label-text">Name:</span>
        <input type="text" name="name" id="name" 
            class="{{ if invalid }}field--invalid{{ /endif }}" 
            {{ if invalid }} aria-invalid="true" {{ /endif }} />
        <p>{{ invalid:message }}</p>

    If any of this is already possible please provide some direction. Otherwise, it'd be great to see some traction on this.


>>>>>>> Unanswered <<<<<<<
7 Replies