When headings are placed within the context of <form> elements, screen readers do not read them and those users miss what is often important contextual information.
When a screenreader jumps enters a form the screen reader goes into 'Forms mode'; navigation is between the input elements, not the normal document structure, so headings and any other text not attached to input elements is completely ignored.
To ensure these headings are read, a tabindex is required (likely tabindex="0") so the item is placed in the normal tab order.
Fix: Ensure h1, h2, h3, h4, h6 headings have :focus styling to match other input controls.
When headings are placed within the context of
<form>
elements, screen readers do not read them and those users miss what is often important contextual information.When a screenreader jumps enters a form the screen reader goes into 'Forms mode'; navigation is between the input elements, not the normal document structure, so headings and any other text not attached to input elements is completely ignored.
To ensure these headings are read, a tabindex is required (likely
tabindex="0"
) so the item is placed in the normal tab order.Fix: Ensure
h1
,h2
,h3
,h4
,h6
headings have :focus styling to match other input controls.