Nesting forms in a standard page not recommended – issue with accessibility


(Aska Smietanska) #1

Matrix Version: 5.4.7.0 @Bart
WAI says:

Provide instructions that apply to the entire form before the element to ensure that it is read aloud by screen readers before they switch to “Forms Mode”. Screen readers often switch to “Forms Mode” when they are processing content within a <form> element. In this mode they usually only read aloud form elements such as <input>, <select>, <textarea>, <legend>, and <label>. It is critical to include form instructions in ways that can be read aloud.

Everything what we enter into a form’s Page Content element (Bodycopies) is within <form></form>. Sometimes, there is a need to provide an instruction that applies to the entire form, so it should be displayed and read before people start to fill in the form. Also, sometimes there is a need to provide a text (e.g. with information about what to do next) after the form. If we use Page Content for it, this text may be not accessible for screen readers as it is within <form></form>.

I can see the following solutions:

  • Nest a form into a standard page (not recommended because of the caching issues)
  • Create a visually hidden checkbox and use aria-describedby to associate the instruction
  • Create a separate design or pain layout for each form with the instruction embedded
  • Create a dynamic paint-layout with the placeholders for the text before and after the form

I am not really familiar with the content templates. Would it be a good solution to use a content template for this reason?

What would be your advice? Maybe the perfect solution is already there?


(Aska Smietanska) #2

Hi, could someone answer my concerns, please? I believe that it would be beneficial to everyone who uses Matrix to create a form.
@Bart @JohnGill


(Nick Papadatos) #3

Hi Aska,

I can answer your first dot point.
I have nested forms in the past without any issues although I try not to make a habit of it but in the form contents > advanced setting > set this to : This page’s own URL. So when you submit the form you end up back on the form.

Cheers
Nick


(Aska Smietanska) #4

@NickyP
Hi Nick,
thank you very much. This would solve the accessibility issue. I expect that we will have plenty of forms like that.

Cheers, Aska