form and search landmarks

posted on June 28., 2023

I wanted to know how well common screen readers and browsers support search and form landmarks. Here are my results:

Software/OS/browser

• NVDA 2023.1 with Firefox 114
• VoiceOver macOS 13.4.1 with Safari 16.5.1
• Talkback Android 13 with Chrome 114
• JAWS 2023.2212.13 with Edge 114
• Narrator Windows 10 with Edge 114
• VoiceOver iOS 15.7.7 with Safari

form role

Summary: You can use it, but forms won't be exposed as landmarks on VoiceOver and Talkback. To get the best results label the form.

form with no role and no label

<form>
  <h3>example 1</h3>

<label>
    XY
    <input type="text">
  </label>
</form>

form with no role, labelled by heading

<h3 id="form2">example2</h3>
<form aria-labelledby="form2">
  <label>
    XY
    <input type="text">
  </label>
</form>

form with form role and no label

<form role="form">
  <label>
    XY
    <input type="text">
  </label>
</form>

form with form role labelled by heading

<h3 id="form4">example 4</h3>
<form role="form" aria-labelledby="form4">
  <label>
    XY
    <input type="text">
  </label>
</form>

form with no role labelled by legend

<form aria-labelledby="form5">
  <fieldset>
    <legend id="form5">example 5</legend>

<label>
      XY
      <input type="text">
    </label>
  </fieldset>
</form>

form with form role labelled by legend

<form role="form" aria-labelledby="form6">
  <fieldset>
    <legend id="form6">example 6</legend>

<label>
      XY
      <input type="text">
    </label>
  </fieldset>
</form>

search role

Summary: Great overall support for the search role. The <search> element has no support yet. You can use the search element in combination with the role attribute.

form with search role and no label

<form role="search">
  <label>
    XY
    <input type="text">
  </label>
</form>

form with search role labelled by heading

<h3 id="form8">example 8</h3>
<form role="search" aria-labelledby="form8">
  <label>
    XY
    <input type="text">
  </label>
</form>

search element with no label

<search>
  <form>
    <label>
      XY
      <input type="text">
    </label>
  </form>
</search>

search element with search role and no label

<search role="search">
  <form>
    <label>
      XY
      <input type="text">
    </label>
  </form>
</search>

search element with search role labelled by heading

 <search role="search" aria-labelledby="form11">
  <h3 id="form11">example 11</h3>
  <form>
    <label>
      XY
      <input type="text">
    </label>
  </form>
</search>

* (but accessible via landmark navigation)

My blog doesn't support comments yet, but you can reply via e-mail.