Accessibility / Structure & Headings / Check Field Labels Bookmarklet

The Check Field Labels bookmarklet verifies that all form inputs, textareas, and select elements have properly associated labels. Checks for explicit labels using the `for` attribute matching the input's ID, `aria-labelledby` references, `aria-label` attributes, and implicit labels (input wrapped in a label). Labeled fields are marked with a green checkmark and outlined in teal. Unlabeled fields are marked with a red X and outlined in red. Also detects labels with `for` attributes that reference non-existent field IDs. Includes an informational box with a link to W3C guidance. Run again to remove.

javascript:%21function()%7Btry%7Bdocument.querySelectorAll(%22%23wai-styles%2C%23wai-info-box%2C.wai-label%22).forEach(e%3D%3Ee.remove())%2Cdocument.body.insertAdjacentHTML(%22afterbegin%22%2C%22%3Cstyle%20id%3D%27wai-styles%27%3E.wai-label%7Bcolor%3Ablack%3Bfont-weight%3Abold%3Bfont-size%3Asmall%3Bfont-family%3ANoto%20Sans%2CTrebuchet%20MS%2CHelvetica%20Neue%2CArial%2Csans-serif%3Bbackground-color%3A%23eed009%3Bmargin%3A0%202px%3Bpadding%3A2px%3Bspeak%3Aliteral-punctuation%7D.wai-good%7Boutline%3A2px%20solid%20%23005a6a%7D.wai-bad%7Boutline%3A3px%20dashed%20%23c0272d%7Dlabel%7Bline-height%3A200%25%7D%23wai-info-box%7Bz-index%3A1000%3Bcolor%3Ablack%3Bfont-family%3ANoto%20Sans%2CTrebuchet%20MS%2CHelvetica%20Neue%2CArial%2Csans-serif%3Bborder%3Asolid%201px%20%23ddd%3Bbackground-color%3A%23fff%3Bbox-shadow%3A0%204px%208px%200%20rgba(0%2C0%2C0%2C0.2)%2C0%206px%2020px%200%20rgba(0%2C0%2C0%2C0.19)%7D%23wai-info-box%20header%7Bfont-weight%3A700%3Bbackground-color%3A%23f2f2f2%3Bcolor%3A%23005a6a%3Bpadding%3A8px%2016px%7D%23wai-info-box%20header%20a%7Bfloat%3Aright%3Btext-decoration%3Anone%7D%23wai-info-box%20div%7Bpadding%3A8px%2016px%7D.wai-more-info%7Bposition%3Afixed%3Bbottom%3A5em%3Bright%3A5em%7D%3C%2Fstyle%3E%22)%3Bfor(let%20e%20of%20document.querySelectorAll(%22input%2C%20textarea%2C%20select%22))%7Bif(e.getAttribute(%22type%22)%26%26e.getAttribute(%22type%22).match(%2Fhidden%7Cbutton%7Csubmit%7Creset%2F))continue%3Blet%20a%3De.getAttribute(%22id%22)%3Fdocument.querySelector(%22label%5Bfor%3D%27%22%2Be.getAttribute(%22id%22)%2B%22%27%5D%22)%3Anull%3Bif(a)e.insertAdjacentHTML(%22beforebegin%22%2C%22%3Cspan%20class%3D%27wai-good%27%3E%3Cspan%20class%3D%27wai-label%27%3E%5Cu2713%20Labelled%3C%2Fspan%3E%3C%2Fspan%3E%22)%2Ce.previousElementSibling.appendChild(e)%2Ca.insertAdjacentHTML(%22afterbegin%22%2C%22%3Cspan%20class%3D%27wai-label%27%3ELabel%20for%20field%20with%20ID%3D%27%3Ca%20href%3D%27%23%22%2Be.getAttribute(%22id%22)%2B%22%27%3E%22%2Be.getAttribute(%22id%22)%2B%22%3C%2Fa%3E%27%3C%2Fspan%3E%22)%2Ca.classList.add(%22wai-good%22)%3Belse%20if(e.getAttribute(%22aria-labeledby%22))%7Blet%20a%3De.getAttribute(%22aria-labeledby%22).split(%2F%5Cs%2B%2F)%3Bif(a.length%3E0)%7Be.getAttribute(%22id%22)%7C%7Ce.setAttribute(%22id%22%2Ca%5B0%5D%2B%22-field%22)%2Ce.insertAdjacentHTML(%22beforebegin%22%2C%22%3Cspan%20class%3D%27wai-good%27%3E%3Cspan%20class%3D%27wai-label%27%3E%5Cu2713%20Labelled%3C%2Fspan%3E%3C%2Fspan%3E%22)%2Ce.previousElementSibling.appendChild(e)%3Bfor(let%20t%20of%20a)%7Blet%20a%3Ddocument.querySelector(%22%23%22%2Bt)%3Ba%26%26(a.insertAdjacentHTML(%22afterbegin%22%2C%22%3Cspan%20class%3D%27wai-label%27%3ELabel%20for%20ID%3D%27%3Ca%20href%3D%27%23%22%2Be.getAttribute(%22id%22)%2B%22%27%3E%22%2Be.getAttribute(%22id%22)%2B%22%3C%2Fa%3E%27%3C%2Fspan%3E%22)%2Ca.classList.add(%22wai-good%22))%7D%7D%7Delse%20if(e.getAttribute(%22aria-label%22))e.insertAdjacentHTML(%22beforebegin%22%2C%22%3Cspan%20class%3D%27wai-good%27%3E%3Cspan%20class%3D%27wai-label%27%3E%21%20Labelled%20(using%20ARIA)%3C%2Fspan%3E%3C%2Fspan%3E%22)%2Ce.previousElementSibling.appendChild(e)%3Belse%20if(%22LABEL%22%3D%3D%3De.parentElement.tagName)e.parentElement.classList.add(%22wai-good%22)%2Ce.parentElement.insertAdjacentHTML(%22afterbegin%22%2C%22%3Cspan%20class%3D%27wai-label%27%3E%5Cu2713%20Labelled%3C%2Fspan%3E%22)%3Belse%7Blet%20a%3De.getAttribute(%22id%22)%3F%22%5Cu2717%20Missing%20label%20(No%20matching%20label%20for%20ID%3D%27%22%2Be.getAttribute(%22id%22)%2B%22%27%20found)%22%3A%22%5Cu2717%20Missing%20label%22%3Be.insertAdjacentHTML(%22beforebegin%22%2C%22%3Cspan%20class%3D%27wai-bad%27%3E%3Cspan%20class%3D%27wai-label%27%3E%22%2Ba%2B%22%3C%2Fspan%3E%3C%2Fspan%3E%22)%2Ce.previousElementSibling.appendChild(e)%7D%7Dfor(let%20e%20of%20document.querySelectorAll(%22label%22))e.getAttribute(%22for%22)%26%26%21document.querySelector(%22%23%22%2Be.getAttribute(%22for%22))%26%26(e.insertAdjacentHTML(%22afterbegin%22%2C%22%3Cspan%20class%3D%27wai-label%27%3ELabel%20with%20no%20matching%20field%20with%20ID%3D%27%22%2Be.getAttribute(%22for%22)%2B%22%27%3C%2Fspan%3E%22)%2Ce.classList.add(%22wai-bad%22))%3Bdocument.body.insertAdjacentHTML(%22beforeend%22%2C%22%3Caside%20id%3D%27wai-info-box%27%20class%3D%27wai-more-info%27%3E%3Cheader%3EFind%20out%20more%3Ca%20href%3D%27javascript%3Avoid(0)%27%20aria-label%3D%27dismiss%27%20onclick%3D%27document.querySelectorAll(%5C%22%23wai-styles%2C%23wai-info-box%2C.wai-label%5C%22).forEach(el%20%3D%3E%20el.remove())%27%3EX%3C%2Fa%3E%3C%2Fheader%3E%3Cdiv%3E%3Ca%20href%3D%27https%3A%2F%2Fw3.org%2Fwai%2Ftest-evaluate%2Feasy-checks%2Fform-field-labels%2F%27%3EChecking%20Field%20Labels%3C%2Fa%3E%3C%2Fdiv%3E%3C%2Faside%3E%22)%7Dcatch(e)%7Bconsole.error(%22An%20error%20occurred%20in%20the%20bookmarklet%3A%22%2Ce)%7D%7D()%2Cconsole.log(%22%5CnSource%3A%20https%3A%2F%2Fwww.w3.org%2FWAI%2Ftest-evaluate%2Feasy-checks%2Fform-field-labels%2F%5CnBookmarklet%20name%3A%20Check%20field%20labels%20(w3c%2C%20WCAG%20SC%203.3.2)%5Cn%22)%3B