[a11y] Issue 37: Unclear reading order in "Writing Comments" section

[kk-slider18]

Description:
"The reading order of the ""Writing Comments"" section is difficult to follow. A full review of reading order and focus behavior is needed.

eg.

1. The page lacks a proper <h2> heading for ""Tips for Writing Statements,"" yet the screen reader reads it in an unexpected order.
2. When focusing on the text field, the screen reader first reads a long list of previously unread content before announcing the label and input field type."

Component/Area: Open Participation Page

Source: Screen Reader

Affected Elements: "Writing Comments" section

[Natasha1110]

This may be caused by DOM order. Screen readers follow the structure of your HTML (DOM), to determine the reading order. So, we may start there and make sure that these elements are in the visual order being seen on screen.

[YumiChen]

Was checking this page: https://civictech-polis.azurewebsites.net/8rspm4mzbb?ui_lang=en

1. The only h2 tag on this page is currently invisible, but it would be read by the screen reader:
   

   polis/client-participation/js/templates/comment-form.handlebars

   Line 56 in 94e1362

   <h2>{{s.commentWritingTipsHintsHeader}}</h2>

Probably we can see if we want to have other texts in this page as h2/ headings of sections

The texts that are currently being read when the text field is focused:

The texts read are not visible in the page, but still would be read by the screen reader:

polis/client-participation/js/templates/comment-form.handlebars

Lines 55 to 62 in 94e1362

	<div class="screen-reader-text">
	<h2>{{s.commentWritingTipsHintsHeader}}</h2>
	<ul>
	<li id="charLimitString" style="display:block">{{charLimitString}}</li>
	<li id="tipNoQuestions" style="display:block">{{s.tipNoQuestions}}</li>
	<li id="tipOneIdea" style="display:block">{{s.tipOneIdea}}</li>
	</ul>
	</div> {{!-- end screen-reader-text --}}

Probably we could see if we want to merge these texts into visible contents above the text field