Dropdown changes page when an option is chosen

Why does it matter?

Keyboard users look through a dropdown with the arrow keys. If choosing an option loads another page at once, the first press of the down arrow sends them away before they reach the option they wanted, and screen reader users are surprised by a new page.

Who it affects: Screen reader users, voice-control users who say a field's label to move to it, and people with memory or attention difficulties who lose a placeholder once they type.

What does Lumtera flag?

Dropdowns whose onchange attribute goes to another address or submits the form, and dropdowns that an inline script on the page names by id, listens to for "change" and navigates with, as WordPress's classic Categories and Archives dropdowns do. A submit button in the same form (a "Go" button) counts as a way to confirm, so those pass; hidden and disabled dropdowns are skipped. Each is for review, since some browsers only fire "change" on Enter.

Check ID select-navigates — use it to filter the content report or with wp lumtera issues --rule.

How do I fix it in WordPress?

Add a "Go" button next to the dropdown and remove the automatic jump, so the page only changes when the visitor presses the button. For WordPress's Categories or Archives dropdown, you can switch the widget or block to show a list of links instead of a dropdown. Check the result with the keyboard: Tab to the dropdown, use the arrow keys to move through the options, and make sure you stay on the page.

Example

<select onchange="location.href = this.value">…</select>

<form action="/">
  <select name="cat">…</select>
  <button type="submit">Go</button>
</form>

How do I check the fix?

1. Update the post. The issue disappears from the Lumtera Accessibility sidebar on the next check, and from the site report on the next scan.
2. Click each field's label: the cursor should move into the field. With a screen reader, each field should announce its label when it receives focus.