Form Field Accessible Names
Bookmarklet
A bookmarklet is a small piece of (JavaScript) code that is run in the context of the currently visible web page. It comes as a bookmark that you typically add to your browser bookmarks for being able to run it repeatedly. In order to install this bookmarklet, please drag the link above to your browser bookmarks and call it from there. You can also click on the link to run the bookmarklet on this very page.
Purpose & Notes
The purpose of this bookmarklet is to identify form fields on the page (native elements and elements
with corresponding ARIA roles) and see whether they have a non-empty accessible name that can
be passed to assistive technology. The bookmarklet loosely aligns with the ACT Rule e086e5 and its test cases. Shadow DOMs
are examined recursively. As a side benefit, the value if the form field's autocomplete
attribute is extracted as well (if present).
The results are displayed visually on the page:
- A green bubble (✔) indicates a PASS (non-empty accessible name)
- A red bubble (✖) indicates a FAIL (empty accessible name)
- An orange bubble (💀) indicates a PASS (non-empty accessible name), although your policy might consider these suboptimal
Click on any of the info bubbles to log the associated form field to the DevTools console.