Custom Form Accessibility

(Lewis) #1

Is there a way to have form submission errors appear immediately above their associated form field on a multipage custom form?

In Squiz’s tutorial, it suggested using the %current_page_contents% keyword to render the questions dynamically for each page of the form, unfortunately this seems to mean that it’s impossible to place form field errors (from a form submission) above their related fields.

I want to be able to do something like this, but on a multi page form:

<div class="sq-form-question sq-form-question-text sq-form-question-error" id="sq_form_field_wrapper_q371218_q1">
  <label class="sq-form-question-title" for="q371218_q1">Name <abbr class="sq-form-required-field" title="required">*</abbr></label>
  <p id="error_371218_q1" class="sq-form-error">Please enter your name</p>
  <div class="sq-form-question-answer">
    <input type="text" name="q371218:q1" value="" size="30" maxlength="50" id="q371218_q1" class="sq-form-field">
  </div>  
</div>

At present, on a multipage form, the error messages appear below the associated form field. I’d also like to add ‘for’ and ‘aria’ attributes where appropriate to help screen readers understand the form better.

Is this possible on version 5.5.3.3 of Squiz Matrix?

(Lewis) #2

I have been able to progress this slightly, however there appears to be two identical custom form keyword replacements in Squiz’s manual. The keyword replacement is %question_label_<parent_id>_<question_id>% but the description appears in two places on the page. The second version is intended to simply output the raw text of the question’s label? If so, this would be helpful because it means I can wrap the raw text in a custom attribute:

<label for="email-address">%question_label_123456_q1%</label>

I can’t seem to get this to work though. Is there an error in the manual? should this ‘raw’ keyword actually be something like %question_label_raw_123455_q1%?

(Lewis) #3

I actually just discovered %question_name_371255_q1% which does what I’m guessing %question_label_123456_q1% is supposed to do (at least the section version above).

%question_name_371255_q1% means that I can markup the form clearer for accessibility:

<label for="email-address">%question_name_371255_q1%</label>
%question_field_371255_q1%

… adding an id of ‘email-address’ in the field’s settings.

(Iain Simmons) #4

There’s also an id keyword (if you didn’t want to have to configure each question):

<label for="%question_id_371255_q1%">%question_name_371255_q1%</label>
%question_field_371255_q1%

And if you want to get the error message for a particular field (if it exists):

%question_error_371255_q1^tagif:div class="error"%
(Lewis) #5

Hi @isimmons. Thanks for taking the time to reply! This is a great, I’ll take a look.