form and search landmarks

This content originally appeared on Manuel Matuzović - Blog and was authored by Manuel Matuzović

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

I tested using the following shorcuts, commands and gestures.

• D key + Elements list in NVDA
• Rotor in VO iOS
• Rotor + single key quick nav in VO macOS
• Swiping + landmark navigation in Talkback
• R key + landmarks list (Insert + Ctrl + R in JAWS
• D key + Landmarks List in Narrator

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.

* not announced as a “form” landmark, but it's accessible via landmark navigation
** listed as “form” landmark in the landmarks list

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>

My blog doesn't support comments yet, but you can reply via blog@matuzo.at.

This content originally appeared on Manuel Matuzović - Blog and was authored by Manuel Matuzović

Print Share Comment Cite Upload Translate Updates

APA

Manuel Matuzović | Sciencx (2023-06-28T00:00:00+00:00) form and search landmarks. Retrieved from https://www.scien.cx/2023/06/28/form-and-search-landmarks/

MLA

" » form and search landmarks." Manuel Matuzović | Sciencx - Wednesday June 28, 2023, https://www.scien.cx/2023/06/28/form-and-search-landmarks/

HARVARD

Manuel Matuzović | Sciencx Wednesday June 28, 2023 » form and search landmarks., viewed ,<https://www.scien.cx/2023/06/28/form-and-search-landmarks/>

VANCOUVER

Manuel Matuzović | Sciencx - » form and search landmarks. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2023/06/28/form-and-search-landmarks/

CHICAGO

" » form and search landmarks." Manuel Matuzović | Sciencx - Accessed . https://www.scien.cx/2023/06/28/form-and-search-landmarks/

IEEE

" » form and search landmarks." Manuel Matuzović | Sciencx [Online]. Available: https://www.scien.cx/2023/06/28/form-and-search-landmarks/. [Accessed: ]

rf:citation

» form and search landmarks | Manuel Matuzović | Sciencx | https://www.scien.cx/2023/06/28/form-and-search-landmarks/ |

Please log in to upload a file.

There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.