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?