This content originally appeared on Scott O’Hara - Accessibility engineer, UX developer and designer and was authored by Scott O'Hara
When people add custom clear buttons to their text fields they generally do one of three things:
- They do not make them accessible at all.
- They unnecessarily add them to the keyboard focus order of the web page.
- 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?
This content originally appeared on Scott O’Hara - Accessibility engineer, UX developer and designer and was authored by Scott O'Hara
Scott O'Hara | Sciencx (2022-02-19T00:00:00+00:00) Making a custom clear text field button. Retrieved from https://www.scien.cx/2022/02/19/making-a-custom-clear-text-field-button/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.