When people add custom clear buttons to their text fields they generally do one of three things:

  1. They do not make them accessible at all.
  2. They unnecessarily add them to the keyboard focus order of the web page.
  3. They ensure the clear buttons are accessible - but not keyboard focusable. The clear button(s) do not show up when their associated fields are readonly or disabled, The button’s respect reading directionality of a web page (e.g., dir=rtl), and that keyboard focus returns to the text field once the clear button has been activated.

I cheated a bit with that third list item… there’s quite a few things in there, and even a few others that I didn’t directly call out.

Today I made a script to demonstrate how to add custom clear buttons to text fields.

Here is a demo page and explainer for more information on the markup pattern, script, and a more nuances that my piddly list did not cover.

Or you can check it out in the following iframe:

oh no! now there are two <main> and <h1> elements on my page because of the iframe content! Ah jeezy creezy… how will we all survive?