A11y Bookmarklets | A11y Tools  ## Metadata - Author: [[a11y-tools.com]] - Full Title: A11y Bookmarklets | A11y Tools - Category: #articles - Document Note: --- tags: [#accessibility, #webdev, #a11y, #bookmarklets, #testing-tools] - #accessibility - #webdev - #a11y - #bookmarklets - #testing-tools Author: A11y Tools Team Source: a11y-tools.com Reference: [A11y Bookmarklets](https://a11y-tools.com/bookmarklets/) date created: 2025-05-17 01:12 --- # Title: 🛠️ A11y Bookmarklets: Simple Accessibility Testing for Everyone ## Table of Contents:  - [📝 Summary](#-summary) - [📖 Main Content](#-main-content) - [🗒️ Notes](#️-notes) - [📖 References](#-references) - [🗣️ Paraphrase](#-paraphrase) - [📰 Newsletter](#-newsletter) - [✅ Action Items](#-action-items) - [🧪 Hypotheses](#-hypotheses) - [📊 Methodology](#-methodology) - [❓ Questions](#-questions) - [🔮 Future Research](#-future-research) - [💡 Implications](#-implications) - [🧠 Learning Styles Assessment](#-learning-styles-assessment) - [📊 Accessibility Assessment](#-accessibility-assessment) - [🌍 DEIB (Diversity, Equity, Inclusion, and Belonging) Assessment](#-deib-diversity-equity-inclusion-and-belonging-assessment) - [✅ Logical Validity](#-logical-validity) - [🔍 DARVO Analysis](#-darvo-analysis) - [🔍 SEO Evaluation](#-seo-evaluation) - [🎯 Conclusion](#-conclusion) ### References: - A11y Tools Team. [A11y Bookmarklets](https://a11y-tools.com/bookmarklets/) ## 📝 Summary: A11y Tools offers a curated collection of bookmarklets designed to make web accessibility testing fast, user-friendly, and approachable for everyone—from developers to content creators. Bookmarklets are small browser-based tools you can drag into your bookmarks bar. Once activated, they run accessibility audits directly in your browser on any web page, surfacing issues like missing alt text, poor contrast, heading structure, and more. This page centralizes the best free a11y bookmarklets, explains their features, and provides tips on how to use them for continuous accessibility improvements. ## 📖 Main Content: The article introduces the concept of bookmarklets—tiny, one-click tools that run JavaScript in your browser to automate checks or apply quick fixes. It emphasizes the benefits of using bookmarklets for accessibility (a11y) checks: no installations, instant results, and broad browser compatibility. A11y Tools gathers popular and useful bookmarklets from across the web and provides simple drag-and-drop access. Users can choose from a variety of bookmarklets covering different aspects of web accessibility, including: - Visualizing headings and landmarks, - Highlighting images missing alt text, - Checking color contrast ratios, - Inspecting tab order and focus states, - Reviewing ARIA landmarks and roles, - Revealing live regions and visually hidden content. Each bookmarklet is described with clear instructions and links to additional resources or documentation. The guide highlights how these tools complement automated testing suites by offering quick, manual, and visual checks—especially valuable during content creation or design review. ### 🗒️ Notes - **Bookmarklets Overview:** - JavaScript-based tools for browser bookmark bars. - Instantly run accessibility checks on any webpage. - No need to install extensions or software. - **Key Accessibility Checks Covered:** - Missing or incomplete alt text. - Improper heading hierarchy. - Color contrast issues. - Landmark roles and ARIA structure. - Tab order and keyboard navigation. - Hidden content and live regions. - **Benefits:** - Fast, easy, and portable. - Useful for developers, designers, editors, and testers. - Complements automated testing by surfacing visual/contextual issues. - Works in all major browsers. - **Usage Instructions:** - Drag bookmarklets to your bookmarks bar. - Click to activate on any page you’re reviewing. - Clear explanations and tooltips provided. - **Additional Resources:** - Links to accessibility docs, standards (like WCAG), and further a11y tools. ## 📖 References: - A11y Tools Team. "A11y Bookmarklets." [https://a11y-tools.com/bookmarklets/](https://a11y-tools.com/bookmarklets/) ## 🗣️ Paraphrase: 1. **Original:** “Bookmarklets let you check accessibility issues with a single click—no installs, no fuss, just results in your browser.” - **Paraphrase:** With just one click, bookmarklets allow users to spot accessibility problems instantly in their browser, without needing to install extra tools. 2. **Original:** “This curated list gives you everything from alt text checkers to color contrast testers and heading visualizers—all ready to use, drag-and-drop style.” - **Paraphrase:** This collection offers a range of ready-to-use tools—like alt text finders and color contrast analyzers—accessible through simple drag-and-drop bookmarks. ## 📰 Newsletter: 📰 **Accessibility Made Easy!** This week we’re spotlighting A11y Tools’ Bookmarklets—a free, fun, and frictionless way to make sure your websites are accessible to all. Whether you’re a developer, designer, or content editor, these bookmarklets help you instantly check for missing alt text, color contrast, proper headings, and more, right in your browser. No installs, no waiting—just instant a11y feedback. Boost your site’s accessibility, support your users, and impress your colleagues with a click. Try them out at [a11y-tools.com/bookmarklets](https://a11y-tools.com/bookmarklets/). ## ✅ Action Items: - Promote bookmarklets as an accessible entry-point for a11y testing in WordPress and open-source communities. - Integrate bookmarklet recommendations in onboarding docs and contributor handbooks. - Host a live demo/webinar on using a11y bookmarklets for new and returning contributors. - Create short training videos or GIFs showing bookmarklet usage in common workflows. - Encourage contributor teams to add bookmarklet checks into their editorial, development, and QA processes. - Link to a11y bookmarklets from WordPress.org contributor resources and OSPO documentation. ## 🧪 Hypotheses: - Integrating bookmarklet use into contributor workflows will increase detection and remediation of a11y issues. - Bookmarklets lower the barrier to a11y testing for non-developers, improving overall accessibility awareness. - Regular a11y bookmarklet use will correlate with higher accessibility scores in open source projects. ### 📊 Methodology: - Survey contributors before and after bookmarklet training sessions about confidence and effectiveness in a11y checks. - Track issue reports and fixes related to accessibility pre- and post-bookmarklet rollout. - Analyze accessibility audit results of projects adopting bookmarklet workflows versus control groups. ### ❓ Questions: - What accessibility issues are most often missed by automated tools but caught by bookmarklets? - How can bookmarklets be integrated into CI/CD or automated pipelines? - Are there gaps in current bookmarklet offerings that could be filled by new tools? ### 🔮 Future Research: - Effectiveness of bookmarklets compared to full-featured extensions or automated test suites. - Usability studies on bookmarklet discoverability and adoption among different contributor roles. - Development of new bookmarklets addressing emerging web standards or ARIA attributes. ### 💡 Implications:  - Lowering the technical barrier for accessibility checks can democratize a11y efforts in open source and education. - Bookmarklets can serve as “gateway tools” to deeper a11y involvement for non-coders. - Insights may drive improved documentation and contributor support across WordPress and beyond. ### 🧠 Learning Styles Assessment: - **Readability:** Middle-school to high-school level; clear, direct, and jargon-free. - **Visual Learners:** No images in the tool index—could be improved by adding screenshots or diagrams showing bookmarklets in action. - **Aural Learners:** No audio content—suggest adding quick video or narrated guides. - **Verbal Learners:** Strong—plain English, concise instructions. - **Physical Learners:** Yes—bookmarklets require direct interaction and experimentation. - **Logical Learners:** Yes—stepwise instructions, clear problem-solution framing. - **Social Learners:** No community discussion features—consider addin - Summary: You know the deal - drag these to your toolbar or right-click and add to favourites. Then run them whenever you feel like it. - URL: https://a11y-tools.com/bookmarklets/ You know the deal - drag these to your toolbar or right-click and add to favourites. Then run them whenever you feel like it. #### Accessibility Diagnostics ##### Focus Tools ([2.4.3](https://www.w3.org/TR/WCAG22/#focus-order), [2.4.7](https://www.w3.org/TR/WCAG22/#focus-visible)) * [🔖anchor for Show focus styles bookmarklet](https://a11y-tools.com/bookmarklets/#focusstyles) [Show focus styles](javascript:(function()%7Bfunction%20showAllFocusStyles()%7Bconst%20e%3Ddocument.querySelectorAll('a%5Bhref%5D%2Cbutton%2Cselect%2Cinput%3Anot(%5Btype%3D%22hidden%22%5D)%2Ctextarea%2Csummary%2Cdetails%2Carea%2C%5Btabindex%5D%2C%5Bcontenteditable%5D%3Anot(%5Bcontenteditable%3D%22false%22%5D)')%3Blet%20t%2Co%3D%22%22%3Bconsole.clear()%2CArray.from(e).forEach(function(e)%7Be.style.transition%3D%22none%22%2Ce.focus()%2Ct%3DgetComputedStyle(e)%2Co%3D%22%22%3Bfor(var%20s%3D0%3Bs%3Ct.length%3Bs%2B%2B)cssProperty%3Dt%5Bs%5D%2CcssValue%3Dt.getPropertyValue(cssProperty)%2Co%2B%3DcssProperty%2B%22%3A%22%2BcssValue%2B%22%3B%22%3Be.setAttribute(%22style%22%2Co)%7D)%7DshowAllFocusStyles()%3B%7D)()) + Runs through whole page,looking for focusable items and focuses them. + Focus style is captured and set as inline style. + You get a page that shows how all elements on the page will appear when they receive focus. + 🚨 NOTE: This is destructive, there is no 'undo' feature (just reload page). * [🔖anchor for Lost focus alert bookmarklet](https://a11y-tools.com/bookmarklets/#lostfocus) [Lost focus alert](javascript:(function()%7Bconsole.log(%22Tracking%20focus%20loss%20now%20------------------------------------%22)%3Bconst%20focusableThings%3Ddocument.querySelectorAll('a%5Bhref%5D%2Cbutton%2Cselect%2Cinput%3Anot(%5Btype%3D%22hidden%22%5D)%2Ctextarea%2Csummary%2Carea%2C%5Btabindex%5D%2C%5Bcontenteditable%5D%3Anot(%5Bcontenteditable%3D%22false%22%5D)')%3Blet%20activeEl%2CprevActiveEl%2CdelayTimeout%2CstatusTimeout%3Bconst%20statusNotif%3Ddocument.createElement(%22div%22)%3Bfunction%20clearStatus()%7BclearTimeout(statusTimeout)%2CstatusTimeout%3DsetTimeout(function()%7BstatusNotif.innerHTML%3D%22%22%7D%2C3e3)%7DstatusNotif.setAttribute(%22role%22%2C%22alert%22)%2CstatusNotif.setAttribute(%22aria-atomic%22%2C%22false%22)%2CstatusNotif.setAttribute(%22id%22%2C%22focLostNotif%22)%2Cdocument.body.appendChild(statusNotif)%3Blet%20a%3Ddocument.createElement(%22style%22)%2Cb%3Bdocument.head.appendChild(a)%2C(b%3Da.sheet).insertRule(%22%23focLostNotif%3Aempty%20%7Bvisibility%3Ahidden%3B%7D%22%2C0)%2Cb.insertRule(%22%23focLostNotif%20%7Bbackground%3Ablack%3Bcolor%3Awhite%3Bpadding%3A1em%3Bfont-size%3A2em%3Bborder-radius%3A10px%3Boutline%3A4px%20solid%20white%3Bposition%3Afixed%3Bbottom%3A2em%3Bleft%3A50%25%3Btransform%3AtranslateX(-50%25)%7D%22%2C0)%2Cb.insertRule(%22.elCausedLossOfFocus%20%7Boutline%3A4px%20solid%20red%7D%22%2C0)%2Cb.insertRule('.elCausedLossOfFocus%3Abefore%20%7Bcontent%3A%22%5CuD83D%5CuDEA8%20%22%7D'%2C0)%2CArray.from(focusableThings).forEach(t%3D%3E%7Bt.addEventListener(%22focus%22%2Ce%3D%3E%7Bconsole.log(%22Focus%3A%20%22%2Ct)%2CprevActiveEl%3Ddocument.activeElement%7D)%2Ct.addEventListener(%22click%22%2Ct%3D%3E%7BclearTimeout(delayTimeout)%2CdelayTimeout%3DsetTimeout(function()%7BactiveEl%3Ddocument.activeElement%2CstatusNotif.innerHTML%3D%22%22%2C%22BODY%22%3D%3D%3DactiveEl.tagName%26%26(console.log(%22%5CuD83D%5CuDEA8%20FOCUS%20WAS%20LOST!%20%5CuD83D%5CuDEA8%22)%2Cconsole.log(%22*%20Active%20element%20before%20was%20%3D%20%22%2CprevActiveEl)%2Cconsole.log(%22*%20Focus%20after%20%3D%20%22%2CactiveEl)%2CprevActiveEl.classList.add(%22elCausedLossOfFocus%22)%2CstatusNotif.innerHTML%3D%22FOCUS%20WAS%20LOST!%3Cbr%3ECheck%20Console%20for%20details%22%2CclearStatus())%7D%2C100)%7D)%7D)%7D)()) + Inspired by the revelation in this article [How To Avoid Breaking Web Pages For Keyboard Users](https://www.tpgi.com/how-to-avoid-breaking-web-pages-for-keyboard-users/), specifically the [video demonstration](https://www.tpgi.com/how-to-avoid-breaking-web-pages-for-keyboard-users/#videodemo). + Run this bookmarklet before doing keyboard testing and it will alert any loss of focus issues that may not be immediately obvious. + It checks for elements that lose focus as a result of: - Being removed from DOM. - Being hidden. - Being set as `disabled`. - Being set as `inert`. - Link activated that goes to a target that lacks `tabindex="-1"` (if it is not a natively focusable element). - Having a `blur()` event set (unless immediately re-set with `focus()`). * [🔖anchor for Focus Order bookmarklet](https://a11y-tools.com/bookmarklets/#revealfocusorder) [Reveal Focus Order](javascript:(function()%7Bfunction%20revealFocusOrder()%7Bfunction%20l()%7Bn%3D!0%3Blet%20a%3Ddocument.createElement(%22canvas%22)%3Ba.setAttribute(%22id%22%2C%22taborder-canvas%22)%2Cdocument.body.appendChild(a)%2Ca.width%3Dwindow.innerWidth%3Blet%20c%3Ddocument.body%2Cb%3Ddocument.documentElement%2Ce%3DMath.max(c.scrollHeight%2Cc.offsetHeight%2Cb.clientHeight%2Cb.scrollHeight%2Cb.offsetHeight)%3Bif(a.height%3De%2C!a.getContext)return%3Blet%20d%3Da.getContext(%222d%22)%3Bd.strokeStyle%3Dm%2Cd.lineWidth%3D5%3Blet%20f%2Cg%2Ch%2Ci%2Cj%3D!0%3BArray.from(o).forEach(a%3D%3E%7Bj%3F(f%3Da%5B3%5D%2B15%2Cg%3Da%5B0%5D%2B15)%3A(h%3Da%5B3%5D%2B15%2Ci%3Da%5B0%5D%2B15%2Cd.beginPath()%2Cd.moveTo(f%2Cg)%2Cd.lineTo(h%2Ci)%2Cd.stroke()%2Cf%3Da%5B3%5D%2B15%2Cg%3Da%5B0%5D%2B15)%2Cj%3D!1%7D)%7Dlet%20c%3Ddocument.querySelectorAll('button%3Anot(%5Bdisabled%5D)%2C%5Bhref%5D%2Cinput%3Anot(%5Bdisabled%5D)%2Cselect%3Anot(%5Bdisabled%5D)%2Ctextarea%3Anot(%5Bdisabled%5D)%2C%5Btabindex%5D%3Anot(%5Btabindex%3D%22-1%22%5D)%3Anot(%5Bdisabled%5D)%2Csummary%3Anot(%3Adisabled)%2C%5Bcontenteditable%5D%3Anot(%5Bcontenteditable%3D%22false%22%5D)')%2Cb%3Ddocument.createElement(%22div%22)%2Cd%3Ddocument.createElement(%22div%22)%2Cm%3D%22navy%22%2Cn%3D!1%2Ce%3Dnew%20Array%2Co%3Dnew%20Array%2Cp%3D%22%22%2Ca%3D%22%22%3Bb.setAttribute(%22id%22%2C%22focusOrderList%22)%2Cb.setAttribute(%22role%22%2C%22region%22)%2Cb.setAttribute(%22aria-label%22%2C%22List%20of%20focusable%20elements%22)%2Cb.innerHTML%3D'%3Cdiv%20class%3D%22buttons%22%3E%3Cbutton%20type%3D%22button%22%20id%3D%22hide%22%3EHide%20panel%3C%2Fbutton%3E%20%3Cbutton%20type%3D%22button%22%20id%3D%22draw%22%3EDraw%20tabbing%20order%3C%2Fbutton%3E%3C%2Fdiv%3E'%3Blet%20f%3Ddocument.createElement(%22ol%22)%3Bb.appendChild(f)%3Blet%20g%3Db.querySelector(%22.buttons%22)%2Ch%3Db.querySelector(%22button%23hide%22)%2Ci%3Db.querySelector(%22button%23draw%22)%3B!function()%7Blet%20a%3Ddocument.createElement(%22style%22)%3Ba.textContent%3D%22.visually-hidden%20%7Bclip-path%3A%20inset(100%25)%3Bclip%3A%20rect(1px%2C%201px%2C%201px%2C%201px)%3Bheight%3A%201px%3Boverflow%3A%20hidden%3Bposition%3A%20absolute%3Bwhite-space%3A%20nowrap%3Bwidth%3A%201px%3B%7D%23focusOrderList%7Bmax-width%3A400px%3Bbox-sizing%3Aborder-box%3B%7D*%5Bdata-actualTabOrder%5D%7Bwhite-space%3Anowrap%7D*%5Bdata-actualTabOrder%5D%3Abefore%20%7Bcontent%3Aattr(data-actualTabOrder)%3Bcolor%3Awhite%3Bbackground%3A%22%2Bm%2B%22%3Bdisplay%3A%20inline-block%3Bpadding%3A%203px%3Bfont-weight%3A%20bold%3Bfont-size%3A%2018px%3Bfont-family%3A%20sans-serif%3Bborder-radius%3A%205px%3Bmargin-right%3A%205px%3Bbox-shadow%3A0%200%200%203px%20white%3B%7D%20%23focusOrderList%20%7Boutline%3A2px%20solid%20black%3Bposition%3Aabsolute%3Btop%3A10px%3Bright%3A10px%3Bpadding%3A30px%3Bbackground%3Awhite%3Bbox-shadow%3A0%200%200%2010px%20white%3Bz-index%3A10000%3Boverflow%3Ascroll%3B%7D%20%23focusOrderList%20li%20%7Bcolor%3Adarkblue%3B%7D%20%23focusOrderList%20.buttons%20%7Btext-align%3Aright%3B%7D%20.highlight-el%20%7Bbox-shadow%3A0%200%200%203px%20white%2C0%200%200%206px%20red%2C0%200%200%209px%20white%3B%7D%23focusOrderList%20a%20%7Bcolor%3Adarkblue%3Btext-decoration%3Aunderline%3Bborder-bottom%3Anone%3B%7D%23taborder-canvas%20%7Bz-index%3A100000%3Bposition%3A%20absolute%3Btop%3A%200%3Bleft%3A%200%3Bbottom%3A%200%3Bright%3A%200%3Bbackground%3Argba(233%2C233%2C233%2C0.2)%3B%7D%22%2Cdocument.head.appendChild(a)%3Blet%20b%3Ddocument.createElement(%22style%22)%3Bb.textContent%3D%22.no-list-style%20ul%2C.no-list-style%20ol%20%7Blist-style%3A%20none%3B%7D.no-list-style%20ul%2C.no-list-style%20ol%2C.no-list-style%20ul%20li%2C.no-list-style%20ol%20li%20%7Bmargin%3A%200%3Bpadding%3A%200%3B%7D.Snow%20%7Bbackground%3ASnow%3B%7D.SeaShell%20%7Bbackground%3ASeaShell%3B%7D.LavenderBlush%20%7Bbackground%3ALavenderBlush%3B%7D.MistyRose%20%7Bbackground%3AMistyRose%3B%7D.Linen%20%7Bbackground%3ALinen%3B%7D.Pink%20%7Bbackground%3APink%3B%7D.LightPink%20%7Bbackground%3ALightPink%3B%7D.Red%20%7Bbackground%3ARed%3B%7D.Crimson%20%7Bbackground%3ACrimson%3B%7D.HotPink%20%7Bbackground%3AHotPink%3B%7D.Tomato%20%7Bbackground%3ATomato%3B%7D.OrangeRed%20%7Bbackground%3AOrangeRed%3B%7D.DeepPink%20%7Bbackground%3ADeepPink%3B%7D.IndianRed%20%20%7Bbackground%3AIndianRed%3B%7D.RosyBrown%20%7Bbackground%3ARosyBrown%3B%7D.MediumVioletRed%20%7Bbackground%3AMediumVioletRed%3B%7D.FireBrick%20%7Bbackground%3AFireBrick%3B%7D.Brown%20%7Bbackground%3ABrown%3B%7D.Sienna%20%7Bbackground%3ASienna%3B%7D.SaddleBrown%20%7Bbackground%3ASaddleBrown%3B%7D.DarkRed%20%7Bbackground%3ADarkRed%3B%7D.Maroon%20%7Bbackground%3AMaroon%3B%7D.Orange%20%20%20%20%20%20%20%20%7Bbackground%3AOrange%3B%7D.FloralWhite%20%7Bbackground%3AFloralWhite%3B%7D.Cornsilk%20%7Bbackground%3ACornsilk%3B%7D.OldLace%20%7Bbackground%3AOldLace%3B%7D.PapayaWhip%20%7Bbackground%3APapayaWhip%3B%7D.BlanchedAlmond%20%7Bbackground%3ABlanchedAlmond%3B%7D.Bisque%20%7Bbackground%3ABisque%3B%7D.Moccasin%20%7Bbackground%3AMoccasin%3B%7D.NavajoWhite%20%7Bbackground%3ANavajoWhite%3B%7D.PeachPuff%20%7Bbackground%3APeachPuff%3B%7D.Wheat%20%7Bbackground%3AWheat%3B%7D.AntiqueWhite%20%7Bbackground%3AAntiqueWhite%3B%7D.Gold%20%7Bbackground%3AGold%3B%7D.Orange%20%7Bbackground%3AOrange%3B%7D.LightSalmon%20%7Bbackground%3ALightSalmon%3B%7D.Darkorange%20%7Bbackground%3ADarkorange%3B%7D.Coral%20%7Bbackground%3ACoral%3B%7D.Salmon%20%7Bbackground%3ASalmon%3B%7D.SandyBrown%20%7Bbackground%3ASandyBrown%3B%7D.LightCoral%20%7Bbackground%3ALightCoral%3B%7D.DarkSalmon%20%7Bbackground%3ADarkSalmon%3B%7D.BurlyWood%20%7Bbackground%3ABurlyWood%3B%7D.Tan%20%7Bbackground%3ATan%3B%7D.Chocolate%20%7Bbackground%3AChocolate%3B%7D.Peru%20%7Bbackground%3APeru%3B%7D.Yellow%20%20%20%20%20%20%20%20%7Bbackground%3AYellow%3B%7D.Ivory%20%7Bbackground%3AIvory%3B%7D.LightYellow%20%7Bbackground%3ALightYellow%3B%7D.LemonChiffon%20%7Bbackground%3ALemonChiffon%3B%7D.LightGoldenRodYellow%20%7Bbackground%3ALightGoldenRodYellow%3B%7D.Beige%20%7Bbackground%3ABeige%3B%7D.PaleGoldenRod%20%7Bbackground%3APaleGoldenRod%3B%7D.Yellow%20%7Bbackground%3AYellow%3B%7D.Khaki%20%7Bbackground%3AKhaki%3B%7D.GoldenRod%20%7Bbackground%3AGoldenRod%3B%7D.DarkGoldenRod%20%7Bbackground%3ADarkGoldenRod%3B%7D.Green%20%20%20%20%20%20%20%20%20%7Bbackground%3AGreen%3B%7D.MintCream%20%7Bbackground%3AMintCream%3B%7D.Azure%20%7Bbackground%3AAzure%3B%7D.HoneyDew%20%7Bbackground%3AHoneyDew%3B%7D.LightCyan%20%7Bbackground%3ALightCyan%3B%7D.PaleTurquoise%20%7Bbackground%3APaleTurquoise%3B%7D.GreenYellow%20%7Bbackground%3AGreenYellow%3B%7D.LightGreen%20%7Bbackground%3ALightGreen%3B%7D.PaleGreen%20%7Bbackground%3APaleGreen%3B%7D.DarkSeaGreen%20%7Bbackground%3ADarkSeaGreen%3B%7D.DarkKhaki%20%7Bbackground%3ADarkKhaki%3B%7D.YellowGreen%20%7Bbackground%3AYellowGreen%3B%7D.SpringGreen%20%7Bbackground%3ASpringGreen%3B%7D.Lime%20%7Bbackground%3ALime%3B%7D.Aquamarine%20%7Bbackground%3AAquamarine%3B%7D.MediumSpringGreen%20%7Bbackground%3AMediumSpringGreen%3B%7D.Turquoise%20%7Bbackground%3ATurquoise%3B%7D.MediumSeaGreen%20%7Bbackground%3AMediumSeaGreen%3B%7D.Chartreuse%20%7Bbackground%3AChartreuse%3B%7D.LawnGreen%20%7Bbackground%3ALawnGreen%3B%7D.LimeGreen%20%7Bbackground%3ALimeGreen%3B%7D.DarkSlateGray%20%7Bbackground%3ADarkSlateGray%3B%7D.SeaGreen%20%7Bbackground%3ASeaGreen%3B%7D.ForestGreen%20%7Bbackground%3AForestGreen%3B%7D.MediumAquaMarine%20%7Bbackground%3AMediumAquaMarine%3B%7D.CadetBlue%20%7Bbackground%3ACadetBlue%3B%7D.DarkOliveGreen%20%7Bbackground%3ADarkOliveGreen%3B%7D.Olive%20%7Bbackground%3AOlive%3B%7D.OliveDrab%20%7Bbackground%3AOliveDrab%3B%7D.LightSeaGreen%20%7Bbackground%3ALightSeaGreen%3B%7D.DarkTurquoise%20%7Bbackground%3ADarkTurquoise%3B%7D.DarkCyan%20%7Bbackground%3ADarkCyan%3B%7D.Teal%20%7Bbackground%3ATeal%3B%7D.Green%20%7Bbackground%3AGreen%3B%7D.DarkGreen%20%7Bbackground%3ADarkGreen%3B%7D.Blue%20%20%20%20%20%20%20%20%20%20%7Bbackground%3ABlue%3B%7D.AliceBlue%20%7Bbackground%3AAliceBlue%3B%7D.PowderBlue%20%7Bbackground%3APowderBlue%3B%7D.LightBlue%20%7Bbackground%3ALightBlue%3B%7D.LightSteelBlue%20%7Bbackground%3ALightSteelBlue%3B%7D.DeepSkyBlue%20%7Bbackground%3ADeepSkyBlue%3B%7D.DodgerBlue%20%7Bbackground%3ADodgerBlue%3B%7D.CornflowerBlue%20%7Bbackground%3ACornflowerBlue%3B%7D.Aqua%20%7Bbackground%3AAqua%3B%7D.Cyan%20%7Bbackground%3ACyan%3B%7D.MediumTurquoise%20%7Bbackground%3AMediumTurquoise%3B%7D.SteelBlue%20%7Bbackground%3ASteelBlue%3B%7D.LightSkyBlue%20%7Bbackground%3ALightSkyBlue%3B%7D.SkyBlue%20%7Bbackground%3ASkyBlue%3B%7D.MediumSlateBlue%20%7Bbackground%3AMediumSlateBlue%3B%7D.SlateBlue%20%7Bbackground%3ASlateBlue%3B%7D.RoyalBlue%20%7Bbackground%3ARoyalBlue%3B%7D.Blue%20%7Bbackground%3ABlue%3B%7D.MediumBlue%20%7Bbackground%3AMediumBlue%3B%7D.DarkSlateBlue%20%7Bbackground%3ADarkSlateBlue%3B%7D.Indigo%20%20%7Bbackground%3AIndigo%3B%7D.DarkBlue%20%7Bbackground%3ADarkBlue%3B%7D.Navy%20%7Bbackground%3ANavy%3B%7D.MidnightBlue%20%7Bbackground%3AMidnightBlue%3B%7D.Purple%20%20%20%20%20%20%20%20%7Bbackground%3APurple%3B%7D.GhostWhite%20%7Bbackground%3AGhostWhite%3B%7D.Lavender%20%7Bbackground%3ALavender%3B%7D.Violet%20%7Bbackground%3AViolet%3B%7D.Plum%20%7Bbackground%3APlum%3B%7D.Thistle%20%7Bbackground%3AThistle%3B%7D.Fuchsia%20%7Bbackground%3AFuchsia%3B%7D.Magenta%20%7Bbackground%3AMagenta%3B%7D.Orchid%20%7Bbackground%3AOrchid%3B%7D.PaleVioletRed%20%7Bbackground%3APaleVioletRed%3B%7D.DarkMagenta%20%7Bbackground%3ADarkMagenta%3B%7D.MediumOrchid%20%7Bbackground%3AMediumOrchid%3B%7D.DarkOrchid%20%7Bbackground%3ADarkOrchid%3B%7D.DarkViolet%20%7Bbackground%3ADarkViolet%3B%7D.MediumPurple%20%7Bbackground%3AMediumPurple%3B%7D.BlueViolet%20%7Bbackground%3ABlueViolet%3B%7D.Purple%20%7Bbackground%3APurple%3B%7D.Other%20%20%20%20%20%20%20%20%20%7Bbackground%3AOther%3B%7D.White%20%7Bbackground%3AWhite%3B%7D.WhiteSmoke%20%7Bbackground%3AWhiteSmoke%3B%7D.Gainsboro%20%7Bbackground%3AGainsboro%3B%7D.LightGrey%20%7Bbackground%3ALightGrey%3B%7D.DarkGray%20%7Bbackground%3ADarkGray%3B%7D.Silver%20%7Bbackground%3ASilver%3B%7D.Gray%20%7Bbackground%3AGray%3B%7D.LightSlateGray%20%7Bbackground%3ALightSlateGray%3B%7D.SlateGray%20%7Bbackground%3ASlateGray%3B%7D.DimGray%20%7Bbackground%3ADimGray%3B%7D.Black%20%7Bbackground%3ABlack%3B%7D.color-picker%20li%20%7Bdisplay%3A%20inline-block%3B%7D.color-picker%20button%20%7Bdisplay%3A%20inline-block%3Bheight%3A%2015px%3Bwidth%3A%2015px%3Bborder%3A2px%20solid%20gray%3Bborder-radius%3A%203px%3Bmargin%3A%203px%3B%7D.color-picker%20button%20%7Bbox-shadow%3A0%200%200%200px%20transparent%3Btransition-duration%3A%200.2s%7D.color-picker%20button%3Ahover%2C%20.color-picker%20button%3Afocus%20%7Bbox-shadow%3A0%200%200%206px%20black%3B%7D%23selectedColor%20%7Btext-align%3A%20center%3B%7D%23selectedColor%3Espan%20%7B%2F*font-size%3A%2030px%3B*%2Ffont-weight%3A%20bold%3Bbackground%3A%20black%3Bcolor%3Awhite%3Bpadding%3A%200.5em%201em%3Bmargin%3A1em%20auto%3Bdisplay%3A%20inline-block%3Bborder-radius%3A%2010px%3B%7D%23previewColor%20%7Bwidth%3A100%25%3Bmin-height%3A%20200px%3B%7D%22%2Cdocument.head.appendChild(b)%3Blet%20c%3Ddocument.createElement(%22style%22)%3Bc.textContent%3D%22.disclosure%20ul%2C.disclosure%20li%20%7Blist-style%3Anone%3Bpadding%3A%200%3B%7D.disclosure%20li%20%7Bmargin%3A%200%3B%7D.disclosure%20a%20%7Bdisplay%3A%20block%3Bpadding%3A%200.2em%201em%3B%7D.disclosure%20h2%20button%20%7Bdisplay%3A%20inline-block%3B%7D.disclosureTriggerButton%3Espan%3Afirst-child%20%7Bdisplay%3A%20inline-block%3Btransition-duration%3A%200.4s%3B%7D.disclosureTriggerButton%5Baria-expanded%3D'true'%5D%3Espan%3Afirst-child%20%7Btransform%3A%20rotate(180deg)%3B%7D.disclosure%20%7Bmargin-top%3A10px%3B%7D%22%2Cdocument.head.appendChild(c)%7D()%2Ca%2B%3D'%20%20%3Cdiv%20class%3D%22disclosure%22%3E%5Cn'%2Ca%2B%3D%22%20%20%20%3Cdiv%3E%5Cn%22%2Ca%2B%3D'%20%20%20%3Cbutton%20class%3D%22disclosureTriggerButton%22%20type%3D%22button%22%20aria-expanded%3D%22false%22%20aria-controls%3D%22disclosure1%22%20id%3D%22TriggerEl%22%3E%3Cspan%20aria-hidden%3D%22true%22%3E%5Cu25BC%3C%2Fspan%3ETab%20Path%20Color%3C%2Fbutton%3E%5Cn'%2Ca%2B%3D%22%20%20%20%3C%2Fdiv%3E%5Cn%22%2Ca%2B%3D'%20%20%20%3Cdiv%20id%3D%22disclosure1%22%20tabindex%3D%22-1%22%20class%3D%22disclosureContent%22%20role%3D%22group%22%20aria-labelledby%3D%22TriggerEl%22%20hidden%3E%5Cn'%2Ca%2B%3D'%20%20%20%3Cdiv%20class%3D%22no-list-style%22%20role%3D%22group%22%20aria-labelledby%3D%22h1heading%22%3E%5Cn'%2Ca%2B%3D'%20%20%20%3Cul%20role%3D%22list%22%20class%3D%22color-picker%22%3E%5Cn'%2Ca%2B%3D'%20%20%20%20%3Cli%20role%3D%22listitem%22%3E%3Cbutton%20type%3D%22button%22%20class%3D%22Snow%22%3E%3Cspan%20class%3D%22visually-hidden%22%3ESnow%3C%2Fspan%3E%3C%2Fbutton%3E%3C%2Fli%3E%5Cn'%2Ca%2B%3D'%20%20%20%20%3Cli%20role%3D%22listitem%22%3E%3Cbutton%20type%3D%22button%22%20class%3D%22SeaShell%22%3E%3Cspan%20class%3D%22visually-hidden%22%3ESeaShell%3C%2Fspan%3E%3C%2Fbutton%3E%3C%2Fli%3E%5Cn'%2Ca%2B%3D'%20%20%20%20%3Cli%20role%3D%22listitem%22%3E%3Cbutton%20type%3D%22button%22%20class%3D%22LavenderBlush%22%3E%3Cspan%20class%3D%22visually-hidden%22%3ELavenderBlush%3C%2Fspan%3E%3C%2Fbutton%3E%3C%2Fli%3E%5Cn'%2Ca%2B%3D'%20%20%20%20%3Cli%20role%3D%22listitem%22%3E%3Cbutton%20type%3D%22button%22%20class%3D%22MistyRose%22%3E%3Cspan%20class%3D%22visually-hidden%22%3EMistyRose%3C%2Fspan%3E%3C%2Fbutton%3E%3C%2Fli%3E%5Cn'%2Ca%2B%3D'%20%20%20%20%3Cli%20role%3D%22listitem%22%3E%3Cbutton%20type%3D%22button%22%20class%3D%22Linen%22%3E%3Cspan%20class%3D%22visually-hidden%22%3ELinen%3C%2Fspan%3E%3C%2Fbutton%3E%3C%2Fli%3E%5Cn'%2Ca%2B%3D'%20%20%20%20%3Cli%20role%3D%22listitem%22%3E%3Cbutton%20type%3D%22button%22%20class%3D%22Pink%22%3E%3Cspan%20class%3D%22visually-hidden%22%3EPink%3C%2Fspan%3E%3C%2Fbutton%3E%3C%2Fli%3E%5Cn'%2Ca%2B%3D'%20%20%20%20%3Cli%20role%3D%22listitem%22%3E%3Cbutton%20type%3D%22button%22%20class%3D%22LightPink%22%3E%3Cspan%20class%3D%22visually-hidden%22%3ELightPink%3C%2Fspan%3E%3C%2Fbutton%3E%3C%2Fli%3E%5Cn'%2Ca%2B%3D'%20%20%20%20%3Cli%20role%3D%22listitem%22%3E%3Cbutton%20type%3D%22button%22%20class%3D%22Red%22%3E%3Cspan%20class%3D%22visually-hidden%22%3ERed%3C%2Fspan%3E%3C%2Fbutton%3E%3C%2Fli%3E%5Cn'%2Ca%2B%3D'%20%20%20%20%3Cli%20role%3D%22listitem%22%3E%3Cbutton%20type%3D%22button%22%20class%3D%22Crimson%22%3E%3Cspan%20class%3D%22visually-hidden%22%3ECrimson%3C%2Fspan%3E%3C%2Fbutton%3E%3C%2Fli%3E%5Cn'%2Ca%2B%3D'%20%20%20%20%3Cli%20role%3D%22listitem%22%3E%3Cbutton%20type%3D%22button%22%20class%3D%22HotPink%22%3E%3Cspan%20class%3D%22visually-hidden%22%3EHotPink%3C%2Fspan%3E%3C%2Fbutton%3E%3C%2Fli%3E%5Cn'%2Ca%2B%3D'%20%20%20%20%3Cli%20role%3D%22listitem%22%3E%3Cbutton%20type%3D%22button%22%20class%3D%22Tomato%22%3E%3Cspan%20class%3D%22visually-hidden%22%3ETomato%3C%2Fspan%3E%3C%2Fbutton%3E%3C%2Fli%3E%5Cn'%2Ca%2B%3D'%20%20%20%20%3Cli%20role%3D%22listitem%22%3E%3Cbutton%20type%3D%22button%22%20class%3D%22OrangeRed%22%3E%3Cspan%20class%3D%22visually-hidden%22%3EOrangeRed%3C%2Fspan%3E%3C%2Fbutton%3E%3C%2Fli%3E%5Cn'%2Ca%2B%3D'%20%20%20%20%3Cli%20role%3D%22listitem%22%3E%3Cbutton%20type%3D%22button%22%20class%3D%22DeepPink%22%3E%3Cspan%20class%3D%22visually-hidden%22%3EDeepPink%3C%2Fspan%3E%3C%2Fbutton%3E%3C%2Fli%3E%5Cn'%2Ca%2B%3D'%20%20%20%20%3Cli%20role%3D%22listitem%22%3E%3Cbutton%20type%3D%22button%22%20class%3D%22IndianRed%20%22%3E%3Cspan%20class%3D%22visually-hidden%22%3EIndianRed%20%3C%2Fspan%3E%3C%2Fbutton%3E%3C%2Fli%3E%5Cn'%2Ca%2B%3D'%20%20%20%20%3Cli%20role%3D%22listitem%22%3E%3Cbutton%20type%3D%22button%22%20class%3D%22RosyBrown%22%3E%3Cspan%20class%3D%22visually-hidden%22%3ERosyBrown%3C%2Fspan%3E%3C%2Fbutton%3E%3C%2Fli%3E%5Cn'%2Ca%2B%3D'%20%20%20%20%3Cli%20role%3D%22listitem%22%3E%3Cbutton%20type%3D%22button%22%20class%3D%22MediumVioletRed%22%3E%3Cspan%20class%3D%22visually-hidden%22%3EMediumVioletRed%3C%2Fspan%3E%3C%2Fbutton%3E%3C%2Fli%3E%5Cn'%2Ca%2B%3D'%20%20%20%20%3Cli%20role%3D%22listitem%22%3E%3Cbutton%20type%3D%22button%22%20class%3D%22FireBrick%22%3E%3Cspan%20class%3D%22visually-hidden%22%3EFireBrick%3C%2Fspan%3E%3C%2Fbutton%3E%3C%2Fli%3E%5Cn'%2Ca%2B%3D'%20%20%20%20%3Cli%20role%3D%22listitem%22%3E%3Cbutton%20type%3D%22button%22%20class%3D%22Brown%22%3E%3Cspan%20class%3D%22visually-hidden%22%3EBrown%3C%2Fspan%3E%3C%2Fbutton%3E%3C%2Fli%3E%5Cn'%2Ca%2B%3D'%20%20%20%20%3Cli%20role%3D%22listitem%22%3E%3Cbutton%20type%3D%22button%22%20class%3D%22Sienna%22%3E%3Cspan%20class%3D%22visually-hidden%22%3ESienna%3C%2Fspan%3E%3C%2Fbutton%3E%3C%2Fli%3E%5Cn'%2Ca%2B%3D'%20%20%20%20%3Cli%20role%3D%22listitem%22%3E%3Cbutton%20type%3D%22button%22%20class%3D%22SaddleBrown%22%3E%3Cspan%20class%3D%22visually-hidden%22%3ESaddleBrown%3C%2Fspan%3E%3C%2Fbutton%3E%3C%2Fli%3E%5Cn'%2Ca%2B%3D'%20%20%20%20%3Cli%20role%3D%22listitem%22%3E%3Cbutton%20type%3D%22button%22%20class%3D%22DarkRed%22%3E%3Cspan%20class%3D%22visually-hidden%22%3EDarkRed%3C%2Fspan%3E%3C%2Fbutton%3E%3C%2Fli%3E%5Cn'%2Ca%2B%3D'%20%20%20%20%3Cli%20role%3D%22listitem%22%3E%3Cbutton%20type%3D%22button%22%20class%3D%22Maroon%22%3E%3Cspan%20class%3D%22visually-hidden%22%3EMaroon%3C%2Fspan%3E%3C%2Fbutton%3E%3C%2Fli%3E%5Cn'%2Ca%2B%3D'%20%20%20%20%3Cli%20role%3D%22listitem%22%3E%3Cbutton%20type%3D%22button%22%20class%3D%22Orange%22%3E%3Cspan%20class%3D%22visually-hidden%22%3EOrange%3C%2Fspan%3E%3C%2Fbutton%3E%3C%2Fli%3E%5Cn'%2Ca%2B%3D'%20%20%20%20%3Cli%20role%3D%22listitem%22%3E%3Cbutton%20type%3D%22button%22%20class%3D%22FloralWhite%22%3E%3Cspan%20class%3D%22visually-hidden%22%3EFloralWhite%3C%2Fspan%3E%3C%2Fbutton%3E%3C%2Fli%3E%5Cn'%2Ca%2B%3D'%20%20%20%20%3Cli%20role%3D%22listitem%22%3E%3Cbutton%20type%3D%22button%22%20class%3D%22Cornsilk%22%3E%3Cspan%20class%3D%22visually-hidden%22%3ECornsilk%3C%2Fspan%3E%3C%2Fbutton%3E%3C%2Fli%3E%5Cn'%2Ca%2B%3D'%20%20%20%20%3Cli%20role%3D%22listitem%22%3E%3Cbutton%20type%3D%22button%22%20class%3D%22OldLace%22%3E%3Cspan%20class%3D%22visually-hidden%22%3EOldLace%3C%2Fspan%3E%3C%2Fbutton%3E%3C%2Fli%3E%5Cn'%2Ca%2B%3D'%20%20%20%20%3Cli%20role%3D%22listitem%22%3E%3Cbutton%20type%3D%22button%22%20class%3D%22PapayaWhip%22%3E%3Cspan%20class%3D%22visually-hidden%22%3EPapayaWhip%3C%2Fspan%3E%3C%2Fbutton%3E%3C%2Fli%3E%5Cn'%2Ca%2B%3D'%20%20%20%20%3Cli%20role%3D%22listitem%22%3E%3Cbutton%20type%3D%22button%22%20class%3D%22BlanchedAlmond%22%3E%3Cspan%20class%3D%22visually-hidden%22%3EBlanchedAlmond%3C%2Fspan%3E%3C%2Fbutton%3E%3C%2Fli%3E%5Cn'%2Ca%2B%3D'%20%20%20%20%3Cli%20role%3D%22listitem%22%3E%3Cbutton%20type%3D%22button%22%20class%3D%22Bisque%22%3E%3Cspan%20class%3D%22visually-hidden%22%3EBisque%3C%2Fspan%3E%3C%2Fbutton%3E%3C%2Fli%3E%5Cn'%2Ca%2B%3D'%20%20%20%20%3Cli%20role%3D%22listitem%22%3E%3Cbutton%20type%3D%22button%22%20class%3D%22Moccasin%22%3E%3Cspan%20class%3D%22visually-hidden%22%3EMoccasin%3C%2Fspan%3E%3C%2Fbutton%3E%3C%2Fli%3E%5Cn'%2Ca%2B%3D'%20%20%20%20%3Cli%20role%3D%22listitem%22%3E%3Cbutton%20type%3D%22button%22%20class%3D%22NavajoWhite%22%3E%3Cspan%20class%3D%22visually-hidden%22%3ENavajoWhite%3C%2Fspan%3E%3C%2Fbutton%3E%3C%2Fli%3E%5Cn'%2Ca%2B%3D'%20%20%20%20%3Cli%20role%3D%22listitem%22%3E%3Cbutton%20type%3D%22button%22%20class%3D%22PeachPuff%22%3E%3Cspan%20class%3D%22visually-hidden%22%3EPeachPuff%3C%2Fspan%3E%3C%2Fbutton%3E%3C%2Fli%3E%5Cn'%2Ca%2B%3D'%20%20%20%20%3Cli%20role%3D%22listitem%22%3E%3Cbutton%20type%3D%22button%22%20class%3D%22Wheat%22%3E%3Cspan%20class%3D%22visually-hidden%22%3EWheat%3C%2Fspan%3E%3C%2Fbutton%3E%3C%2Fli%3E%5Cn'%2Ca%2B%3D'%20%20%20%20%3Cli%20role%3D%22listitem%22%3E%3Cbutton%20type%3D%22button%22%20class%3D%22AntiqueWhite%22%3E%3Cspan%20class%3D%22visually-hidden%22%3EAntiqueWhite%3C%2Fspan%3E%3C%2Fbutton%3E%3C%2Fli%3E%5Cn'%2Ca%2B%3D'%20%20%20%20%3Cli%20role%3D%22listitem%22%3E%3Cbutton%20type%3D%22button%22%20class%3D%22Gold%22%3E%3Cspan%20class%3D%22visually-hidden%22%3EGold%3C%2Fspan%3E%3C%2Fbutton%3E%3C%2Fli%3E%5Cn'%2Ca%2B%3D'%20%20%20%20%3Cli%20role%3D%22listitem%22%3E%3Cbutton%20type%3D%22button%22%20class%3D%22Orange%22%3E%3Cspan%20class%3D%22visually-hidden%22%3EOrange%3C%2Fspan%3E%3C%2Fbutton%3E%3C%2Fli%3E%5Cn'%2Ca%2B%3D'%20%20%20%20%3Cli%20role%3D%22listitem%22%3E%3Cbutton%20type%3D%22button%22%20class%3D%22LightSalmon%22%3E%3Cspan%20class%3D%22visually-hidden%22%3ELightSalmon%3C%2Fspan%3E%3C%2Fbutton%3E%3C%2Fli%3E%5Cn'%2Ca%2B%3D'%20%20%20%20%3Cli%20role%3D%22listitem%22%3E%3Cbutton%20type%3D%22button%22%20class%3D%22Darkorange%22%3E%3Cspan%20class%3D%22visually-hidden%22%3EDarkorange%3C%2Fspan%3E%3C%2Fbutton%3E%3C%2Fli%3E%5Cn'%2Ca%2B%3D'%20%20%20%20%3Cli%20role%3D%22listitem%22%3E%3Cbutton%20type%3D%22button%22%20class%3D%22Coral%22%3E%3Cspan%20class%3D%22visually-hidden%22%3ECoral%3C%2Fspan%3E%3C%2Fbutton%3E%3C%2Fli%3E%5Cn'%2Ca%2B%3D'%20%20%20%20%3Cli%20role%3D%22listitem%22%3E%3Cbutton%20type%3D%22button%22%20class%3D%22Salmon%22%3E%3Cspan%20class%3D%22visually-hidden%22%3ESalmon%3C%2Fspan%3E%3C%2Fbutton%3E%3C%2Fli%3E%5Cn'%2Ca%2B%3D'%20%20%20%20%3Cli%20role%3D%22listitem%22%3E%3Cbutton%20type%3D%22button%22%20class%3D%22SandyBrown%22%3E%3Cspan%20class%3D%22visually-hidden%22%3ESandyBrown%3C%2Fspan%3E%3C%2Fbutton%3E%3C%2Fli%3E%5Cn'%2Ca%2B%3D'%20%20%20%20%3Cli%20role%3D%22listitem%22%3E%3Cbutton%20type%3D%22button%22%20class%3D%22LightCoral%22%3E%3Cspan%20class%3D%22visually-hidden%22%3ELightCoral%3C%2Fspan%3E%3C%2Fbutton%3E%3C%2Fli%3E%5Cn'%2Ca%2B%3D'%20%20%20%20%3Cli%20role%3D%22listitem%22%3E%3Cbutton%20type%3D%22button%22%20class%3D%22DarkSalmon%22%3E%3Cspan%20class%3D%22visually-hidden%22%3EDarkSalmon%3C%2Fspan%3E%3C%2Fbutton%3E%3C%2Fli%3E%5Cn'%2Ca%2B%3D'%20%20%20%20%3Cli%20role%3D%22listitem%22%3E%3Cbutton%20type%3D%22button%22%20class%3D%22BurlyWood%22%3E%3Cspan%20class%3D%22visually-hidden%22%3EBurlyWood%3C%2Fspan%3E%3C%2Fbutton%3E%3C%2Fli%3E%5Cn'%2Ca%2B%3D'%20%20%20%20%3Cli%20role%3D%22listitem%22%3E%3Cbutton%20type%3D%22button%22%20class%3D%22Tan%22%3E%3Cspan%20class%3D%22visually-hidden%22%3ETan%3C%2Fspan%3E%3C%2Fbutton%3E%3C%2Fli%3E%5Cn'%2Ca%2B%3D'%20%20%20%20%3Cli%20role%3D%22listitem%22%3E%3Cbutton%20type%3D%22button%22%20class%3D%22Chocolate%22%3E%3Cspan%20class%3D%22visually-hidden%22%3EChocolate%3C%2Fspan%3E%3C%2Fbutton%3E%3C%2Fli%3E%5Cn'%2Ca%2B%3D'%20%20%20%20%3Cli%20role%3D%22listitem%22%3E%3Cbutton%20type%3D%22button%22%20class%3D%22Peru%22%3E%3Cspan%20class%3D%22visually-hidden%22%3EPeru%3C%2Fspan%3E%3C%2Fbutton%3E%3C%2Fli%3E%5Cn'%2Ca%2B%3D'%20%20%20%20%3Cli%20role%3D%22listitem%22%3E%3Cbutton%20type%3D%22button%22%20class%3D%22Yellow%22%3E%3Cspan%20class%3D%22visually-hidden%22%3EYellow%3C%2Fspan%3E%3C%2Fbutton%3E%3C%2Fli%3E%5Cn'%2Ca%2B%3D'%20%20%20%20%3Cli%20role%3D%22listitem%22%3E%3Cbutton%20type%3D%22button%22%20class%3D%22Ivory%22%3E%3Cspan%20class%3D%22visually-hidden%22%3EIvory%3C%2Fspan%3E%3C%2Fbutton%3E%3C%2Fli%3E%5Cn'%2Ca%2B%3D'%20%20%20%20%3Cli%20role%3D%22listitem%22%3E%3Cbutton%20type%3D%22button%22%20class%3D%22LightYellow%22%3E%3Cspan%20class%3D%22visually-hidden%22%3ELightYellow%3C%2Fspan%3E%3C%2Fbutton%3E%3C%2Fli%3E%5Cn'%2Ca%2B%3D'%20%20%20%20%3Cli%20role%3D%22listitem%22%3E%3Cbutton%20type%3D%22button%22%20class%3D%22LemonChiffon%22%3E%3Cspan%20class%3D%22visually-hidden%22%3ELemonChiffon%3C%2Fspan%3E%3C%2Fbutton%3E%3C%2Fli%3E%5Cn'%2Ca%2B%3D'%20%20%20%20%3Cli%20role%3D%22listitem%22%3E%3Cbutton%20type%3D%22button%22%20class%3D%22LightGoldenRodYellow%22%3E%3Cspan%20class%3D%22visually-hidden%22%3ELightGoldenRodYellow%3C%2Fspan%3E%3C%2Fbutton%3E%3C%2Fli%3E%5Cn'%2Ca%2B%3D'%20%20%20%20%3Cli%20role%3D%22listitem%22%3E%3Cbutton%20type%3D%22button%22%20class%3D%22Beige%22%3E%3Cspan%20class%3D%22visually-hidden%22%3EBeige%3C%2Fspan%3E%3C%2Fbutton%3E%3C%2Fli%3E%5Cn'%2Ca%2B%3D'%20%20%20%20%3Cli%20role%3D%22listitem%22%3E%3Cbutton%20type%3D%22button%22%20class%3D%22PaleGoldenRod%22%3E%3Cspan%20class%3D%22visually-hidden%22%3EPaleGoldenRod%3C%2Fspan%3E%3C%2Fbutton%3E%3C%2Fli%3E%5Cn'%2Ca%2B%3D'%20%20%20%20%3Cli%20role%3D%22listitem%22%3E%3Cbutton%20type%3D%22button%22%20class%3D%22Yellow%22%3E%3Cspan%20class%3D%22visually-hidden%22%3EYellow%3C%2Fspan%3E%3C%2Fbutton%3E%3C%2Fli%3E%5Cn'%2Ca%2B%3D'%20%20%20%20%3Cli%20role%3D%22listitem%22%3E%3Cbutton%20type%3D%22button%22%20class%3D%22Khaki%22%3E%3Cspan%20class%3D%22visually-hidden%22%3EKhaki%3C%2Fspan%3E%3C%2Fbutton%3E%3C%2Fli%3E%5Cn'%2Ca%2B%3D'%20%20%20%20%3Cli%20role%3D%22listitem%22%3E%3Cbutton%20type%3D%22button%22%20class%3D%22GoldenRod%22%3E%3Cspan%20class%3D%22visually-hidden%22%3EGoldenRod%3C%2Fspan%3E%3C%2Fbutton%3E%3C%2Fli%3E%5Cn'%2Ca%2B%3D'%20%20%20%20%3Cli%20role%3D%22listitem%22%3E%3Cbutton%20type%3D%22button%22%20class%3D%22DarkGoldenRod%22%3E%3Cspan%20class%3D%22visually-hidden%22%3EDarkGoldenRod%3C%2Fspan%3E%3C%2Fbutton%3E%3C%2Fli%3E%5Cn'%2Ca%2B%3D'%20%20%20%20%3Cli%20role%3D%22listitem%22%3E%3Cbutton%20type%3D%22button%22%20class%3D%22Green%22%3E%3Cspan%20class%3D%22visually-hidden%22%3EGreen%3C%2Fspan%3E%3C%2Fbutton%3E%3C%2Fli%3E%5Cn'%2Ca%2B%3D'%20%20%20%20%3Cli%20role%3D%22listitem%22%3E%3Cbutton%20type%3D%22button%22%20class%3D%22MintCream%22%3E%3Cspan%20class%3D%22visually-hidden%22%3EMintCream%3C%2Fspan%3E%3C%2Fbutton%3E%3C%2Fli%3E%5Cn'%2Ca%2B%3D'%20%20%20%20%3Cli%20role%3D%22listitem%22%3E%3Cbutton%20type%3D%22button%22%20class%3D%22Azure%22%3E%3Cspan%20class%3D%22visually-hidden%22%3EAzure%3C%2Fspan%3E%3C%2Fbutton%3E%3C%2Fli%3E%5Cn'%2Ca%2B%3D'%20%20%20%20%3Cli%20role%3D%22listitem%22%3E%3Cbutton%20type%3D%22button%22%20class%3D%22HoneyDew%22%3E%3Cspan%20class%3D%22visually-hidden%22%3EHoneyDew%3C%2Fspan%3E%3C%2Fbutton%3E%3C%2Fli%3E%5Cn'%2Ca%2B%3D'%20%20%20%20%3Cli%20role%3D%22listitem%22%3E%3Cbutton%20type%3D%22button%22%20class%3D%22LightCyan%22%3E%3Cspan%20class%3D%22visually-hidden%22%3ELightCyan%3C%2Fspan%3E%3C%2Fbutton%3E%3C%2Fli%3E%5Cn'%2Ca%2B%3D'%20%20%20%20%3Cli%20role%3D%22listitem%22%3E%3Cbutton%20type%3D%22button%22%20class%3D%22PaleTurquoise%22%3E%3Cspan%20class%3D%22visually-hidden%22%3EPaleTurquoise%3C%2Fspan%3E%3C%2Fbutton%3E%3C%2Fli%3E%5Cn'%2Ca%2B%3D'%20%20%20%20%3Cli%20role%3D%22listitem%22%3E%3Cbutton%20type%3D%22button%22%20class%3D%22GreenYellow%22%3E%3Cspan%20class%3D%22visually-hidden%22%3EGreenYellow%3C%2Fspan%3E%3C%2Fbutton%3E%3C%2Fli%3E%5Cn'%2Ca%2B%3D'%20%20%20%20%3Cli%20role%3D%22listitem%22%3E%3Cbutton%20type%3D%22button%22%20class%3D%22LightGreen%22%3E%3Cspan%20class%3D%22visually-hidden%22%3ELightGreen%3C%2Fspan%3E%3C%2Fbutton%3E%3C%2Fli%3E%5Cn'%2Ca%2B%3D'%20%20%20%20%3Cli%20role%3D%22listitem%22%3E%3Cbutton%20type%3D%22button%22%20class%3D%22PaleGreen%22%3E%3Cspan%20class%3D%22visually-hidden%22%3EPaleGreen%3C%2Fspan%3E%3C%2Fbutton%3E%3C%2Fli%3E%5Cn'%2Ca%2B%3D'%20%20%20%20%3Cli%20role%3D%22listitem%22%3E%3Cbutton%20type%3D%22button%22%20class%3D%22DarkSeaGreen%22%3E%3Cspan%20class%3D%22visually-hidden%22%3EDarkSeaGreen%3C%2Fspan%3E%3C%2Fbutton%3E%3C%2Fli%3E%5Cn'%2Ca%2B%3D'%20%20%20%20%3Cli%20role%3D%22listitem%22%3E%3Cbutton%20type%3D%22button%22%20class%3D%22DarkKhaki%22%3E%3Cspan%20class%3D%22visually-hidden%22%3EDarkKhaki%3C%2Fspan%3E%3C%2Fbutton%3E%3C%2Fli%3E%5Cn'%2Ca%2B%3D'%20%20%20%20%3Cli%20role%3D%22listitem%22%3E%3Cbutton%20type%3D%22button%22%20class%3D%22YellowGreen%22%3E%3Cspan%20class%3D%22visually-hidden%22%3EYellowGreen%3C%2Fspan%3E%3C%2Fbutton%3E%3C%2Fli%3E%5Cn'%2Ca%2B%3D'%20%20%20%20%3Cli%20role%3D%22listitem%22%3E%3Cbutton%20type%3D%22button%22%20class%3D%22SpringGreen%22%3E%3Cspan%20class%3D%22visually-hidden%22%3ESpringGreen%3C%2Fspan%3E%3C%2Fbutton%3E%3C%2Fli%3E%5Cn'%2Ca%2B%3D'%20%20%20%20%3Cli%20role%3D%22listitem%22%3E%3Cbutton%20type%3D%22button%22%20class%3D%22Lime%22%3E%3Cspan%20class%3D%22visually-hidden%22%3ELime%3C%2Fspan%3E%3C%2Fbutton%3E%3C%2Fli%3E%5Cn'%2Ca%2B%3D'%20%20%20%20%3Cli%20role%3D%22listitem%22%3E%3Cbutton%20type%3D%22button%22%20class%3D%22Aquamarine%22%3E%3Cspan%20class%3D%22visually-hidden%22%3EAquamarine%3C%2Fspan%3E%3C%2Fbutton%3E%3C%2Fli%3E%5Cn'%2Ca%2B%3D'%20%20%20%20%3Cli%20role%3D%22listitem%22%3E%3Cbutton%20type%3D%22button%22%20class%3D%22MediumSpringGreen%22%3E%3Cspan%20class%3D%22visually-hidden%22%3EMediumSpringGreen%3C%2Fspan%3E%3C%2Fbutton%3E%3C%2Fli%3E%5Cn'%2Ca%2B%3D'%20%20%20%20%3Cli%20role%3D%22listitem%22%3E%3Cbutton%20type%3D%22button%22%20class%3D%22Turquoise%22%3E%3Cspan%20class%3D%22visually-hidden%22%3ETurquoise%3C%2Fspan%3E%3C%2Fbutton%3E%3C%2Fli%3E%5Cn'%2Ca%2B%3D'%20%20%20%20%3Cli%20role%3D%22listitem%22%3E%3Cbutton%20type%3D%22button%22%20class%3D%22MediumSeaGreen%22%3E%3Cspan%20class%3D%22visually-hidden%22%3EMediumSeaGreen%3C%2Fspan%3E%3C%2Fbutton%3E%3C%2Fli%3E%5Cn'%2Ca%2B%3D'%20%20%20%20%3Cli%20role%3D%22listitem%22%3E%3Cbutton%20type%3D%22button%22%20class%3D%22Chartreuse%22%3E%3Cspan%20class%3D%22visually-hidden%22%3EChartreuse%3C%2Fspan%3E%3C%2Fbutton%3E%3C%2Fli%3E%5Cn'%2Ca%2B%3D'%20%20%20%20%3Cli%20role%3D%22listitem%22%3E%3Cbutton%20type%3D%22button%22%20class%3D%22LawnGreen%22%3E%3Cspan%20class%3D%22visually-hidden%22%3ELawnGreen%3C%2Fspan%3E%3C%2Fbutton%3E%3C%2Fli%3E%5Cn'%2Ca%2B%3D'%20%20%20%20%3Cli%20role%3D%22listitem%22%3E%3Cbutton%20type%3D%22button%22%20class%3D%22LimeGreen%22%3E%3Cspan%20class%3D%22visually-hidden%22%3ELimeGreen%3C%2Fspan%3E%3C%2Fbutton%3E%3C%2Fli%3E%5Cn'%2Ca%2B%3D'%20%20%20%20%3Cli%20role%3D%22listitem%22%3E%3Cbutton%20type%3D%22button%22%20class%3D%22DarkSlateGray%22%3E%3Cspan%20class%3D%22visually-hidden%22%3EDarkSlateGray%3C%2Fspan%3E%3C%2Fbutton%3E%3C%2Fli%3E%5Cn'%2Ca%2B%3D'%20%20%20%20%3Cli%20role%3D%22listitem%22%3E%3Cbutton%20type%3D%22button%22%20class%3D%22SeaGreen%22%3E%3Cspan%20class%3D%22visually-hidden%22%3ESeaGreen%3C%2Fspan%3E%3C%2Fbutton%3E%3C%2Fli%3E%5Cn'%2Ca%2B%3D'%20%20%20%20%3Cli%20role%3D%22listitem%22%3E%3Cbutton%20type%3D%22button%22%20class%3D%22ForestGreen%22%3E%3Cspan%20class%3D%22visually-hidden%22%3EForestGreen%3C%2Fspan%3E%3C%2Fbutton%3E%3C%2Fli%3E%5Cn'%2Ca%2B%3D'%20%20%20%20%3Cli%20role%3D%22listitem%22%3E%3Cbutton%20type%3D%22button%22%20class%3D%22MediumAquaMarine%22%3E%3Cspan%20class%3D%22visually-hidden%22%3EMediumAquaMarine%3C%2Fspan%3E%3C%2Fbutton%3E%3C%2Fli%3E%5Cn'%2Ca%2B%3D'%20%20%20%20%3Cli%20role%3D%22listitem%22%3E%3Cbutton%20type%3D%22button%22%20class%3D%22CadetBlue%22%3E%3Cspan%20class%3D%22visually-hidden%22%3ECadetBlue%3C%2Fspan%3E%3C%2Fbutton%3E%3C%2Fli%3E%5Cn'%2Ca%2B%3D'%20%20%20%20%3Cli%20role%3D%22listitem%22%3E%3Cbutton%20type%3D%22button%22%20class%3D%22DarkOliveGreen%22%3E%3Cspan%20class%3D%22visually-hidden%22%3EDarkOliveGreen%3C%2Fspan%3E%3C%2Fbutton%3E%3C%2Fli%3E%5Cn'%2Ca%2B%3D'%20%20%20%20%3Cli%20role%3D%22listitem%22%3E%3Cbutton%20type%3D%22button%22%20class%3D%22Olive%22%3E%3Cspan%20class%3D%22visually-hidden%22%3EOlive%3C%2Fspan%3E%3C%2Fbutton%3E%3C%2Fli%3E%5Cn'%2Ca%2B%3D'%20%20%20%20%3Cli%20role%3D%22listitem%22%3E%3Cbutton%20type%3D%22button%22%20class%3D%22OliveDrab%22%3E%3Cspan%20class%3D%22visually-hidden%22%3EOliveDrab%3C%2Fspan%3E%3C%2Fbutton%3E%3C%2Fli%3E%5Cn'%2Ca%2B%3D'%20%20%20%20%3Cli%20role%3D%22listitem%22%3E%3Cbutton%20type%3D%22button%22%20class%3D%22LightSeaGreen%22%3E%3Cspan%20class%3D%22visually-hidden%22%3ELightSeaGreen%3C%2Fspan%3E%3C%2Fbutton%3E%3C%2Fli%3E%5Cn'%2Ca%2B%3D'%20%20%20%20%3Cli%20role%3D%22listitem%22%3E%3Cbutton%20type%3D%22button%22%20class%3D%22DarkTurquoise%22%3E%3Cspan%20class%3D%22visually-hidden%22%3EDarkTurquoise%3C%2Fspan%3E%3C%2Fbutton%3E%3C%2Fli%3E%5Cn'%2Ca%2B%3D'%20%20%20%20%3Cli%20role%3D%22listitem%22%3E%3Cbutton%20type%3D%22button%22%20class%3D%22DarkCyan%22%3E%3Cspan%20class%3D%22visually-hidden%22%3EDarkCyan%3C%2Fspan%3E%3C%2Fbutton%3E%3C%2Fli%3E%5Cn'%2Ca%2B%3D'%20%20%20%20%3Cli%20role%3D%22listitem%22%3E%3Cbutton%20type%3D%22button%22%20class%3D%22Teal%22%3E%3Cspan%20class%3D%22visually-hidden%22%3ETeal%3C%2Fspan%3E%3C%2Fbutton%3E%3C%2Fli%3E%5Cn'%2Ca%2B%3D'%20%20%20%20%3Cli%20role%3D%22listitem%22%3E%3Cbutton%20type%3D%22button%22%20class%3D%22Green%22%3E%3Cspan%20class%3D%22visually-hidden%22%3EGreen%3C%2Fspan%3E%3C%2Fbutton%3E%3C%2Fli%3E%5Cn'%2Ca%2B%3D'%20%20%20%20%3Cli%20role%3D%22listitem%22%3E%3Cbutton%20type%3D%22button%22%20class%3D%22DarkGreen%22%3E%3Cspan%20class%3D%22visually-hidden%22%3EDarkGreen%3C%2Fspan%3E%3C%2Fbutton%3E%3C%2Fli%3E%5Cn'%2Ca%2B%3D'%20%20%20%20%3Cli%20role%3D%22listitem%22%3E%3Cbutton%20type%3D%22button%22%20class%3D%22Blue%22%3E%3Cspan%20class%3D%22visually-hidden%22%3EBlue%3C%2Fspan%3E%3C%2Fbutton%3E%3C%2Fli%3E%5Cn'%2Ca%2B%3D'%20%20%20%20%3Cli%20role%3D%22listitem%22%3E%3Cbutton%20type%3D%22button%22%20class%3D%22AliceBlue%22%3E%3Cspan%20class%3D%22visually-hidden%22%3EAliceBlue%3C%2Fspan%3E%3C%2Fbutton%3E%3C%2Fli%3E%5Cn'%2Ca%2B%3D'%20%20%20%20%3Cli%20role%3D%22listitem%22%3E%3Cbutton%20type%3D%22button%22%20class%3D%22PowderBlue%22%3E%3Cspan%20class%3D%22visually-hidden%22%3EPowderBlue%3C%2Fspan%3E%3C%2Fbutton%3E%3C%2Fli%3E%5Cn'%2Ca%2B%3D'%20%20%20%20%3Cli%20role%3D%22listitem%22%3E%3Cbutton%20type%3D%22button%22%20class%3D%22LightBlue%22%3E%3Cspan%20class%3D%22visually-hidden%22%3ELightBlue%3C%2Fspan%3E%3C%2Fbutton%3E%3C%2Fli%3E%5Cn'%2Ca%2B%3D'%20%20%20%20%3Cli%20role%3D%22listitem%22%3E%3Cbutton%20type%3D%22button%22%20class%3D%22LightSteelBlue%22%3E%3Cspan%20class%3D%22visually-hidden%22%3ELightSteelBlue%3C%2Fspan%3E%3C%2Fbutton%3E%3C%2Fli%3E%5Cn'%2Ca%2B%3D'%20%20%20%20%3Cli%20role%3D%22listitem%22%3E%3Cbutton%20type%3D%22button%22%20class%3D%22DeepSkyBlue%22%3E%3Cspan%20class%3D%22visually-hidden%22%3EDeepSkyBlue%3C%2Fspan%3E%3C%2Fbutton%3E%3C%2Fli%3E%5Cn'%2Ca%2B%3D'%20%20%20%20%3Cli%20role%3D%22listitem%22%3E%3Cbutton%20type%3D%22button%22%20class%3D%22DodgerBlue%22%3E%3Cspan%20class%3D%22visually-hidden%22%3EDodgerBlue%3C%2Fspan%3E%3C%2Fbutton%3E%3C%2Fli%3E%5Cn'%2Ca%2B%3D'%20%20%20%20%3Cli%20role%3D%22listitem%22%3E%3Cbutton%20type%3D%22button%22%20class%3D%22CornflowerBlue%22%3E%3Cspan%20class%3D%22visually-hidden%22%3ECornflowerBlue%3C%2Fspan%3E%3C%2Fbutton%3E%3C%2Fli%3E%5Cn'%2Ca%2B%3D'%20%20%20%20%3Cli%20role%3D%22listitem%22%3E%3Cbutton%20type%3D%22button%22%20class%3D%22Aqua%22%3E%3Cspan%20class%3D%22visually-hidden%22%3EAqua%3C%2Fspan%3E%3C%2Fbutton%3E%3C%2Fli%3E%5Cn'%2Ca%2B%3D'%20%20%20%20%3Cli%20role%3D%22listitem%22%3E%3Cbutton%20type%3D%22button%22%20class%3D%22Cyan%22%3E%3Cspan%20class%3D%22visually-hidden%22%3ECyan%3C%2Fspan%3E%3C%2Fbutton%3E%3C%2Fli%3E%5Cn'%2Ca%2B%3D'%20%20%20%20%3Cli%20role%3D%22listitem%22%3E%3Cbutton%20type%3D%22button%22%20class%3D%22MediumTurquoise%22%3E%3Cspan%20class%3D%22visually-hidden%22%3EMediumTurquoise%3C%2Fspan%3E%3C%2Fbutton%3E%3C%2Fli%3E%5Cn'%2Ca%2B%3D'%20%20%20%20%3Cli%20role%3D%22listitem%22%3E%3Cbutton%20type%3D%22button%22%20class%3D%22SteelBlue%22%3E%3Cspan%20class%3D%22visually-hidden%22%3ESteelBlue%3C%2Fspan%3E%3C%2Fbutton%3E%3C%2Fli%3E%5Cn'%2Ca%2B%3D'%20%20%20%20%3Cli%20role%3D%22listitem%22%3E%3Cbutton%20type%3D%22button%22%20class%3D%22LightSkyBlue%22%3E%3Cspan%20class%3D%22visually-hidden%22%3ELightSkyBlue%3C%2Fspan%3E%3C%2Fbutton%3E%3C%2Fli%3E%5Cn'%2Ca%2B%3D'%20%20%20%20%3Cli%20role%3D%22listitem%22%3E%3Cbutton%20type%3D%22button%22%20class%3D%22SkyBlue%22%3E%3Cspan%20class%3D%22visually-hidden%22%3ESkyBlue%3C%2Fspan%3E%3C%2Fbutton%3E%3C%2Fli%3E%5Cn'%2Ca%2B%3D'%20%20%20%20%3Cli%20role%3D%22listitem%22%3E%3Cbutton%20type%3D%22button%22%20class%3D%22MediumSlateBlue%22%3E%3Cspan%20class%3D%22visually-hidden%22%3EMediumSlateBlue%3C%2Fspan%3E%3C%2Fbutton%3E%3C%2Fli%3E%5Cn'%2Ca%2B%3D'%20%20%20%20%3Cli%20role%3D%22listitem%22%3E%3Cbutton%20type%3D%22button%22%20class%3D%22SlateBlue%22%3E%3Cspan%20class%3D%22visually-hidden%22%3ESlateBlue%3C%2Fspan%3E%3C%2Fbutton%3E%3C%2Fli%3E%5Cn'%2Ca%2B%3D'%20%20%20%20%3Cli%20role%3D%22listitem%22%3E%3Cbutton%20type%3D%22button%22%20class%3D%22RoyalBlue%22%3E%3Cspan%20class%3D%22visually-hidden%22%3ERoyalBlue%3C%2Fspan%3E%3C%2Fbutton%3E%3C%2Fli%3E%5Cn'%2Ca%2B%3D'%20%20%20%20%3Cli%20role%3D%22listitem%22%3E%3Cbutton%20type%3D%22button%22%20class%3D%22Blue%22%3E%3Cspan%20class%3D%22visually-hidden%22%3EBlue%3C%2Fspan%3E%3C%2Fbutton%3E%3C%2Fli%3E%5Cn'%2Ca%2B%3D'%20%20%20%20%3Cli%20role%3D%22listitem%22%3E%3Cbutton%20type%3D%22button%22%20class%3D%22MediumBlue%22%3E%3Cspan%20class%3D%22visually-hidden%22%3EMediumBlue%3C%2Fspan%3E%3C%2Fbutton%3E%3C%2Fli%3E%5Cn'%2Ca%2B%3D'%20%20%20%20%3Cli%20role%3D%22listitem%22%3E%3Cbutton%20type%3D%22button%22%20class%3D%22DarkSlateBlue%22%3E%3Cspan%20class%3D%22visually-hidden%22%3EDarkSlateBlue%3C%2Fspan%3E%3C%2Fbutton%3E%3C%2Fli%3E%5Cn'%2Ca%2B%3D'%20%20%20%20%3Cli%20role%3D%22listitem%22%3E%3Cbutton%20type%3D%22button%22%20class%3D%22Indigo%20%22%3E%3Cspan%20class%3D%22visually-hidden%22%3EIndigo%20%3C%2Fspan%3E%3C%2Fbutton%3E%3C%2Fli%3E%5Cn'%2Ca%2B%3D'%20%20%20%20%3Cli%20role%3D%22listitem%22%3E%3Cbutton%20type%3D%22button%22%20class%3D%22DarkBlue%22%3E%3Cspan%20class%3D%22visually-hidden%22%3EDarkBlue%3C%2Fspan%3E%3C%2Fbutton%3E%3C%2Fli%3E%5Cn'%2Ca%2B%3D'%20%20%20%20%3Cli%20role%3D%22listitem%22%3E%3Cbutton%20type%3D%22button%22%20class%3D%22Navy%22%3E%3Cspan%20class%3D%22visually-hidden%22%3ENavy%3C%2Fspan%3E%3C%2Fbutton%3E%3C%2Fli%3E%5Cn'%2Ca%2B%3D'%20%20%20%20%3Cli%20role%3D%22listitem%22%3E%3Cbutton%20type%3D%22button%22%20class%3D%22MidnightBlue%22%3E%3Cspan%20class%3D%22visually-hidden%22%3EMidnightBlue%3C%2Fspan%3E%3C%2Fbutton%3E%3C%2Fli%3E%5Cn'%2Ca%2B%3D'%20%20%20%20%3Cli%20role%3D%22listitem%22%3E%3Cbutton%20type%3D%22button%22%20class%3D%22Purple%22%3E%3Cspan%20class%3D%22visually-hidden%22%3EPurple%3C%2Fspan%3E%3C%2Fbutton%3E%3C%2Fli%3E%5Cn'%2Ca%2B%3D'%20%20%20%20%3Cli%20role%3D%22listitem%22%3E%3Cbutton%20type%3D%22button%22%20class%3D%22GhostWhite%22%3E%3Cspan%20class%3D%22visually-hidden%22%3EGhostWhite%3C%2Fspan%3E%3C%2Fbutton%3E%3C%2Fli%3E%5Cn'%2Ca%2B%3D'%20%20%20%20%3Cli%20role%3D%22listitem%22%3E%3Cbutton%20type%3D%22button%22%20class%3D%22Lavender%22%3E%3Cspan%20class%3D%22visually-hidden%22%3ELavender%3C%2Fspan%3E%3C%2Fbutton%3E%3C%2Fli%3E%5Cn'%2Ca%2B%3D'%20%20%20%20%3Cli%20role%3D%22listitem%22%3E%3Cbutton%20type%3D%22button%22%20class%3D%22Violet%22%3E%3Cspan%20class%3D%22visually-hidden%22%3EViolet%3C%2Fspan%3E%3C%2Fbutton%3E%3C%2Fli%3E%5Cn'%2Ca%2B%3D'%20%20%20%20%3Cli%20role%3D%22listitem%22%3E%3Cbutton%20type%3D%22button%22%20class%3D%22Plum%22%3E%3Cspan%20class%3D%22visually-hidden%22%3EPlum%3C%2Fspan%3E%3C%2Fbutton%3E%3C%2Fli%3E%5Cn'%2Ca%2B%3D'%20%20%20%20%3Cli%20role%3D%22listitem%22%3E%3Cbutton%20type%3D%22button%22%20class%3D%22Thistle%22%3E%3Cspan%20class%3D%22visually-hidden%22%3EThistle%3C%2Fspan%3E%3C%2Fbutton%3E%3C%2Fli%3E%5Cn'%2Ca%2B%3D'%20%20%20%20%3Cli%20role%3D%22listitem%22%3E%3Cbutton%20type%3D%22button%22%20class%3D%22Fuchsia%22%3E%3Cspan%20class%3D%22visually-hidden%22%3EFuchsia%3C%2Fspan%3E%3C%2Fbutton%3E%3C%2Fli%3E%5Cn'%2Ca%2B%3D'%20%20%20%20%3Cli%20role%3D%22listitem%22%3E%3Cbutton%20type%3D%22button%22%20class%3D%22Magenta%22%3E%3Cspan%20class%3D%22visually-hidden%22%3EMagenta%3C%2Fspan%3E%3C%2Fbutton%3E%3C%2Fli%3E%5Cn'%2Ca%2B%3D'%20%20%20%20%3Cli%20role%3D%22listitem%22%3E%3Cbutton%20type%3D%22button%22%20class%3D%22Orchid%22%3E%3Cspan%20class%3D%22visually-hidden%22%3EOrchid%3C%2Fspan%3E%3C%2Fbutton%3E%3C%2Fli%3E%5Cn'%2Ca%2B%3D'%20%20%20%20%3Cli%20role%3D%22listitem%22%3E%3Cbutton%20type%3D%22button%22%20class%3D%22PaleVioletRed%22%3E%3Cspan%20class%3D%22visually-hidden%22%3EPaleVioletRed%3C%2Fspan%3E%3C%2Fbutton%3E%3C%2Fli%3E%5Cn'%2Ca%2B%3D'%20%20%20%20%3Cli%20role%3D%22listitem%22%3E%3Cbutton%20type%3D%22button%22%20class%3D%22DarkMagenta%22%3E%3Cspan%20class%3D%22visually-hidden%22%3EDarkMagenta%3C%2Fspan%3E%3C%2Fbutton%3E%3C%2Fli%3E%5Cn'%2Ca%2B%3D'%20%20%20%20%3Cli%20role%3D%22listitem%22%3E%3Cbutton%20type%3D%22button%22%20class%3D%22MediumOrchid%22%3E%3Cspan%20class%3D%22visually-hidden%22%3EMediumOrchid%3C%2Fspan%3E%3C%2Fbutton%3E%3C%2Fli%3E%5Cn'%2Ca%2B%3D'%20%20%20%20%3Cli%20role%3D%22listitem%22%3E%3Cbutton%20type%3D%22button%22%20class%3D%22DarkOrchid%22%3E%3Cspan%20class%3D%22visually-hidden%22%3EDarkOrchid%3C%2Fspan%3E%3C%2Fbutton%3E%3C%2Fli%3E%5Cn'%2Ca%2B%3D'%20%20%20%20%3Cli%20role%3D%22listitem%22%3E%3Cbutton%20type%3D%22button%22%20class%3D%22DarkViolet%22%3E%3Cspan%20class%3D%22visually-hidden%22%3EDarkViolet%3C%2Fspan%3E%3C%2Fbutton%3E%3C%2Fli%3E%5Cn'%2Ca%2B%3D'%20%20%20%20%3Cli%20role%3D%22listitem%22%3E%3Cbutton%20type%3D%22button%22%20class%3D%22MediumPurple%22%3E%3Cspan%20class%3D%22visually-hidden%22%3EMediumPurple%3C%2Fspan%3E%3C%2Fbutton%3E%3C%2Fli%3E%5Cn'%2Ca%2B%3D'%20%20%20%20%3Cli%20role%3D%22listitem%22%3E%3Cbutton%20type%3D%22button%22%20class%3D%22BlueViolet%22%3E%3Cspan%20class%3D%22visually-hidden%22%3EBlueViolet%3C%2Fspan%3E%3C%2Fbutton%3E%3C%2Fli%3E%5Cn'%2Ca%2B%3D'%20%20%20%20%3Cli%20role%3D%22listitem%22%3E%3Cbutton%20type%3D%22button%22%20class%3D%22Purple%22%3E%3Cspan%20class%3D%22visually-hidden%22%3EPurple%3C%2Fspan%3E%3C%2Fbutton%3E%3C%2Fli%3E%5Cn'%2Ca%2B%3D'%20%20%20%20%3Cli%20role%3D%22listitem%22%3E%3Cbutton%20type%3D%22button%22%20class%3D%22Other%22%3E%3Cspan%20class%3D%22visually-hidden%22%3EOther%3C%2Fspan%3E%3C%2Fbutton%3E%3C%2Fli%3E%5Cn'%2Ca%2B%3D'%20%20%20%20%3Cli%20role%3D%22listitem%22%3E%3Cbutton%20type%3D%22button%22%20class%3D%22White%22%3E%3Cspan%20class%3D%22visually-hidden%22%3EWhite%3C%2Fspan%3E%3C%2Fbutton%3E%3C%2Fli%3E%5Cn'%2Ca%2B%3D'%20%20%20%20%3Cli%20role%3D%22listitem%22%3E%3Cbutton%20type%3D%22button%22%20class%3D%22WhiteSmoke%22%3E%3Cspan%20class%3D%22visually-hidden%22%3EWhiteSmoke%3C%2Fspan%3E%3C%2Fbutton%3E%3C%2Fli%3E%5Cn'%2Ca%2B%3D'%20%20%20%20%3Cli%20role%3D%22listitem%22%3E%3Cbutton%20type%3D%22button%22%20class%3D%22Gainsboro%22%3E%3Cspan%20class%3D%22visually-hidden%22%3EGainsboro%3C%2Fspan%3E%3C%2Fbutton%3E%3C%2Fli%3E%5Cn'%2Ca%2B%3D'%20%20%20%20%3Cli%20role%3D%22listitem%22%3E%3Cbutton%20type%3D%22button%22%20class%3D%22LightGrey%22%3E%3Cspan%20class%3D%22visually-hidden%22%3ELightGrey%3C%2Fspan%3E%3C%2Fbutton%3E%3C%2Fli%3E%5Cn'%2Ca%2B%3D'%20%20%20%20%3Cli%20role%3D%22listitem%22%3E%3Cbutton%20type%3D%22button%22%20class%3D%22DarkGray%22%3E%3Cspan%20class%3D%22visually-hidden%22%3EDarkGray%3C%2Fspan%3E%3C%2Fbutton%3E%3C%2Fli%3E%5Cn'%2Ca%2B%3D'%20%20%20%20%3Cli%20role%3D%22listitem%22%3E%3Cbutton%20type%3D%22button%22%20class%3D%22Silver%22%3E%3Cspan%20class%3D%22visually-hidden%22%3ESilver%3C%2Fspan%3E%3C%2Fbutton%3E%3C%2Fli%3E%5Cn'%2Ca%2B%3D'%20%20%20%20%3Cli%20role%3D%22listitem%22%3E%3Cbutton%20type%3D%22button%22%20class%3D%22Gray%22%3E%3Cspan%20class%3D%22visually-hidden%22%3EGray%3C%2Fspan%3E%3C%2Fbutton%3E%3C%2Fli%3E%5Cn'%2Ca%2B%3D'%20%20%20%20%3Cli%20role%3D%22listitem%22%3E%3Cbutton%20type%3D%22button%22%20class%3D%22LightSlateGray%22%3E%3Cspan%20class%3D%22visually-hidden%22%3ELightSlateGray%3C%2Fspan%3E%3C%2Fbutton%3E%3C%2Fli%3E%5Cn'%2Ca%2B%3D'%20%20%20%20%3Cli%20role%3D%22listitem%22%3E%3Cbutton%20type%3D%22button%22%20class%3D%22SlateGray%22%3E%3Cspan%20class%3D%22visually-hidden%22%3ESlateGray%3C%2Fspan%3E%3C%2Fbutton%3E%3C%2Fli%3E%5Cn'%2Ca%2B%3D'%20%20%20%20%3Cli%20role%3D%22listitem%22%3E%3Cbutton%20type%3D%22button%22%20class%3D%22DimGray%22%3E%3Cspan%20class%3D%22visually-hidden%22%3EDimGray%3C%2Fspan%3E%3C%2Fbutton%3E%3C%2Fli%3E%5Cn'%2Ca%2B%3D'%20%20%20%20%3Cli%20role%3D%22listitem%22%3E%3Cbutton%20type%3D%22button%22%20class%3D%22Black%22%3E%3Cspan%20class%3D%22visually-hidden%22%3EBlack%3C%2Fspan%3E%3C%2Fbutton%3E%3C%2Fli%3E%5Cn'%2Ca%2B%3D%22%20%20%20%3C%2Ful%3E%5Cn%22%2Ca%2B%3D%22%20%20%20%3C%2Fdiv%3E%5Cn%22%2Ca%2B%3D'%20%20%20%3Cdiv%20id%3D%22selectedColor%22%3E%3Cspan%3ESelect%20color%3C%2Fspan%3E%3C%2Fdiv%3E%5Cn'%2Ca%2B%3D'%20%20%20%3Cdiv%20role%3D%22status%22%20id%3D%22status%22%20class%3D%22visually-hidden%22%3E%3C%2Fdiv%3E%5Cn'%2Ca%2B%3D%22%20%20%20%3C%2Fdiv%3E%5Cn%22%2Ca%2B%3D%22%20%20%3C%2Fdiv%3E%5Cn%22%2CArray.from(c).forEach(a%3D%3E%7Ba.getAttribute(%22tabindex%22)%26%26%22-1%22!%3D%3Da.getAttribute(%22tabindex%22)%26%26%220%22!%3D%3Da.getAttribute(%22tabindex%22)%26%26(%22%22%3D%3D%3D(p%3Da.textContent.trim())%26%26(p%3D%22%5Cu203C%5CuFE0F%20NON-TEXT%20CONTENT%20%5Cu203C%5CuFE0F%22)%2Ce.push(%5BparseInt(a.getAttribute(%22tabindex%22))%2Cp%2Ca%5D))%7D)%2Ce.sort(function(a%2Cb)%7Breturn%20a%5B0%5D-b%5B0%5D%7D)%2CArray.from(c).forEach(a%3D%3E%7Ba.getAttribute(%22tabindex%22)%26%26%220%22!%3D%3Da.getAttribute(%22tabindex%22)%7C%7C(%22%22%3D%3D%3D(p%3Da.textContent.trim())%26%26(p%3D%22%5Cu203C%5CuFE0F%20NON-TEXT%20CONTENT%20%5Cu203C%5CuFE0F%22)%2Ce.push(%5B%22N%2FA%22%2Cp%2Ca%5D))%7D)%3Blet%20q%3D1%3BArray.from(e).forEach(a%3D%3E%7Ba%5B2%5D.setAttribute(%22data-actualTabOrder%22%2Cq)%2Cf.innerHTML%3Df.innerHTML%2B'%3Cli%3E%3Ca%20href%3D%22%23%22%20data-focusable-el%3D%22'%2Bq%2B'%22%3E'%2Ba%5B1%5D%2B%22%3C%2Fa%3E%3C%2Fli%3E%22%2Cq%2B%2B%7D)%2Cr()%2Cdocument.body.appendChild(b)%3Blet%20j%3Ddocument.querySelectorAll(%22%23focusOrderList%20li%20a%22)%3Bfunction%20r()%7Bo%3D%5B%5D%2CArray.from(e).forEach(b%3D%3E%7Blet%20a%3Db%5B2%5D.getBoundingClientRect()%3Bo.push(%5Ba.top%2Ca.right%2Ca.bottom%2Ca.left%5D)%7D)%7Dfunction%20s()%7Bb.remove()%7DArray.from(j).forEach(a%3D%3E%7Ba.addEventListener(%22click%22%2Cb%3D%3E%7Bdocument.querySelector(%22%5Bdata-actualTabOrder%3D'%22%2Ba.getAttribute(%22data-focusable-el%22)%2B%22'%5D%22).classList.add(%22highlight-el%22)%2Cb.preventDefault()%7D)%7D)%2Ch.addEventListener(%22click%22%2Ca%3D%3E%7Bs()%7D)%2Ci.addEventListener(%22click%22%2Ca%3D%3E%7Bs()%2Cl()%7D)%2Cwindow.onresize%3Dfunction()%7Bn%26%26(document.querySelector(%22%23taborder-canvas%22).remove()%2Cr()%2Cl())%7D%2Cd.innerHTML%3Da%2Cg.appendChild(d)%3Bvar%20t%3Ddocument.querySelector(%22%23selectedColor%3Espan%22)%3Bdocument.querySelector(%22%23status%22)%3Bvar%20k%3Ddocument.querySelectorAll(%22li%20button%22)%3BArray.from(k).forEach(a%3D%3E%7Ba.addEventListener(%22focus%22%2Cb%3D%3E%7Bt.textContent%3Da.textContent%7D)%2Ca.addEventListener(%22mouseover%22%2Cb%3D%3E%7Bt.textContent%3Da.textContent%7D)%2Ca.addEventListener(%22click%22%2Cb%3D%3E%7Bm%3Da.textContent%7D)%7D)%2Cfunction()%7Blet%20b%3D!1%3Bfunction%20c(a%2Cb)%7Ba.setAttribute(%22aria-expanded%22%2C%22false%22)%2Cb.setAttribute(%22hidden%22%2C%22hidden%22)%7Dlet%20a%3Ddocument.querySelectorAll(%22.disclosureTriggerButton%22)%3BArray.from(a).forEach(a%3D%3E%7Blet%20d%3Da.parentNode.nextElementSibling%3Bc(a%2Cd)%2Ca.addEventListener(%22click%22%2Ci%3D%3E%7Blet%20f%3Dfunction(a%2Cb)%7Bfor(%3B(a%3Da.parentElement)%26%26!(a.matches%7C%7Ca.matchesSelector).call(a%2Cb)%3B)%3Breturn%20a%7D(a%2C%22div.accordion%22)%3Bif(b%3D!1%2Cf%26%26(b%3D!0)%2Cb)%7Blet%20e%3Df.querySelector(%22.disclosureTriggerButton%5Baria-expanded%3D'true'%5D%22)%3Be%26%26a!%3D%3De%26%26e.click()%7Dif(%22false%22%3D%3D%3Da.getAttribute(%22aria-expanded%22))%7Bvar%20g%2Ch%3Bg%3Da%2Ch%3Dd%2Cg.setAttribute(%22aria-expanded%22%2C%22true%22)%2Ch.removeAttribute(%22hidden%22)%7Delse%20c(a%2Cd)%7D)%7D)%7D()%7DrevealFocusOrder()%7D)()) + Finds all focusable elements and shows the actual tabbing order. + Can draw path of tabbing order (redraws when window resized). + Helpful to identify [SC 2.4.3 Focus Order (Level A)](https://www.w3.org/TR/WCAG/#focus-order) failures. + After running, you can quit by pressing 'q' and the tool will remove all highlights, restore markup back as it was before. ##### Structure Tools ([1.3.1](https://www.w3.org/TR/WCAG22/#info-and-relationships)) * [🔖anchor for Check headings bookmarklet](https://a11y-tools.com/bookmarklets/#checkheadings) [Check headings](javascript:(function()%7B%22use%20strict%22%3Bvar%20headingConsoleOutput%3D%22%22%3Bfunction%20listHeadings()%7Bconsole.clear()%3Blet%20e%3Ddocument.querySelectorAll(%22h1%2Ch2%2Ch3%2Ch4%2Ch5%2Ch6%2C.h1%2C.h2%2C.h3%2C.h4%2C.h5%2C.h6%2C%5Brole%3D'heading'%5D%5Baria-level%3D'1'%5D%2C%5Brole%3D'heading'%5D%5Baria-level%3D'2'%5D%2C%5Brole%3D'heading'%5D%5Baria-level%3D'3'%5D%2C%5Brole%3D'heading'%5D%5Baria-level%3D'4'%5D%2C%5Brole%3D'heading'%5D%5Baria-level%3D'5'%5D%2C%5Brole%3D'heading'%5D%5Baria-level%3D'6'%5D%2C%5Baria-role%3D'heading'%5D%5Baria-level%3D'1'%5D%2C%5Baria-role%3D'heading'%5D%5Baria-level%3D'2'%5D%2C%5Baria-role%3D'heading'%5D%5Baria-level%3D'3'%5D%2C%5Baria-role%3D'heading'%5D%5Baria-level%3D'4'%5D%2C%5Baria-role%3D'heading'%5D%5Baria-level%3D'5'%5D%2C%5Baria-role%3D'heading'%5D%5Baria-level%3D'6'%5D%22)%2Ci%3D0%2Ca%3D!1%2Ct%3D1%2Cl%3D1%2Cn%3D%22%22%2Ch%3D!1%2Co%3D0%2Cr%3D!1%2Cg%3D!1%2Cd%3D%22%22%2Cs%3D%22%22%2Cu%3D%22%22%2Cp%2Cf%3D%22%22%2Cm%3D!1%2C_%3D!1%2Cc%3D!1%2Cw%3D0%3D%3D%3De.length%2CC%3D!1%2CA%3D!1%2Cv%3D!1%2CR%3D!1%3Bfunction%20N(e)%7Bs%3D%22%22%3Bfor(let%20i%3D0%3Bi%3Ce-1%3Bi%2B%2B)s%2B%3D%22%20%22%7Dfunction%20b(e%2Ci)%7Blet%20a%3Ddocument.createElement(%22DIV%22)%3Ba.setAttribute(%22style%22%2C%22display%3Ainline-block%3Bcolor%3A%23fff%3Bbackground%3Adarkred%3Bpadding%3A5px%3Bmargin-top%3A5px%3B%22)%2Ca.setAttribute(%22aria-hidden%22%2C%22true%22)%2Ca.setAttribute(%22class%22%2C%22bookmarklet-indicator%22)%2Ca.textContent%3D%22%5E%20%22%2Bi%2Ce.parentNode.insertBefore(a%2Ce.nextSibling)%2Ce.classList.remove(%22lime-highlight%22)%2Ce.classList.add(%22red-highlight%22)%7Dfunction%20%24()%7Blet%20e%3Dn.split(%22%5Cn%22)%3Bn%3D%22%22%2CArray.from(e).forEach(e%3D%3E%7Bn%2B%3De.trim()%2B%22%20%22%7D)%7D!function%20e()%7Blet%20i%3Ddocument.createElement(%22style%22)%3Bi.setAttribute(%22id%22%2C%22headingStyles%22)%2Ci.textContent%3D%60.lime-highlight%2C.red-highlight%20%7Bborder-radius%3A3px%3Boutline-offset%3A2px%3Bbox-shadow%3A%200px%200px%200px%202px%20%23fff%3B%7D.lime-highlight%20%7Boutline%3A3px%20solid%20lime%3B%7D.red-highlight%20%7Boutline%3A3px%20solid%20darkred%3B%7D.lime-highlight%3Aafter%2C.red-highlight%3Aafter%20%7Bborder-radius%3A3px%3Boutline%3A3px%20solid%20white%3Bcontent%3A'Heading'%3Bbackground%3Ablack%3Bdisplay%3Ainline-block%3Bpadding%3A3px%3B%7D.lime-highlight%3Aafter%20%7Bcolor%3Alime%3B%7D.red-highlight%3Aafter%20%7Bbackground%3Adarkred%3Bcolor%3Awhite%3B%7D*%5Brole%3D'heading'%5D%5Baria-level%3D'1'%5D.lime-highlight%3Aafter%2C%20*%5Brole%3D'heading'%5D%5Baria-level%3D'1'%5D.red-highlight%3Aafter%20%7Bcontent%3A'ARIA%20heading%20-%20l1'%3B%7D*%5Brole%3D'heading'%5D%5Baria-level%3D'2'%5D.lime-highlight%3Aafter%2C%20*%5Brole%3D'heading'%5D%5Baria-level%3D'2'%5D.red-highlight%3Aafter%20%7Bcontent%3A'ARIA%20heading%20-%20l2'%3B%7D*%5Brole%3D'heading'%5D%5Baria-level%3D'3'%5D.lime-highlight%3Aafter%2C%20*%5Brole%3D'heading'%5D%5Baria-level%3D'3'%5D.red-highlight%3Aafter%20%7Bcontent%3A'ARIA%20heading%20-%20l3'%3B%7D*%5Brole%3D'heading'%5D%5Baria-level%3D'4'%5D.lime-highlight%3Aafter%2C%20*%5Brole%3D'heading'%5D%5Baria-level%3D'4'%5D.red-highlight%3Aafter%20%7Bcontent%3A'ARIA%20heading%20-%20l4'%3B%7D*%5Brole%3D'heading'%5D%5Baria-level%3D'5'%5D.lime-highlight%3Aafter%2C%20*%5Brole%3D'heading'%5D%5Baria-level%3D'5'%5D.red-highlight%3Aafter%20%7Bcontent%3A'ARIA%20heading%20-%20l5'%3B%7D*%5Brole%3D'heading'%5D%5Baria-level%3D'6'%5D.lime-highlight%3Aafter%2C%20*%5Brole%3D'heading'%5D%5Baria-level%3D'6'%5D.red-highlight%3Aafter%20%7Bcontent%3A'ARIA%20heading%20-%20l6'%3B%7Dh1.lime-highlight%3Aafter%2Ch1.red-highlight%3Aafter%20%7Bcontent%3A'Heading%20-%20h1'%3B%7Dh2.lime-highlight%3Aafter%2Ch2.red-highlight%3Aafter%20%7Bcontent%3A'Heading%20-%20h2'%3B%7Dh3.lime-highlight%3Aafter%2Ch3.red-highlight%3Aafter%20%7Bcontent%3A'Heading%20-%20h3'%3B%7Dh4.lime-highlight%3Aafter%2Ch4.red-highlight%3Aafter%20%7Bcontent%3A'Heading%20-%20h4'%3B%7Dh5.lime-highlight%3Aafter%2Ch5.red-highlight%3Aafter%20%7Bcontent%3A'Heading%20-%20h5'%3B%7Dh6.lime-highlight%3Aafter%2Ch6.red-highlight%3Aafter%20%7Bcontent%3A'Heading%20-%20h6'%3B%7D%60%2Cdocument.head.appendChild(i)%7D()%2Cdocument.querySelector(%22h1%2C%5Baria-role%3D'heading'%5D%5Baria-level%3D'1'%5D%22)%2Cdocument.title.trim().toLowerCase()%2CArray.from(e).forEach(e%3D%3E%7B%22H1%22%3D%3D%3De.tagName%7C%7C%22H2%22%3D%3D%3De.tagName%7C%7C%22H3%22%3D%3D%3De.tagName%7C%7C%22H4%22%3D%3D%3De.tagName%7C%7C%22H5%22%3D%3D%3De.tagName%7C%7C%22H6%22%3D%3D%3De.tagName%7C%7Ce.getAttribute(%22aria-level%22)%7C%7C%22heading%22%3D%3D%3De.getAttribute(%22role%22)%3F(e.classList.add(%22lime-highlight%22)%2C%22heading%22%3D%3D%3De.getAttribute(%22aria-role%22)%26%26(m%3D!0%2Ch%3D!0%2CheadingConsoleOutput%2B%3D%22%5Cn%22%2Bs%2B%22%E2%86%91%20%22%2B(f%3D%22Invalid%20attribute%20%60aria-role%60%20applied%22)%2Cb(e%2Cf))%2Cw%3D!1%2Co%2B%2B%2Cn%3De.textContent.trim()%2C%24()%2Ci%3Dn.split(%22%20%22).length%2C%22%22%3D%3D%3Dn%26%26(h%3D!0%2CA%3D!0%2Cb(e%2Cf%3D%22Empty%20heading%22))%2C%22H1%22!%3D%3De.tagName%26%26%22H2%22!%3D%3De.tagName%26%26%22H3%22!%3D%3De.tagName%26%26%22H4%22!%3D%3De.tagName%26%26%22H5%22!%3D%3De.tagName%26%26%22H6%22!%3D%3De.tagName%3F(d%3D%22%5CnH%22%2Be.getAttribute(%22aria-level%22)%2CN(l%3DparseInt(e.getAttribute(%22aria-level%22)))%2CheadingConsoleOutput%2B%3Ds%2Bd%2B%22%3A%20%22%2Bn%2CheadingConsoleOutput%2B%3D%22%5Cn%22%2Bs%2B%22%E2%86%91%20Not%20a%20*real*%20heading%22%2CheadingConsoleOutput%2B%3D%22%5Cn%22%2Bs%2B'%60aria-role%3D%22heading%22%60'%2CheadingConsoleOutput%2B%3D%22%5Cn%22%2Bs%2B'%60aria-level%3D%22'%2Be.getAttribute(%22aria-level%22)%2B'%22%60')%3A(d%3De.tagName%2CN(l%3DparseInt(e.tagName.replace(%22H%22%2C%22%22)))%2C%22%22!%3D%3Dn.trim()%26%26(headingConsoleOutput%2B%3D%22%5Cn%22%2Bs%2Bd%2B%22%3A%20%22%2Bn))%2C1%3D%3D%3Dl%26%26(1%3D%3D%3Dl%26%26r%26%26%22heading%22%3D%3D%3De.getAttribute(%22role%22)%3F(g%3D!0%2Ch%3D!0%2CheadingConsoleOutput%2B%3D%22%5Cn%22%2Bs%2B%22%E2%86%91%20%22%2B(f%3D%22Multiple%20h1s%22)%2Cb(e%2Cf))%3Ar%3D!0)%2C1%3D%3D%3Dl%26%261%3D%3D%3Do%3Fc%3D!0%3A1%3D%3D%3Do%26%26(h%3D!0%2CheadingConsoleOutput%2B%3D%22%5Cn%22%2Bs%2B%22%E2%86%91%20%22%2B(f%3D%22First%20heading%20on%20the%20page%20is%20NOT%20an%20h1%22)%2Cb(e%2Cf))%2C(p%3Dl-t)%3E1%26%261!%3D%3Do%26%26(headingConsoleOutput%2B%3D%22%5Cn%22%2Bs%2B%22%E2%86%91%20%22%2B(f%3D%22Skipped%20heading%20levels%20-%20jumped%20%22%2Bp%2B%22%20levels%20(from%20h%22%2Bt%2B%22%20to%20h%22%2Bl%2B%22)%22)%2Ch%3D!0%2CC%3D!0%2Cb(e%2Cf))%2Ci%3E30%26%26(a%3D!0%2Ch%3D!0%2CheadingConsoleOutput%2B%3D%22%5Cn%22%2Bs%2B%22%E2%86%91%20%22%2B(f%3D%22This%20is%20a%20loooooooooooooong%20heading%22)%2Cb(e%2Cf)))%3A(h%3D!0%2Cw%3D!0%2Cv%3D!0%2Cn%3De.textContent.trim()%2C%24()%2Cf%3D%22Styled%20using%20CSS%20class%20of%20%22%2Ce.classList.contains(%22h1%22)%26%26(f%2B%3D%22%60h1%60%22)%2Ce.classList.contains(%22h2%22)%26%26(f%2B%3D%22%60h2%60%22%2Cl%3D2)%2Ce.classList.contains(%22h3%22)%26%26(f%2B%3D%22%60h3%60%22%2Cl%3D3)%2Ce.classList.contains(%22h4%22)%26%26(f%2B%3D%22%60h4%60%22%2Cl%3D4)%2Ce.classList.contains(%22h5%22)%26%26(f%2B%3D%22%60h5%60%22%2Cl%3D5)%2Ce.classList.contains(%22h6%22)%26%26(f%2B%3D%22%60h6%60%22%2Cl%3D6)%2CN(l)%2CheadingConsoleOutput%2B%3D%22%5Cn%22%2Bs%2Bn%2CheadingConsoleOutput%2B%3D%22%5Cn%22%2Bs%2B%22%E2%86%91%20%22%2Bf%2Cb(e%2Cf))%2C%220%22%3D%3D%3De.getAttribute(%22tabindex%22)%26%26(h%3D!0%2C_%3D!0%2CheadingConsoleOutput%2B%3D%22%5Cn%22%2Bs%2B%22%E2%86%91%20%22%2B(f%3D%22Heading%20is%20focusable%22)%2Cb(e%2Cf))%2Ce.getAttribute(%22role%22)%26%26%22heading%22!%3D%3De.getAttribute(%22role%22).toLowerCase()%26%26(h%3D!0%2CR%3D!0%2CheadingConsoleOutput%2B%3D%22%5Cn%22%2Bs%2B%22%E2%86%91%20%22%2B(f%3D%22Heading%20has%20a%20role%20applied%20other%20than%20heading%22)%2Cb(e%2Cf))%2Ct%3Dl%7D)%2Cw%26%26(h%3D!0)%2Ch%26%26(R%26%26(u%2B%3D%22%5Cn*%20WARNING%3A%20One%20or%20more%20headings%20have%20a%20role%20applied%20other%20than%20heading.%20Most%20likely%20a%20%5BSC%201.3.1%20Info%20and%20Relationships%5D(https%3A%2F%2Fwww.w3.org%2FTR%2FWCAG21%2F%23info-and-relationships)%20failure%22)%2Cc%7C%7Cw%7C%7C(u%2B%3D%22%5Cn*%20WARNING%3A%20First%20heading%20found%20on%20page%20is%20not%20an%20h1%20%5BBEST%20PRACTICE%20-%20SC%201.3.1%20Info%20and%20Relationships%5D(https%3A%2F%2Fwww.w3.org%2FTR%2FWCAG21%2F%23info-and-relationships)%22)%2Cm%26%26(u%2B%3D'%5Cn*%20ERR%3A%20Invalid%20%60aria-role%3D%22heading%22%60%20used%20(should%20be%20%60role%60)%20%5BSC%204.1.2%20Name%2C%20Role%2C%20Value%5D(https%3A%2F%2Fwww.w3.org%2FTR%2FWCAG21%2F%23name-role-value)')%2Cw%26%26(u%2B%3D%22%5Cn*%20WARNING%3A%20No%20headings%20found%20on%20the%20page%20at%20all%20%5BBEST%20PRACTICE%20-%20SC%201.3.1%20Info%20and%20Relationships%5D(https%3A%2F%2Fwww.w3.org%2FTR%2FWCAG21%2F%23info-and-relationships)%22)%2C_%26%26(u%2B%3D%22%5Cn*%20ERR%3A%20Some%20headings%20were%20made%20focusable%20%5BSC%204.1.2%20Name%2C%20Role%2C%20Value%5D(https%3A%2F%2Fwww.w3.org%2FTR%2FWCAG21%2F%23name-role-value)%22)%2Cg%26%26(u%2B%3D%22%5Cn*%20WARNING%3A%20Multiple%20H1%20headings%20present%20on%20page%20%5BSC%204.1.2%20Name%2C%20Role%2C%20Value%5D(https%3A%2F%2Fwww.w3.org%2FTR%2FWCAG21%2F%23name-role-value)%22)%2CC%26%26(u%2B%3D%22%5Cn*%20WARNING%3A%20Skipped%20heading%20levels%20%5BSC%201.3.1%20Info%20and%20Relationships%5D(https%3A%2F%2Fwww.w3.org%2FTR%2FWCAG21%2F%23info-and-relationships)%22)%2CA%26%26(u%2B%3D%22%5Cn*%20WARNING%3A%20Empty%20heading(s)%20found%20on%20page%20%5BSC%201.3.1%20Info%20and%20Relationships%5D(https%3A%2F%2Fwww.w3.org%2FTR%2FWCAG21%2F%23info-and-relationships)%22)%2Cv%26%26(u%2B%3D%22%5Cn*%20ERR%3A%20Text%20marked%20up%20using%20heading%20tags%20as%20class%20names%2C%20but%20no%20heading%20semantics%20present%20%5BSC%201.3.1%20Info%20and%20Relationships%5D(https%3A%2F%2Fwww.w3.org%2FTR%2FWCAG21%2F%23info-and-relationships)%22)%2Ca%26%26(u%2B%3D%22%5Cn*%20WARNING%3A%201%20or%20more%20headings%20found%20with%20long%20%20word%20count%20(likely%20not%20suitable%20as%20a%20heading)%20%5BSC%201.3.1%20Info%20and%20Relationships%5D(https%3A%2F%2Fwww.w3.org%2FTR%2FWCAG21%2F%23info-and-relationships)%22)%2Cu%3D%22%5Cn%5Cn%23Errors%20found%22%2Bu)%2CheadingConsoleOutput%2B%3Du%2Cconsole.log(headingConsoleOutput)%2Cdocument.addEventListener(%22keydown%22%2Cfunction(e)%7B%22q%22%3D%3D%3De.key%26%26(e.preventDefault()%2Cfunction%20e()%7Blet%20i%3Ddocument.querySelectorAll(%22.lime-highlight%2C%20.red-highlight%22)%2Ca%3Ddocument.querySelectorAll(%22.bookmarklet-indicator%22)%3BArray.from(i).forEach(e%3D%3E%7Be.classList.remove(%22lime-highlight%22)%2Ce.classList.remove(%22red-highlight%22)%7D)%2CArray.from(a).forEach(e%3D%3E%7Be.remove()%7D)%3Blet%20t%3Ddocument.querySelector(%22%23headingStyles%22)%3Bt.remove()%7D())%7D)%7DlistHeadings()%7D)()) + Checks the page for definite WCAG failures and also best practices. + Highlights problems on the page. + Provides an outline in the console (along with issues found). + After running, you can quit by pressing 'q' and the tool will remove all highlights, restore markup back as it was before. ##### Names, Roles, Values and all that jazz ([4.1.2](https://www.w3.org/TR/WCAG22/#name-role-value)) * [🔖anchor for WTFocus bookmarklet](https://a11y-tools.com/bookmarklets/#wtfocus) [WTFocus](javascript:(function()%7B%22use%20strict%22%3Bfunction%20WTFocus()%7Blet%20e%3D1%2Ct%3D%22%22%2Co%3Ddocument.activeElement%2Cl%3Ddocument.querySelectorAll('a%5Bhref%5D%2Cbutton%2Cselect%2Cinput%3Anot(%5Btype%3D%22hidden%22%5D)%2Ctextarea%2Csummary%2Carea%2C%5Btabindex%5D%3Anot(%23WTFocusPanel)%3Anot(%5Btabindex%5E%3D%22-1%22%5D)%2C%5Bcontenteditable%5D%3Anot(%5Bcontenteditable%3D%22false%22%5D)')%2Cn%3D%22background%3A%23fff%3Bcolor%3Adarkgreen%3Bfont-weight%3Abold%3Btext-decoration%3Aline-through%22%2Ca%3D%22font-weight%3Abold%3Bcolor%3A%2399f170%3Bbackground%3A%23333%3Bdisplay%3Ainline-block%3Bpadding%3A3px%3B%22%2Ci%3D%22color%3Apink%3Bbackground%3A%23333%3Bpadding%3A3px%3B%22%2Cr%3D%22color%3Ablack%3Bbackground%3A%23fefbe3%3Bfont-weight%3Abold%3B%22%2Cs%3D%22color%3A%23333%3Bbackground%3A%23fff%3B%22%2Cu%3Ddocument.createElement(%22div%22)%2Cc%3Ddocument.createElement(%22div%22)%2Cd%3D%22Accessible%20name%3A%20%22%2Cb%3D%22%22%2Cp%3D!1%2Cm%3D!1%2Cf%3D!1%2Cg%3D!1%2Ch%2Cy%3D!1%2Cx%3D!1%3Bfunction%20A()%7Bp%3D!1%2Cm%3D!1%7Dfunction%20%24(e)%7Bt%2B%3De%7Dfunction%20v(e%2Ct%2Co%2Cl%2Cn)%7Bt%3Dt.split(%22%3C%22).join(%22%26lt%3B%22).split(%22%3E%22).join(%22%26gt%3B%22)%2Cb%2B%3D%22%3Cli%22%2C(n%7C%7Cl)%26%26(b%2B%3D'%20class%3D%22'%2Cn%26%26(b%2B%3D%22visible%22)%2Cl%26%26(b%2B%3D%22outline%22)%2Cb%2B%3D'%22')%2Cb%2B%3D'%20role%3D%22listitem%22%3E%3Cspan%20style%3D%22'%2Bo%2B'%22%3E'%2Cp%26%26(b%2B%3D'%3Cspan%20aria-hidden%3D%22true%22%3E%5CuD83D%5CuDC49%5CuD83C%5CuDFFD%3C%2Fspan%3E%3Cspan%20class%3D%22visually-hidden%22%3EAccessible%20name%20provided%20by%3C%2Fspan%3E%20')%2Cm%26%26(b%2B%3D'%3Cspan%20aria-hidden%3D%22true%22%3E%5CuD83D%5CuDEA8%3C%2Fspan%3E%20%3Cspan%20class%3D%22visually-hidden%22%3EWarning%3C%2Fspan%3E')%2Cb%2B%3De%2B%22%3C%2Fspan%3E%26nbsp%3B%22%2Bt%2B%22%3C%2Fli%3E%5Cn%22%2Ct%3Dt.replace(%22%26lt%3B%22%2C%22%3C%22).replace(%22%26gt%3B%22%2C%22%3E%22)%7Dfunction%20T()%7Blet%20e%3Ddocument.createElement(%22button%22)%3Be.textContent%3D%22Close%20(Esc)%22%2Ce.setAttribute(%22type%22%2C%22button%22)%2Ce.setAttribute(%22class%22%2C%22panel-btn%22)%2Ce.addEventListener(%22click%22%2C()%3D%3E%7BF()%7D)%3Blet%20o%3Ddocument.createElement(%22button%22)%3Bo.textContent%3D%22Change%20Mode%20(M)%22%2Co.setAttribute(%22type%22%2C%22button%22)%2Co.setAttribute(%22class%22%2C%22panel-btn%22)%2Co.addEventListener(%22click%22%2Ce%3D%3E%7B_()%7D)%3Blet%20l%3Ddocument.createElement(%22a%22)%3Bl.textContent%3D%22Download%20summary%20(S)%22%2Cl.setAttribute(%22href%22%2C%22data%3Atext%2Fplain%3Bcharset%3Dutf-8%2C%22%2BencodeURIComponent(t))%2Cl.setAttribute(%22download%22%2C%22simple-screen-reader-emulation%22)%2Cl.addEventListener(%22click%22%2Ce%3D%3E%7Balert('IMPORTANT%20DISCLAIMER!%5Cn%5CnThis%20text%20file%20is%20a%20*very%20approximate%20representation*%20%5Cnof%20what%20this%20page%20may%20be%20like%20for%20screen%20reader%20users%3A%5Cn%5Cn%E2%80%A2%20It%20lists%20all%20the%20focusable%20elements%20(at%20the%20point%20%5Cn%20%20of%20running%20the%20script)%20but%20may%20not%20include%20every%20%5Cn%20%20element.%20For%20example%2C%20any%20element%20that%20is%20temporarily%20%5Cn%20%20set%20to%20be%20non-focusable%20with%20%60tabindex%3D%22-1%22%60%2C%20such%20as%20%5Cn%20%20an%20inactive%20tab%20in%20a%20group%20of%20tab%20controls%2C%20will%20not%20%5Cn%20%20be%20shown%20here.%5Cn%E2%80%A2%20It%20lists%20the%20accessible%20name%20and%20the%20role%20%5Cn%20%20(e.g.%20link%2C%20button)%5Cn%E2%80%A2%20Where%20there%20is%20an%20accessible%20description%20%5Cn%20%20(provided%20by%20%60aria-describedby%60%20or%20a%20%60title%60%20%5Cn%20%20attribute)%2C%20this%20is%20included%20too')%7D)%2Cu.appendChild(e)%2Cu.appendChild(o)%2Cu.appendChild(l)%7Dfunction%20_()%7By%3F(document.querySelector(%22%23WTFocusPanel%22).classList.remove(%22curtainsMode%22)%2Cdocument.querySelector(%22%23WTFocusPanel%22).removeAttribute(%22style%22)%2Cdocument.querySelector(%22%23WTFocusCurtain%22).setAttribute(%22hidden%22%2C%22hidden%22)%2Cy%3D!1%2Cd%3D%22Accessible%20name%3A%20%22)%3A(document.querySelector(%22%23WTFocusPanel%22).classList.add(%22curtainsMode%22)%2Cdocument.querySelector(%22%23WTFocusCurtain%22).removeAttribute(%22hidden%22)%2Cy%3D!0%2Cd%3D%22%22)%2CS(o)%2Co.focus()%7Dfunction%20F()%7Bdocument.querySelector(%22%23WTFocusCurtain%22).remove()%2Cdocument.querySelector(%22%23WTFocusPanel%22).remove()%2Cdocument.querySelector(%22%23panelStyles%22).remove()%2Cdocument.querySelector(%22%23focusStyles%22).remove()%7Dfunction%20S(e)%7Blet%20t%3De.getBoundingClientRect()%2Co%3Ddocument.documentElement.scrollTop%2Cl%3Dt.right%2B20%2B400%2Cn%3Du.offsetHeight%2Ca%3Do%2Bt.top%2Bn%2Ci%3Dwindow.innerWidth%2Cr%3Dwindow.innerHeight%3By%3Fdocument.querySelector(%22%23WTFocusPanel%22).removeAttribute(%22style%22)%3Al%3Ei%3F(a%3Er%3F(u.style.top%3D%22auto%22%2Cu.style.bottom%3Dr-(o%2Bt.bottom)-10%2B%22px%22%2Cu.classList.add(%22toBottom%22))%3A(u.style.top%3Do%2Bt.top%2B%22px%22%2Cu.style.bottom%3D%22auto%22%2Cu.classList.remove(%22toBottom%22))%2Cu.style.left%3D%22auto%22%2Cu.style.right%3Di-t.left%2B20-7%2B%22px%22%2Cu.classList.add(%22toLeft%22))%3A(a%3Er%3F(u.style.top%3D%22auto%22%2Cu.style.bottom%3Dr-(o%2Bt.bottom)-10%2B%22px%22%2Cu.classList.add(%22toBottom%22))%3A(u.style.top%3Do%2Bt.top%2B%22px%22%2Cu.style.bottom%3D%22auto%22%2Cu.classList.remove(%22toBottom%22))%2Cu.style.left%3Dt.right%2B20-7%2B%22px%22%2Cu.style.right%3D%22auto%22%2Cu.classList.remove(%22toLeft%22))%7D!function%20e()%7Blet%20t%3Ddocument.createElement(%22style%22)%3Bt.setAttribute(%22type%22%2C%22text%2Fcss%22)%2Ct.setAttribute(%22id%22%2C%22panelStyles%22)%2Ct.textContent%3D%22.dupeAccName%20%7Boutline%3A4px%20dashed%20%23CC3300!important%3Boutline-offset%3A7px!important%3Boverflow%3Avisible%3B%7D%20.WTFocusTempFocusStyle%3Afocus%20%7Boutline%3A7px%20solid%20black!important%3Boutline-offset%3A7px!important%3Boverflow%3Avisible%3B%2F*background%3Ayellow!important%3Bcolor%3Ablack!important%3B*%2F%7D%20.WTFocusTempFocusStyle.dupeAccName%3Afocus%20%7Boutline-color%3A%23CC3300!important%3B%7D%20.visually-hidden%20%7Bclip-path%3A%20inset(100%25)%3Bclip%3A%20rect(1px%2C%201px%2C%201px%2C%201px)%3Bheight%3A%201px%3Boverflow%3A%20hidden%3Bposition%3A%20absolute%3Bwhite-space%3A%20nowrap%3Bwidth%3A%201px%3B%7D%23WTFocusCurtain%20%7Bbackground%3Ablack%3Bposition%3A%20fixed%3Btop%3A%200%3Bbottom%3A%200%3Bleft%3A%200%3Bright%3A%200%3Bz-index%3A49999%7D%22%2Cdocument.querySelector(%22body%22).appendChild(t)%7D()%2Cdocument.querySelector(%22%23WTFocusCurtain%22)%26%26F()%2Cb%3D%22%22%2Cfunction%20e(t)%7Blet%20o%3Ddocument.createElement(%22style%22)%3Bo.setAttribute(%22type%22%2C%22text%2Fcss%22)%2Co.setAttribute(%22id%22%2C%22focusStyles%22)%2Co.textContent%3D%22%23WTFocusPanel.error%20%7Bbackground%3Adarkred%3B%7D%20%23WTFocusPanel.warning%20%7Bbackground%3A%23CC3300%3B%7D%20%23WTFocusPanel.curtainsMode.error%20%7Bbackground%3Ablack%3B%7D%20%23WTFocusPanel.curtainsMode%20%7Bz-index%3A50000%3Bposition%3Afixed%3Btop%3A50%25%3Bleft%3A50%25%3Btransform%3Atranslate(-50%25%2C-50%25)%3B%7D%20%23WTFocusPanel.curtainsMode.warning%20%7Bbackground%3Ablack%3B%7D%20%23WTFocusPanel%5Bhidden%5D%20%7Bdisplay%3Anone%3B%7D%20%23WTFocusPanel%20*%20%7Btext-align%3Aleft%7D%20%23WTFocusPanel%20%7Bborder%3A2px%20solid%20%23fff%3Bz-index%3A1000%3Btext-shadow%3Anone%3Bfont-family%3Asans-serif%3Bdisplay%3Ablock%3Btext-align%3Aleft%3Bposition%3A%20absolute%3Bz-index%3A10000%3Bbackground%3A%20black%3Bpadding%3A%2020px%2020px%3Bwidth%3A400px%3Bfont-size%3A16px%3B%7D%20%23WTFocusPanel%20button%20%7Bfont-weight%3Abold%3Bbackground%3Anone%3Bcolor%3A%23fff%3Bpadding%3A3px%2010px%3Bfont-size%3A14px%3Bborder%3A1px%20solid%20%23fff%3Bdisplay%3Ainline-block%3Bmargin%3A10px%201em%20-10px%200%3B%7D%20%23WTFocusPanel%20ul%2C%23WTFocusPanel%20li%20%7Bmargin%3A0%3Bpadding%3A0%3Blist-style%3Anone%7D%20%23WTFocusPanel%20li%20%7Bmargin%3A3px%200%3Bbackground%3A%23fff%3Bcolor%3A%23333%3Bpadding%3A2px%7D%20%23WTFocusPanel%20li.outline%20%7Boutline%3A4px%20solid%20rgb(58%2C%20190%2C%2058)%3Boutline-offset%3A-4px%3Bpadding%3A8px%7D%20%23WTFocusPanel.error%3Abefore%20%7Bbackground%3Adarkred%7D%20%23WTFocusPanel.warning%3Abefore%20%7Bbackground%3A%23CC3300%7D%20%23WTFocusPanel%3Abefore%20%7Bcontent%3A''%3Bdisplay%3Ablock%3Bheight%3A20px%3Bwidth%3A20px%3Btransform%3Arotate(45deg)%3Bposition%3Aabsolute%3Bbackground%3A%23000%3Bleft%3A-12px%3Btop%3A3px%3Bborder%3A2px%20solid%20%23fff%3Bborder-right%3Anone%3Bborder-top%3Anone%3B%7D%20%23WTFocusPanel.toBottom%3Abefore%20%7Btop%3Aauto%3Bbottom%3A3px%7D%20%23WTFocusPanel.toLeft%3Abefore%20%7Bleft%3Aauto%3Bright%3A-12px%3Bborder%3A2px%20solid%20%23fff%3Bborder-left%3Anone%3Bborder-bottom%3Anone%3B%7D%20%23WTFocusPanel.curtainsMode%20%7Boutline%3A10px%20solid%20orange%3B%7D%20%23WTFocusPanel.curtainsMode%3Abefore%20%7Bdisplay%3Anone%3B%7D%20%23WTFocusPanel.curtainsMode%20li%20%7Bdisplay%3Anone%3B%7D%20%23WTFocusPanel.curtainsMode%20li.visible%20%7Bdisplay%3Ablock%3B%7D%20%23WTFocusPanel.curtainsMode%20li%20span%20%7Bdisplay%3Anone!important%3B%7D%20%23WTFocusPanel%20details%20summary%20%7Bcolor%3Awhite%7D%20%23WTFocusPanel.curtainsMode%20details%20%7Bdisplay%3Anone%7D%23WTFocusPanel%20a%5Bdownload%5D%7Bdisplay%3Ablock%3Bmargin%3A0.5em%200%3Bcolor%3A%23fff%3Btext-decoration%3Aunderline%3Bborder%3Anone%3Bpadding%3A0%3B%7D%22%2Cdocument.querySelector(%22head%22).appendChild(o)%7D(400)%2Cc.setAttribute(%22id%22%2C%22WTFocusCurtain%22)%2Cc.setAttribute(%22hidden%22%2C%22hidden%22)%2Cdocument.querySelector(%22body%22).appendChild(c)%2Cu.setAttribute(%22id%22%2C%22WTFocusPanel%22)%2Cy%26%26u.setAttribute(%22class%22%2C%22curtainsMode%22)%2Cu.setAttribute(%22aria-live%22%2C%22polite%22)%2Cu.setAttribute(%22tabindex%22%2C%22-1%22)%2Cu.setAttribute(%22hidden%22%2C%22hidden%22)%2Cu.setAttribute(%22role%22%2C%22region%22)%2Cu.setAttribute(%22aria-label%22%2C%22Accessibility%20properties%20panel%22)%2Cdocument.querySelector(%22body%22).appendChild(u)%2Cwindow.addEventListener(%22keyup%22%2Ce%3D%3E%7B%22Escape%22%3D%3D%3De.key%26%26document.querySelector(%22%23WTFocusPanel%22)%26%26F()%7D)%2Cwindow.addEventListener(%22keyup%22%2Ce%3D%3E%7B%22m%22%3D%3D%3De.key.toLowerCase()%26%26document.querySelector(%22%23WTFocusPanel%22)%26%26_()%2C%22d%22%3D%3D%3De.key.toLowerCase()%26%26document.querySelector(%22%23WTFocusPanel%22)%26%26(document.querySelector(%22%23WTFocusPanel%20summary%22).click()%2Cx%3D!x)%2C%22s%22%3D%3D%3De.key.toLowerCase()%26%26document.querySelector(%22%23WTFocusPanel%22)%26%26document.querySelector(%22%23WTFocusPanel%20a%5Bdownload%5D%22).click()%7D)%2CT()%3Blet%20W%3D%5B%5D%3BArray.from(l).forEach(function(c)%7Bc.classList.add(%22WTFocusTempFocusStyle%22)%3Blet%20h%3Dc.querySelectorAll(%22style%22)%3BArray.from(h).forEach(function(e)%7Be.remove()%7D)%2Cc.addEventListener(%22focus%22%2C()%3D%3E%7Blet%20h%3Dc.getAttribute(%22role%22)%2Cy%3Dc.tagName.toLowerCase()%3Bif(h)%3Belse%20if((%22article%22%3D%3Dy%7C%7C%22button%22%3D%3Dy%7C%7C%22dialog%22%3D%3Dy%7C%7C%22figure%22%3D%3Dy%7C%7C%22img%22%3D%3Dy%7C%7C%22main%22%3D%3Dy%7C%7C%22math%22%3D%3Dy)%26%26(h%3Dy)%2C%22summary%22%3D%3Dy%26%26(h%3D%22button%22)%2C%22aside%22%3D%3Dy%26%26(h%3D%22complementary%22)%2C%22dd%22%3D%3Dy%26%26(h%3D%22definition%22)%2C%22html%22%3D%3Dy%26%26(h%3D%22document%22)%2C(%22details%22%3D%3Dy%7C%7C%22fieldset%22%3D%3Dy%7C%7C%22optgroup%22%3D%3Dy)%26%26(h%3D%22group%22)%2C(%22menu%22%3D%3Dy%7C%7C%22ol%22%3D%3Dy%7C%7C%22ul%22%3D%3Dy)%26%26(h%3D%22list%22)%2C%22datalist%22%3D%3Dy%26%26(h%3D%22listbox%22)%2C%22li%22%3D%3Dy%26%26(h%3D%22listitem%22)%2C%22nav%22%3D%3Dy%26%26(h%3D%22navigation%22)%2C%22progress%22%3D%3Dy%26%26(h%3D%22progressbar%22)%2C%22hr%22%3D%3Dy%26%26(h%3D%22separator%22)%2C%22output%22%3D%3Dy%26%26(h%3D%22status%22)%2C(%22dfn%22%3D%3Dy%7C%7C%22dt%22%3D%3Dy)%26%26(h%3D%22term%22)%2C%22a%22%3D%3Dy%26%26(h%3D%22link%22)%2C%22select%22%3D%3Dy%26%26(h%3D%22listbox%22)%2C%22textarea%22%3D%3Dy%26%26(h%3D%22textbox%22)%2C%22input%22%3D%3Dy)%7Blet%20%24%3Dc.getAttribute(%22type%22).toLowerCase()%3B%22email%22%3D%3D%3D%24%26%26(h%3D%22textbox%22)%2C%22text%22%3D%3D%3D%24%26%26(h%3D%22textbox%22)%2C%22range%22%3D%3D%3D%24%26%26(h%3D%22slider%22)%2C%22number%22%3D%3D%3D%24%26%26(h%3D%22spinbutton%22)%2C(%22checkbox%22%3D%3D%3D%24%7C%7C%22radio%22%3D%3D%3D%24)%26%26(h%3D%24)%2C(%22button%22%3D%3D%3D%24%7C%7C%22image%22%3D%3D%3D%24%7C%7C%22reset%22%3D%3D%3D%24%7C%7C%22submit%22%3D%3D%3D%24)%26%26(h%3D%22button%22)%7Do%3Dc%2CArray.from(l).forEach(function(e)%7Be.classList.remove(%22dupeAccName%22)%7D)%3Blet%20_%3D!1%3Bp%3D!1%2Cm%3D!1%3Blet%20F%3Dc.querySelectorAll(%22img%2C%20%5Brole%3D'image'%5D%5Baria-label%5D%2C%20%5Brole%3D'img'%5D%5Baria-label%5D%22)%3B(_%3DF.length%3E0)%26%26Array.from(F).forEach(function(e)%7Blet%20t%3Ddocument.createElement(%22SPAN%22)%3Bt.setAttribute(%22class%22%2C%22visually-hidden%22)%2Ct.setAttribute(%22style%22%2C%22clip-path%3A%20inset(100%25)%3Bclip%3A%20rect(1px%2C%201px%2C%201px%2C%201px)%3Bheight%3A%201px%3Boverflow%3A%20hidden%3Bposition%3A%20absolute%3Bwhite-space%3A%20nowrap%3Bwidth%3A%201px%3B%22)%2Ct.setAttribute(%22data-temp-node%22%2C%22true%22)%2Ce.getAttribute(%22alt%22)%26%26(t.textContent%3D%22%20%22%2Be.getAttribute(%22alt%22)%2B%22%20%22)%2Ce.getAttribute(%22role%22)%26%26e.getAttribute(%22aria-label%22)%26%26(t.textContent%3D%22%20%22%2Be.getAttribute(%22aria-label%22)%2B%22%20%22)%2Cfunction%20e(t%2Co)%7Bo.parentNode.insertBefore(t%2Co.nextSibling)%7D(t%2Ce)%7D)%2CsetTimeout(function()%7Bc.classList.add(%22WTFocusTempFocusStyle%22)%7D%2C100)%2Cb%3D%22%22%3Blet%20C%3Dc.tagName.toLowerCase()%2CN%3Dc.getAttribute(%22role%22)%3BN%26%26(N%3Dc.getAttribute(%22role%22).toLowerCase())%3Blet%20P%3D%22%3C%22%2BC%2B%22%3E%22%2Cw%3D!1%2Cq%3D!1%2CL%3D!1%3BN%26%26(P%3D%22%3C%22%2BC%2B'%20role%3D%22'%2BN%2B'%22%3E'%2C(%22link%22%3D%3D%3DN%26%26%22a%22%3D%3D%3DC%7C%7C%22button%22%3D%3D%3DN%26%26%22button%22%3D%3D%3DC%7C%7C%22image%22%3D%3D%3DN%26%26%22img%22%3D%3D%3DC%7C%7C%22img%22%3D%3D%3DN%26%26%22img%22%3D%3D%3DC%7C%7C%22navigation%22%3D%3D%3DN%26%26%22nav%22%3D%3D%3DC%7C%7C%22heading%22%3D%3D%3DN%26%26(%22h1%22%3D%3D%3DC%7C%7C%22h2%22%3D%3D%3DC%7C%7C%22h3%22%3D%3D%3DC%7C%7C%22h4%22%3D%3D%3DC%7C%7C%22h5%22%3D%3D%3DC%7C%7C%22h6%22%3D%3D%3DC))%26%26(w%3D!0)%2C(%22link%22!%3D%3DN%7C%7C%22a%22%3D%3D%3DC)%26%26(%22button%22!%3D%3DN%7C%7C%22button%22%3D%3D%3DC)%26%26(%22image%22!%3D%3DN%26%26%22image%22!%3D%3DN%7C%7C%22img%22%3D%3D%3DC)%26%26(%22navigation%22!%3D%3DN%7C%7C%22nav%22%3D%3D%3DC)%26%26(%22heading%22!%3D%3DN%7C%7C%22h1%22%3D%3D%3DC%7C%7C%22h2%22%3D%3D%3DC%7C%7C%22h3%22%3D%3D%3DC%7C%7C%22h4%22%3D%3D%3DC%7C%7C%22h5%22%3D%3D%3DC%7C%7C%22h6%22%3D%3D%3DC)%7C%7C(L%3D!0))%2Cc.getAttribute(%22aria-describedby%22)%26%26(q%3D!0)%3Blet%20E%3Dc.textContent%2CM%3Dc.ariaLabel%2CB%3Dc.getAttribute(%22aria-labelledby%22)%2CI%3Dc.getAttribute(%22placeholder%22)%2CD%2Cz%2CH%3D%22%22%2CR%3D%22%22%2Cj%3Dc.getAttribute(%22value%22)%2CV%3Dc.getAttribute(%22title%22)%2CO%3D%22%22%2CY%3D%22%22%2CG%3D!1%2CJ%3D!1%2CK%3D%22%22%2CQ%3D!1%3BS(c)%2CE%3DE.trim()%3Blet%20U%3Dfunction%20e(t%2Co)%7Bfor(%3B(t%3Dt.parentElement)%26%26!(t.matches%7C%7Ct.matchesSelector).call(t%2Co)%3B)%3Breturn%20t%7D(c%2C%22label%22)%3Bif(U%26%26(G%3D!0%2CO%3DY%3DU.textContent.trim())%2Cc.getAttribute(%22id%22))%7Blet%20X%3Ddocument.querySelector(%22%5Bfor%3D'%22%2Bc.getAttribute(%22id%22)%2B%22'%5D%22)%3BX%26%26(J%3D!0%2CY%3DX.textContent)%7Dif(G%7C%7CJ%7C%7C(Y%3D%22N%2FA%22)%2CE%7C%7C(E%3D%22N%2FA%22)%2Cj%7C%7C(j%3D%22N%2FA%22)%2CV%7C%7C(V%3D%22N%2FA%22)%2CI%7C%7C(I%3D%22N%2FA%22)%2CM%7C%7C(M%3D%22N%2FA%22)%2CB)%7BD%3DB%3Blet%20Z%3DD.split(%22%20%22)%3BZ.length%3E1%3F(Array.from(Z).forEach(function(e)%7Bdocument.querySelector(%22%23%22%2Be)%3FH%2B%3Ddocument.querySelector(%22%23%22%2Be).textContent%2B%22%20%22%3AH%2B%3D%22%E2%9D%93%E2%9D%93%E2%9D%93%20%22%7D)%2CH%3DH.trim())%3AH%3Ddocument.querySelector(%22%23%22%2BD).textContent%7Delse%20B%3D%22N%2FA%22%3Blet%20ee%3Dc.querySelectorAll(%22%5Baria-hidden%3D'true'%5D%2C%5Brole%3D'presentation'%5D%22)%2Cet%3DE%3Bif(ee.length%3E0%26%26(Q%3D!0%2CArray.from(ee).forEach(function(e)%7Blet%20t%3De.textContent%3B%22%22!%3D%3Dt%26%26(et%3Det.split(t).join(%22%20%22))%7D)%2Cet%3Det.trim())%2C%22input%22%3D%3D%3DC)%7Blet%20eo%3Dc.getAttribute(%22type%22)%3B%22submit%22%3D%3D%3Deo%26%26%22N%2FA%22%3D%3D%3Dj%26%26(O%3D%22Submit%22%2CK%3D%22Not%20provided%20(using%20default)%22)%2C%22image%22%3D%3D%3Deo%26%26%22N%2FA%22%3D%3D%3Dj%26%26(O%3D%22Submit%22%2CK%3D%22Not%20provided%20(using%20default)%22)%2C%22cancel%22%3D%3D%3Deo%26%26%22N%2FA%22%3D%3D%3Dj%26%26(O%3D%22Cancel%22%2CK%3D%22Not%20provided%20(using%20default)%22)%7Dif(%22N%2FA%22!%3D%3DV%26%26(O%3DV%2CK%3D%22title%20attribute%22)%2C%22N%2FA%22!%3D%3Dj%26%26(O%3Dj%2CK%3D%22value%20attribute%22)%2C%22N%2FA%22!%3D%3DI%26%26(O%3DI%2CK%3D%22placeholder%20attribute%22)%2C%22N%2FA%22!%3D%3DE%26%26(O%3Det%2CK%3D%22Inner%20text%20content%22)%2C%22N%2FA%22!%3D%3DY%26%26(O%3DY%2CK%3D%22%3Clabel%3E%20text%22)%2C%22N%2FA%22!%3D%3DM%26%26(O%3DM%2CK%3D%22aria-label%22)%2C%22N%2FA%22!%3D%3DB%26%26(O%3DH%2CK%3D%22aria-labelledby%22)%2Cg%3D(f%3D%22true%22%3D%3D%3Dc.getAttribute(%22data-dupe%22))%26%26%22%22%3D%3D%3DO%2C%22%22%3D%3D%3DO%7C%7Cf)%7Bif(%22%22%3D%3D%3DO)%7Bvar%20el%2Cen%2Cea%2Cei%3Bm%3D!0%2Cu.classList.add(%22error%22)%2Cv(d%2B%22No%20accessible%20name!%22%2C%22%22%2Ci)%2Ct%2B%3D%22No%20accessible%20name!%22%2Cv(%22Accessible%20Name%20Source%3A%20N%2FA%22%2C%22%22%2Ci)%7Dif(f%26%26%22%22!%3D%3DO)%7Bu.classList.add(%22warning%22)%3Blet%20er%3Ddocument.querySelectorAll(%22%5Bdata-accname%3D'%22%2BO%2B%22'%5D%22)%2Ces%3Der.length%3Bv(d%2CO%2Ci%2C!1%2C!0)%2Ct%2B%3Dei%3De%2B%22%20%22%2BO%2Ce%2B%2B%2Cg%7C%7C(Array.from(er).forEach(function(e)%7Be.classList.add(%22dupeAccName%22)%7D)%2Cv(%22Duplicate%20warning!%22%2Ces%2B%22%20elements%20on%20page%20have%20the%20same%20accessible%20name%22%2Ci))%2CArray.from(er).forEach(function(e)%7B%7D)%2Cv(%22Accessible%20Name%20Source%3A%20%22%2CK%2Ci)%7D%7Delse%20u.classList.remove(%22error%22)%2Cu.classList.remove(%22warning%22)%2Cv(d%2CO%2Ca%2C!1%2C!0)%2Ct%2B%3Del%3De%2B%22%20%22%2BO%2Ce%2B%2B%2Cv(%22Accessible%20Name%20Source%3A%20%22%2CK%2Ca)%3Bif(m%3D!1%2Cv(%22Role%3A%20%22%2Ch%2Ca%2C!1%2C!0)%2Ct%2B%3Den%3D%22%2C%20%22%2Bh%2Cq)%7Bz%3Dc.getAttribute(%22aria-describedby%22)%3Blet%20eu%3Dz.split(%22%20%22)%3Beu.length%3E1%3F(Array.from(eu).forEach(function(e)%7Bdocument.querySelector(%22%23%22%2Be)%3FR%2B%3Ddocument.querySelector(%22%23%22%2Be).textContent%2B%22%20%22%3AR%2B%3D%22%E2%9D%93%E2%9D%93%E2%9D%93%20%22%7D)%2CR%3DR.trim())%3AR%3Ddocument.querySelector(%22%23%22%2Bz).textContent%2Cv(%22Accessible%20Description%3A%20%22%2CR%2Ca)%2Ct%2B%3Dea%3D%22%2C%20%22%2BR%2B%22%5Cn%22%7Delse%7Bv(%22Accessible%20Description%3A%20%22%2C%22N%2FA%22%2Ca)%3Bt%2B%3D%22%5Cn%22%7Dv(%22HTML%20Element%3A%20%22%2CP%2Ca)%2Cb%2B%3D%22%3C%2Ful%3E%5Cn%22%2Cb%2B%3D%22%3Cdetails%22%2Cx%26%26(b%2B%3D%22%20open%22)%2Cb%2B%3D%22%3E%5Cn%22%2Cb%2B%3D%22%3Csummary%3EMore%20details%20(D)%3C%2Fsummary%3E%5Cn%22%2Cb%2B%3D'%3Cul%20role%3D%22list%22%3E%5Cn'%2Cw%26%26(m%3D!0%2Cv(%22Superfluous%20%60role%60%20attribute%22%2C%22%22%2Ci))%2CL%26%26(m%3D!0%2Cv(%22Better%20to%20use%20a%20native%20HTML%20element%22%2C%22%22%2Ci))%2CE%3DE.trim()%2CY%3DY.trim()%2CV%3DV.trim()%2CM%3DM.trim()%2CB%3DB.trim()%2CA()%2C%22placeholder%20attribute%22%3D%3D%3DK%3F(p%3D!0%2Cv(%22%40placeholder%3A%20%22%2CI%2Cr%2C!0))%3A%22N%2FA%22%3D%3D%3DI%3Fv(%22%40placeholder%3A%20%22%2CI%2Cs)%3Av(%22%40placeholder%3A%20%22%2CI%2Cn)%2CA()%2C%22title%20attribute%22%3D%3D%3DK%3F(p%3D!0%2Cv(%22%40title%3A%20%22%2CV%2Cr%2C!0))%3A%22N%2FA%22%3D%3D%3DV%3Fv(%22%40title%3A%20%22%2CV%2Cs)%3Av(%22%40title%3A%20%22%2CV%2Cn)%2CA()%2C%22value%20attribute%22%3D%3D%3DK%3F(p%3D!0%2Cv(%22%40value%3A%20%22%2Cj%2Cr%2C!0))%3A%22N%2FA%22%3D%3D%3Dj%3Fv(%22%40value%3A%20%22%2Cj%2Cs)%3Av(%22%40value%3A%20%22%2Cj%2Cn)%2CA()%2C%22Inner%20text%20content%22%3D%3D%3DK%3F(p%3D!0%2C_%3Fv(%22Inner%20text%20content%20(includes%20image%20alt)%3A%20%22%2CE%2Cr%2C!0)%3Av(%22Inner%20text%20content%3A%20%22%2CE%2Cr%2C!0)%2CQ%26%26v(%22!%20elements%20hidden%20to%20AT%20removed%22%2C%22%22%2Cr))%3A%22N%2FA%22%3D%3D%3DE%3Fv(%22Text%20Content%3A%20%22%2CE%2Cs)%3Av(%22Text%20Content%3A%20%22%2CE%2Cn)%2CA()%2C%22%3Clabel%3E%20text%22%3D%3D%3DK%3F(p%3D!0%2Cv(%22Visible%20%60label%60%20text%3A%20%22%2CY%2Cr%2C!0))%3A%22N%2FA%22%3D%3D%3DY%3Fv(%22Visible%20%60label%60%20text%3A%20%22%2CY%2Cs)%3Av(%22Visible%20%60label%60%20text%3A%20%22%2CY%2Cn)%2CA()%2C%22aria-label%22%3D%3D%3DK%3FM%3D%3D%3DE%3F(m%3D!0%2Cv(%22%60aria-label%60%20content%20is%20same%20as%20inner%20text%20content%22%2C%22%22%2Ci))%3A(p%3D!0%2Cv(%22%40aria-label%20value%3A%20%22%2CM%2Cr%2C!0))%3A%22N%2FA%22%3D%3D%3DM%3Fv(%22%40aria-label%20value%3A%20%22%2CM%2Cs)%3Av(%22%40aria-label%20value%3A%20%22%2CM%2Cn)%2CA()%2C%22aria-labelledby%22%3D%3D%3DK%3FH%3D%3D%3DE%3F(m%3D!0%2Cv(%22%60aria-labelledby%60%20source%20content%20is%20same%20as%20inner%20text%20content%22%2C%22%22%2Ci))%3A(p%3D!0%2Cv(%22%40aria-labelledby%20value%3A%20%22%2CB%2Cr%2C!0)%2Cv(%22%40aria-labelledby%20sources%3A%20%22%2CH%2Cr))%3A(v(%22%40aria-labelledby%20value%3A%20%22%2CB%2Cs)%2Cv(%22%40aria-labelledby%20sources%3A%20%22%2C%22N%2FA%22%2Cs))%2Cdocument.querySelector(%22%23WTFocusPanel%22).innerHTML%3D'%3Cul%20role%3D%22list%22%3E'%2Bb%2B%22%3C%2Ful%3E%3C%2Fdetails%3E%22%2Cdocument.querySelector(%22%23WTFocusPanel%22).removeAttribute(%22hidden%22)%2CT()%3Blet%20ec%3Ddocument.querySelectorAll(%22%5Bdata-temp-node%5D%22)%3BArray.from(ec).forEach(function(e)%7Be.remove()%7D)%2Cc.setAttribute(%22data-accname%22%2CO)%2Ck%7C%7Cfunction%20e(t%2Co)%7Blet%20l%3D!1%3Bif(Array.from(W).forEach(function(e)%7Be%3D%3D%3Dt%26%26(l%3D!0)%7D)%2Cl)%7Bo.setAttribute(%22data-dupe%22%2C%22true%22)%3Blet%20n%3Ddocument.querySelector(%22%5Bdata-accname%3D'%22%2Bt%2B%22'%5D%22)%3Bn.setAttribute(%22data-dupe%22%2C%22true%22)%7Delse%20W.push(t)%7D(O%2Cc)%7D)%7D)%3Blet%20k%3D!1%3B!function%20e()%7Bif(h%3Ddocument.activeElement%2CArray.from(l).forEach(function(e)%7Bdocument.activeElement%3D%3D%3De%26%26e.blur()%2Ce.focus()%2Cconsole.log(%22-------------------%22)%7D)%2Ck%3D!0%2C%22BODY%22%3D%3D%3Dh.tagName)%7Blet%20t%3Ddocument.querySelector(%22body%22)%3Bt.setAttribute(%22tabindex%22%2C%22-1%22)%2Ct.focus()%2Cdocument.querySelector(%22%23WTFocusPanel%22).setAttribute(%22hidden%22%2C%22hidden%22)%7Delse%20h.focus()%7D()%2Cconsole.log(t)%7DWTFocus()%7D)()) + As you tab around the page, a panel shows alongside each element. + Show the accessible name, what the source of the accessible name is and indicates any name sources that have been overridden. + Alerts when no accessible name is found. + Also warns when use of role attribute may not be great. + NEW: Added a new curtain mode - screen is blanked out and all that shows as you tab through focusable elements is the accessible name and the role of that element. + NEW: Added a download text file feature (which lets you save a numbered list of all focusable elements, including the accessible name, role and description). Note that it does not work on all sites due to a URL size limit (the content is dynamically created via a data URI). + 🍿📽️ [Watch an explanatory video here](https://a11y-tools.com/bookmarklets/wtf/index.html). + [WTFocus source is on Github](https://github.com/lloydi/WTFocus). * [🔖anchor for Role Reverser bookmarklet](https://a11y-tools.com/bookmarklets/#rolereverser) [Role Reverser](javascript:(function()%7Bfunction%20roleReverser()%20%7B%0A%20%20function%20swapElements(srcEl)%20%7B%0A%20%20%20%20console.clear()%3B%0A%20%20%20%20const%20txtSource%20%3D%20document.querySelector(%22%23txtSource%22)%3B%0A%20%20%20%20const%20txtAmended%20%3D%20document.querySelector(%22%23txtAmended%22)%3B%0A%20%20%20%20const%20tempDOMDumpingGround%20%3D%20document.querySelector(%22%23tempDOMDumpingGround%22)%3B%0A%20%20%20%20const%20log%20%3D%20document.querySelector(%22%23log%22)%3B%0A%20%20%20%20let%20scopeDoc%3Dfalse%3B%0A%20%20%20%20let%20consoleStr%3D%22%22%3B%0A%20%20%20%20let%20pointlessTabindexCount%3D0%3B%0A%20%20%20%20let%20strChangeSummaryWrapperStart%3D%22%22%3B%0A%20%20%20%20let%20strChangeSummaryWrapperEnd%3D%22%22%3B%0A%20%20%20%20let%20strChangeSummaryItemStart%3D%22%22%3B%0A%20%20%20%20let%20strChangeSummaryItemEnd%3D%22%22%3B%0A%20%20%20%20let%20strChangeSummary%20%3D%20%22%22%3B%0A%0A%20%20%20%20function%20replaceElement(parent%2C%20newElementTagName%2C%20newElementType)%20%7B%0A%20%20%20%20%20%20var%20newDOMel%20%3D%20document.createElement(newElementTagName)%3B%0A%20%20%20%20%20%20if%20(newElementType%20!%3D%3D%20%22%22)%20%7B%0A%20%20%20%20%20%20%20%20newDOMel.setAttribute(%22type%22%2C%20newElementType)%3B%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20if%20(newElementTagName%20%3D%3D%3D%20%22a%22)%20%7B%0A%20%20%20%20%20%20%20%20newDOMel.setAttribute(%22href%22%2C%20%22%23%22)%3B%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20for%20(var%20i%20%3D%20elAttributes.length%20-%201%3B%20i%20%3E%3D%200%3B%20i--)%20%7B%0A%20%20%20%20%20%20%20%20let%20attrName%20%3D%20elAttributes%5Bi%5D.split(%22-%3E%22)%5B0%5D%3B%0A%20%20%20%20%20%20%20%20let%20attrVal%20%3D%20elAttributes%5Bi%5D.split(%22-%3E%22)%5B1%5D%3B%0A%20%20%20%20%20%20%20%20if%20(attrName%20!%3D%3D%20%22role%22)%20%7B%0A%20%20%20%20%20%20%20%20%20%20if%20(attrName%20!%3D%3D%20%22aria-level%22)%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20newDOMel.setAttribute(attrName%2C%20attrVal)%3B%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20if%20(%0A%20%20%20%20%20%20%20%20(newElementTagName%3D%3D%3D%22a%22)%7C%7C%0A%20%20%20%20%20%20%20%20(newElementTagName%3D%3D%3D%22button%22)%7C%7C%0A%20%20%20%20%20%20%20%20(newElementTagName%3D%3D%3D%22input%22)%7C%7C%0A%20%20%20%20%20%20%20%20(newElementTagName%3D%3D%3D%22select%22)%7C%7C%0A%20%20%20%20%20%20%20%20(newElementTagName%3D%3D%3D%22textarea%22)%0A%20%20%20%20%20%20%20%20)%20%7B%0A%20%20%20%20%20%20%20%20if%20(newDOMel.getAttribute(%22tabindex%22))%7B%0A%20%20%20%20%20%20%20%20%20%20pointlessTabindexCount%2B%2B%3B%0A%20%20%20%20%20%20%20%20%20%20newDOMel.removeAttribute(%22tabindex%22)%3B%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%2F%2F%20console.log(%22pointlessTabindexCount%20%3D%20%22%20%2B%20pointlessTabindexCount)%3B%0A%20%20%20%20%20%20NodeList.prototype.forEach%20%3D%20Array.prototype.forEach%3B%0A%20%20%20%20%20%20var%20children%20%3D%20parent.childNodes%3B%0A%20%20%20%20%20%20children.forEach(function%20(item)%20%7B%0A%20%20%20%20%20%20%20%20var%20clone%20%3D%20item.cloneNode(true)%3B%0A%20%20%20%20%20%20%20%20newDOMel.appendChild(clone)%3B%0A%20%20%20%20%20%20%7D)%3B%0A%20%20%20%20%20%20parent.replaceWith(newDOMel)%3B%0A%20%20%20%20%7D%0A%0A%20%20%20%20let%20elAttributes%20%3D%20%5B%5D%3B%0A%0A%20%20%20%20let%20src%3B%0A%20%20%20%20if%20(srcEl)%20%7B%0A%20%20%20%20%20%20src%20%3D%20srcEl%3B%0A%20%20%20%20%20%20scopeDoc%3Dtrue%3B%0A%20%20%20%20%7D%20else%20%7B%0A%20%20%20%20%20%20src%20%3D%20tempDOMDumpingGround%3B%0A%20%20%20%20%20%20tempDOMDumpingGround.innerHTML%20%3D%20txtSource.value%3B%0A%20%20%20%20%7D%0A%0A%20%20%20%20let%20swappedElementCount%20%3D%200%3B%0A%20%20%20%20let%20allElementsWithRolesCount%20%3D%200%3B%0A%0A%20%20%20%20function%20sweepThrough()%20%7B%0A%20%20%20%20%20%20const%20elementsWithRoles%20%3D%20src.querySelectorAll('%5Brole%3D%22button%22%5D%2C%5Brole%3D%22link%22%5D%2C%5Brole%3D%22heading%22%5D%2C%5Brole%3D%22option%22%5D%2C%5Brole%3D%22listbox%22%5D%2C%5Brole%3D%22listitem%22%5D%2C%5Brole%3D%22list%22%5D%2C%5Brole%3D%22checkbox%22%5D%2C%5Brole%3D%22checkbox%22%5D%2C%5Brole%3D%22radio%22%5D%2C%5Brole%3D%22textbox%22%5D%2C%5Brole%3D%22main%22%5D%2C%5Brole%3D%22navigation%22%5D%2C%5Brole%3D%22img%22%5D%2C%5Brole%3D%22image%22%5D%2C%5Brole%3D%22table%22%5D')%3B%0A%20%20%20%20%20%20const%20elementsWithRolesThatNeedSwapping%20%3D%20src.querySelectorAll('%5Brole%3D%22button%22%5D%3Anot(button%5Brole%3D%22button%22%5D)%2C%5Brole%3D%22link%22%5D%3Anot(a%5Brole%3D%22link%22%5D)%2C%5Brole%3D%22heading%22%5D%3Anot(h1%2Ch2%2Ch3%2Ch4%2Ch5%2Ch6)%5Baria-level%5D%2C%5Brole%3D%22option%22%5D%3Anot(option%5Brole%3D%22option%22%5D)%2C%5Brole%3D%22listbox%22%5D%3Anot(select%5Brole%3D%22listbox%22%5D)%2C%5Brole%3D%22listitem%22%5D%3Anot(li%5Brole%3D%22listitem%22%5D)%2C%5Brole%3D%22list%22%5D%3Anot(ul%2Col)%2C%5Brole%3D%22checkbox%22%5D%3Anot(input)%2C%5Brole%3D%22checkbox%22%5D%3Anot(input)%2C%5Brole%3D%22radio%22%5D%3Anot(input)%2C%5Brole%3D%22textbox%22%5D%3Anot(input)%2C%5Brole%3D%22main%22%5D%3Anot(main)%2C%5Brole%3D%22navigation%22%5D%3Anot(nav)%2C%5Brole%3D%22img%22%5D%3Anot(img)%2C%5Brole%3D%22image%22%5D%3Anot(img)%2C%5Brole%3D%22table%22%5D%3Anot(table)')%3B%0A%20%20%20%20%20%20if%20(elementsWithRolesThatNeedSwapping.length%20%3E%20swappedElementCount)%20%7B%0A%20%20%20%20%20%20%20%20swappedElementCount%20%3D%20elementsWithRolesThatNeedSwapping.length%3B%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20if%20(elementsWithRoles.length%20%3E%20allElementsWithRolesCount)%20%7B%0A%20%20%20%20%20%20%20%20allElementsWithRolesCount%20%3D%20elementsWithRoles.length%3B%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20Array.from(elementsWithRolesThatNeedSwapping).forEach((elementWithRoleThatNeedSwapping)%20%3D%3E%20%7B%0A%20%20%20%20%20%20%20%20let%20newElementTagName%20%3D%20%22%22%3B%0A%20%20%20%20%20%20%20%20let%20newElementType%20%3D%20%22%22%3B%0A%20%20%20%20%20%20%20%20let%20elRole%20%3D%20elementWithRoleThatNeedSwapping.getAttribute(%22role%22)%3B%0A%20%20%20%20%20%20%20%20newElementTagName%20%3D%20elRole%3B%0A%20%20%20%20%20%20%20%20if%20(elRole%20%3D%3D%3D%20%22link%22)%20%7B%0A%20%20%20%20%20%20%20%20%20%20newElementTagName%20%3D%20%22a%22%3B%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20if%20(elRole%20%3D%3D%3D%20%22image%22)%20%7B%0A%20%20%20%20%20%20%20%20%20%20newElementTagName%20%3D%20%22img%22%3B%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20if%20(elRole%20%3D%3D%3D%20%22navigation%22)%20%7B%0A%20%20%20%20%20%20%20%20%20%20newElementTagName%20%3D%20%22nav%22%3B%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20if%20(elRole%20%3D%3D%3D%20%22list%22)%20%7B%0A%20%20%20%20%20%20%20%20%20%20newElementTagName%20%3D%20%22ul%22%3B%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20if%20(elRole%20%3D%3D%3D%20%22listitem%22)%20%7B%0A%20%20%20%20%20%20%20%20%20%20newElementTagName%20%3D%20%22li%22%3B%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20if%20(elRole%20%3D%3D%3D%20%22listbox%22)%20%7B%0A%20%20%20%20%20%20%20%20%20%20newElementTagName%20%3D%20%22select%22%3B%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20if%20(elRole%20%3D%3D%3D%20%22texbox%22)%20%7B%0A%20%20%20%20%20%20%20%20%20%20newElementTagName%20%3D%20%22input%22%3B%0A%20%20%20%20%20%20%20%20%20%20newElementType%20%3D%20%22text%22%3B%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20if%20(elRole%20%3D%3D%3D%20%22heading%22)%20%7B%0A%20%20%20%20%20%20%20%20%20%20newElementTagName%20%3D%20%22h%22%20%2B%20elementWithRoleThatNeedSwapping.getAttribute(%22aria-level%22)%3B%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20if%20(elRole%20%3D%3D%3D%20%22checkbox%22%20%7C%7C%20elRole%20%3D%3D%3D%20%22radio%22)%20%7B%0A%20%20%20%20%20%20%20%20%20%20newElementTagName%20%3D%20%22input%22%3B%0A%20%20%20%20%20%20%20%20%20%20newElementType%20%3D%20elRole%3B%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20elAttributes%20%3D%20%5B%5D%3B%0A%20%20%20%20%20%20%20%20let%20thisElAttributes%20%3D%20elementWithRoleThatNeedSwapping.attributes%3B%0A%20%20%20%20%20%20%20%20for%20(var%20i%20%3D%20thisElAttributes.length%20-%201%3B%20i%20%3E%3D%200%3B%20i--)%20%7B%0A%20%20%20%20%20%20%20%20%20%20elAttributes.push(thisElAttributes%5Bi%5D.name%20%2B%20%22-%3E%22%20%2B%20thisElAttributes%5Bi%5D.value)%3B%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20replaceElement(elementWithRoleThatNeedSwapping%2C%20newElementTagName%2C%20newElementType)%3B%0A%20%20%20%20%20%20%20%20consoleStr%2B%3DelementWithRoleThatNeedSwapping.outerHTML%20%2B%20%22%5Cn%F0%9F%91%89%20%3C%22%20%2B%20newElementTagName%20%2B%20%22%3E%5Cn----%5Cn%22%3B%0A%20%20%20%20%20%20%7D)%3B%0A%20%20%20%20%7D%0A%20%20%20%20sweepThrough()%3B%0A%20%20%20%20sweepThrough()%3B%0A%20%20%20%20if%20(scopeDoc)%20%7B%0A%20%20%20%20%20%20strChangeSummaryItemStart%3D%22%E2%80%A2%20%22%3B%0A%20%20%20%20%20%20strChangeSummaryItemEnd%3D%22%5Cn%22%3B%0A%20%20%20%20%7D%20else%20%7B%0A%20%20%20%20%20%20strChangeSummaryWrapperStart%3D%22%3Cul%3E%22%3B%0A%20%20%20%20%20%20strChangeSummaryWrapperEnd%3D%22%3C%2Ful%3E%22%3B%0A%20%20%20%20%20%20strChangeSummaryItemStart%3D%22%3Cli%3E%22%3B%0A%20%20%20%20%20%20strChangeSummaryItemEnd%3D%22%3C%2Fli%3E%22%3B%0A%20%20%20%20%7D%0A%20%0A%20%20%20%20strChangeSummary%20%2B%3D%20strChangeSummaryItemStart%20%2B%20allElementsWithRolesCount%20%2B%20%22%20elements%20in%20original%20markup%20have%20%60role%60%20attributes.%22%20%2B%20strChangeSummaryItemEnd%3B%0A%20%20%20%20strChangeSummary%20%2B%3D%20strChangeSummaryItemStart%20%2B%20swappedElementCount%20%2B%20%22%20elements%20were%20swapped%20back%20to%20native%20HTML%20equivalents.%22%20%2B%20strChangeSummaryItemEnd%3B%0A%20%20%20%20if%20(allElementsWithRolesCount%20%3E%20swappedElementCount)%20%7B%0A%20%20%20%20%20%20strChangeSummary%20%2B%3D%20strChangeSummaryItemStart%20%2B%20(allElementsWithRolesCount%20-%20swappedElementCount)%20%2B%20%22%20elements%20have%20(possibly%20superfluous)%20%60role%60%20attributes%20applied%20to%20native%20HTML%20elements.%22%20%2B%20strChangeSummaryItemEnd%3B%0A%20%20%20%20%7D%0A%20%20%20%20if%20(pointlessTabindexCount%3E0)%20%7B%0A%20%20%20%20%20%20strChangeSummary%20%2B%3D%20strChangeSummaryItemStart%20%2B%20pointlessTabindexCount%20%2B%20%22%20%60tabindex%60%20attributes%20removed%20from%20(now)%20natively%20focusable%20elements%22%20%2B%20strChangeSummaryItemEnd%3B%0A%20%20%20%20%7D%0A%20%20%20%20if%20(!scopeDoc)%20%7B%0A%20%20%20%20%20%20txtAmended.value%20%3D%20tempDOMDumpingGround.innerHTML%3B%0A%20%20%20%20%20%20tempDOMDumpingGround.innerHTML%20%3D%20%22%22%3B%0A%20%20%20%20%20%20strChangeSummary%20%3D%20strChangeSummaryWrapperStart%20%2B%20strChangeSummary%20%2B%20strChangeSummaryWrapperEnd%3B%0A%20%20%20%20%20%20log.innerHTML%20%3D%20strChangeSummary%3B%0A%20%20%20%20%7D%20else%20%7B%0A%20%20%20%20%20%20alert(strChangeSummary)%3B%0A%20%20%20%20%7D%0A%20%20%20%20console.log(consoleStr)%3B%0A%20%20%7D%0A%0AswapElements(document.querySelector(%22body%22))%3B%0A%7D%0A%0AroleReverser()%3B%0A%7D)()) + Finds all elements on the page with `role` attributes. + Replaces non-semantic elements with native HTML equivalent. + Summary of findings in alert, further diagnostics in the console. + 🚨 NOTE: This is destructive, there is no 'undo' feature (just reload page). ##### Hidden Content Tools ([4.1.2](https://www.w3.org/TR/WCAG22/#name-role-value)) * [🔖anchor for Visually Hidden? bookmarklet](https://a11y-tools.com/bookmarklets/#visuallyhidden) [Visually Hidden?](javascript:(function()%7Bvar%20allElements%3Ddocument.querySelectorAll(%22*%22)%3Bfunction%20findAllVisuallyHiddenElements()%7Bdocument.querySelector(%22body%22).classList.add(%22a11y-tools-active%22)%2CArray.from(allElements).forEach(i%3D%3E%7Bcs%3DgetComputedStyle(i)%3Bfor(var%20t%3D!1%2Ce%3D!1%2Ca%3D!1%2Cl%3D!1%2Co%3D!1%2Cn%3D!1%2Cs%3D!1%2Cd%3D!1%2Cr%3D0%3Br%3Ccs.length%3Br%2B%2B)cssProperty%3Dcs%5Br%5D%2CcssValue%3Dcs.getPropertyValue(cssProperty)%2C%22clip%22%3D%3D%3DcssProperty%26%26%22rect(1px%2C%201px%2C%201px%2C%201px)%22%3D%3D%3DcssValue%26%26(t%3D!0)%2C%22clip-path%22%3D%3D%3DcssProperty%26%26%22inset(100%25)%22%3D%3D%3DcssValue%26%26(e%3D!0)%2C%22height%22%3D%3D%3DcssProperty%26%26%221px%22%3D%3D%3DcssValue%26%26(a%3D!0)%2C%22overflow-x%22%3D%3D%3DcssProperty%26%26%22hidden%22%3D%3D%3DcssValue%26%26(l%3D!0)%2C%22overflow-y%22%3D%3D%3DcssProperty%26%26%22hidden%22%3D%3D%3DcssValue%26%26(o%3D!0)%2C%22position%22%3D%3D%3DcssProperty%26%26%22absolute%22%3D%3D%3DcssValue%26%26(n%3D!0)%2C%22white-space%22%3D%3D%3DcssProperty%26%26%22nowrap%22%3D%3D%3DcssValue%26%26(s%3D!0)%2C%22width%22%3D%3D%3DcssProperty%26%26%221px%22%3D%3D%3DcssValue%26%26(d%3D!0)%3B!0%3D%3D%3Dt%26%26!0%3D%3D%3De%26%26!0%3D%3D%3Da%26%26!0%3D%3D%3Dl%26%26!0%3D%3D%3Do%26%26!0%3D%3D%3Dn%26%26!0%3D%3D%3Ds%26%26!0%3D%3D%3Dd%26%26i.classList.add(%22a11y-tools-was-visually-hidden%22)%3Blet%20c%3Di.classList%3Bc.forEach(t%3D%3E%7B-1!%3D%3Dt.indexOf(%22-offscreen%22)%26%26i.classList.add(%22a11y-tools-was-visually-hidden%22)%7D)%2C(i.classList.contains(%22sr-only%22)%7C%7Ci.classList.contains(%22screenreader-only%22)%7C%7Ci.classList.contains(%22visually-hidden%22)%7C%7Ci.classList.contains(%22visuallyhidden%22))%26%26i.classList.add(%22a11y-tools-was-visually-hidden%22)%7D)%7Dfunction%20indicateAriaHiddenElements(i)%7BfindAllVisuallyHiddenElements()%2C!function%20i()%7Blet%20t%3Ddocument.createElement(%22style%22)%3Bt.setAttribute(%22id%22%2C%22VisuallyHiddenStyles%22)%2Ct.textContent%3D%60body.a11y-tools-active%20%5Baria-hidden%3Dtrue%5D%20%7Bbackground%3Ablack%3Bcolor%3Ablack%3B%7Dbody.a11y-tools-active%20%5Baria-hidden%3Dtrue%5D%20img%20%7Bopacity%3A0%3B%7Dbody.a11y-tools-active%20%5Baria-hidden%3Dtrue%5D%20%5Baria-hidden%3Dtrue%5D%20%7Bopacity%3A1%7D.a11y-tools-was-visually-hidden%20%7Bclip-path%3A%20initial!important%3Bclip%3A%20initial!important%3Bheight%3A%20auto!important%3Boverflow%3A%20initial!important%3Bposition%3A%20initial!important%3Bwhite-space%3A%20initial!important%3Bwidth%3A%20auto!important%3Bopacity%3Ainitial!important%3Bz-index%3Ainitial!important%3Bbackground%3Ablack!important%3Bcolor%3Alime!important%3B%7D%60%2Cdocument.head.appendChild(t)%7D()%2Cdocument.addEventListener(%22keydown%22%2Cfunction(i)%7B%22q%22%3D%3D%3Di.key%26%26(i.preventDefault()%2Cfunction%20i()%7Bdocument.querySelector(%22body%22).classList.remove(%22a11y-tools-active%22)%3Blet%20t%3Ddocument.querySelectorAll(%22.a11y-tools-was-visually-hidden%22)%3BArray.from(t).forEach(i%3D%3E%7Bi.classList.remove(%22a11y-tools-was-visually-hidden%22)%7D)%3Blet%20e%3Ddocument.querySelector(%22%23VisuallyHiddenStyles%22)%3Be%26%26e.remove()%7D())%7D)%7DindicateAriaHiddenElements(document)%3Bvar%20iframes%3Ddocument.querySelectorAll(%22iframe%22)%3BArray.from(iframes).forEach(i%3D%3E%7BindicateAriaHiddenElements(i.contentWindow.document)%7D)%7D)()) New Dec 2024 + Looks for all elements that appear to be visually hidden (available to assistive technology users, but not visible on screen). + Looks for commonly-used classnames for this effect. + Also tries to match commonly-used CSS property/values in case the classname is not one of the usual suspects. + After running, you can quit by pressing 'q' and the tool will remove all highlights, restore markup back as it was before. + 🍿📽️ [Watch the Visually Hidden? bookmarklet in action here](https://a11y-tools.com/bookmarklets/source/visually-hidden/#video). * [🔖anchor for Blackout bookmarklet](https://a11y-tools.com/bookmarklets/#blackout) [Blackout](javascript:(function()%7Bfunction%20processAriaHiddenElements()%7Blet%20e%3D%7BFOCUSABLE_TAGS%3A%5B%22a%22%2C%22button%22%2C%22input%22%2C%22select%22%2C%22textarea%22%2C%22video%22%2C%22audio%22%5D%2CPULSE_ANIMATION_ID%3A%22pulse-outline-styles%22%2CPULSE_CLASS%3A%22pulse-outline%22%2CDEFAULT_PULSE_COLOR%3A%22red%22%7D%3B!function%20e()%7Blet%20t%3Ddocument.createElement(%22style%22)%3Bt.setAttribute(%22id%22%2C%22blackoutStyles%22)%2Ct.textContent%3D%60.a11y-tools-blackout%20%7Bbackground%3Ablack!important%3Bcolor%3Ablack!important%3Bopacity%3A1!important%3Boutline%3A5px%20solid%20black!important%3B%7D%60%2Cdocument.head.appendChild(t)%7D()%2Cdocument.addEventListener(%22keydown%22%2Cfunction(e)%7B%22q%22%3D%3D%3De.key%26%26(e.preventDefault()%2Cfunction%20e()%7Blet%20t%3Ddocument.querySelectorAll(%22.a11y-tools-blackout%22)%3BArray.from(t).forEach(e%3D%3E%7Be.classList.remove(%22a11y-tools-blackout%22)%2Ce.classList.remove(%22pulse-outline%22)%7D)%3Blet%20o%3Ddocument.querySelector(%22%23blackoutStyles%22)%3Bo%26%26o.remove()%7D())%7D)%2Cfunction%20t()%7Blet%20o%3Ddocument.querySelectorAll('%5Baria-hidden%3D%22true%22%5D')%3B(%7Bcreate(e%2Ct)%7Blet%20o%3Ddocument.getElementById(e)%3Bo%26%26o.remove()%3Blet%20l%3Ddocument.createElement(%22style%22)%3Breturn%20l.type%3D%22text%2Fcss%22%2Cl.id%3De%2Cl.textContent%3Dt%2Cdocument.head.appendChild(l)%2Cl%7D%2Cremove(e)%7Blet%20t%3Ddocument.getElementById(e)%3Bt%26%26t.remove()%7D%7D).create(e.PULSE_ANIMATION_ID%2C%60%40keyframes%20pulse-outline%20%7B0%25%2C%20100%25%20%7B%20outline-width%3A%202px%3B%20outline-offset%3A%200px%3B%20%7D50%25%20%7B%20outline-width%3A%205px%3B%20outline-offset%3A%205px%3B%20%7D%7D.%24%7Be.PULSE_CLASS%7D%20%7Boutline%3A%202px%20solid%20red!important%3Boutline-offset%3A%200px%3Boutline-color%3A%20red%3Banimation%3A%20pulse-outline%205s%20ease-in-out%20infinite%3B%7D.%24%7Be.PULSE_CLASS%7D%3Ahover%20%7Banimation-play-state%3A%20paused%3B%7D%60)%2Co.forEach(t%3D%3E%7Bvar%20o%3B(function%20e(t)%7Bt.classList.add(%22a11y-tools-blackout%22)%7D)(t)%2Co%3Dt%2C(e.FOCUSABLE_TAGS.includes(o.tagName.toLowerCase())%7C%7Co.tabIndex%3E0%7C%7C0%3D%3D%3Do.tabIndex)%26%26(t.classList.add(e.PULSE_CLASS)%2Cconsole.warn(%22Focusable%20Aria-Hidden%20Element%3A%22%2Ct))%7D)%7D()%7DprocessAriaHiddenElements()%7D)()) New Dec 2024 + Finds all elements on a page that are set as `aria-hidden="true"` and blacks them out, to visually indicate elements that will not be available to assistive technology (AT) users. + In addition, also finds `aria-hidden` elements that are keyboard-focusable (which will be problematic for AT users). + Visually flags focusable but hidden-to-AT-users with a pulsing red outline. + After running, you can quit by pressing 'q' and the tool will remove all highlights, restore markup back as it was before. + 🍿📽️ [Watch the Blackout bookmarklet in action here](https://a11y-tools.com/bookmarklets/source/blackout/#video). ##### Miscellaneous Tools * [🔖anchor for Non-underlined links bookmarklet](https://a11y-tools.com/bookmarklets/#nonunderlinedlinks) [Non-underlined links](javascript:(function()%7B%22use%20strict%22%3Bvar%20consoleOutput%3D%22%22%3Bfunction%20checkNonUnderlinedLinks()%7Bfunction%20e()%7Blet%20e%3Ddocument.createElement(%22style%22)%3Be.setAttribute(%22id%22%2C%22a11yToolsStyles%22)%2Ce.textContent%3D%60.a11y-tools-highlighlight%20%7B%7D%60%2Cdocument.head.appendChild(e)%7Dconsole.clear()%3Blet%20t%3D!1%2Co%3D!1%2Cn%3D!1%2Cl%3D!1%2Cr%3Ddocument.querySelectorAll(%22a%22)%2Ci%3D0%2Cs%3D!1%2Ca%3D!1%3Bfunction%20u(e%2Ct%2Co)%7Blet%20n%3D%5Be%2Ct%2Co%5D.map(function(e)%7Breturn(e%2F%3D255)%3C%3D.03928%3Fe%2F12.92%3AMath.pow((e%2B.055)%2F1.055%2C2.4)%7D)%3Breturn%20.2126*n%5B0%5D%2B.7152*n%5B1%5D%2B.0722*n%5B2%5D%7Dfunction%20d(e)%7Breturn%20e%3D(e%3D(e%3De.replace(%22rgb(%22%2C%22%22)).replace(%22)%22%2C%22%22)).split(%22%2C%20%22)%7Dfunction%20e()%7Blet%20e%3Ddocument.createElement(%22style%22)%3Be.textContent%3D%22.problem-highlight%20%7Boutline%3A3px%20solid%20darkred%3Boutline-offset%3A3px%3Bbox-shadow%3A%200px%200px%200px%2010px%20%23fff%3B%7D.big-problem-highlight%20%7Boutline%3A6px%20solid%20darkred%3B%7D%22%2Cdocument.head.appendChild(e)%7Dif(e()%2CArray.from(r).forEach(e%3D%3E%7Bif(s%3D!1%2Ca%3D!1%2Cl%3Dfunction%20e(t%2Co)%7Bfor(%3B(t%3Dt.parentElement)%26%26!(t.matches%7C%7Ct.matchesSelector).call(t%2Co)%3B)%3Breturn%20t%7D(e%2C%22nav%2C%5Brole%3Dnavigation%5D%22)%2Ce.childNodes.length%3E0%26%26(e.childNodes%5B0%5D.tagName%26%26(%22IMG%22%3D%3D%3De.childNodes%5B0%5D.tagName.toUpperCase()%7C%7C%22SVG%22%3D%3D%3De.childNodes%5B0%5D.tagName.toUpperCase()%7C%7C%22FIGURE%22%3D%3D%3De.childNodes%5B0%5D.tagName.toUpperCase())%26%26(s%3D!0)%2C!function%20e(l)%7Bt%3D!1%2Co%3D!1%2Cn%3D!1%3Blet%20r%3DgetComputedStyle(l)%3Bfor(let%20i%3D0%3Bi%3Cr.length%3Bi%2B%2B)%7Blet%20s%3Dr%5Bi%5D%2Ca%3Dr.getPropertyValue(s)%3B%22text-decoration-line%22%3D%3D%3Ds%26%26%22underline%22%3D%3D%3Da%26%26(o%3D!0)%2C%22border-bottom-style%22%3D%3D%3Ds%26%26(%22solid%22%3D%3D%3Da%7C%7C%22dotted%22%3D%3D%3Da%7C%7C%22dashed%22%3D%3D%3Da)%26%26(n%3D!0)%2C%22border-bottom-color%22%3D%3D%3Ds%26%26%22transparent%22%3D%3D%3Da%26%26(n%3D!1)%2C(o%7C%7Cn)%26%26(t%3D!0)%7Dreturn%20t%7D(e)%26%26!s))%7BconsoleOutput%2B%3D%22-------%5Cn%22%2CconsoleOutput%2B%3D%22Link%20text%3A%20%22%2Be.textContent%2B%22%5Cn%22%2C!l%26%26(function%20e(t)%7Bt.classList.add(%22problem-highlight%22)%7D(e)%2CconsoleOutput%2B%3D%22Affected%20node%20(xpath)%3A%20%22%2Bfunction%20e(t)%7Blet%20o%3Dt%2Cn%3Dt.tagName.toLowerCase()%2Cl%2Cr%3D%22%22%2Ci%3D%22%22%2Cs%3D%22%22%2Ca%3D%22%22%3Bfor(%3Bo.parentNode%3B)%7Bif((l%3Do.parentNode).tagName)%7Br%3Dl.tagName.toLowerCase()%3Blet%20u%3Dl.querySelectorAll(o.tagName)%3Bs%3Du.length%3E1%3F%22%5B%22%2BparseInt(Array.from(u).indexOf(o)%2B1)%2B%22%5D%22%3A%22%22%2Ci%3D(n%3Do.tagName.toLowerCase())%2Bs%2Ba%2Bi%2Ca%3D%22%2F%22%7Do%3Dl%7Dreturn%22%22%3D%3D%3Dr%26%26(r%3Dn)%2Ci%3D%22%2F%2F%22%2Br%2Bs%2Ba%2Bi%7D(e)%2B%22%5Cn%22%2Ci%2B%2B)%3Blet%20r%3Dd(getComputedStyle(e).color)%2Cc%3Dd(getComputedStyle(e.parentNode).color)%2Cp%3Dfunction%20e(t%2Co)%7Blet%20n%3Du(t%5B0%5D%2Ct%5B1%5D%2Ct%5B2%5D)%2Cl%3Du(o%5B0%5D%2Co%5B1%5D%2Co%5B2%5D)%3Breturn(Math.max(n%2Cl)%2B.05)%2F(Math.min(n%2Cl)%2B.05)%7D(r%2Cc)%3Bl%3FconsoleOutput%2B%3D%22Link%20is%20inside%20a%20%3Cnav%3E%20element%20and%20therefore%20its%20position%2Fdisplay%20does%20not%20require%20the%20underline%20for%20it%20to%20be%20perceived%20as%20a%20link.%5Cn%22%3A(p%3C3%3F(consoleOutput%2B%3D%22%5CuD83D%5CuDEA8%20Contrast%20between%20link%20text%20and%20parent%20text%20node%20is%20under%203%3A1.%20%22%2Cl%7C%7Cfunction%20e(t)%7Bt.classList.add(%22big-problem-highlight%22)%7D(e))%3AconsoleOutput%2B%3D%22✅%20Contrast%20between%20link%20text%20and%20parent%20text%20node%20is%20over%203%3A1.%20%22%2CconsoleOutput%2B%3D%22Ratio%20is%20%22%2Bp.toFixed(2)%2B%22%3A1.%22%2Cp%3C3%3FconsoleOutput%2B%3D%22%5Cn%20%20Very%20likely%20a%20%5BSC%201.4.1%20Use%20of%20Color%5D(https%3A%2F%2Fwww.w3.org%2FTR%2FWCAG21%2F%23use-of-color)%20issue%5Cn%22%3AconsoleOutput%2B%3D%22%5Cn%20%20Possibly%20a%20%5BSC%201.4.1%20Use%20of%20Color%5D(https%3A%2F%2Fwww.w3.org%2FTR%2FWCAG21%2F%23use-of-color)%20issue.%20HOWEVER%2C%20as%20ratio%20with%20adjacent%20text%20appears%20to%20be%20over%203%3A1%2C%20it%20is%20not%20a%20failure%20%5BUnderstanding%20SC%201.4.1%3A%20Use%20of%20Color%20(Level%20A)%5D(https%3A%2F%2Fwww.w3.org%2FWAI%2FWCAG21%2FUnderstanding%2Fuse-of-color.html)%20%5Cn%22)%7D%7D)%2Ci%3E0)%7Blet%20c%3Di%2B%22%20possible%20issues%20with%20non-underlined%20links%20found%22%3BconsoleOutput%3Dc%2B%22%5Cn%22%2BconsoleOutput%2Calert(c%2B%22%20(check%20console%20for%20more%20details)%22)%7Delse%20alert(%22No%20non-underlined%20links%20found%20(outside%20of%20a%20navigation%20area)%22)%3Bconsole.log(consoleOutput)%2Cdocument.addEventListener(%22keydown%22%2Cfunction(e)%7B%22q%22%3D%3D%3De.key%26%26(e.preventDefault()%2Cfunction%20e()%7Blet%20t%3Ddocument.querySelectorAll(%22.problem-highlight%2C.big-problem-highlight%22)%3BArray.from(t).forEach(e%3D%3E%7Be.classList.remove(%22problem-highlight%22)%2Ce.classList.remove(%22big-problem-highlight%22)%7D)%3Blet%20o%3Ddocument.querySelector(%22%23a11yToolsStyles%22)%3Bo%26%26o.remove()%7D())%7D)%7DcheckNonUnderlinedLinks()%3Bvar%20kmOutput%3DconsoleOutput%7D)()) [[1.4.1](https://www.w3.org/TR/WCAG22/#use-of-color)] + Finds any links on the page that do not appear to be underlined (`text-decoration` set to `none` and no detectable `border-bottom`). + Indicates these non-underlined links in a big obvious red outline. + Provides xpath reference for all affected links. + Ignores non-underlined links that are inside a `nav`/`role="navigation"` element. + Where links without underlines are found, it checks color contrast and flags any under 3:1 ratio (which may indicate a 1.4.1 Use of Color issue). + After running, you can quit by pressing 'q' and the tool will remove all highlights, restore markup back as it was before. * [🔖anchor for Suggest autocomplete values bookmarklet](https://a11y-tools.com/bookmarklets/#autocomplete) [Suggest autocomplete values](javascript:(function()%7Bfunction%20showAllAutoCompleteCandidates()%7B!function%20e()%7Blet%20o%3Ddocument.querySelectorAll(%22%5Baria-hidden%3Dtrue%5D%22)%3BArray.from(o).forEach(function(e)%7Be.remove()%7D)%7D()%3Blet%20e%3Ddocument.createElement(%22style%22)%3Be.innerHTML%3D%22.auto-complete-candidate%20%7Boutline%3A3px%20dotted%20orange%3B%7D.auto-complete-required%20%7Boutline%3A3px%20solid%20red%3Boutline-offset%3A2px%3Bbox-shadow%3A0%200%200%208px%20white%7D%22%2Cdocument.querySelector(%22head%22).append(e)%3Blet%20o%3Ddocument.querySelectorAll(%22input%3Anot(%5Bautocomplete%5D)%3Anot(%5Btype%3Dradio%5D)%3Anot(%5Btype%3Dcheckbox%5D)%3Anot(%5Btype%3Dhidden%5D)%3Anot(%5Btype%3Dsubmit%5D)%2Cselect%3Anot(%5Bautocomplete%5D)%22)%2Ct%3D%22%22%2Cn%3D%22%22%2Ci%3D%22%22%2Ca%3D%22%22%2Cl%3D%22%22%2Cr%3D0%2Cp%3D%22%22%3Bp%2B%3D'%3Coption%20value%3D%22%22%3EPick%20an%20autocomplete%20value...%3C%2Foption%3E%5Cn'%2Cp%2B%3D'%3Coptgroup%20label%3D%22Title%22%3E%5Cn'%2Cp%2B%3D'%3Coption%20value%3D%22honorific-prefix%22%3Ehonorific-prefix%20%20----%20%20prefix%2C%20title%20e.g.%20Mr%2FMrs%3C%2Foption%3E%5Cn'%2Cp%2B%3D'%3Coption%20value%3D%22honorific-suffix%22%3Ehonorific-suffix%20%20----%20%20suffix%20e.g.%20Jnr%2FEsq%3C%2Foption%3E%5Cn'%2Cp%2B%3D'%3Coptgroup%20label%3D%22Name%2FPersonal%20Details%22%3E%5Cn'%2Cp%2B%3D'%3Coption%20value%3D%22name%22%3Ename%20%20----%20%20full%20name%3C%2Foption%3E%5Cn'%2Cp%2B%3D'%3Coption%20value%3D%22given-name%22%3Egiven-name%20%20----%20%20first-name%2C%20forename%3C%2Foption%3E%5Cn'%2Cp%2B%3D'%3Coption%20value%3D%22additional-name%22%3Eadditional-name%20%20----%20%20middle%20name%3C%2Foption%3E%5Cn'%2Cp%2B%3D'%3Coption%20value%3D%22family-name%22%3Efamily-name%20%20----%20%20last%20name%2C%20surname%3C%2Foption%3E%5Cn'%2Cp%2B%3D'%3Coption%20value%3D%22nickname%22%3Enickname%20%20----%20%20screen%20name%2C%20handle%3C%2Foption%3E%5Cn'%2Cp%2B%3D'%3Coption%20value%3D%22username%22%3Eusername%20%20----%20%20login%20name%2C%20account%20name%3C%2Foption%3E%5Cn'%2Cp%2B%3D'%3Coption%20value%3D%22sex%22%3Esex%20%20----%20%20gender%3C%2Foption%3E%5Cn'%2Cp%2B%3D'%3Coption%20value%3D%22language%22%3Elanguage%3C%2Foption%3E%5Cn'%2Cp%2B%3D'%3Coptgroup%20label%3D%22Address%22%3E%5Cn'%2Cp%2B%3D'%3Coption%20value%3D%22street-address%22%3Estreet-address%20%20----%20%20full%20address%2C%20postal%20address%3C%2Foption%3E%5Cn'%2Cp%2B%3D'%3Coption%20value%3D%22address-line1%22%3Eaddress-line1%3C%2Foption%3E%5Cn'%2Cp%2B%3D'%3Coption%20value%3D%22address-line2%22%3Eaddress-line2%3C%2Foption%3E%5Cn'%2Cp%2B%3D'%3Coption%20value%3D%22address-line3%22%3Eaddress-line3%3C%2Foption%3E%5Cn'%2Cp%2B%3D'%3Coption%20value%3D%22address-level4%22%3Eaddress-level4%3C%2Foption%3E%5Cn'%2Cp%2B%3D'%3Coption%20value%3D%22address-level3%22%3Eaddress-level3%3C%2Foption%3E%5Cn'%2Cp%2B%3D'%3Coption%20value%3D%22address-level2%22%3Eaddress-level2%20%20----%20%20city%2C%20town%2C%20village%3C%2Foption%3E%5Cn'%2Cp%2B%3D'%3Coption%20value%3D%22address-level1%22%3Eaddress-level1%20%20----%20%20state%2C%20post-town%2C%20province%2C%20canton%3C%2Foption%3E%5Cn'%2Cp%2B%3D'%3Coption%20value%3D%22country%22%3Ecountry%20%20----%20%20country%20code%2C%20territory%20code%3C%2Foption%3E%5Cn'%2Cp%2B%3D'%3Coption%20value%3D%22country-name%22%3Ecountry-name%3C%2Foption%3E%5Cn'%2Cp%2B%3D'%3Coption%20value%3D%22postal-code%22%3Epostal-code%20%20----%20%20post%20code%2C%20zip%20code%2C%20cedex%20code%3C%2Foption%3E%5Cn'%2Cp%2B%3D'%3Coptgroup%20label%3D%22Telephone%22%3E%5Cn'%2Cp%2B%3D'%3Coption%20value%3D%22tel%22%3Etel%20%20----%20%20full%20telephone%20number%3C%2Foption%3E%5Cn'%2Cp%2B%3D'%3Coption%20value%3D%22tel-country-code%22%3Etel-country-code%3C%2Foption%3E%5Cn'%2Cp%2B%3D'%3Coption%20value%3D%22tel-national%22%3Etel-national%3C%2Foption%3E%5Cn'%2Cp%2B%3D'%3Coption%20value%3D%22tel-area-code%22%3Etel-area-code%3C%2Foption%3E%5Cn'%2Cp%2B%3D'%3Coption%20value%3D%22tel-local%22%3Etel-local%3C%2Foption%3E%5Cn'%2Cp%2B%3D'%3Coption%20value%3D%22tel-local-prefix%22%3Etel-local-prefix%3C%2Foption%3E%5Cn'%2Cp%2B%3D'%3Coption%20value%3D%22tel-local-suffix%22%3Etel-local-suffix%3C%2Foption%3E%5Cn'%2Cp%2B%3D'%3Coption%20value%3D%22tel-extension%22%3Etel-extension%3C%2Foption%3E%5Cn'%2Cp%2B%3D'%3Coptgroup%20label%3D%22Passwords%22%3E%5Cn'%2Cp%2B%3D'%3Coption%20value%3D%22new-password%22%3Enew-password%3C%2Foption%3E%5Cn'%2Cp%2B%3D'%3Coption%20value%3D%22current-password%22%3Ecurrent-password%3C%2Foption%3E%5Cn'%2Cp%2B%3D'%3Coption%20value%3D%22one-time-code%22%3Eone-time-code%20%20----%20%20one-time-password%2C%20otp%2C%20otc%3C%2Foption%3E%5Cn'%2Cp%2B%3D'%3Coptgroup%20label%3D%22Credit%20Card%2FFinancial%22%3E%5Cn'%2Cp%2B%3D'%3Coption%20value%3D%22cc-name%22%3Ecc-name%20%20----%20%20credit%20card%20full%20name%3C%2Foption%3E%5Cn'%2Cp%2B%3D'%3Coption%20value%3D%22cc-given-name%22%3Ecc-given-name%20%20----%20%20credit%20card%20first%20name%3C%2Foption%3E%5Cn'%2Cp%2B%3D'%3Coption%20value%3D%22cc-additional-name%22%3Ecc-additional-name%20%20----%20%20credit%20card%20middle-name%3C%2Foption%3E%5Cn'%2Cp%2B%3D'%3Coption%20value%3D%22cc-family-name%22%3Ecc-family-name%20%20----%20%20credit%20card%20surname%3C%2Foption%3E%5Cn'%2Cp%2B%3D'%3Coption%20value%3D%22cc-number%22%3Ecc-number%3C%2Foption%3E%5Cn'%2Cp%2B%3D'%3Coption%20value%3D%22cc-exp%22%3Ecc-exp%20%20----%20%20credit%20card%20expiry%20date%3C%2Foption%3E%5Cn'%2Cp%2B%3D'%3Coption%20value%3D%22cc-exp-month%22%3Ecc-exp-month%20%20----%20%20credit%20card%20expiry%20month%3C%2Foption%3E%5Cn'%2Cp%2B%3D'%3Coption%20value%3D%22cc-exp-year%22%3Ecc-exp-year%20%20----%20%20credit%20card%20expiry%20year%3C%2Foption%3E%5Cn'%2Cp%2B%3D'%3Coption%20value%3D%22cc-csc%22%3Ecc-csc%20%20----%20%20credit%20card%20cvc%203-digit%20code%3C%2Foption%3E%5Cn'%2Cp%2B%3D'%3Coption%20value%3D%22cc-type%22%3Ecc-type%20%20----%20%20credit%20card%20type%3C%2Foption%3E%5Cn'%2Cp%2B%3D'%3Coption%20value%3D%22transaction-currency%22%3Etransaction-currency%3C%2Foption%3E%5Cn'%2Cp%2B%3D'%3Coption%20value%3D%22transaction-amount%22%3Etransaction-amount%3C%2Foption%3E%5Cn'%2Cp%2B%3D'%3Coptgroup%20label%3D%22Date%20of%20Birth%22%3E%5Cn'%2Cp%2B%3D'%3Coption%20value%3D%22bday%22%3Ebday%20%20----%20%20birthday%3C%2Foption%3E%5Cn'%2Cp%2B%3D'%3Coption%20value%3D%22bday-day%22%3Ebday-day%20%20----%20%20birthday%20day%3C%2Foption%3E%5Cn'%2Cp%2B%3D'%3Coption%20value%3D%22bday-month%22%3Ebday-month%20%20----%20%20birthday%20month%3C%2Foption%3E%5Cn'%2Cp%2B%3D'%3Coption%20value%3D%22bday-year%22%3Ebday-year%20%20----%20%20birthday%20year%3C%2Foption%3E%5Cn'%2Cp%2B%3D'%3Coptgroup%20label%3D%22Other%22%3E%5Cn'%2Cp%2B%3D'%3Coption%20value%3D%22organization-title%22%3Eorganization-title%20%20----%20%20job%20title%3C%2Foption%3E%5Cn'%2Cp%2B%3D'%3Coption%20value%3D%22organization%22%3Eorganization%20%20----%20%20company-name%2C%20company%3C%2Foption%3E%5Cn'%2Cp%2B%3D'%3Coption%20value%3D%22email%22%3Eemail%3C%2Foption%3E%5Cn'%2Cp%2B%3D'%3Coption%20value%3D%22url%22%3Eurl%20%20----%20%20web%20address%2Fhomepage%3C%2Foption%3E%5Cn'%2Cp%2B%3D'%3Coption%20value%3D%22photo%22%3Ephoto%20%20----%20%20image%2C%20avatar%2C%20icon%3C%2Foption%3E%5Cn'%2Cp%2B%3D'%3Coption%20value%3D%22impp%22%3Eimpp%3C%2Foption%3E%5Cn'%2Cp%2B%3D'%3Coption%20value%3D%22off%22%3Eoff%3C%2Foption%3E%5Cn'%3Bvar%20d%3D0%3Bif(o.length%3E0)%7Blet%20c%3D%2F%5E%5BA-Za-z%5D%5B-A-Za-z0-9_%3A.%5D*%24%2F%3BArray.from(o).forEach(function(e)%7Bif(t%3De.outerHTML%2Ca%3De.getAttribute(%22id%22)%2C!c.test(a))%7Bconsole.group(%22Invalid%20ID%20found%22)%2Cconsole.log(%22Following%20field%20had%20invalid%20%60id%60%20of%20%22%2Ba)%2Ce.setAttribute(%22data-original-invalid-id%22%2Ca)%3Blet%20o%3D%60id_%24%7Ba.replace(%2F%5B%5Ea-zA-Z0-9_%5D%2Fg%2C%22_%22)%7D%60%3Ba%3Dfunction%20e(o)%7Blet%20t%3Do%2Cn%3D1%3Bfor(%3Bdocument.getElementById(t)%3B)t%3D%60%24%7Bo%7D_%24%7Bn%2B%2B%7D%60%3Breturn%20t%7D(o)%2Cconsole.log(%22Renamed%20to%20%22%2Bo)%2Ce.id%3Da%2Cconsole.log(e)%2Cconsole.groupEnd()%7DfieldName%3De.getAttribute(%22name%22)%2Cnull%3D%3D%3Da%26%26(null%3D%3D%3DfieldName%3F(d%2B%2B%2Ce.setAttribute(%22id%22%2C%22IDDYNAMICALLYMADEUP_%22%2Bd)%2Ca%3D%22IDDYNAMICALLYMADEUP_%22%2Bd)%3A(e.setAttribute(%22id%22%2C%22IDFROMNAME_%22%2Be.getAttribute(%22name%22))%2Ca%3D%22IDFROMNAME_%22%2Be.getAttribute(%22name%22)))%2Ce.classList.add(%22auto-complete-candidate%22)%3Blet%20n%3Ddocument.createElement(%22DIV%22)%3Bn.innerHTML%3D'%3Cselect%20class%3D%22autoCompleteSuggestion%22%20data-field-id%3D%22'%2Ba%2B'%22%20aria-label%3D%22autocomplete%20suggestion%20for%20'%2Ba%2B'%22%3E%5Cn'%2Bp%2B%22%3C%2Fselect%3E%5Cn%22%2Cn.classList.add(%22tempDiv%22)%2Cn.style%3D%22margin%3A5px%200%2020px%200%22%2Cfunction%20e(o%2Ct)%7Bt.parentNode.insertBefore(o%2Ct.nextSibling)%7D(n%2Ce)%7D)%3Blet%20u%3Ddocument.querySelectorAll(%22.autoCompleteSuggestion%22)%2Cs%3D%22%22%3BArray.from(u).forEach(function(e)%7Be.addEventListener(%22change%22%2Cfunction()%7B%22%22!%3D%3De%5Be.selectedIndex%5D.value%26%26r%2B%2B%2Cn%3D%22%22%2Ci%3D%22%22%2Cl%3De%5Be.selectedIndex%5D.value%2Cs%3De.getAttribute(%22data-field-id%22)%2Cdocument.querySelector(%22%23%22%2Bs).classList.add(%22auto-complete-required%22)%2Cdocument.querySelector(%22%23%22%2Bs).setAttribute(%22autocomplete%22%2Cl)%3Blet%20o%3Ddocument.querySelectorAll(%22.auto-complete-required%22)%3BArray.from(o).forEach(function(e)%7Bn%2B%3D%22*%20%22%2Be.getAttribute(%22id%22)%2B%22%3A%20%22%2Be.getAttribute(%22autocomplete%22)%2B%22%5Cn%22%2Ci%2B%3De.outerHTML%2B%22%5Cn%5Cn%22%7D)%2Ci%3D(i%3D(i%3Di.split('class%3D%22amended%22').join(%22%22).split(%22%20amended%22).join(%22%22).split('%20class%3D%22%22').join(%22%22)).split(%22auto-complete-candidate%20auto-complete-required%22).join(%22%22)).split('%20class%3D%22%22').join(%22%22)%3Blet%20t%3D%22%20fields%20require%22%3B1%3D%3D%3Dr%26%26(t%3D%22%20field%20requires%22)%2Cconsole.clear()%2Cconsole.log(%22The%20following%20%22%2Br%2Bt%2B%22%20an%20autocomplete%20attribute%20as%20specified%3A%5Cn%5Cn%22%2Bn%2B%22%5CnFull%20details%3A%5Cn%5Cn%22%2Bi)%7D)%7D)%3Blet%20m%3Ddocument.createElement(%22button%22)%3Bm.setAttribute(%22type%22%2C%22button%22)%2Cm.innerHTML%3D%22I'm%20done%20setting%20%60autocomplete%60%22%2Cm.style%3D%22position%3Afixed%3Bz-index%3A10000%3Btop%3A1em%3Bright%3A1em%3Bbackground%3Ared%3Bcolor%3Awhite%3Bfont-weight%3Abold%3B%22%2Cdocument.querySelector(%22body%22).append(m)%2Cm.addEventListener(%22click%22%2Cfunction()%7Bm.remove()%3Blet%20e%3Ddocument.querySelectorAll(%22.auto-complete-candidate%22)%3BArray.from(e).forEach(function(e)%7Be.classList.remove(%22auto-complete-candidate%22)%7D)%3Blet%20o%3Ddocument.querySelectorAll(%22.tempDiv%22)%3BArray.from(o).forEach(function(e)%7Be.remove()%7D)%7D)%2Calert(o.length%2B'%20fields%20that%20lack%20an%20autocomplete%20are%20present%20on%20the%20page.%5Cn%5Cn%E2%80%A2%20Set%20the%20correct%20values%20for%20each%20identified%20field%5Cn%E2%80%A2%20Then%20press%20the%20%22I%5C'm%20done%20...%22%20button')%7Delse%20alert(%22No%20fields%20without%20autocomplete%20found%22)%7DshowAllAutoCompleteCandidates()%7D)()) [[1.3.5](https://www.w3.org/TR/WCAG22/#identify-input-purpose)] + Finds all fields on fields on a page that don't currently have `autocomplete` and highlights them. + Provides a select list that you can choose the appropriate autocomplete value for. + Logs any changes that you make (so you can copy from console). + Has option for cleaning up the page after so that your candidates for `autocomplete` are highlighted (and the select lists are removed) ready for screenshotting. * [🔖anchor for Live Region Watcher bookmarklet](https://a11y-tools.com/bookmarklets/#liveregions) [Live Region Watcher](javascript:(function()%7Bfunction%20watchLiveRegions()%7Bconst%20config%20%3D%20%7B%20childList%3A%20true%2C%20subtree%3A%20true%2C%20characterData%3A%20true%20%7D%3Bconst%20callback%20%3D%20function(mutationsList%2C%20observer)%20%7Bfor(let%20mutation%20of%20mutationsList)%20%7Bconsole.log(%22---%22)%3Bconsole.log(%22Live%20region%20changed%3A%22%2C%20mutation.target.getAttribute(%22id%22))%3Bif%20(mutation.type%20%3D%3D%3D%20'childList')%20%7Bconsole.log('A%20child%20node%20has%20been%20added%20or%20removed.')%3B%7D%20else%20if%20(mutation.type%20%3D%3D%3D%20'subtree')%20%7Bconsole.log('The%20subtree%20was%20modified.')%3B%7D%20else%20if%20(mutation.type%20%3D%3D%3D%20'characterData')%20%7Bconsole.log('The%20text%20content%20of%20a%20node%20has%20changed.')%3B%7Dconsole.log(%22Inner%20content%3A%22%2C%20mutation.target.innerHTML)%3B%7D%7D%3Bvar%20a%20%3D%20document.createElement(%22style%22)%2Cb%3Bdocument.head.appendChild(a)%3Bb%20%3D%20a.sheet%3Bb.insertRule(%22.identified-live-region%20%7Boutline%3A4px%20solid%20red%3Boutline-offset%3A4px%3B%7D%22%2C%200)%3Bconst%20observer%20%3D%20new%20MutationObserver(callback)%3Bconst%20allLiveRegions%20%3D%20document.querySelectorAll(%22%5Brole%3Dalert%5D%2C%5Brole%3Dlog%5D%2C%5Brole%3Dmarquee%5D%2C%5Brole%3Dstatus%5D%2C%5Baria-live%5D%22)%3Bif%20(allLiveRegions.length%3E0)%20%7Balert(allLiveRegions.length%20%2B%20%22%20live%20regions%20found.%20Open%20Dev%20Tools%20%3E%20Console%20for%20details%22)%3Bconsole.log(%22Live%20regions%20found%3A%22)%3BArray.from(allLiveRegions).forEach(liveRegion%20%3D%3E%20%7BliveRegion.classList.add(%22identified-live-region%22)%3Bobserver.observe(liveRegion%2C%20config)%3Bconsole.log(%22id%3A%22%2C%20liveRegion.getAttribute(%22id%22))%3Bconsole.log(%22role%3A%22%2C%20liveRegion.getAttribute(%22role%22))%3Bconsole.log(%22aria-live%3A%22%2C%20liveRegion.getAttribute(%22aria-live%22))%3Bconsole.log(%22aria-atomic%3A%22%2C%20liveRegion.getAttribute(%22aria-atomic%22))%3Bconsole.log(%22aria-relevant%3A%22%2C%20liveRegion.getAttribute(%22aria-relevant%22))%3Bconsole.log(%22Inner%20content%3A%22%2C%20liveRegion.innerHTML)%3Bconsole.log(%22%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%22)%3B%7D)%3Bconsole.log(%22Changes%20to%20live%20region%20content%20will%20update%20below%20as%20they%20happen.%22)%3B%7D%20else%20%7Balert(%22No%20live%20regions%20found%20on%20this%20page%22)%3B%7D%7DwatchLiveRegions()%7D)()) [[4.1.3](https://www.w3.org/TR/WCAG22/#status-messages)] New Jul 2024 + Finds all likely live regions on the pages (looks for `[role=alert]`, `[role=log]`, `[role=marquee]`, `[role=status]`, `[aria-live]`). + Visually highlights any visible live regions. + Logs details to console for each (id, role, aria-live, aria-atomic, aria-relevant, inner HTML content). + Watches for any content changes in each and updates console as they happen. * [🔖anchor for Isolate images bookmarklet](https://a11y-tools.com/bookmarklets/#isolateimages) [Isolate images](javascript:(function()%7B'use%20strict'%0Afunction%20isolateImages()%7B%0A%20%20const%20els%3Ddocument.querySelectorAll('*')%3B%0A%20%20const%20page%3Ddocument.querySelector('body')%3B%0A%20%20console.log(%22els.length%22%2Cels.length)%3B%0A%20%20Array.from(els).forEach(function%20(el)%20%7B%0A%20%20%20%20el.style.color%3D%22transparent%22%3B%0A%20%20%20%20el.style.background%3D%22transparent%22%3B%0A%20%20%20%20el.style.borderColor%3D%22transparent%22%3B%0A%20%20%20%20el.style.outline%3D%22transparent%22%3B%0A%20%20%20%20el.style.fontSize%3D%221px%22%3B%0A%20%20%7D)%3B%0A%20%20page.style.zoom%3D%2250%25%22%3B%0A%0A%20%20const%20imgs%3Ddocument.querySelectorAll('img%2C%5Brole%3Dimg%5D')%3B%0A%20%20Array.from(imgs).forEach(function%20(img)%20%7B%0A%20%20%20%20img.style.outline%3D%2210px%20solid%20black%22%3B%0A%20%20%20%20img.style.outlineOffset%3D%22-10px%22%3B%0A%20%20%7D)%3B%0A%7D%0AisolateImages()%3B%7D)()) [[1.4.5](https://www.w3.org/TR/WCAG22/#images-of-text)] + Slightly experimental idea - this one does the opposite of some other tools (that hide images), and instead hides anything that is not an image. + It zooms the page out so you can see more in one go - a wall of images. + Aim of this is to be able to glance at the images and see if you can spot images that are actually just text which may not be obvious when scrolling the page in its normal state. + Trying to weed out SC 1.4.5 Images of Text issues. + 🚨 NOTE: This is destructive, there is no 'undo' feature (just reload page). * [🔖anchor for Screen Reader Simulation bookmarklet](https://a11y-tools.com/bookmarklets/#srsim) [Screen Reader Simulation](javascript:(function()%7Blet%20showElementRole%3D!1%2CremoveAllExistingStyling%3D!1%3Bfunction%20insertAfter(e%2Ct)%7Bt.parentNode.insertBefore(e%2Ct.nextSibling)%7Dfunction%20voidStylesheets(e)%7Bfor(i%3D0%3Bi%3Ce.styleSheets.length%3Bi%2B%2B)e.styleSheets.item(i).disabled%3D!0%3Bfor(i%3D0%2Cel%3De.getElementsByTagName(%22*%22)%3Bi%3Cel.length%3Bi%2B%2B)el%5Bi%5D.style.cssText%3D%22%22%7Dfunction%20restrictImageHeights(e)%7Bvar%20t%2Cl%3De.createElement(%22style%22)%3Be.head.appendChild(l)%2C(t%3Dl.sheet).insertRule(%22img%2Cfigure%20%7Bmax-height%3A200px!important%3Bwidth%3Aauto!important%3B%7D%22%2C0)%2Ct.insertRule(%22svg%20%7Bmax-height%3A40px!important%3Bwidth%3Aauto!important%3B%7D%22%2C0)%2Ct.insertRule(%22video%20%7Bmax-width%3A500px!important%3Bheight%3Aauto!important%3B%7D%22%2C0)%7Dfunction%20addAppStyles()%7Bvar%20e%2Ct%3Ddocument.createElement(%22style%22)%3Bdocument.head.appendChild(t)%2C(e%3Dt.sheet).insertRule(%22*%20%7Bfont-size%3A20px%7D%22%2C0)%2Ce.insertRule(%22.visually-hidden-revealed%20%7Boutline%3A3px%20dashed%20purple%3B%7D%22%2C0)%2Ce.insertRule(%22.img-warning%20%7Boutline%3A3px%20dashed%20red%3B%7D%22%2C0)%2Ce.insertRule(%22.swapped-text%20%7Boutline%3A3px%20dashed%20green%3Bbackground%3A%23dbefdb%3Bpadding%3A3px%3Bline-height%3A1.5%3B%7D%22%2C0)%2Ce.insertRule(%22.img-type-indicator%20%7Bdisplay%3Ainline-block%3Bmargin-left%3A5px%7D%22%2C0)%2Ce.insertRule(%22table%2Cth%2Ctd%20%7Boutline%3A1px%20dotted%20black%3B%7D%22%2C0)%2Ce.insertRule(%22th%2Ctd%20%7Bpadding%3A3px%3B%7D%22%2C0)%2Ce.insertRule(%22button%2C%5Brole%3Dbutton%5D%20%7Bpadding%3A3px%2020px%3Bbackground%3A%23dedede%3Bborder%3A3px%20solid%20black%3Bdisplay%3Ainline-block%3Btext-align%3Acenter%3Bborder-radius%3A5px%3B%7D%22%2C0)%2Ce.insertRule(%22a%2C%5Brole%3Dlink%5D%20%7Btext-decoration%3Aunderline%3Bcolor%3Ablue%3Bfont-weight%3Anormal%3B%7D%22%2C0)%2Ce.insertRule('.append-element-role%20a%3Aafter%2C.append-element-role%20%5Brole%3Dlink%5D%3Aafter%20%7Bdisplay%3Ainline-block%3Bmargin-left%3A5px%3Bcontent%3A%20%22LINK%22%7D'%2C0)%2Ce.insertRule('.append-element-role%20button%3Aafter%2C.append-element-role%20%5Brole%3Dbutton%5D%3Aafter%20%7Bdisplay%3Ainline-block%3Bmargin-left%3A5px%3Bcontent%3A%20%22BUTTON%22%7D'%2C0)%7Dfunction%20identifyAllVisualllyHiddenElements()%7BArray.from(document.querySelectorAll(%22.visually-hidden%22)).forEach(e%3D%3E%7Blet%20t%3Ddocument.createElement(%22span%22)%3Bt.textContent%3De.textContent%2Ct.classList.add(%22visually-hidden-revealed%22)%2CinsertAfter(t%2Ce)%2Ce.remove()%7D)%7Dfunction%20findAllVisuallyHiddenText()%7Bvar%20e%2Ct%3BArray.from(document.querySelectorAll(%22*%22)).forEach(l%3D%3E%7Bcs%3DgetComputedStyle(l)%3Bfor(var%20n%3D!1%2Ca%3D!1%2Cr%3D!1%2Co%3D!1%2Cs%3D!1%2Cd%3D!1%2Cc%3D!1%2Cp%3D!1%2Cu%3D0%3Bu%3Ccs.length%3Bu%2B%2B)e%3Dcs%5Bu%5D%2Ct%3Dcs.getPropertyValue(e)%2C%22clip%22%3D%3D%3De%26%26%22rect(1px%2C%201px%2C%201px%2C%201px)%22%3D%3D%3Dt%26%26(n%3D!0)%2C%22clip-path%22%3D%3D%3De%26%26%22inset(100%25)%22%3D%3D%3Dt%26%26(a%3D!0)%2C%22height%22%3D%3D%3De%26%26%221px%22%3D%3D%3Dt%26%26(r%3D!0)%2C%22overflow-x%22%3D%3D%3De%26%26%22hidden%22%3D%3D%3Dt%26%26(o%3D!0)%2C%22overflow-y%22%3D%3D%3De%26%26%22hidden%22%3D%3D%3Dt%26%26(s%3D!0)%2C%22position%22%3D%3D%3De%26%26%22absolute%22%3D%3D%3Dt%26%26(d%3D!0)%2C%22white-space%22%3D%3D%3De%26%26%22nowrap%22%3D%3D%3Dt%26%26(c%3D!0)%2C%22width%22%3D%3D%3De%26%26%221px%22%3D%3D%3Dt%26%26(p%3D!0)%3B!0%3D%3D%3Dn%26%26!0%3D%3D%3Da%26%26!0%3D%3D%3Dr%26%26!0%3D%3D%3Do%26%26!0%3D%3D%3Ds%26%26!0%3D%3D%3Dd%26%26!0%3D%3D%3Dc%26%26!0%3D%3D%3Dp%26%26l.classList.add(%22visually-hidden%22)%7D)%7Dfunction%20voidStylesheetsInIframes()%7BArray.from(document.querySelectorAll(%22iframe%22)).forEach(e%3D%3E%7BvoidStylesheets(e.contentWindow.document)%2CrestrictImageHeights(e.contentWindow.document)%7D)%7Dfunction%20removeDecorativeIMGs()%7BArray.from(document.querySelectorAll('img%5Balt%3D%22%22%5D%3Anot(img%5Baria-label%5D)')).forEach(e%3D%3E%7Be.remove()%7D)%7Dfunction%20removeDecorativeSVGs()%7BArray.from(document.querySelectorAll(%22svg%3Anot(%5Brole%3Dimg%5D%5Baria-label%5D%2C%5Brole%3Dimg%5D%5Baria-labelledby%5D)%22)).forEach(e%3D%3E%7Be.remove()%7D)%7Dfunction%20identifyIMGsWithoutAlts()%7BArray.from(document.querySelectorAll(%22img%3Anot(img%5Balt%5D)%22)).forEach(e%3D%3E%7Blet%20t%3Ddocument.createElement(%22span%22)%3Bt.textContent%3De.getAttribute(%22src%22)%2Ct.classList.add(%22img-warning%22)%2CinsertAfter(t%2Ce)%2Ce.remove()%7D)%7Dfunction%20replaceIMGsWithAltsWithText()%7BArray.from(document.querySelectorAll(%22img%5Balt%5D%22)).forEach(e%3D%3E%7Blet%20t%3Ddocument.createElement(%22span%22)%3Bt.textContent%3De.getAttribute(%22alt%22)%2Ct.classList.add(%22swapped-text%22)%2Ct.classList.add(%22img%22)%2CinsertAfter(t%2Ce)%2Ce.remove()%7D)%7Dfunction%20replaceAriaLabelsWithText()%7BArray.from(document.querySelectorAll(%22a%5Baria-label%5D%2C%5Brole%3Dlink%5D%5Baria-label%5D%2Cb%5Baria-label%5D%2C%5Brole%3Dbutton%5D%5Baria-label%5D%22)).forEach(e%3D%3E%7Be.textContent%3De.getAttribute(%22aria-label%22)%2Ce.classList.add(%22swapped-text%22)%2Ce.classList.add(%22svg%22)%7D)%7Dfunction%20addImageIconsToSwappedImageText()%7BArray.from(document.querySelectorAll(%22.swapped-text.img%22)).forEach(e%3D%3E%7Blet%20t%3Ddocument.createElement(%22span%22)%3Bt.textContent%3D%22%5CuD83C%5CuDFDE%EF%B8%8F%22%2Ct.setAttribute(%22aria-hidden%22%2C%22true%22)%2Ct.classList.add(%22img-type-indicator%22)%2Ct.setAttribute(%22title%22%2C%22Alternative%20text%20from%20IMG%20element%22)%2Ce.appendChild(t)%7D)%2CArray.from(document.querySelectorAll(%22.swapped-text.svg%22)).forEach(e%3D%3E%7Blet%20t%3Ddocument.createElement(%22span%22)%3Bt.textContent%3D%22%E2%9C%B3%EF%B8%8F%22%2Ct.setAttribute(%22aria-hidden%22%2C%22true%22)%2Ct.classList.add(%22img-type-indicator%22)%2Ct.setAttribute(%22title%22%2C%22Alternative%20text%20from%20SVG%20element%22)%2Ce.appendChild(t)%7D)%7Dfunction%20replaceAriaLabelledByElsWithText()%7Bvar%20e%3Ddocument.querySelectorAll(%22%5Baria-labelledby%5D%22)%3Blet%20t%3Ddocument.querySelectorAll('a%5Bhref%5D%2Cbutton%2Cselect%2Cinput%3Anot(%5Btype%3D%22hidden%22%5D)%2Ctextarea%2Csummary%2Carea%2C%5Btabindex%5D%3Anot(%23WTFocusPanel)%3Anot(%5Btabindex%5E%3D%22-1%22%5D)%2C%5Bcontenteditable%5D%3Anot(%5Bcontenteditable%3D%22false%22%5D)')%3BArray.from(e).forEach(e%3D%3E%7Blet%20l%3D!1%3Bif(Array.from(t).forEach(t%3D%3E%7Be%3D%3D%3Dt%26%26(l%3D!0)%7D)%2Cl)%7Blet%20n%3D%22%22%2Ca%3De.getAttribute(%22aria-labelledby%22)%2Cr%3Da.split(%22%20%22)%3BArray.from(r).forEach(e%3D%3E%7Bif(document.querySelector(%22%23%22%2Be))%7Blet%20t%3Ddocument.querySelector(%22%23%22%2Be).textContent%3Bt%26%26(n%2B%3Dt%2B%22%20%22)%7D%7D)%2Cn%3Dn.trim()%2Ce.textContent%3Dn%2Ce.classList.add(%22swapped-text%22)%2Ce.removeAttribute(%22aria-labelledby%22)%7D%7D)%7Dfunction%20removeAllContentHiddenToAT()%7BArray.from(document.querySelectorAll(%22%5Baria-hidden%5D%22)).forEach(e%3D%3E%7Be.remove()%7D)%7Dconfirm(%22Do%20you%20want%20to%20include%20roles%20for%20interactive%20elements%3F%5Cn%5BOnly%20links%20and%20buttons%20included%20at%20present%5D%5Cn%5CnOK%20-%20Include%20roles%5CnCancel%20-%20Leave%20them%20out%22)%26%26(showElementRole%3D!0)%2Cconfirm(%22Do%20you%20want%20to%20strip%20all%20existing%20styles%3F%5Cn%5BThis%20may%20reveal%20content%2Fsections%20that%20are%20currently%20NOT%20visible%20to%20screen%20reader%20users%20and%20would%20be%20dynamically%20show%2Fhidden%5D%5Cn%5CnOK%20-%20Strip%20styles%5CnCancel%20-%20Leave%20as-is%22)%26%26(removeAllExistingStyling%3D!0)%2CshowElementRole%26%26document.querySelector(%22body%22).classList.add(%22append-element-role%22)%2CremoveAllContentHiddenToAT()%2CreplaceAriaLabelledByElsWithText()%2CreplaceAriaLabelsWithText()%2CremoveDecorativeIMGs()%2CremoveDecorativeSVGs()%2CidentifyIMGsWithoutAlts()%2CreplaceIMGsWithAltsWithText()%2CidentifyAllVisualllyHiddenElements()%2CfindAllVisuallyHiddenText()%2CremoveAllExistingStyling%26%26voidStylesheets(document)%2CrestrictImageHeights(document)%2CaddAppStyles()%2CvoidStylesheetsInIframes()%2CaddImageIconsToSwappedImageText()%7D)()) + A script that attempts to show a styled site in a way similar to how screen reader users might perceive it. It does this by: - Replacing images that have NO `alt` with the filename. - Replacing images that have alts with the `alt` content. - Removing images that have `alt=""`. - Finding visually hidden text, exposing as visible text. - Hiding anything that is marked as hidden to AT. - Removing all styling, flattening layout. - Applying some very basic styling back to the now unstyled document. + There is also an option to append a role (only for link or button) so that it is more clear what the controls are and to hint at how a screen reader would announce them. + Images that are changed to text are given green outline. + Images that have empty alts are given red outline. + Text that was previously visually hidden is given purple outline. + And yes, I will come up with a scheme that does not rely on use of color to indicate these. + This is a work in progress. It will be far from perfect. + 🚨 NOTE: This is destructive, there is no 'undo' feature (just reload page). ##### List in pop-up window **Important**: the following load in pop-up windows, so you will need to allow pop-ups for the page that you are testing for some of these to work. * [🔖anchor for List images bookmarklet](https://a11y-tools.com/bookmarklets/#listimages) [List images](javascript:(function()%7B'use%20strict'%0Afunction%20listImages()%7B%0A%20%20console.clear()%3B%0A%20%20function%20isHidden(el)%20%7B%0A%20%20%20%20const%20style%3Dwindow.getComputedStyle(el)%3B%0A%20%20%20%20return%20((style.display%20%3D%3D%3D%20'none')%20%7C%7C%20(style.opacity%20%3D%3D%3D%200)%20%7C%7C%20((style.clipPath%20%3D%3D%3D%20'inset(100%25)')%20%26%26%20(style%0A%20%20%20%20%20%20.clip%20%3D%3D%3D%20'rect(1px%2C%201px%2C%201px%2C%201px)'))%20%7C%7C%20((style.height%20%3D%3D%3D%20'1px')%20%26%26%20(style.width%20%3D%3D%3D%20'1px')%20%26%26%20(style%0A%20%20%20%20%20%20.overflow%20%3D%3D%3D%20'hidden')))%3B%0A%20%20%7D%0A%20%20%0A%20%20function%20attemptoToUnhide(el)%20%7B%0A%20%20%20%20const%20style%3Dwindow.getComputedStyle(el)%3B%0A%20%20%0A%20%20%20%20if%20((style.position%20%3D%3D%3D%20%22absolute%22)%20%26%26%20(style.overflow%20%3D%3D%3D%20'hidden'))%20%7B%0A%20%20%20%20%20%20el.style.height%3D'auto'%3B%0A%20%20%20%20%20%20el.style.width%3D'auto'%3B%0A%20%20%20%20%20%20el.style.position%3D'relative'%3B%0A%20%20%20%20%20%20el.style.overflow%3D'visible'%3B%0A%20%20%20%20%20%20el.style.display%3D'block'%3B%0A%20%20%20%20%20%20el.style.opacity%3D1%3B%0A%20%20%20%20%7D%0A%20%20%0A%20%20%20%20if%20((el.getAttribute('hidden')%20%3D%3D%3D%20%22%22)%20%7C%7C%20(el.getAttribute('hidden')%20%3D%3D%3D%20%22hidden%22)%20%7C%7C%20(el.getAttribute(%0A%20%20%20%20%20%20%20%20'hidden')%20%3D%3D%3D%20%22true%22))%20%7B%0A%20%20%20%20%20%20el.removeAttribute('hidden')%3B%0A%20%20%20%20%7D%0A%20%20%0A%20%20%20%20if%20(style.visibility%20%3D%3D%3D%20'hidden')%20%7B%0A%20%20%20%20%20%20el.style.visibility%3D'visible'%3B%0A%20%20%20%20%7D%0A%20%20%0A%20%20%20%20if%20(style.display%20%3D%3D%3D%20'none')%20%7B%0A%20%20%20%20%20%20el.style.display%3D'block'%3B%0A%20%20%20%20%7D%0A%20%20%0A%20%20%20%20if%20(style.opacity%20%3D%3D%3D%200)%20%7B%0A%20%20%20%20%20%20el.style.opacity%3D1%3B%0A%20%20%20%20%7D%0A%20%20%7D%0A%20%20%0A%20%20let%20s%3D''%3B%0A%20%20let%20row%3D''%3B%0A%20%20const%20imgs%3Ddocument.querySelectorAll('img%2C%5Brole%3Dimg%5D')%3B%0A%20%20let%20i%3D1%3B%0A%20%20let%20imgType%3B%0A%20%20let%20issueCount%3D0%3B%0A%20%20let%20snippet%3D''%3B%0A%20%20let%20consoleOutput%3D''%3B%0A%20%20%0A%20%20Array.from(imgs).forEach(function%20(img)%20%7B%0A%20%20%20%20const%20wrap%20%3D%20document.createElement('div')%3B%0A%20%20%20%20wrap.appendChild(img.cloneNode(true))%3B%0A%20%20%20%20snippet%20%3D%20wrap.innerHTML%3B%0A%20%20%20%20let%20notes%3D''%3B%0A%20%20%20%20let%20noAlt%3Dfalse%3B%0A%20%20%20%20let%20emptyAlt%3Dfalse%3B%0A%20%20%20%20let%20warn%3Dfalse%3B%0A%20%20%20%20let%20err%3Dfalse%3B%0A%20%20%20%20%0A%20%20%20%20const%20ariaHiddenEl%20%3D%20img.querySelector('%5Baria-hidden%3Dtrue%5D')%3B%0A%20%20%20%20if%20(ariaHiddenEl)%20%7B%0A%20%20%20%20%20%20ariaHiddenEl.classList.add('remove-from-accname')%3B%0A%20%20%20%20%7D%0A%20%20%0A%20%20%20%20img.setAttribute('data-img-ref'%2C%20i)%3B%0A%20%20%20%20let%20alt%3Dimg.getAttribute('alt')%3B%0A%20%20%0A%20%20%20%20if%20(alt%3D%3D%3Dnull)%20%7B%0A%20%20%20%20%20%20alt%3D%22NO_ALT_ATTRIBUTE%22%3B%0A%20%20%20%20%20%20noAlt%3Dtrue%3B%0A%20%20%20%20%7D%20else%20%7B%0A%20%20%20%20%20%20if%20(alt%3D%3D%3D'')%20%7B%0A%20%20%20%20%20%20%20%20alt%3D%22EMPTY_ALT_ATTRIBUTE%22%3B%0A%20%20%20%20%20%20%20%20emptyAlt%3Dtrue%3B%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%20%20%20%20let%20accName%3Dalt%3B%0A%20%20%0A%20%20%20%20const%20imgSrc%20%3D%20img.getAttribute('src')%3B%0A%20%20%0A%20%20%20%20if%20(isHidden(img))%20%7B%0A%20%20%20%20%20%20attemptoToUnhide(img)%3B%0A%20%20%20%20%20%20if%20(isHidden(img))%20%7B%0A%20%20%20%20%20%20%20%20notes%20%2B%3D'img%20is%20hidden.%3Cbr%3E'%3B%0A%20%20%20%20%20%20%7D%20else%20%7B%0A%20%20%20%20%20%20%20%20notes%20%2B%3D'img%20*was*%20hidden%20but%20has%20been%20temporarily%20revealed%20on%20the%20page.%3Cbr%3E'%3B%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20if%20(noAlt)%20%7B%0A%20%20%20%20%20%20if%20(!((img.getAttribute('role')%20%3D%3D%3D%20'img')%26%26(img.tagName%20!%3D%3D%20'IMG')))%20%7B%0A%20%20%20%20%20%20notes%3D'-%20img%20has%20no%20%3Ccode%3Ealt%3C%2Fcode%3E%20attribute.%3Cbr%3E'%3B%0A%20%20%20%20%20%20err%3Dtrue%3B%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%20%20%0A%20%20%20%20if%20(emptyAlt)%20%7B%0A%20%20%20%20%20%20notes%3D'-%20img%20has%20an%20empty%20%3Ccode%3Ealt%3C%2Fcode%3E%20attribute.%20This%20will%20hide%20it%20from%20AT.%20Is%20this%20correct%3F.%3Cbr%3E'%3B%0A%20%20%20%20%20%20warn%3Dtrue%3B%0A%20%20%20%20%7D%0A%20%20%0A%20%20%20%20if%20((img.getAttribute('role')%20%3D%3D%3D%20'presentation')%7C%7C(img.getAttribute('role')%20%3D%3D%3D%20'none'))%20%7B%0A%20%20%20%20%20%20notes%2B%3D'-%20img%20has%20a%20%3Ccode%3Erole%3C%2Fcode%3E%20set%20(%5C''%20%2B%20img.getAttribute('role')%20%2B%20'%5C')%20that%20will%20hide%20it%20from%20AT.%20Is%20this%20correct%3F.%3Cbr%3E'%3B%0A%20%20%20%20%20%20warn%3Dtrue%3B%0A%20%20%20%20%7D%0A%20%20%0A%20%20%20%20if%20(img.getAttribute('aria-hidden')%20%3D%3D%3D%20'true')%20%7B%0A%20%20%20%20%20%20notes%2B%3D'-%20img%20has%20an%20%3Ccode%3Earia-hidden%3Dtrue%3C%2Fcode%3E%2C%20so%20it%20will%20be%20hidden%20from%20AT.%20Is%20this%20correct%3F.%3Cbr%3E'%3B%0A%20%20%20%20%20%20warn%3Dtrue%3B%0A%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20if%20(img.getAttribute('title'))%20%7B%0A%20%20%20%20%20%20if%20(alt%3D%3D%3D'EMPTY_ALT_ATTRIBUTE')%20%7B%0A%20%20%20%20%20%20%20%20notes%2B%3D'-%20img%20has%20a%20%3Ccode%3Etitle%3C%2Fcode%3E%20AND%20an%20empty%20%3Ccode%3Ealt%3C%2Fcode%3E%20attribute.%20Because%20of%20the%20empty%20alt%2C%20the%20image%20will%20be%20hidden%20to%20AT%2C%20so%20the%20title%20attribute%20is%20not%20used%2Fexposed.%3Cbr%3E'%3B%0A%20%20%20%20%20%20%20%20warn%3Dfalse%3B%0A%20%20%20%20%20%20%20%20err%3Dtrue%3B%0A%20%20%20%20%20%20%7D%20else%20%7B%0A%20%20%20%20%20%20%20%20notes%2B%3D'-%20img%20has%20a%20%3Ccode%3Etitle%3C%2Fcode%3E%20attribute.%20This%20%3Ccode%3Etitle%3C%2Fcode%3E%20content%20--%20%22'%20%2B%0A%20%20%20%20%20%20%20%20%20%20img.getAttribute('title')%20%2B%0A%20%20%20%20%20%20%20%20%20%20'%22%20--%20will%20not%20be%20perceivable%20to%20assistive%20tech%2C%20keyboard%20and%20touch%20screen%20users.%3Cbr%3E'%3B%0A%20%20%20%20%20%20%20%20if%20(noAlt)%20%7B%0A%20%20%20%20%20%20%20%20%20%20err%3Dtrue%3B%0A%20%20%20%20%20%20%20%20%7D%20else%20%7B%0A%20%20%20%20%20%20%20%20%20%20warn%3Dtrue%3B%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%20%20%0A%20%20%20%20if%20(img.getAttribute('role')%20%3D%3D%3D%20'button')%20%7B%0A%20%20%20%20%20%20notes%2B%3D'-%20img%20has%20a%20%3Ccode%3Erole%3C%2Fcode%3E%20of%20%3Ccode%3Ebutton%3C%2Fcode%3E.%20Check%20that%20it%20behaves%20like%20a%20%3Ccode%3Ebutton%3C%2Fcode%3E.%3Cbr%3E'%3B%0A%20%20%20%20%20%20warn%3Dtrue%3B%0A%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20if%20(img.getAttribute('role')%20%3D%3D%3D%20'img')%20%7B%0A%20%20%20%20%20%20notes%2B%3D'-%20Not%20an%20inline%20img%2C%20so%20no%20%3Ccode%3Ealt%3C%2Fcode%3E%20attribute.%3Cbr%3E'%3B%0A%20%20%20%20%7D%0A%20%20%0A%20%20%20%20if%20((img.getAttribute('role')%20%3D%3D%3D%20'img')%26%26(img.getAttribute('alt')!%3D%3Dnull))%20%7B%0A%20%20%20%20%20%20if%20(img.tagName%20!%3D%3D%20'IMG')%20%7B%0A%20%20%20%20%20%20%20%20notes%2B%3D'-%20Background%20image%20has%20an%20%3Ccode%3Ealt%3C%2Fcode%3E%20attribute%20specified%2C%20but%20cannot%20be%20applied%20to%20this%20element%3B%20can%20only%20be%20applied%20to%20%3Ccode%3Eimg%3C%2Fcode%3E%20element.%3Cbr%3E'%3B%0A%20%20%20%20%20%20%20%20warn%3Dfalse%3B%0A%20%20%20%20%20%20%20%20err%3Dtrue%3B%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%20%20%0A%20%20%20%20if%20(img.tagName%20!%3D%3D%20'IMG'%20%26%26%20img.getAttribute('role')%20%3D%3D%3D%20'img')%20%7B%0A%20%20%20%20%20%20notes%2B%3D'-%20This%20has%20a%20%3Ccode%3Erole%3C%2Fcode%3E%20of%20%3Ccode%3Eimg%3C%2Fcode%3E%20but%20is%20not%20an%20%3Ccode%3Eimg%3C%2Fcode%3E%20element.%3Cbr%3E'%3B%0A%20%20%20%20%7D%0A%20%20%0A%20%20%20%20if%20(img.getAttribute('role')%20%3D%3D%3D%20'img')%20%7B%0A%20%20%20%20%20%20let%20hasLabel%3Dfalse%3B%0A%20%20%20%20%20%20if%20(img.tagName%20!%3D%3D%20'IMG')%20%7B%0A%20%20%20%20%20%20%20%20const%20style%20%3D%20img.currentStyle%20%7C%7C%20window.getComputedStyle(img%2C%20false)%2C%0A%20%20%20%20%20%20%20%20imgSrc%20%3D%20style.backgroundImage.slice(4%2C%20-1).replace(%2F%22%2Fg%2C%20%22%22)%3B%0A%20%20%20%20%20%20%20%20if%20(img.getAttribute('aria-label')!%3D%3Dnull)%20%7B%0A%20%20%20%20%20%20%20%20%20%20hasLabel%3Dtrue%3B%0A%20%20%20%20%20%20%20%20%20%20alt%20%3D%20img.getAttribute('aria-label')%3B%0A%20%20%20%20%20%20%20%20%20%20accName%20%3D%20alt%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20notes%2B%3D'-%20Accessible%20name%20provided%20by%20an%20%3Ccode%3Earia-label%3C%2Fcode%3E%20attribute.%3Cbr%3E'%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20warn%3Dfalse%3B%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20if%20(!hasLabel)%20%7B%0A%20%20%20%20%20%20%20%20%20%20if%20(img.getAttribute('aria-labelledby')!%3D%3Dnull)%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20hasLabel%3Dtrue%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20const%20source%3Dimg.getAttribute('aria-labelledby')%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20const%20sources%3Dsource.split('%20')%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20if%20(sources.length%20%3E%201)%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20alt%3D''%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20Array.from(sources).forEach(function%20(source)%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20alt%20%2B%3Ddocument.querySelector('%23'%20%2B%20source).textContent%20%2B%20'%20'%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20alt%3Dalt.trim()%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20notes%2B%3D'-%20Image%20gets%20accessible%20name%20from%20%3Ccode%3Earia-labelledby%3C%2Fcode%3E%20(multiple%20sources).%20Check%20that%20the%20accessible%20name%20does%20not%20contradict%20the%20image%20on%20screen%3Cbr%3E'%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20warn%3Dtrue%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%20else%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20alt%3Ddocument.querySelector('%23'%20%2B%20img.getAttribute('aria-labelledby')).textContent%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20notes%2B%3D'-%20Image%20gets%20accessible%20name%20from%20%3Ccode%3Earia-labelledby%3C%2Fcode%3E%20(single%20source).%20Check%20that%20the%20accessible%20name%20does%20not%20contradict%20the%20image%20on%20screen%3Cbr%3E'%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20warn%3Dtrue%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20accName%3Dalt%3B%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20if%20(!hasLabel)%20%7B%0A%20%20%20%20%20%20%20%20notes%2B%3D'-%20Image%20has%20no%20accessible%20name%20provided.%20It%20must%20be%20set%20using%20%3Ccode%3Earia-labelledby%3C%2Fcode%3E%20or%20%3Ccode%3Earia-label%3C%2Fcode%3E%20(not%20%3Ccode%3Ealt%3C%2Fcode%3E)%3Cbr%3E'%3B%0A%20%20%20%20%20%20%20%20err%3Dtrue%3B%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%20%20%0A%20%20%20%20if%20(accName%20%3D%3D%3D%20%22%22)%20%7B%0A%20%20%20%20%20%20if%20(img.getAttribute('title'))%20%7B%0A%20%20%20%20%20%20%20%20accName%20%3D%20img.getAttribute('title')%3B%0A%20%20%20%20%20%20%7D%20else%20%7B%0A%20%20%20%20%20%20%20%20accName%3D%22%E2%80%BC%EF%B8%8F%20No%20alt%2C%20no%20title%22%3B%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20notes%20%2B%3D'%E2%80%BC%EF%B8%8F%20No%20alt.%3Cbr%3E'%3B%0A%20%20%20%20%20%20err%3Dtrue%3B%0A%20%20%20%20%7D%0A%20%20%0A%20%20%20%20if%20(err)%20%7Bwarn%3Dfalse%7D%0A%20%20%20%20row%20%2B%3D'%3Ctr'%3B%0A%20%20%20%20row%20%2B%3D'%20data-img-ref%3D%22'%20%2B%20i%20%2B%20'%22'%3B%0A%20%20%0A%20%20%20%20if%20(warn)%20%7B%0A%20%20%20%20%20%20row%20%2B%3D'%20class%3D%22issue%20warn%22'%3B%0A%20%20%20%20%7D%0A%20%20%0A%20%20%20%20if%20(err)%20%7B%0A%20%20%20%20%20%20row%20%2B%3D'%20class%3D%22issue%20err%22'%3B%0A%20%20%20%20%7D%0A%20%20%0A%20%20%20%20row%20%2B%3D'%3E'%3B%0A%20%20%0A%20%20%20%20if%20(img.tagName%20%3D%3D%3D%20'IMG')%20%7B%0A%20%20%20%20%20%20imgType%3D'%3Ccode%3E%26lt%3Bimg%26gt%3B%3C%2Fcode%3E'%3B%0A%20%20%20%20%7D%20else%20%7B%0A%20%20%20%20%20%20imgType%3D'%3Ccode%3Erole%3D%22img%22%3C%2Fcode%3E'%3B%0A%20%20%20%20%7D%0A%20%20%0A%20%20%20%20if%20((accName%3D%3D%3D'NO_ALT_ATTRIBUTE')%7C%7C(accName%3D%3D%3D'EMPTY_ALT_ATTRIBUTE'))%20%7B%0A%20%20%20%20%20%20alt%3D''%3B%0A%20%20%20%20%20%20accName%3D''%3B%0A%20%20%20%20%7D%0A%20%20%0A%20%20%20%20row%20%2B%3D'%3Ctd%3E'%20%2B%20imgType%20%2B%20'%3C%2Ftd%3E'%3B%0A%20%20%20%20row%20%2B%3D'%3Ctd%3E%3Cimg%20src%3D%22'%20%2B%20imgSrc%20%2B%20'%22%20alt%3D%22%22%20style%3D%22max-width%3A200px%3Bmax-height%3A200px%3B%22%3E%3C%2Ftd%3E'%3B%0A%20%20%20%20row%20%2B%3D'%3Ctd%3E'%20%2B%20accName%3B%0A%20%20%20%20if%20((accName.trim()%20!%3D%3D%20alt.trim())%20%26%26%20(alt.trim()!%3D%3D''))%20%7B%0A%20%20%20%20%20%20row%20%2B%3D'%3Cdiv%20class%3D%22anDiff%22%3EAccessible%20name%20differs%3C%2Fdiv%3E'%3B%0A%20%20%20%20%7D%0A%20%20%20%20row%20%2B%3D'%3C%2Ftd%3E'%3B%0A%20%20%20%20if%20((accName.trim()%20!%3D%3D%20alt.trim())%20%26%26%20(accName.trim().toLowerCase()%20%3D%3D%3D%20alt.trim()%0A%20%20%20%20%20%20%20%20.toLowerCase()))%20%7B%0A%20%20%20%20%20%20notes%20%2B%3D'-%20Same%20text%20but%20case%20difference%20noted%20(likely%20not%20an%20issue)'%3B%0A%20%20%20%20%7D%0A%20%20%20%20row%20%2B%3D'%3Ctd%3E'%3B%0A%20%20%20%20if%20(warn)%20%7B%0A%20%20%20%20%20%20row%2B%3D'%3Cdiv%20class%3D%22issues%22%3EPossible%20issue(s)%20found%20with%20this%20image%3C%2Fdiv%3E'%3B%0A%20%20%20%20%7D%0A%20%20%20%20if%20(err)%20%7B%0A%20%20%20%20%20%20row%2B%3D'%3Cdiv%20class%3D%22issues%22%3EDefinite%20issue(s)%20found%20with%20this%20image%3C%2Fdiv%3E'%3B%0A%20%20%20%20%20%20consoleOutput%3D'Image%20%5C''%20%2B%20imgSrc%20%2B%20'%5C'%3A%5Cn'%2Bnotes%2B'Markup%20with%20issue%3A%5Cn'%2Bsnippet%2B'%5Cn---------------%5Cn'%3B%0A%20%20%20%20%7D%0A%20%20%20%20row%20%2B%3Dnotes%20%2B%20'%3Cbutton%20class%3D%22showSnippet%22%20type%3D%22button%22%20aria-label%3D%22Show%20markup%20snippet%22%20aria-expanded%3D%22false%22%3E%3Ccode%3E%26lt%3B%2F%26gt%3B%3C%2Fcode%3E%3C%2Fbutton%3E%3Cdiv%20class%3D%22snippet%22%20hidden%3E%3Clabel%20for%3D%22snip'%2B%20i%20%2B%20'%22%3EMarkup%20snippet%3C%2Flabel%3E%3Ctextarea%20id%3D%22snip'%2B%20i%20%2B%20'%22%20aria-label%3D%22Markup%20snippet%20for%20this%20node%22%3E'%20%2B%20snippet%20%2B%20'%3C%2Ftextarea%3E%3Cbutton%20type%3D%22button%22%20class%3D%22decrapulate%22%20aria-label%3D%22De-crapulate%20this%20markup%20snippet%22%3EDe-crapulate%3C%2Fbutton%3E%3C%2Fdiv%3E%3C%2Ftd%3E'%3B%0A%20%20%20%20row%20%2B%3D'%3Ctd%3E%3Cbutton%20data-img-ref%3D%22'%20%2B%20i%20%2B%20'%22%20class%3D%22highlightButton%22%20type%3D%22button%22%20aria-pressed%3D%22false%22%20aria-label%3D%22Highlight%20this%20issue%20on%20the%20page%20visually%22%3EShow%3C%2Fbutton%3E%3C%2Ftd%3E'%3B%0A%20%20%20%20row%20%2B%3D'%3C%2Ftr%3E'%3B%0A%20%20%20%20i%2B%2B%3B%0A%20%20%20%20if%20(warn%20%7C%7C%20err)%20%7B%0A%20%20%20%20%20%20issueCount%2B%2B%3B%0A%20%20%20%20%20%20consoleOutput%3DconsoleOutput.split('%3Ccode%3E').join('%60').split('%3C%2Fcode%3E').join('%60').split('%3Cbr%3E').join('%5Cn').split('%5Cn%5Cn').join('%5Cn')%3B%0A%20%20%20%20%20%20console.log(consoleOutput)%3B%0A%20%20%20%20%7D%0A%20%20%7D)%3B%0A%20%20s%3D'%3Cstyle%3E%5Baria-pressed%3Dtrue%5D%7Bcolor%3Awhite%3Bbackground%3Adarkred%3B%7D%3Bdiv.issues%7Bfont-weight%3Abold%3B%7D%3Btextarea%20%7Bmargin%3A5px%200%3B%7D.snippet%20label%20%7Bfont-weight%3Abold%3Bfont-size%3A0.8em%3Bcolor%3Ablack%3B%7D.snippet%7Bbackground%3A%23efefef%3Boutline%3A1px%20solid%20%23666%3Bpadding%3A5px%3Bmargin-top%3A5px%3B%7D.checkDiffs%7Bbackground%3APapayaWhip%3B%7D.anDiff%7Bcolor%3Ared%3Bfont-weight%3Abold%3Bfont-size%3A10px%3Bdisplay%3Ablock%7D.warn%20%7Bbackground%3Alightyellow%3B%7D.err%20%7Bbackground%3APapayaWhip%3Bcolor%3Ared%3B%7D.visually-hidden%2C.a11y%2C.visuallyhidden%2C.sr-text%2C.sr-only%20%7Bclip-path%3A%20inset(100%25)%3Bclip%3A%20rect(1px%2C%201px%2C%201px%2C%201px)%3Bheight%3A%201px%3Boverflow%3A%20hidden%3Bposition%3A%20absolute%3Bwhite-space%3A%20nowrap%3Bwidth%3A%201px%3B%7D*%20%7B-webkit-box-sizing%3A%20border-box%3Bbox-sizing%3A%20border-box%3B%7Dhtml%20%7B%2F*border%3A%20.75em%20solid%20%23fff%3B*%2Fmin-height%3A%20100vh%3B%7Dbody%20%7Bbackground%3A%20%23f7f7f5%3Bcolor%3A%20%23333%3Bfont%3A%20400%20105%25%2F1.4%20%22Work%20Sans%22%2C%20sans-serif%3Bmargin%3A%201.5em%20auto%3Bmax-width%3A%2054em%3Bwidth%3A%2090%25%3B%7Da%3Aimg%2Ca%3Avisited%20%7Bborder-bottom%3A%201px%20solid%20rgba(42%2C%20122%2C%20130%2C%20.5)%3Bcolor%3A%20%232b7a82%3Btext-decoration%3A%20none%3B%7Da%3Ahover%20%7Bborder-bottom%3A%202px%20solid%3Bcolor%3A%20%231e565c%3B%7Dbutton%3Afocus%2Ca%3Afocus%20%7Bbox-shadow%3A%20none%3Boutline-offset%3A%202px%3Boutline%3A%203px%20solid%20rgba(42%2C%20122%2C%20130%2C%20.75)%3B%7Da%3Afocus%20%7Bborder-bottom%3A%20none%3B%7Da%3Aactive%20%7Bbackground%3A%20%23333%3Bcolor%3A%20%23fff%3B%7Dcode%20%7Bfont-family%3A%20Consolas%2C%20monaco%2C%20monospace%3B-moz-tab-size%3A%204%3Btab-size%3A%204%3Btext-transform%3A%20none%3Bwhite-space%3A%20pre-wrap%3Bcolor%3Abrown%3B%7Dtextarea%20%7Bwidth%3A%20100%25%7Dlegend%20h2%2C%20legend%20h3%20%7Bmargin%3A%200%3B%7Dtable%20%7Bborder-collapse%3A%20collapse%3B%7Dth%2Ctd%20%7Bpadding%3A%2010px%3Bborder%3A2px%20solid%20%232b7a82%3B%7Dtable%20caption%20%7Bfont-weight%3A%20bold%3Btext-align%3A%20left%3Bmargin%3A1em%200%3B%7D%3C%2Fstyle%3E%3Ch1%3EList%20of%20images%20on%20this%20page.%3C%2Fh1%3E'%3B%0A%20%20s%2B%3D'%3Cinput%20type%3D%22checkbox%22%20id%3D%22showPotentialProblemsOnly%22%3E%3Clabel%20for%3D%22showPotentialProblemsOnly%22%3EShow%20only%20images%20where%20there%20*may*%20be%20issues%20('%20%2B%20issueCount%20%2B%20'%20found)%3C%2Flabel%3E'%3B%0A%20%20s%2B%3D'%20%3Cbutton%20class%3D%22highlightButtonAll%22%20type%3D%22button%22%20aria-pressed%3D%22false%22%3EHighlight%20all%20images%20on%20page%3C%2Fbutton%3E'%3B%0A%20%20s%2B%3D'%3Ctable%20border%3D%221%22%20cellpadding%3D%225%22%3E%3Ccaption%3EAll%20images%20(img%20elements%20or%20elements%20with%20role%3D%22img%22)%20on%20this%20page%2C%20the%20accessible%20name%20and%20any%20issues%20found%3C%2Fcaption%3E%3Cthead%3E%3Ctr%20valign%3Dtop%3E%3Cth%3EImage%20type%3C%2Fth%3E%3Cth%3EImage%20thumbnail%3C%2Fth%3E%3Cth%20scope%3D%22col%22%3EAccessible%20name%3C%2Fth%3E%3Cth%20scope%3D%22col%22%3ENotes%3C%2Fth%3E%3Cth%3EHighlight%20on%20the%20page%3C%2Fth%3E%3C%2Ftr%3E%3C%2Fthead%3E%3Ctbody%3E'%20%2B%20row%20%2B%20'%3C%2Ftbody%3E%3C%2Ftable%3E'%3B%0A%20%20s%2B%3D'%3Cscript%3Efunction%20showImages()%7B'%3B%0A%20%20s%2B%3D'var%20refWindow%3Dwindow.opener%3B'%3B%0A%20%20s%2B%3D'var%20highlightButtons%3Ddocument.querySelectorAll(%22.highlightButton%22)%3Bvar%20imgToHighlight%3BArray.from(highlightButtons).forEach(highlightButton%20%3D%3E%20%7BhighlightButton.addEventListener(%22click%22%2C%20e%20%3D%3E%20%7BimgToHighlight%3D%22%5Bdata-img-ref%3D%5C'%22%20%2B%20highlightButton.getAttribute(%22data-img-ref%22)%20%2B%20%22%5C'%5D%22%3Bif%20(highlightButton.getAttribute(%22aria-pressed%22)%3D%3D%3D%22false%22)%20%7BrefWindow.document.querySelector(imgToHighlight).setAttribute(%22tabindex%22%2C%22-1%22)%3BrefWindow.document.querySelector(imgToHighlight).focus()%3BrefWindow.document.querySelector(imgToHighlight).style.outline%3D%2210px%20solid%20darkred%22%3BrefWindow.document.querySelector(imgToHighlight).style.outlineOffset%3D%22-10px%22%3BhighlightButton.setAttribute(%22aria-pressed%22%2C%22true%22)%3B%7D%20else%20%7BrefWindow.document.querySelector(imgToHighlight).style.outline%3D%22%22%3BhighlightButton.setAttribute(%22aria-pressed%22%2C%22false%22)%3B%7D%7D)%3B%7D)%3B'%3B%0A%20%20s%2B%3D'var%20highlightButtonAll%3Ddocument.querySelector(%22.highlightButtonAll%22)%3BhighlightButtonAll.addEventListener(%22click%22%2C%20e%20%3D%3E%20%7Bif%20(highlightButtonAll.getAttribute(%22aria-pressed%22)%3D%3D%3D%22false%22)%20%7BArray.from(highlightButtons).forEach(highlightButton%20%3D%3E%20%7BhighlightButton.setAttribute(%22aria-pressed%22%2C%22false%22)%3BhighlightButton.click()%3B%7D)%3BhighlightButtonAll.setAttribute(%22aria-pressed%22%2C%22true%22)%3B%7D%20else%20%7BArray.from(highlightButtons).forEach(highlightButton%20%3D%3E%20%7BhighlightButton.setAttribute(%22aria-pressed%22%2C%22true%22)%3BhighlightButton.click()%3B%7D)%3BhighlightButtonAll.setAttribute(%22aria-pressed%22%2C%22false%22)%3B%7D%7D)%3B'%3B%0A%20%20s%2B%3D'var%20imgsToCopy%3Ddocument.querySelectorAll(%22.imgToCopy%22)%3BArray.from(imgsToCopy).forEach(imgToCopy%20%3D%3E%20%7BimgToCopy.addEventListener(%22focus%22%2C%20e%20%3D%3E%20%7BimgToCopy.select()%3B%7D)%3B%7D)%3B'%3B%0A%20%20s%2B%3D'function%20hideGoodRows()%7BArray.from(trsWithoutIssue).forEach(trWithoutIssue%20%3D%3E%20%7BtrWithoutIssue.setAttribute(%22hidden%22%2C%22hidden%22)%3B%7D)%3B%7Dfunction%20showGoodRows()%7BArray.from(trsWithoutIssue).forEach(trWithoutIssue%20%3D%3E%20%7BtrWithoutIssue.removeAttribute(%22hidden%22)%3B%7D)%3B%7Dvar%20trsWithoutIssue%3Ddocument.querySelectorAll(%22tbody%20tr%3Anot(.issue)%22)%3Bvar%20showProblemCheckbox%3Ddocument.querySelector(%22%23showPotentialProblemsOnly%22)%3BshowProblemCheckbox.addEventListener(%22click%22%2C%20e%20%3D%3E%20%7Bif%20(showProblemCheckbox.checked)%20%7BhideGoodRows()%3B%7D%20else%20%7BshowGoodRows()%3B%7D%7D)%3B'%3B%0A%20%20s%2B%3D'%7Dwindow.addEventListener(%22load%22%2C%20(event)%20%3D%3E%20%7BshowImages()%3B%7D)%3B%3C%2Fscript%3E'%3B%0A%20%20s%2B%3D'%3Cscript%3E'%3B%0A%20%20s%2B%3D'var%20dcUrl%20%3D%20%22https%3A%2F%2Flloydi.com%2Fa11y-tools%2Fmarkup-de-crapulator%2Findex.html%3Fmarkup%3D%22%3B'%3B%0A%20%20s%2B%3D'const%20dcs%20%3D%20document.querySelectorAll(%22.decrapulate%22)%3B'%3B%0A%20%20s%2B%3D'Array.from(dcs).forEach(function%20(dc)%20%7B'%3B%0A%20%20s%2B%3D'dc.addEventListener(%22click%22%2C%20e%20%3D%3E%20%7B'%3B%0A%20%20s%2B%3D'var%20m%20%3D%20dc.previousElementSibling.value%3B'%3B%0A%20%20s%2B%3D'm%20%3D%20encodeURIComponent(m)%3B'%3B%0A%20%20s%2B%3D'window.open(dcUrl%20%2B%20m%2C%20%22dcWin%22%2C%20%22height%3D800%2Cwidth%3D1000%22)%3B'%3B%0A%20%20s%2B%3D'%7D)%3B'%3B%0A%20%20s%2B%3D'%7D)%3B'%3B%0A%20%20s%2B%3D'const%20sss%20%3D%20document.querySelectorAll(%22.showSnippet%22)%3B'%3B%0A%20%20s%2B%3D'Array.from(sss).forEach(function%20(ss)%20%7B'%3B%0A%20%20s%2B%3D'ss.addEventListener(%22click%22%2C%20e%20%3D%3E%20%7B'%3B%0A%20%20s%2B%3D'let%20n%20%3D%20ss.nextElementSibling%3B'%3B%0A%20%20s%2B%3D'if%20(ss.getAttribute(%22aria-expanded%22)%3D%3D%3D%22false%22)%20%7B'%3B%0A%20%20s%2B%3D'n.removeAttribute(%22hidden%22)%3B'%3B%0A%20%20s%2B%3D'ss.setAttribute(%22aria-expanded%22%2C%22true%22)%3B'%3B%0A%20%20s%2B%3D'%7D%20else%20%7B'%3B%0A%20%20s%2B%3D'n.setAttribute(%22hidden%22%2C%22hidden%22)%3B'%3B%0A%20%20s%2B%3D'ss.setAttribute(%22aria-expanded%22%2C%22false%22)%3B'%3B%0A%20%20s%2B%3D'%7D'%3B%0A%20%20s%2B%3D'%7D)%3B'%3B%0A%20%20s%2B%3D'%7D)%3B'%3B%0A%20%20s%2B%3D'%3C%2Fscript%3E'%3B%0A%20%20%0A%20%20const%20popUpWinImages%3Dwindow.open(''%2C%20'popUpWinImages'%2C%20'height%3D800%2Cwidth%3D1000')%3B%0A%20%20popUpWinImages.document.open()%3B%0A%20%20popUpWinImages.document.write(s)%3B%0A%20%20popUpWinImages.document.close()%3B%0A%7D%0AlistImages()%3B%7D)()) [[1.1.1](https://www.w3.org/TR/WCAG22/#non-text-content)] + Lists all images, shows any `alt` attribute issues. * [🔖anchor for List links bookmarklet](https://a11y-tools.com/bookmarklets/#listlinks) [List links](javascript:(function()%7B'use%20strict'%0Afunction%20listLinks()%7B%0A%20%20console.clear()%3B%0A%20%20function%20insertAfter(newNode%2C%20referenceNode)%20%7B%0A%20%20%20%20referenceNode.parentNode.insertBefore(newNode%2C%20referenceNode.nextSibling)%3B%0A%20%20%7D%0A%20%20%0A%20%20function%20isHidden(el)%20%7B%0A%20%20%20%20const%20style%3Dwindow.getComputedStyle(el)%3B%0A%20%20%20%20return%20((style.display%20%3D%3D%3D%20'none')%20%7C%7C%20(style.opacity%20%3D%3D%3D%200)%20%7C%7C%20((style.clipPath%20%3D%3D%3D%20'inset(100%25)')%20%26%26%20(style%0A%20%20%20%20%20%20.clip%20%3D%3D%3D%20'rect(1px%2C%201px%2C%201px%2C%201px)'))%20%7C%7C%20((style.height%20%3D%3D%3D%20'1px')%20%26%26%20(style.width%20%3D%3D%3D%20'1px')%20%26%26%20(style%0A%20%20%20%20%20%20.overflow%20%3D%3D%3D%20'hidden')))%3B%0A%20%20%7D%0A%20%20%0A%20%20function%20attemptoToUnhide(el)%20%7B%0A%20%20%20%20const%20style%3Dwindow.getComputedStyle(el)%3B%0A%20%20%0A%20%20%20%20if%20((style.position%20%3D%3D%3D%20%22absolute%22)%20%26%26%20(style.overflow%20%3D%3D%3D%20'hidden'))%20%7B%0A%20%20%20%20%20%20el.style.height%3D'auto'%3B%0A%20%20%20%20%20%20el.style.width%3D'auto'%3B%0A%20%20%20%20%20%20el.style.position%3D'relative'%3B%0A%20%20%20%20%20%20el.style.overflow%3D'visible'%3B%0A%20%20%20%20%20%20el.style.display%3D'block'%3B%0A%20%20%20%20%20%20el.style.opacity%3D1%3B%0A%20%20%20%20%7D%0A%20%20%0A%20%20%20%20if%20((el.getAttribute('hidden')%20%3D%3D%3D%20%22%22)%20%7C%7C%20(el.getAttribute('hidden')%20%3D%3D%3D%20%22hidden%22)%20%7C%7C%20(el.getAttribute(%0A%20%20%20%20%20%20%20%20'hidden')%20%3D%3D%3D%20%22true%22))%20%7B%0A%20%20%20%20%20%20el.removeAttribute('hidden')%3B%0A%20%20%20%20%7D%0A%20%20%0A%20%20%20%20if%20(style.visibility%20%3D%3D%3D%20'hidden')%20%7B%0A%20%20%20%20%20%20el.style.visibility%3D'visible'%3B%0A%20%20%20%20%7D%0A%20%20%0A%20%20%20%20if%20(style.display%20%3D%3D%3D%20'none')%20%7B%0A%20%20%20%20%20%20el.style.display%3D'block'%3B%0A%20%20%20%20%7D%0A%20%20%0A%20%20%20%20if%20(style.opacity%20%3D%3D%3D%200)%20%7B%0A%20%20%20%20%20%20el.style.opacity%3D1%3B%0A%20%20%20%20%7D%0A%20%20%7D%0A%20%20%0A%20%20let%20href%3B%0A%20%20let%20s%3D''%3B%0A%20%20let%20row%3D''%3B%0A%20%20const%20links%3Ddocument.querySelectorAll('a%2C%5Brole%3Dlink%5D')%3B%0A%20%20let%20i%3D1%3B%0A%20%20let%20linkType%3B%0A%20%20let%20issueCount%3D0%3B%0A%20%20let%20snippet%3D''%3B%0A%20%20let%20consoleOutput%3D''%3B%0A%20%20%0A%20%20Array.from(links).forEach(function%20(link)%20%7B%0A%20%20%20%20const%20wrap%20%3D%20document.createElement('div')%3B%0A%20%20%20%20wrap.appendChild(link.cloneNode(true))%3B%0A%20%20%20%20snippet%20%3D%20wrap.innerHTML%3B%0A%20%20%20%20let%20imgLink%3Dfalse%3B%0A%20%20%20%20let%20notes%3D''%3B%0A%20%20%20%20const%20imgs%3Dlink.querySelectorAll('img')%3B%0A%20%20%20%20let%20warn%3Dfalse%3B%0A%20%20%20%20let%20err%3Dfalse%3B%0A%20%20%20%20imgLink%3Dimgs.length%20%3E%200%3B%0A%20%20%0A%20%20%20%20const%20ariaHiddenEl%20%3D%20link.querySelector('%5Baria-hidden%3Dtrue%5D')%3B%0A%20%20%20%20if%20(ariaHiddenEl)%20%7B%0A%20%20%20%20%20%20ariaHiddenEl.classList.add('remove-from-accname')%3B%0A%20%20%20%20%7D%0A%20%20%0A%20%20%20%20if%20(imgLink)%20%7B%0A%20%20%20%20%20%20Array.from(imgs).forEach(function%20(image)%20%7B%0A%20%20%20%20%20%20%20%20const%20newSpan%3Ddocument.createElement(%22SPAN%22)%3B%0A%20%20%20%20%20%20%20%20newSpan.setAttribute('class'%2C%20'visually-hidden')%3B%0A%20%20%20%20%20%20%20%20newSpan.setAttribute('style'%2C%0A%20%20%20%20%20%20%20%20%20%20'clip-path%3A%20inset(100%25)%3Bclip%3A%20rect(1px%2C%201px%2C%201px%2C%201px)%3Bheight%3A%201px%3Boverflow%3A%20hidden%3Bposition%3A%20absolute%3Bwhite-space%3A%20nowrap%3Bwidth%3A%201px%3B'%0A%20%20%20%20%20%20%20%20%20%20)%3B%0A%20%20%20%20%20%20%20%20newSpan.setAttribute('aria-hidden'%2C%20'true')%3B%0A%20%20%0A%20%20%20%20%20%20%20%20if%20(image.getAttribute('alt'))%20%7B%0A%20%20%20%20%20%20%20%20%20%20newSpan.textContent%3D'%20'%20%2B%20image.getAttribute('alt')%20%2B%20'%20'%3B%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%0A%20%20%20%20%20%20%20%20insertAfter(newSpan%2C%20image)%3B%0A%20%20%20%20%20%20%7D)%3B%0A%20%20%20%20%7D%0A%20%20%0A%20%20%20%20link.setAttribute('data-link-ref'%2C%20i)%3B%0A%20%20%20%20let%20tc%3Dlink.textContent%3B%0A%20%20%20%20const%20ariaHidden%3Dlink.querySelector('.remove-from-accname')%3B%0A%20%20%20%20if%20(ariaHidden)%20%7B%0A%20%20%20%20%20%20ariaHidden.remove()%3B%0A%20%20%20%20%7D%0A%20%20%20%20let%20accName%3Dlink.textContent%3B%0A%20%20%20%20if%20(link.getAttribute('aria-label'))%20%7B%0A%20%20%20%20%20%20accName%3Dlink.getAttribute('aria-label')%3B%0A%20%20%20%20%20%20notes%2B%3D'-%20Link%20gets%20accessible%20name%20from%20%3Ccode%3Earia-label%3C%2Fcode%3E'%3B%0A%20%20%20%20%20%20if%20(tc.trim()!%3D%3D'')%20%7B%0A%20%20%20%20%20%20%20%20notes%2B%3D'%20Check%20that%20the%20accessible%20name%20does%20not%20contradict%20the%20text%20on%20screen%3Cbr%3E'%3B%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20warn%3Dtrue%3B%0A%20%20%20%20%20%20if%20(accName.trim().toLowerCase().indexOf(tc.trim().toLowerCase())%20%3D%3D%3D%20-1)%20%7B%0A%20%20%20%20%20%20%20%20notes%2B%3D'-%20On-screen%20text%20does%20not%20appear%20in%20%3Ccode%3Earia-label%3C%2Fcode%3E.%20Looks%20like%20a%20%3Ca%20href%3D%22https%3A%2F%2Fwww.w3.org%2FWAI%2FWCAG21%2FUnderstanding%2Flabel-in-name.html%22%20target%3D%22_blank%22%3E2.5.3%20Label%20In%20Name%3C%2Fa%3E%20failure%3Cbr%3E'%3B%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%20%20%0A%20%20%20%20if%20(link.getAttribute('aria-labelledby'))%20%7B%0A%20%20%20%20%20%20const%20source%3Dlink.getAttribute('aria-labelledby')%3B%0A%20%20%20%20%20%20const%20sources%3Dsource.split('%20')%3B%0A%20%20%0A%20%20%20%20%20%20if%20(sources.length%20%3E%201)%20%7B%0A%20%20%20%20%20%20%20%20accName%3D''%3B%0A%20%20%20%20%20%20%20%20Array.from(sources).forEach(function%20(source)%20%7B%0A%20%20%20%20%20%20%20%20%20%20accName%20%2B%3Ddocument.querySelector('%23'%20%2B%20source).textContent%20%2B%20'%20'%3B%0A%20%20%20%20%20%20%20%20%7D)%3B%0A%20%20%20%20%20%20%20%20accName%3DaccName.trim()%3B%0A%20%20%20%20%20%20%20%20notes%2B%3D'-%20Link%20gets%20accessible%20name%20from%20%3Ccode%3Earia-labelledby%3C%2Fcode%3E%20(multiple%20sources).%20Check%20that%20the%20accessible%20name%20does%20not%20contradict%20the%20text%20on%20screen%3Cbr%3E'%3B%0A%20%20%20%20%20%20%20%20warn%3Dtrue%3B%0A%20%20%20%20%20%20%7D%20else%20%7B%0A%20%20%20%20%20%20%20%20accName%3Ddocument.querySelector('%23'%20%2B%20link.getAttribute('aria-labelledby')).textContent%3B%0A%20%20%20%20%20%20%20%20notes%2B%3D'-%20Link%20gets%20accessible%20name%20from%20%3Ccode%3Earia-labelledby%3C%2Fcode%3E%20(single%20source).%20Check%20that%20the%20accessible%20name%20does%20not%20contradict%20the%20text%20on%20screen%3Cbr%3E'%3B%0A%20%20%20%20%20%20%20%20warn%3Dtrue%3B%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20if%20(accName.trim().toLowerCase().indexOf(tc.trim().toLowerCase())%20%3D%3D%3D%20-1)%20%7B%0A%20%20%20%20%20%20%20%20notes%2B%3D'-%20On-screen%20text%20does%20not%20appear%20in%20%3Ccode%3Earia-labelledby%20sources%3C%2Fcode%3E.%20Looks%20like%20a%20%3Ca%20href%3D%22https%3A%2F%2Fwww.w3.org%2FWAI%2FWCAG21%2FUnderstanding%2Flabel-in-name.html%22%20target%3D%22_blank%22%3E2.5.3%20Label%20In%20Name%3C%2Fa%3E%20failure%3Cbr%3E'%3B%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%20%20%0A%20%20%20%20if%20(isHidden(link))%20%7B%0A%20%20%20%20%20%20attemptoToUnhide(link)%3B%0A%20%20%20%20%20%20if%20(isHidden(link))%20%7B%0A%20%20%20%20%20%20%20%20notes%2B%3D'Link%20is%20hidden%3Cbr%3E'%3B%0A%20%20%20%20%20%20%7D%20else%20%7B%0A%20%20%20%20%20%20%20%20notes%2B%3D'Link%20*was*%20hidden%20but%20has%20been%20temporarily%20revealed%20on%20the%20page%3Cbr%3E'%3B%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%20%20%0A%20%20%20%20if%20(imgLink)%20%7B%0A%20%20%20%20%20%20notes%2B%3D'%F0%9F%8C%84%20Image%20link%3Cbr%3E'%3B%0A%20%20%20%20%7D%0A%20%20%0A%20%20%20%20if%20(link.getAttribute('role')%20%3D%3D%3D%20'button')%20%7B%0A%20%20%20%20%20%20notes%2B%3D'-%20Link%20has%20a%20%3Ccode%3Erole%3C%2Fcode%3E%20of%20%3Ccode%3Ebutton%3C%2Fcode%3E.%20Check%20that%20it%20behaves%20like%20a%20%3Ccode%3Ebutton%3C%2Fcode%3E%20and%20is%20not%20used%20as%20navigation.%3Cbr%3E'%3B%0A%20%20%20%20%20%20warn%3Dtrue%3B%0A%20%20%20%20%7D%0A%20%20%0A%20%20%20%20if%20(link.getAttribute('title')%20%26%26%20link.getAttribute('title')%20!%3D%3D%20tc)%20%7B%0A%20%20%20%20%20%20notes%2B%3D'-%20Link%20has%20a%20%3Ccode%3Etitle%3C%2Fcode%3E%20which%20is%20different%20from%20text%20content.%20This%20%3Ccode%3Etitle%3C%2Fcode%3E%20content%20--%20%22'%20%2B%0A%20%20%20%20%20%20%20%20link.getAttribute('title')%20%2B%0A%20%20%20%20%20%20%20%20'%22%20--%20will%20not%20be%20perceivable%20to%20assistive%20tech%2C%20keyboard%20and%20touch%20screen%20users%3Cbr%3E'%3B%0A%20%20%20%20%20%20warn%3Dtrue%3B%0A%20%20%20%20%7D%0A%20%20%0A%20%20%20%20if%20(link.getAttribute('title')%20%26%26%20link.getAttribute('title')%20%3D%3D%3D%20tc)%20%7B%0A%20%20%20%20%20%20notes%2B%3D'Link%20has%20a%20%3Ccode%3Etitle%3C%2Fcode%3E%20which%20is%20the%20same%20as%20the%20text%20content%20and%20therefore%20adds%20no%20extra%20useful%20information%2Fcontext.%20This%20%3Ccode%3Etitle%3C%2Fcode%3E%20content%20--%20%22'%20%2B%0A%20%20%20%20%20%20%20%20link.getAttribute('title')%20%2B%0A%20%20%20%20%20%20%20%20'%22%20--%20will%20not%20be%20perceivable%20to%20assistive%20tech%2C%20keyboard%20and%20touch%20screen%20users%3Cbr%3E'%3B%0A%20%20%20%20%7D%0A%20%20%0A%20%20%20%20if%20(link.tagName%20%3D%3D%3D%20'A')%20%7B%0A%20%20%20%20%20%20if%20((link.getAttribute('href')%20%3D%3D%3D%20null)%20%26%26%20!link.getAttribute('tabindex')%20%26%26%20link.getAttribute(%0A%20%20%20%20%20%20%20%20%20%20'tabindex')%20!%3D%3D%20'-1')%20%7B%0A%20%20%20%20%20%20%20%20notes%2B%3D'-%20Link%20does%20not%20have%20an%20%3Ccode%3Ehref%3C%2Fcode%3E%2C%20is%20not%20keyboard-focusable%3Cbr%3E'%3B%0A%20%20%20%20%20%20%20%20warn%3Dtrue%3B%0A%20%20%20%20%20%20%7D%0A%20%20%0A%20%20%20%20%20%20if%20(((link.getAttribute('href')%20!%3D%3D%20null)%20%26%26%20(!link.getAttribute('href')))%20%26%26%20!link.getAttribute(%0A%20%20%20%20%20%20%20%20%20%20'tabindex')%20%26%26%20link.getAttribute('tabindex')%20!%3D%3D%20'-1')%20%7B%0A%20%20%20%20%20%20%20%20notes%2B%3D'-%20Link%20does%20have%20an%20%3Ccode%3Ehref%3C%2Fcode%3E%20but%20it%20has%20no%20value%2C%20so%20it%20is%20keyboard-focusable%3Cbr%3E'%3B%0A%20%20%20%20%20%20%20%20warn%3Dtrue%3B%0A%20%20%20%20%20%20%7D%0A%20%20%0A%20%20%20%20%20%20if%20(!link.getAttribute('href')%20%26%26%20link.getAttribute('tabindex')%20%26%26%20link.getAttribute('tabindex')%20!%3D%3D%0A%20%20%20%20%20%20%20%20'-1')%20%7B%0A%20%20%20%20%20%20%20%20notes%2B%3D'-%20Link%20does%20not%20have%20an%20%3Ccode%3Ehref%3C%2Fcode%3E%2C%20but%20is%20focusable%20because%20it%20has%20been%20provided%20with%20a%20positive%20%3Ccode%3Etabindex%3C%2Fcode%3E%3Cbr%3E'%3B%0A%20%20%20%20%20%20%20%20warn%3Dtrue%3B%0A%20%20%20%20%20%20%7D%0A%20%20%0A%20%20%20%20%20%20if%20(link.getAttribute('tabindex')%20%26%26%20((link.getAttribute('tabindex')%20!%3D%3D%0A%20%20%20%20%20%20%20%20'-1')%26%26(link.getAttribute('tabindex')%20!%3D%3D%0A%20%20%20%20%20%20%20%20'0')))%20%7B%0A%20%20%20%20%20%20%20%20notes%2B%3D'-%20Link%20has%20a%20positive%20%3Ccode%3Etabindex%3C%2Fcode%3E%20(not%20-1%20or%200).%20Could%20cause%20a%20%3Ca%20href%3D%22https%3A%2F%2Fwww.w3.org%2FTR%2FWCAG21%2F%23focus-order%22%20target%3D%22_blank%22%3E2.4.3%20Focus%20order%3C%2Fa%3E%20failure.%3Cbr%3E'%3B%0A%20%20%20%20%20%20%20%20warn%3Dtrue%3B%0A%20%20%20%20%20%20%7D%0A%20%20%0A%20%20%20%20%20%20if%20(link.getAttribute('href')%20%26%26%20link.getAttribute('tabindex')%20%26%26%20link.getAttribute('tabindex')%20!%3D%3D%0A%20%20%20%20%20%20%20%20'-1')%20%7B%0A%20%20%20%20%20%20%20%20notes%2B%3D'Link%20has%20a%20%3Ccode%3Etabindex%3C%2Fcode%3E%20but%20it%20is%20not%20needed%20because%20the%20%3Ccode%3Ehref%3C%2Fcode%3E%20makes%20it%20focusable%3Cbr%3E'%3B%0A%20%20%20%20%20%20%7D%0A%20%20%0A%20%20%20%20%20%20if%20(link.getAttribute('role')%20%3D%3D%3D%20'link')%20%7B%0A%20%20%20%20%20%20%20%20notes%2B%3D'Link%20has%20a%20%3Ccode%3Erole%3C%2Fcode%3E%20of%20%3Ccode%3Elink%3C%2Fcode%3E.%20Not%20needed%20as%20it%20is%20an%20%3Ccode%3Ea%3C%2Fcode%3E%20element%20that%20is%20a%20link%20by%20default%3Cbr%3E'%3B%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%20%20%0A%20%20%20%20if%20(link.tagName%20!%3D%3D%20'A'%20%26%26%20link.getAttribute('role')%20%3D%3D%3D%20'link')%20%7B%0A%20%20%20%20%20%20notes%2B%3D'-%20This%20has%20a%20%3Ccode%3Erole%3C%2Fcode%3E%20of%20%3Ccode%3Elink%3C%2Fcode%3E%20but%20is%20not%20an%20%3Ccode%3Ea%3C%2Fcode%3E%20element.%20Check%20that%20it%20is%20keyboard-operable%20(should%20activate%20with%20%3Ckbd%3EEnter%3C%2Fkbd%3E%20key)%3Cbr%3E'%3B%0A%20%20%20%20%20%20warn%3Dtrue%3B%0A%20%20%20%20%7D%0A%20%20%0A%20%20%20%20if%20(accName%20%3D%3D%3D%20%22%22)%20%7B%0A%20%20%20%20%20%20if%20(link.getAttribute('title'))%20%7B%0A%20%20%20%20%20%20%20%20accName%20%3D%20link.getAttribute('title')%3B%0A%20%20%20%20%20%20%7D%20else%20%7B%0A%20%20%20%20%20%20%20%20accName%3D%22%E2%80%BC%EF%B8%8F%20Empty%20link%22%3B%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20tc%3D%22%E2%80%BC%EF%B8%8F%20Empty%20link%22%3B%0A%20%20%20%20%20%20notes%2B%3D'%E2%80%BC%EF%B8%8F%20Empty%20link%3Cbr%3E'%3B%0A%20%20%20%20%20%20err%3Dtrue%3B%0A%20%20%20%20%7D%0A%20%20%0A%20%20%20%20if%20(imgLink%20%26%26%20accName%20%3D%3D%3D%20%22%E2%80%BC%EF%B8%8F%20Empty%20link%22)%20%7B%0A%20%20%20%20%20%20notes%2B%3D'%20-%20image%20is%20missing%20alternative%20text%20content%3Cbr%3E'%3B%0A%20%20%20%20%7D%0A%20%20%0A%20%20%20%20if%20(link.href)%20%7B%0A%20%20%20%20%20%20href%3Dlink.href%3B%0A%20%20%20%20%7D%0A%20%20%0A%20%20%20%20if%20(err)%20%7Bwarn%3Dfalse%7D%0A%20%20%20%20row%20%2B%3D'%3Ctr'%3B%0A%20%20%20%20row%20%2B%3D'%20data-link-ref%3D%22'%20%2B%20i%20%2B%20'%22'%3B%0A%20%20%0A%20%20%20%20if%20(warn)%20%7B%0A%20%20%20%20%20%20row%20%2B%3D'%20class%3D%22issue%20warn%22'%3B%0A%20%20%20%20%7D%0A%20%20%0A%20%20%20%20if%20(err)%20%7B%0A%20%20%20%20%20%20row%20%2B%3D'%20class%3D%22issue%20err%22'%3B%0A%20%20%20%20%7D%0A%20%20%0A%20%20%20%20row%20%2B%3D'%3E'%3B%0A%20%20%0A%20%20%0A%20%20%20%20if%20(link.tagName%20%3D%3D%3D%20'A')%20%7B%0A%20%20%20%20%20%20linkType%3D'%3Ccode%3E%26lt%3Ba%26gt%3B%3C%2Fcode%3E'%3B%0A%20%20%20%20%7D%20else%20%7B%0A%20%20%20%20%20%20linkType%3D'%3Ccode%3Erole%3D%22link%22%3C%2Fcode%3E'%3B%0A%20%20%20%20%7D%0A%20%20%20%20row%20%2B%3D'%3Ctd%3E'%20%2B%20linkType%20%2B%20'%3C%2Ftd%3E'%3B%0A%20%20%20%20row%20%2B%3D'%3Ctd%3E'%20%2B%20tc%20%2B%20'%3C%2Ftd%3E'%3B%0A%20%20%20%20row%20%2B%3D'%3Ctd%3E'%20%2B%20accName%3B%0A%20%20%20%20if%20((accName.trim()%20!%3D%3D%20tc.trim())%20%26%26%20(tc.trim()!%3D%3D''))%20%7B%0A%20%20%20%20%20%20row%20%2B%3D'%3Cdiv%20class%3D%22anDiff%22%3EAccessible%20name%20differs%3C%2Fdiv%3E'%3B%0A%20%20%20%20%7D%0A%20%20%20%20row%20%2B%3D'%3C%2Ftd%3E'%3B%0A%20%20%20%20if%20((accName.trim()%20!%3D%3D%20tc.trim())%20%26%26%20(accName.trim().toLowerCase()%20%3D%3D%3D%20tc.trim()%0A%20%20%20%20%20%20%20%20.toLowerCase()))%20%7B%0A%20%20%20%20%20%20notes%2B%3D'-%20Same%20text%20but%20case%20difference%20noted%20(likely%20not%20an%20issue)'%3B%0A%20%20%20%20%7D%0A%20%20%20%20row%20%2B%3D'%3Ctd%3E'%3B%0A%20%20%20%20if%20(warn)%20%7B%0A%20%20%20%20%20%20row%2B%3D'%3Cdiv%20class%3D%22issues%22%3EPossible%20issue(s)%20found%20with%20this%20link%3C%2Fdiv%3E'%3B%0A%20%20%20%20%7D%0A%20%20%20%20if%20(err)%20%7B%0A%20%20%20%20%20%20row%2B%3D'%3Cdiv%20class%3D%22issues%22%3EDefinite%20issue(s)%20found%20with%20this%20link%3C%2Fdiv%3E'%3B%0A%20%20%20%20%7D%0A%20%20%20%20consoleOutput%3D'Link%20%5C''%20%2B%20tc.trim()%20%2B%20'%5C'%3A%5Cn'%2Bnotes%2B'Markup%20with%20issue%3A%5Cn'%2Bsnippet%2B'%5Cn---------------%5Cn'%3B%0A%20%20%20%20row%20%2B%3Dnotes%20%2B%20'%3Ca%20href%3D%22'%20%2B%20href%20%2B%20'%22%20target%3D%22_blank%22%20aria-label%3D%22'%20%2B%20accName%20%2B%0A%20%20%20%20%20%20'%22%3E%F0%9F%94%97%3C%2Fa%3E%20%3Clabel%20for%3D%22l'%20%2B%20i%20%2B%20'%22%3ELinks%20to%3A%3C%2Flabel%3E%3Cinput%20id%3D%22l'%20%2B%20i%20%2B%20'%22%20class%3D%22linkToCopy%22%20type%3D%22text%22%20value%3D%22'%20%2B%20href%20%2B%20'%22%3E%20%3Cbutton%20class%3D%22showSnippet%22%20type%3D%22button%22%20aria-label%3D%22Show%20markup%20snippet%22%20aria-expanded%3D%22false%22%3E%3Ccode%3E%26lt%3B%2F%26gt%3B%3C%2Fcode%3E%3C%2Fbutton%3E%3Cdiv%20class%3D%22snippet%22%20hidden%3E%3Clabel%20for%3D%22snip'%2B%20i%20%2B%20'%22%3EMarkup%20snippet%3C%2Flabel%3E%3Ctextarea%20id%3D%22snip'%2B%20i%20%2B%20'%22%20aria-label%3D%22Markup%20snippet%20for%20this%20node%22%3E'%20%2B%20snippet%20%2B%20'%3C%2Ftextarea%3E%3Cbutton%20type%3D%22button%22%20class%3D%22decrapulate%22%20aria-label%3D%22De-crapulate%20this%20markup%20snippet%22%3EDe-crapulate%3C%2Fbutton%3E%3C%2Fdiv%3E%3C%2Ftd%3E'%3B%0A%20%20%20%20row%20%2B%3D'%3Ctd%3E%3Cbutton%20data-link-ref%3D%22'%20%2B%20i%20%2B%20'%22%20class%3D%22highlightButton%22%20type%3D%22button%22%20aria-pressed%3D%22false%22%20aria-label%3D%22Highlight%20this%20issue%20on%20the%20page%20visually%22%3EShow%3C%2Fbutton%3E%3C%2Ftd%3E'%3B%0A%20%20%20%20row%20%2B%3D'%3C%2Ftr%3E'%3B%0A%20%20%20%20i%2B%2B%3B%0A%20%20%20%20if%20(warn%20%7C%7C%20err)%20%7B%0A%20%20%20%20%20%20issueCount%2B%2B%3B%0A%20%20%20%20%7D%0A%20%20%20%20if%20(err)%20%7B%0A%20%20%20%20%20%20consoleOutput%3DconsoleOutput.split('%3Ccode%3E').join('%60').split('%3C%2Fcode%3E').join('%60').split('%3Cbr%3E').join('%5Cn').split('%5Cn%5Cn').join('%5Cn')%3B%0A%20%20%20%20%20%20console.log(consoleOutput)%3B%0A%20%20%20%20%7D%0A%20%20%7D)%3B%0A%20%20s%3D'%3Cstyle%3E%5Baria-pressed%3Dtrue%5D%7Bcolor%3Awhite%3Bbackground%3Adarkblue%3B%7Ddiv.issues%7Bfont-weight%3Abold%3B%7D%3Btextarea%20%7Bmargin%3A5px%200%3B%7D.snippet%20label%20%7Bfont-weight%3Abold%3Bfont-size%3A0.8em%3Bcolor%3Ablack%3B%7D.snippet%7Bbackground%3A%23efefef%3Boutline%3A1px%20solid%20%23666%3Bpadding%3A5px%3Bmargin-top%3A5px%3B%7D.checkDiffs%7Bbackground%3APapayaWhip%3B%7D.anDiff%7Bcolor%3Ared%3Bfont-weight%3Abold%3Bfont-size%3A10px%3Bdisplay%3Ablock%7D.warn%20%7Bbackground%3Alightyellow%3B%7D.err%20%7Bbackground%3APapayaWhip%3Bcolor%3Ared%3B%7D.visually-hidden%2C.a11y%2C.visuallyhidden%2C.sr-text%2C.sr-only%20%7Bclip-path%3A%20inset(100%25)%3Bclip%3A%20rect(1px%2C%201px%2C%201px%2C%201px)%3Bheight%3A%201px%3Boverflow%3A%20hidden%3Bposition%3A%20absolute%3Bwhite-space%3A%20nowrap%3Bwidth%3A%201px%3B%7D*%20%7B-webkit-box-sizing%3A%20border-box%3Bbox-sizing%3A%20border-box%3B%7Dhtml%20%7B%2F*border%3A%20.75em%20solid%20%23fff%3B*%2Fmin-height%3A%20100vh%3B%7Dbody%20%7Bbackground%3A%20%23f7f7f5%3Bcolor%3A%20%23333%3Bfont%3A%20400%20105%25%2F1.4%20%22Work%20Sans%22%2C%20sans-serif%3Bmargin%3A%201.5em%20auto%3Bmax-width%3A%2054em%3Bwidth%3A%2090%25%3B%7Da%3Alink%2Ca%3Avisited%20%7Bborder-bottom%3A%201px%20solid%20rgba(42%2C%20122%2C%20130%2C%20.5)%3Bcolor%3A%20%232b7a82%3Btext-decoration%3A%20none%3B%7Da%3Ahover%20%7Bborder-bottom%3A%202px%20solid%3Bcolor%3A%20%231e565c%3B%7Dbutton%3Afocus%2Ca%3Afocus%20%7Bbox-shadow%3A%20none%3Boutline-offset%3A%202px%3Boutline%3A%203px%20solid%20rgba(42%2C%20122%2C%20130%2C%20.75)%3B%7Da%3Afocus%20%7Bborder-bottom%3A%20none%3B%7Da%3Aactive%20%7Bbackground%3A%20%23333%3Bcolor%3A%20%23fff%3B%7Dcode%20%7Bfont-family%3A%20Consolas%2C%20monaco%2C%20monospace%3B-moz-tab-size%3A%204%3Btab-size%3A%204%3Btext-transform%3A%20none%3Bwhite-space%3A%20pre-wrap%3Bcolor%3Abrown%3B%7Dtextarea%20%7Bwidth%3A%20100%25%7Dlegend%20h2%2C%20legend%20h3%20%7Bmargin%3A%200%3B%7Dtable%20%7Bborder-collapse%3A%20collapse%3B%7Dth%2Ctd%20%7Bpadding%3A%2010px%3Bborder%3A2px%20solid%20%232b7a82%3B%7Dtable%20caption%20%7Bfont-weight%3A%20bold%3Btext-align%3A%20left%3Bmargin%3A1em%200%3B%7D%3C%2Fstyle%3E%3Ch1%3EList%20of%20links%20on%20this%20page.%3C%2Fh1%3E'%3B%0A%20%20s%2B%3D'%3Cinput%20type%3D%22checkbox%22%20id%3D%22showPotentialProblemsOnly%22%3E%3Clabel%20for%3D%22showPotentialProblemsOnly%22%3EShow%20only%20links%20where%20there%20*may*%20be%20issues%20('%20%2B%20issueCount%20%2B%20'%20found)%3C%2Flabel%3E'%3B%0A%20%20s%2B%3D'%20%3Cbutton%20class%3D%22highlightButtonAll%22%20type%3D%22button%22%20aria-pressed%3D%22false%22%3EHighlight%20all%20links%20on%20page%3C%2Fbutton%3E'%3B%0A%20%20s%2B%3D'%3Ctable%20border%3D%221%22%20cellpadding%3D%225%22%3E%3Ccaption%3EAll%20links%20(anchors%20or%20elements%20with%20role%3D%22link%22)%20on%20this%20page%2C%20the%20accessible%20name%20and%20any%20issues%20found%3C%2Fcaption%3E%3Cthead%3E%3Ctr%20valign%3Dtop%3E%3Cth%3ELink%20type%3C%2Fth%3E%3Cth%20scope%3D%22col%22%3ELink%20text%3C%2Fth%3E%3Cth%20scope%3D%22col%22%3EAccessible%20name%3C%2Fth%3E%3Cth%20scope%3D%22col%22%3ENotes%3C%2Fth%3E%3Cth%3EHighlight%20on%20the%20page%3C%2Fth%3E%3C%2Ftr%3E%3C%2Fthead%3E%3Ctbody%3E'%20%2B%20row%20%2B%20'%3C%2Ftbody%3E%3C%2Ftable%3E'%3B%0A%20%20s%2B%3D'%3Cscript%3Efunction%20showLinks()%7B'%3B%0A%20%20s%2B%3D'var%20refWindow%3Dwindow.opener%3B'%3B%0A%20%20s%2B%3D'var%20highlightButtons%3Ddocument.querySelectorAll(%22.highlightButton%22)%3Bvar%20linkToHighlight%3BArray.from(highlightButtons).forEach(highlightButton%20%3D%3E%20%7BhighlightButton.addEventListener(%22click%22%2C%20e%20%3D%3E%20%7BlinkToHighlight%3D%22%5Bdata-link-ref%3D%5C'%22%20%2B%20highlightButton.getAttribute(%22data-link-ref%22)%20%2B%20%22%5C'%5D%22%3Bif%20(highlightButton.getAttribute(%22aria-pressed%22)%3D%3D%3D%22false%22)%20%7BrefWindow.document.querySelector(linkToHighlight).focus()%3BrefWindow.document.querySelector(linkToHighlight).style.outline%3D%224px%20dashed%20darkblue%22%3BrefWindow.document.querySelector(linkToHighlight).style.outlineOffset%3D%22-4px%22%3BhighlightButton.setAttribute(%22aria-pressed%22%2C%22true%22)%3B%7D%20else%20%7BrefWindow.document.querySelector(linkToHighlight).style.outline%3D%22%22%3BhighlightButton.setAttribute(%22aria-pressed%22%2C%22false%22)%3B%7D%7D)%3B%7D)%3B'%3B%0A%20%20s%2B%3D'var%20highlightButtonAll%3Ddocument.querySelector(%22.highlightButtonAll%22)%3BhighlightButtonAll.addEventListener(%22click%22%2C%20e%20%3D%3E%20%7Bif%20(highlightButtonAll.getAttribute(%22aria-pressed%22)%3D%3D%3D%22false%22)%20%7BArray.from(highlightButtons).forEach(highlightButton%20%3D%3E%20%7BhighlightButton.setAttribute(%22aria-pressed%22%2C%22false%22)%3BhighlightButton.click()%3B%7D)%3BhighlightButtonAll.setAttribute(%22aria-pressed%22%2C%22true%22)%3B%7D%20else%20%7BArray.from(highlightButtons).forEach(highlightButton%20%3D%3E%20%7BhighlightButton.setAttribute(%22aria-pressed%22%2C%22true%22)%3BhighlightButton.click()%3B%7D)%3BhighlightButtonAll.setAttribute(%22aria-pressed%22%2C%22false%22)%3B%7D%7D)%3B'%3B%0A%20%20s%2B%3D'var%20linksToCopy%3Ddocument.querySelectorAll(%22.linkToCopy%22)%3BArray.from(linksToCopy).forEach(linkToCopy%20%3D%3E%20%7BlinkToCopy.addEventListener(%22focus%22%2C%20e%20%3D%3E%20%7BlinkToCopy.select()%3B%7D)%3B%7D)%3B'%3B%0A%20%20s%2B%3D'function%20hideGoodRows()%7BArray.from(trsWithoutIssue).forEach(trWithoutIssue%20%3D%3E%20%7BtrWithoutIssue.setAttribute(%22hidden%22%2C%22hidden%22)%3B%7D)%3B%7Dfunction%20showGoodRows()%7BArray.from(trsWithoutIssue).forEach(trWithoutIssue%20%3D%3E%20%7BtrWithoutIssue.removeAttribute(%22hidden%22)%3B%7D)%3B%7Dvar%20trsWithoutIssue%3Ddocument.querySelectorAll(%22tbody%20tr%3Anot(.issue)%22)%3Bvar%20showProblemCheckbox%3Ddocument.querySelector(%22%23showPotentialProblemsOnly%22)%3BshowProblemCheckbox.addEventListener(%22click%22%2C%20e%20%3D%3E%20%7Bif%20(showProblemCheckbox.checked)%20%7BhideGoodRows()%3B%7D%20else%20%7BshowGoodRows()%3B%7D%7D)%3B'%3B%0A%20%20s%2B%3D'%7Dwindow.addEventListener(%22load%22%2C%20(event)%20%3D%3E%20%7BshowLinks()%3B%7D)%3B%3C%2Fscript%3E'%3B%0A%20%20s%2B%3D'%3Cscript%3E'%3B%0A%20%20s%2B%3D'var%20dcUrl%20%3D%20%22https%3A%2F%2Flloydi.com%2Fa11y-tools%2Fmarkup-de-crapulator%2Findex.html%3Fmarkup%3D%22%3B'%3B%0A%20%20s%2B%3D'const%20dcs%20%3D%20document.querySelectorAll(%22.decrapulate%22)%3B'%3B%0A%20%20s%2B%3D'Array.from(dcs).forEach(function%20(dc)%20%7B'%3B%0A%20%20s%2B%3D'dc.addEventListener(%22click%22%2C%20e%20%3D%3E%20%7B'%3B%0A%20%20s%2B%3D'var%20m%20%3D%20dc.previousElementSibling.value%3B'%3B%0A%20%20s%2B%3D'm%20%3D%20encodeURIComponent(m)%3B'%3B%0A%20%20s%2B%3D'window.open(dcUrl%20%2B%20m%2C%20%22dcWin%22%2C%20%22height%3D800%2Cwidth%3D1000%22)%3B'%3B%0A%20%20s%2B%3D'%7D)%3B'%3B%0A%20%20s%2B%3D'%7D)%3B'%3B%0A%20%20s%2B%3D'const%20sss%20%3D%20document.querySelectorAll(%22.showSnippet%22)%3B'%3B%0A%20%20s%2B%3D'Array.from(sss).forEach(function%20(ss)%20%7B'%3B%0A%20%20s%2B%3D'ss.addEventListener(%22click%22%2C%20e%20%3D%3E%20%7B'%3B%0A%20%20s%2B%3D'let%20n%20%3D%20ss.nextElementSibling%3B'%3B%0A%20%20s%2B%3D'if%20(ss.getAttribute(%22aria-expanded%22)%3D%3D%3D%22false%22)%20%7B'%3B%0A%20%20s%2B%3D'n.removeAttribute(%22hidden%22)%3B'%3B%0A%20%20s%2B%3D'ss.setAttribute(%22aria-expanded%22%2C%22true%22)%3B'%3B%0A%20%20s%2B%3D'%7D%20else%20%7B'%3B%0A%20%20s%2B%3D'n.setAttribute(%22hidden%22%2C%22hidden%22)%3B'%3B%0A%20%20s%2B%3D'ss.setAttribute(%22aria-expanded%22%2C%22false%22)%3B'%3B%0A%20%20s%2B%3D'%7D'%3B%0A%20%20s%2B%3D'%7D)%3B'%3B%0A%20%20s%2B%3D'%7D)%3B'%3B%0A%20%20s%2B%3D'%3C%2Fscript%3E'%3B%0A%20%20%0A%20%20const%20popUpWinLinks%3Dwindow.open(''%2C%20'popUpWinLinks'%2C%20'height%3D800%2Cwidth%3D1000')%3B%0A%20%20popUpWinLinks.document.open()%3B%0A%20%20popUpWinLinks.document.write(s)%3B%0A%20%20popUpWinLinks.document.close()%3B%0A%7D%0AlistLinks()%3B%7D)()) [[2.4.4](https://www.w3.org/TR/WCAG22/#link-purpose-in-context), [2.5.3](https://www.w3.org/TR/WCAG22/#label-in-name), [4.1.2](https://www.w3.org/TR/WCAG22/#name-role-value)] + Searches for all real links on the page, and any element given a `role=link`. + Reports on the visible text, the accessible name (so you can compare side-by-side). + Flags any issues that might affect usage, such as keyboard focusability, Label in Name and more. + Notes any superfluous elements that could be removed. * [🔖anchor for List Buttons bookmarklet](https://a11y-tools.com/bookmarklets/#listbuttons) [List Buttons](javascript:(function()%7B'use%20strict'%0Afunction%20listButtons()%7B%0A%20%20console.clear()%3B%0A%20%20function%20insertAfter(newNode%2C%20referenceNode)%20%7B%0A%20%20%20%20referenceNode.parentNode.insertBefore(newNode%2C%20referenceNode.nextSibling)%3B%0A%20%20%7D%0A%0A%20%20function%20isHidden(el)%20%7B%0A%20%20%20%20const%20style%3Dwindow.getComputedStyle(el)%3B%0A%20%20%20%20return%20((style.display%20%3D%3D%3D%20'none')%7C%7C(style.opacity%20%3D%3D%3D%200)%7C%7C((style.clipPath%20%3D%3D%3D%20'inset(100%25)')%26%26(style.clip%20%3D%3D%3D%20'rect(1px%2C%201px%2C%201px%2C%201px)'))%7C%7C((style.height%20%3D%3D%3D%20'1px')%26%26(style.width%20%3D%3D%3D%20'1px')%26%26(style.overflow%20%3D%3D%3D%20'hidden')))%3B%0A%20%20%7D%0A%0A%20%20function%20attemptoToUnhide(el)%20%7B%0A%20%20%20%20const%20style%3Dwindow.getComputedStyle(el)%3B%0A%0A%20%20%20%20if%20((style.position%3D%3D%3D%22absolute%22)%26%26(style.overflow%20%3D%3D%3D%20'hidden'))%20%7B%0A%20%20%20%20%20%20el.style.height%3D'auto'%3B%20%0A%20%20%20%20%20%20el.style.width%3D'auto'%3B%0A%20%20%20%20%20%20el.style.position%3D'relative'%3B%0A%20%20%20%20%20%20el.style.overflow%3D'visible'%3B%0A%20%20%20%20%20%20el.style.display%3D'block'%3B%0A%20%20%20%20%20%20el.style.opacity%3D1%3B%0A%20%20%20%20%7D%0A%0A%20%20%20%20if%20((el.getAttribute('hidden')%3D%3D%3D%22%22)%7C%7C(el.getAttribute('hidden')%3D%3D%3D%22hidden%22)%7C%7C(el.getAttribute('hidden')%3D%3D%3D%22true%22))%20%7B%0A%20%20%20%20%20%20el.removeAttribute('hidden')%3B%0A%20%20%20%20%7D%0A%0A%20%20%20%20if%20(style.visibility%20%3D%3D%3D%20'hidden')%20%7B%0A%20%20%20%20%20%20el.style.visibility%3D'visible'%3B%0A%20%20%20%20%7D%0A%0A%20%20%20%20if%20(style.display%20%3D%3D%3D%20'none')%20%7B%0A%20%20%20%20%20%20el.style.display%3D'block'%3B%0A%20%20%20%20%7D%0A%20%20%20%20%0A%20%20%20%20if%20(style.opacity%20%3D%3D%3D%200)%20%7B%0A%20%20%20%20%20%20el.style.opacity%3D1%3B%0A%20%20%20%20%7D%0A%20%20%7D%0A%0A%20%20let%20s%3D''%3B%0A%20%20let%20row%3D''%3B%0A%20%20const%20btns%3Ddocument.querySelectorAll('button%2C%5Brole%3Dbutton%5D%2Cinput%5Btype%3Dbutton%5D')%3B%0A%20%20let%20i%3D1%3B%0A%20%20let%20btnType%3B%0A%20%20let%20issueCount%3D0%3B%0A%20%20let%20snippet%3D''%3B%0A%20%20let%20consoleOutput%3D''%3B%0A%20%20Array.from(btns).forEach(function%20(button)%20%7B%0A%20%20%20%20const%20wrap%20%3D%20document.createElement('div')%3B%0A%20%20%20%20wrap.appendChild(button.cloneNode(true))%3B%0A%20%20%20%20snippet%20%3D%20wrap.innerHTML%3B%0A%20%20%20%20let%20imgBtn%3Dfalse%3B%0A%20%20%20%20let%20notes%3D''%3B%0A%20%20%20%20const%20imgs%3Dbutton.querySelectorAll('img')%3B%0A%20%20%20%20let%20warn%3Dfalse%3B%0A%20%20%20%20let%20err%3Dfalse%3B%0A%20%20%20%20imgBtn%3Dimgs.length%20%3E%200%3B%0A%0A%20%20%20%20const%20ariaHiddenEl%20%3D%20button.querySelector('%5Baria-hidden%3Dtrue%5D')%3B%0A%20%20%20%20if%20(ariaHiddenEl)%20%7B%0A%20%20%20%20%20%20ariaHiddenEl.classList.add('remove-from-accname')%3B%0A%20%20%20%20%7D%0A%0A%20%20%20%20if%20(imgBtn)%20%7B%0A%20%20%20%20%20%20Array.from(imgs).forEach(function%20(image)%20%7B%0A%20%20%20%20%20%20%20%20const%20newSpan%3Ddocument.createElement(%22SPAN%22)%3B%0A%20%20%20%20%20%20%20%20newSpan.setAttribute('class'%2C%20'visually-hidden')%3B%0A%20%20%20%20%20%20%20%20newSpan.setAttribute('style'%2C%20'clip-path%3A%20inset(100%25)%3Bclip%3A%20rect(1px%2C%201px%2C%201px%2C%201px)%3Bheight%3A%201px%3Boverflow%3A%20hidden%3Bposition%3A%20absolute%3Bwhite-space%3A%20nowrap%3Bwidth%3A%201px%3B')%3B%0A%20%20%20%20%20%20%20%20newSpan.setAttribute('aria-hidden'%2C%20'true')%3B%0A%0A%20%20%20%20%20%20%20%20if%20(image.getAttribute('alt'))%20%7B%0A%20%20%20%20%20%20%20%20%20%20newSpan.textContent%3D'%20'%20%2B%20image.getAttribute('alt')%20%2B%20'%20'%3B%0A%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20insertAfter(newSpan%2C%20image)%3B%0A%20%20%20%20%20%20%7D)%3B%0A%20%20%20%20%7D%0A%0A%20%20%20%20button.setAttribute('data-button-ref'%2C%20i)%3B%0A%20%20%20%20let%20tc%3Dbutton.textContent%3B%0A%20%20%20%20const%20ariaHidden%3Dbutton.querySelector('.remove-from-accname')%3B%0A%20%20%20%20if%20(ariaHidden)%20%7B%0A%20%20%20%20%20%20ariaHidden.remove()%3B%0A%20%20%20%20%7D%0A%20%20%20%20let%20accName%3Dbutton.textContent%3B%0A%0A%20%20%20%20if%20(button.getAttribute('aria-label'))%20%7B%0A%20%20%20%20%20%20accName%3Dbutton.getAttribute('aria-label')%3B%0A%20%20%20%20%20%20notes%2B%3D%20'-%20button%20gets%20accessible%20name%20from%20%3Ccode%3Earia-label%3C%2Fcode%3E.%20Check%20that%20the%20accessible%20name%20does%20not%20contradict%20the%20text%20on%20screen%3Cbr%3E'%3B%0A%20%20%20%20%20%20warn%3Dtrue%3B%0A%20%20%20%20%20%20if%20(accName.trim().toLowerCase().indexOf(tc.trim().toLowerCase())%3D%3D%3D-1%20)%20%7B%0A%20%20%20%20%20%20%20%20notes%2B%3D%20'-%20On-screen%20text%20does%20not%20appear%20in%20%3Ccode%3Earia-label%3C%2Fcode%3E.%20Looks%20like%20a%20%3Ca%20href%3D%22https%3A%2F%2Fwww.w3.org%2FWAI%2FWCAG21%2FUnderstanding%2Flabel-in-name.html%22%20target%3D%22_blank%22%3E2.5.3%20Label%20In%20Name%3C%2Fa%3E%20failure%3Cbr%3E'%3B%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%0A%20%20%20%20if%20(button.getAttribute('aria-labelledby'))%20%7B%0A%20%20%20%20%20%20let%20source%3Dbutton.getAttribute('aria-labelledby')%3B%0A%20%20%20%20%20%20source%3Dsource.replace(%2F%3A%2Fg%2C'%5C%5C%3A')%3B%0A%20%20%20%20%20%20const%20sources%3Dsource.split('%20')%3B%0A%0A%20%20%20%20%20%20if%20(sources.length%20%3E%201)%20%7B%0A%20%20%20%20%20%20%20%20accName%3D''%3B%0A%20%20%20%20%20%20%20%20Array.from(sources).forEach(function%20(source)%20%7B%0A%20%20%20%20%20%20%20%20%20%20if%20(document.querySelector('%23'%20%2B%20source))%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20accName%2B%3D%20document.querySelector('%23'%20%2B%20source).textContent%20%2B%20'%20'%3B%0A%20%20%20%20%20%20%20%20%20%20%7D%20else%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20accName%2B%3D%20'**%20aria-labelledby%20source%20is%20missing%20**'%3B%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D)%3B%0A%20%20%20%20%20%20%20%20accName%3DaccName.trim()%3B%0A%20%20%20%20%20%20%20%20notes%2B%3D%20'-%20button%20gets%20accessible%20name%20from%20%3Ccode%3Earia-labelledby%3C%2Fcode%3E%20(multiple%20sources).%20Check%20that%20the%20accessible%20name%20does%20not%20contradict%20the%20text%20on%20screen%3Cbr%3E'%3B%0A%20%20%20%20%20%20%20%20warn%3Dtrue%3B%0A%20%20%20%20%20%20%7D%20else%20%7B%0A%20%20%20%20%20%20%20%20%20%20source%3Dbutton.getAttribute('aria-labelledby')%3B%0A%20%20%20%20%20%20%20%20%20%20source%3Dsource.replace(%2F%3A%2Fg%2C'%5C%5C%3A')%3B%0A%20%20%20%20%20%20%20%20%20%20if%20(document.querySelector('%23'%20%2B%20source))%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20accName%3Ddocument.querySelector('%23'%20%2B%20source).textContent%3B%0A%20%20%20%20%20%20%20%20%20%20%7D%20else%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20accName%2B%3D%20'**%20aria-labelledby%20source%20is%20missing%20**'%3B%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20notes%2B%3D%20'-%20button%20gets%20accessible%20name%20from%20%3Ccode%3Earia-labelledby%3C%2Fcode%3E%20(single%20source).%20Check%20that%20the%20accessible%20name%20does%20not%20contradict%20the%20text%20on%20screen%3Cbr%3E'%3B%0A%20%20%20%20%20%20%20%20warn%3Dtrue%3B%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20if%20(accName.trim().toLowerCase().indexOf(tc.trim().toLowerCase())%3D%3D%3D-1%20)%20%7B%0A%20%20%20%20%20%20%20%20notes%2B%3D%20'-%20On-screen%20text%20does%20not%20appear%20in%20%3Ccode%3Earia-labelledby%20sources%3C%2Fcode%3E.%20Looks%20like%20a%20%3Ca%20href%3D%22https%3A%2F%2Fwww.w3.org%2FWAI%2FWCAG21%2FUnderstanding%2Flabel-in-name.html%22%20target%3D%22_blank%22%3E2.5.3%20Label%20In%20Name%3C%2Fa%3E%20failure%3Cbr%3E'%3B%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%20%20%20%20if%20(isHidden(button))%20%7B%0A%20%20%20%20%20%20attemptoToUnhide(button)%3B%0A%20%20%20%20%20%20if%20(isHidden(button))%20%7B%0A%20%20%20%20%20%20%20%20notes%2B%3D%20'Button%20is%20hidden%3Cbr%3E'%3B%0A%20%20%20%20%20%20%7D%20else%20%7B%0A%20%20%20%20%20%20notes%2B%3D%20'Button%20*was*%20hidden%20but%20has%20been%20temporarily%20revealed%20on%20the%20page%3Cbr%3E'%3B%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%0A%20%20%20%20if%20(imgBtn)%20%7B%0A%20%20%20%20%20%20notes%2B%3D%20'%F0%9F%8C%84%20Image%20button%3Cbr%3E'%3B%0A%20%20%20%20%7D%0A%0A%20%20%20%20if%20(button.getAttribute('title')%20%26%26%20button.getAttribute('title')%20!%3D%3D%20tc)%20%7B%0A%20%20%20%20%20%20notes%2B%3D%20'-%20button%20has%20a%20%3Ccode%3Etitle%3C%2Fcode%3E%20which%20is%20different%20from%20text%20content.'%3B%0A%20%20%20%20%20%20if%20(accName!%3D%3D'')%20%7B%0A%20%20%20%20%20%20%20%20notes%2B%3D%20'This%20%3Ccode%3Etitle%3C%2Fcode%3E%20content%20--%20%22'%20%2B%20button.getAttribute('title')%20%2B%20'%22%20--%20will%20not%20be%20perceivable%20to%20assistive%20tech%2C%20keyboard%20and%20touch%20screen%20users%3Cbr%3E'%3B%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20notes%2B%3D%20'%3Cbr%3E'%3B%0A%20%20%20%20%20%20warn%3Dtrue%3B%0A%20%20%20%20%7D%0A%0A%20%20%20%20if%20(button.getAttribute('title')%20%26%26%20button.getAttribute('title')%20%3D%3D%3D%20tc)%20%7B%0A%20%20%20%20%20%20notes%2B%3D%20'-%20button%20has%20a%20%3Ccode%3Etitle%3C%2Fcode%3E%20which%20is%20the%20same%20as%20the%20text%20content%20and%20therefore%20adds%20no%20extra%20useful%20information%2Fcontext.%20This%20%3Ccode%3Etitle%3C%2Fcode%3E%20content%20--%20%22'%20%2B%20button.getAttribute('title')%20%2B%20'%22%20--%20will%20not%20be%20perceivable%20to%20assistive%20tech%2C%20keyboard%20and%20touch%20screen%20users%3Cbr%3E'%3B%0A%20%20%20%20%20%20warn%3Dtrue%3B%0A%20%20%20%20%7D%0A%0A%20%20%20%20if%20(button.tagName%20%3D%3D%3D%20'BUTTON')%20%7B%0A%0A%20%20%20%20%20%20if%20(button.getAttribute('tabindex')%20%26%26%20button.getAttribute('tabindex')%20!%3D%3D%20'-1')%20%7B%0A%20%20%20%20%20%20%20%20notes%2B%3D%20'Button%20has%20a%20%3Ccode%3Etabindex%3C%2Fcode%3E%20but%20it%20is%20not%20needed%20because%20the%20%3Ccode%3Ebutton%3C%2Fcode%3E%20is%20natively%20focusable%3Cbr%3E'%3B%0A%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20if%20(button.getAttribute('tabindex')%20%26%26%20((button.getAttribute('tabindex')%20!%3D%3D%0A%20%20%20%20%20%20%20%20'-1')%26%26(button.getAttribute('tabindex')%20!%3D%3D%0A%20%20%20%20%20%20%20%20'0')))%20%7B%0A%20%20%20%20%20%20%20%20notes%2B%3D'-%20Button%20has%20a%20positive%20%3Ccode%3Etabindex%3C%2Fcode%3E%20(not%20-1%20or%200).%20Could%20cause%20a%20%3Ca%20href%3D%22https%3A%2F%2Fwww.w3.org%2FTR%2FWCAG21%2F%23focus-order%22%20target%3D%22_blank%22%3E2.4.3%20Focus%20order%3C%2Fa%3E%20failure.%3Cbr%3E'%3B%0A%20%20%20%20%20%20%20%20warn%3Dtrue%3B%0A%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20if%20(button.getAttribute('role')%20%3D%3D%3D%20'button')%20%7B%0A%20%20%20%20%20%20%20%20notes%2B%3D%20'Button%20has%20a%20%3Ccode%3Erole%3C%2Fcode%3E%20of%20%3Ccode%3Ebutton%3C%2Fcode%3E.%20Not%20needed%20as%20it%20is%20a%20%3Ccode%3Ebutton%3C%2Fcode%3E%20element%20that%20is%20a%20button%20by%20default%3Cbr%3E'%3B%0A%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20if%20((button.getAttribute('aria-hidden')%20!%3D%3D%20'true')%26%26(button.getAttribute('tabindex')%20%3D%3D%3D%20'-1'))%20%7B%0A%20%20%20%20%20%20%20%20notes%2B%3D%20'-%20%3Ccode%3E%26lt%3Bbutton%26gt%3B%3C%2Fcode%3E%20has%20a%20negative%20%3Ccode%3Etabindex%3C%2Fcode%3E%20which%20means%20it%20will%20not%20be%20keyboard-operable%3Cbr%3E'%3B%0A%20%20%20%20%20%20%20%20warn%3Dtrue%3B%0A%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20if%20((button.getAttribute('aria-hidden')%20%3D%3D%3D%20'true')%26%26(button.getAttribute('tabindex')%20!%3D%3D%20'-1'))%20%7B%0A%20%20%20%20%20%20%20%20notes%2B%3D%20'-%20%3Ccode%3E%26lt%3Bbutton%26gt%3B%3C%2Fcode%3E%20has%20%3Ccode%3Earia-hidden%3D%22true%22%3C%2Fcode%3E%20but%20can%20still%20be%20focused%20by%20keyboard%20user%20as%20it%20does%20not%20have%20a%20negative%20%3Ccode%3Etabindex%3C%2Fcode%3E%3Cbr%3E'%3B%0A%20%20%20%20%20%20%20%20warn%3Dtrue%3B%0A%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20if%20((button.getAttribute('role'))%26%26(button.getAttribute('role')%20!%3D%3D%20'button'))%20%7B%0A%20%20%20%20%20%20%20%20notes%2B%3D%20'-%20%3Ccode%3E%26lt%3Bbutton%26gt%3B%3C%2Fcode%3E%20has%20a%20%3Ccode%3Erole%3C%2Fcode%3E%20set%20that%20is%20not%20%3Ccode%3Ebutton%3C%2Fcode%3E.%20It%20is%20set%20to%20%22'%20%2B%20button.getAttribute('role')%20%2B%20'%22.%20This%20overrides%20the%20native%20role%20and%20will%20likely%20confused%20assistive%20tech%20users%3Cbr%3E'%3B%0A%20%20%20%20%20%20%20%20warn%3Dtrue%3B%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%20%20%20%20if%20(button.tagName%20%3D%3D%3D%20'A')%20%7B%0A%20%20%20%20%20%20if%20((!button.getAttribute('href'))%20%26%26%20(!button.getAttribute('tabindex')))%20%7B%0A%20%20%20%20%20%20%20%20notes%2B%3D%20'-%20button%20is%20based%20on%20an%20%3Ccode%3E%26lt%3Ba%26gt%3B%3C%2Fcode%3E%20element%2C%20does%20not%20have%20an%20%3Ccode%3Ehref%3C%2Fcode%3E%20or%20%3Ccode%3Etabindex%3C%2Fcode%3E%2C%20%20and%20therefore%20is%20not%20focusable%3Cbr%3E'%3B%0A%20%20%20%20%20%20%20%20warn%3Dtrue%3B%0A%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20if%20(!button.getAttribute('href')%20%26%26%20button.getAttribute('tabindex')%20%26%26%20button.getAttribute('tabindex')%20!%3D%3D%20'-1')%20%7B%0A%20%20%20%20%20%20%20%20notes%2B%3D%20'-%20button%20is%20based%20on%20an%20%3Ccode%3E%26lt%3Ba%26gt%3B%3C%2Fcode%3E%20element%2C%20does%20not%20have%20an%20%3Ccode%3Ehref%3C%2Fcode%3E%2C%20but%20is%20focusable%20because%20it%20has%20been%20provided%20with%20a%20positive%20%3Ccode%3Etabindex%3C%2Fcode%3E%3Cbr%3E'%3B%0A%20%20%20%20%20%20%20%20warn%3Dtrue%3B%0A%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20if%20(button.getAttribute('href')%20%26%26%20button.getAttribute('tabindex')%20%26%26%20button.getAttribute('tabindex')%20!%3D%3D%20'-1')%20%7B%0A%20%20%20%20%20%20%20%20notes%2B%3D%20'-%20button%20is%20based%20on%20an%20%3Ccode%3E%26lt%3Ba%26gt%3B%3C%2Fcode%3E.%20It%20is%20focusable%20because%20there%20is%20a%20%3Ccode%3Etabindex%3C%2Fcode%3E%20present%3Cbr%3E'%3B%0A%20%20%20%20%20%20%20%20warn%3Dtrue%3B%0A%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20if%20(button.getAttribute('tabindex')%20%26%26%20((button.getAttribute('tabindex')%20!%3D%3D%0A%20%20%20%20%20%20%20%20'-1')%26%26(button.getAttribute('tabindex')%20!%3D%3D%0A%20%20%20%20%20%20%20%20'0')))%20%7B%0A%20%20%20%20%20%20%20%20notes%2B%3D'-%20Button%20has%20a%20positive%20%3Ccode%3Etabindex%3C%2Fcode%3E%20(not%20-1%20or%200).%20Could%20cause%20a%20%3Ca%20href%3D%22https%3A%2F%2Fwww.w3.org%2FTR%2FWCAG21%2F%23focus-order%22%20target%3D%22_blank%22%3E2.4.3%20Focus%20order%3C%2Fa%3E%20failure.%3Cbr%3E'%3B%0A%20%20%20%20%20%20%20%20warn%3Dtrue%3B%0A%20%20%20%20%20%20%7D%0A%0A%0A%20%20%20%20%7D%0A%0A%20%20%20%20if%20((button.tagName%20!%3D%3D%20'BUTTON')%20%26%26%20(button.tagName%20!%3D%3D%20'A')%20%26%26%20(button.getAttribute('role')%20%3D%3D%3D%20'button'))%20%7B%0A%20%20%20%20%20%20notes%2B%3D%20'-%20This%20has%20a%20%3Ccode%3Erole%3C%2Fcode%3E%20of%20%3Ccode%3Ebutton%3C%2Fcode%3E%20but%20is%20not%20a%20%3Ccode%3Ebutton%3C%2Fcode%3E%20element.'%3B%0A%20%20%20%20%20%20if%20(button.getAttribute(%22tabindex%22)%3D%3D%3D%22-1%22)%20%7B%0A%20%20%20%20%20%20%20%20notes%2B%3D%20'%3Cbr%3E-%20%3Cstrong%3ENote%3C%2Fstrong%3E%3A%20this%20button%20has%20a%20negative%20%3Ccode%3Etabindex%3C%2Fcode%3E%20and%20will%20not%20be%20keyboard-focusable.'%3B%0A%20%20%20%20%20%20%7D%20else%20%7B%0A%20%20%20%20%20%20%20%20notes%2B%3D%20'Check%20that%20it%20is%20keyboard-operable%20(should%20activate%20with%20%3Ckbd%3EEnter%3C%2Fkbd%3E%20and%20%3Ckbd%3ESpace%3C%2Fkbd%3E%20key)%3Cbr%3E'%3B%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20warn%3Dtrue%3B%0A%20%20%20%20%7D%0A%20%20%20%20%0A%20%20%20%20if%20(accName%20%3D%3D%3D%20%22%22)%20%7B%0A%20%20%20%20%20%20if%20(button.getAttribute('title'))%20%7B%0A%20%20%20%20%20%20%20%20accName%20%3D%20button.getAttribute('title')%3B%0A%20%20%20%20%20%20%7D%20else%20%7B%0A%20%20%20%20%20%20%20%20accName%3D%22%E2%80%BC%EF%B8%8F%20Empty%20button%22%3B%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20tc%3D%22%E2%80%BC%EF%B8%8F%20Empty%20button%22%3B%0A%20%20%20%20%20%20notes%2B%3D%20'%E2%80%BC%EF%B8%8F%20Empty%20button%3Cbr%3E'%3B%0A%20%20%20%20%20%20err%3Dtrue%3B%0A%20%20%20%20%7D%20else%20%7B%0A%20%20%20%20%20%20if%20(tc.trim()%3D%3D%3D%22%22)%20%7B%0A%20%20%20%20%20%20%20%20tc%3D%22%E2%80%BC%EF%B8%8F%20No%20visible%20text%20on%20button%22%3B%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%0A%20%20%20%20if%20(imgBtn%20%26%26%20accName%20%3D%3D%3D%20%22%E2%80%BC%EF%B8%8F%20Empty%20button%22)%20%7B%0A%20%20%20%20%20%20notes%2B%3D%20'%20-%20image%20is%20missing%20alternative%20text%20content%3Cbr%3E'%3B%0A%20%20%20%20%7D%0A%0A%20%20%20%20%2F*%0A%20%20%20%20if%20(button.href)%20%7B%0A%20%20%20%20%20%20href%3Dbutton.href%3B%0A%20%20%20%20%7D%0A%20%20%20%20*%2F%0A%0A%20%20%20%20if%20(err)%20%7Bwarn%3Dfalse%7D%0A%20%20%20%20row%2B%3D'%3Ctr'%3B%0A%20%20%20%20row%2B%3D'%20data-button-ref%3D%22'%20%2B%20i%20%2B%20'%22'%3B%0A%0A%20%20%20%20if%20(warn)%20%7B%0A%20%20%20%20%20%20row%2B%3D'%20class%3D%22issue%20warn%22'%3B%0A%20%20%20%20%7D%0A%0A%20%20%20%20if%20(err)%20%7B%0A%20%20%20%20%20%20row%2B%3D'%20class%3D%22issue%20err%22'%3B%0A%20%20%20%20%7D%0A%0A%20%20%20%20row%2B%3D'%3E'%3B%0A%0A%20%20%20%20if%20(button.tagName%20%3D%3D%3D%20'BUTTON')%20%7B%0A%20%20%20%20%20%20btnType%3D'%3Ccode%3E%26lt%3Bbutton%26gt%3B%3C%2Fcode%3E'%3B%0A%20%20%20%20%7D%20else%20%7B%0A%20%20%20%20%20%20btnType%3D'%3Ccode%3Erole%3D%22button%22%3C%2Fcode%3E'%3B%0A%20%20%20%20%7D%0A%0A%20%20%20%20row%2B%3D'%3Ctd%3E'%20%2B%20btnType%20%2B%20'%3C%2Ftd%3E'%3B%0A%20%20%20%20row%2B%3D'%3Ctd%3E'%20%2B%20tc%20%2B%20'%3C%2Ftd%3E'%3B%0A%20%20%20%20row%2B%3D'%3Ctd%3E'%20%2B%20accName%3B%0A%20%20%20%20if%20((accName.trim()%20!%3D%3D%20tc.trim())%20%26%26%20(tc.trim()!%3D%3D''))%20%7B%0A%20%20%20%20%20%20row%2B%3D'%3Cdiv%20class%3D%22anDiff%22%3EAccessible%20name%20differs%3C%2Fdiv%3E'%3B%0A%20%20%20%20%7D%0A%20%20%20%20row%2B%3D'%3C%2Ftd%3E'%3B%0A%20%20%20%20row%2B%3D'%3Ctd%3E'%3B%0A%20%20%20%20if%20(warn)%20%7B%0A%20%20%20%20%20%20row%2B%3D'%3Cdiv%20class%3D%22issues%22%3EPossible%20issue(s)%20found%20with%20this%20button%3C%2Fdiv%3E'%3B%0A%20%20%20%20%7D%0A%20%20%20%20if%20(err)%20%7B%0A%20%20%20%20%20%20row%2B%3D'%3Cdiv%20class%3D%22issues%22%3EDefinite%20issue(s)%20found%20with%20this%20button%3C%2Fdiv%3E'%3B%0A%20%20%20%20%7D%0A%20%20%20%20consoleOutput%3D'Button%20%5C''%20%2B%20tc.trim()%20%2B%20'%5C'%3A%5Cn'%2Bnotes%2B'Markup%20with%20issue%3A%5Cn'%2Bsnippet%2B'%5Cn---------------%5Cn'%3B%0A%20%20%20%20row%2B%3Dnotes%20%2B%20'%3Cbutton%20class%3D%22showSnippet%22%20type%3D%22button%22%20aria-label%3D%22Show%20markup%20snippet%22%20aria-expanded%3D%22false%22%3E%3Ccode%3E%26lt%3B%2F%26gt%3B%3C%2Fcode%3E%3C%2Fbutton%3E%3Cdiv%20class%3D%22snippet%22%20hidden%3E%3Clabel%20for%3D%22snip'%2B%20i%20%2B%20'%22%3EMarkup%20snippet%3C%2Flabel%3E%3Ctextarea%20id%3D%22snip'%2B%20i%20%2B%20'%22%20aria-label%3D%22Markup%20snippet%20for%20this%20node%22%3E'%20%2B%20snippet%20%2B%20'%3C%2Ftextarea%3E%3Cbutton%20type%3D%22button%22%20class%3D%22decrapulate%22%20aria-label%3D%22De-crapulate%20this%20markup%20snippet%22%3EDe-crapulate%3C%2Fbutton%3E%3C%2Fdiv%3E%3C%2Ftd%3E'%3B%0A%0A%20%20%20%20row%2B%3D'%3Ctd%3E%3Cbutton%20data-button-ref%3D%22'%20%2B%20i%20%2B%20'%22%20class%3D%22highlightButton%22%20type%3D%22button%22%20aria-pressed%3D%22false%22%20aria-label%3D%22Highlight%20this%20issue%20on%20the%20page%20visually%22%3EShow%3C%2Fbutton%3E%3C%2Ftd%3E'%3B%0A%20%20%20%20row%2B%3D'%3C%2Ftr%3E'%3B%0A%20%20%20%20i%2B%2B%3B%0A%0A%20%20%20%20if%20(warn%20%7C%7C%20err)%20%7B%0A%20%20%20%20%20%20issueCount%2B%2B%3B%0A%20%20%20%20%7D%0A%20%20%20%20if%20(err)%20%7B%0A%20%20%20%20%20%20consoleOutput%3DconsoleOutput.split('%3Ccode%3E').join('%60').split('%3C%2Fcode%3E').join('%60').split('%3Cbr%3E').join('%5Cn').split('%5Cn%5Cn').join('%5Cn')%3B%0A%20%20%20%20%20%20console.log(consoleOutput)%3B%0A%20%20%20%20%7D%0A%20%20%7D)%3B%0A%20%20s%3D'%3Cstyle%3E%5Baria-pressed%3Dtrue%5D%7Bcolor%3Awhite%3Bbackground%3Adarkgreen%3B%7Ddiv.issues%7Bfont-weight%3Abold%3B%7D%3Btextarea%20%7Bmargin%3A5px%200%3B%7D.snippet%20label%20%7Bfont-weight%3Abold%3Bfont-size%3A0.8em%3Bcolor%3Ablack%3B%7D.snippet%7Bbackground%3A%23efefef%3Boutline%3A1px%20solid%20%23666%3Bpadding%3A5px%3Bmargin-top%3A5px%3B%7D.anDiff%7Bcolor%3Ared%3Bfont-weight%3Abold%3Bfont-size%3A10px%3Bdisplay%3Ablock%7D.warn%20%7Bbackground%3Alightyellow%3B%7D.err%20%7Bbackground%3APapayaWhip%3Bcolor%3Ared%3B%7D.visually-hidden%2C.a11y%2C.visuallyhidden%2C.sr-text%2C.sr-only%20%7Bclip-path%3A%20inset(100%25)%3Bclip%3A%20rect(1px%2C%201px%2C%201px%2C%201px)%3Bheight%3A%201px%3Boverflow%3A%20hidden%3Bposition%3A%20absolute%3Bwhite-space%3A%20nowrap%3Bwidth%3A%201px%3B%7D*%20%7B-webkit-box-sizing%3A%20border-box%3Bbox-sizing%3A%20border-box%3B%7Dhtml%20%7B%2F*border%3A%20.75em%20solid%20%23fff%3B*%2Fmin-height%3A%20100vh%3B%7Dbody%20%7Bbackground%3A%20%23f7f7f5%3Bcolor%3A%20%23333%3Bfont%3A%20400%20105%25%2F1.4%20%22Work%20Sans%22%2C%20sans-serif%3Bmargin%3A%201.5em%20auto%3Bmax-width%3A%2054em%3Bwidth%3A%2090%25%3B%7Da%3Abutton%2Ca%3Avisited%20%7Bborder-bottom%3A%201px%20solid%20rgba(42%2C%20122%2C%20130%2C%20.5)%3Bcolor%3A%20%232b7a82%3Btext-decoration%3A%20none%3B%7Da%3Ahover%20%7Bborder-bottom%3A%202px%20solid%3Bcolor%3A%20%231e565c%3B%7Dbutton%3Afocus%2Ca%3Afocus%20%7Bbox-shadow%3A%20none%3Boutline-offset%3A%202px%3Boutline%3A%203px%20solid%20rgba(42%2C%20122%2C%20130%2C%20.75)%3B%7Da%3Afocus%20%7Bborder-bottom%3A%20none%3B%7Da%3Aactive%20%7Bbackground%3A%20%23333%3Bcolor%3A%20%23fff%3B%7Dcode%20%7Bfont-family%3A%20Consolas%2C%20monaco%2C%20monospace%3B-moz-tab-size%3A%204%3Btab-size%3A%204%3Btext-transform%3A%20none%3Bwhite-space%3A%20pre-wrap%3Bcolor%3Abrown%3B%7Dtextarea%20%7Bwidth%3A%20100%25%7Dlegend%20h2%2C%20legend%20h3%20%7Bmargin%3A%200%3B%7Dtable%20%7Bborder-collapse%3A%20collapse%3B%7Dth%2Ctd%20%7Bpadding%3A%2010px%3Bborder%3A2px%20solid%20%232b7a82%3B%7Dtable%20caption%20%7Bfont-weight%3A%20bold%3Btext-align%3A%20left%3Bmargin%3A1em%200%3B%7D%3C%2Fstyle%3E%3Ch1%3EList%20of%20buttons%20on%20this%20page.%3C%2Fh1%3E'%3B%0A%20%20s%2B%3D'%3Cinput%20type%3D%22checkbox%22%20id%3D%22showPotentialProblemsOnly%22%3E%3Clabel%20for%3D%22showPotentialProblemsOnly%22%3EShow%20only%20buttons%20where%20there%20*may*%20be%20issues%20('%20%2B%20issueCount%20%2B%20'%20found)%3C%2Flabel%3E'%3B%0A%20%20s%2B%3D'%20%3Cbutton%20class%3D%22highlightButtonAll%22%20type%3D%22button%22%20aria-pressed%3D%22false%22%3EHighlight%20all%20buttons%20on%20page%3C%2Fbutton%3E'%3B%0A%20%20s%2B%3D'%3Ctable%20border%3D%221%22%20cellpadding%3D%225%22%3E%3Ccaption%3EAll%20buttons%20(%26lt%3Bbutton%26gt%3B%20or%20elements%20with%20role%3D%22button%22)%20on%20this%20page%2C%20the%20accessible%20name%20and%20any%20issues%20found%3C%2Fcaption%3E%3Cthead%3E%3Ctr%20valign%3Dtop%3E%3Cth%3EButton%20type%3C%2Fth%3E%3Cth%20scope%3D%22col%22%3EButton%20text%3C%2Fth%3E%3Cth%20scope%3D%22col%22%3EAccessible%20name%3C%2Fth%3E%3Cth%20scope%3D%22col%22%3ENotes%3C%2Fth%3E%3Cth%3EHighlight%20on%20the%20page%3C%2Fth%3E%3C%2Ftr%3E%3C%2Fthead%3E%3Ctbody%3E'%20%2B%20row%20%2B%20'%3C%2Ftbody%3E%3C%2Ftable%3E'%3B%0A%20%20s%2B%3D'%3Cscript%3Efunction%20showbtns()%7B'%3B%0A%20%20s%2B%3D'var%20refWindow%3Dwindow.opener%3B'%3B%0A%20%20s%2B%3D'var%20highlightButtons%3Ddocument.querySelectorAll(%22.highlightButton%22)%3Bvar%20buttonToHighlight%3BArray.from(highlightButtons).forEach(highlightButton%20%3D%3E%20%7BhighlightButton.addEventListener(%22click%22%2C%20e%20%3D%3E%20%7BbuttonToHighlight%3D%22%5Bdata-button-ref%3D%5C'%22%20%2B%20highlightButton.getAttribute(%22data-button-ref%22)%20%2B%20%22%5C'%5D%22%3Bif%20(highlightButton.getAttribute(%22aria-pressed%22)%3D%3D%3D%22false%22)%20%7BrefWindow.document.querySelector(buttonToHighlight).focus()%3BrefWindow.document.querySelector(buttonToHighlight).style.outline%3D%224px%20dashed%20darkgreen%22%3BrefWindow.document.querySelector(buttonToHighlight).style.outlineOffset%3D%22-4px%22%3BhighlightButton.setAttribute(%22aria-pressed%22%2C%22true%22)%3B%7D%20else%20%7BrefWindow.document.querySelector(buttonToHighlight).style.outline%3D%22%22%3BhighlightButton.setAttribute(%22aria-pressed%22%2C%22false%22)%3B%7D%7D)%3B%7D)%3B'%3B%0A%20%20s%2B%3D'var%20highlightButtonAll%3Ddocument.querySelector(%22.highlightButtonAll%22)%3BhighlightButtonAll.addEventListener(%22click%22%2C%20e%20%3D%3E%20%7Bif%20(highlightButtonAll.getAttribute(%22aria-pressed%22)%3D%3D%3D%22false%22)%20%7BArray.from(highlightButtons).forEach(highlightButton%20%3D%3E%20%7BhighlightButton.setAttribute(%22aria-pressed%22%2C%22false%22)%3BhighlightButton.click()%3B%7D)%3BhighlightButtonAll.setAttribute(%22aria-pressed%22%2C%22true%22)%3B%7D%20else%20%7BArray.from(highlightButtons).forEach(highlightButton%20%3D%3E%20%7BhighlightButton.setAttribute(%22aria-pressed%22%2C%22true%22)%3BhighlightButton.click()%3B%7D)%3BhighlightButtonAll.setAttribute(%22aria-pressed%22%2C%22false%22)%3B%7D%7D)%3B'%3B%0A%20%20s%2B%3D'function%20hideGoodRows()%7BArray.from(trsWithoutIssue).forEach(trWithoutIssue%20%3D%3E%20%7BtrWithoutIssue.setAttribute(%22hidden%22%2C%22hidden%22)%3B%7D)%3B%7Dfunction%20showGoodRows()%7BArray.from(trsWithoutIssue).forEach(trWithoutIssue%20%3D%3E%20%7BtrWithoutIssue.removeAttribute(%22hidden%22)%3B%7D)%3B%7Dvar%20trsWithoutIssue%3Ddocument.querySelectorAll(%22tbody%20tr%3Anot(.issue)%22)%3Bvar%20showProblemCheckbox%3Ddocument.querySelector(%22%23showPotentialProblemsOnly%22)%3BshowProblemCheckbox.addEventListener(%22click%22%2C%20e%20%3D%3E%20%7Bif%20(showProblemCheckbox.checked)%20%7BhideGoodRows()%3B%7D%20else%20%7BshowGoodRows()%3B%7D%7D)%3B'%3B%0A%20%20s%2B%3D'%7Dwindow.addEventListener(%22load%22%2C%20(event)%20%3D%3E%20%7Bshowbtns()%3B%7D)%3B%3C%2Fscript%3E'%3B%0A%20%20s%2B%3D'%3Cscript%3E'%3B%0A%20%20s%2B%3D'var%20dcUrl%20%3D%20%22https%3A%2F%2Flloydi.com%2Fa11y-tools%2Fmarkup-de-crapulator%2Findex.html%3Fmarkup%3D%22%3B'%3B%0A%20%20s%2B%3D'const%20dcs%20%3D%20document.querySelectorAll(%22.decrapulate%22)%3B'%3B%0A%20%20s%2B%3D'Array.from(dcs).forEach(function%20(dc)%20%7B'%3B%0A%20%20s%2B%3D'dc.addEventListener(%22click%22%2C%20e%20%3D%3E%20%7B'%3B%0A%20%20s%2B%3D'var%20m%20%3D%20dc.previousElementSibling.value%3B'%3B%0A%20%20s%2B%3D'm%20%3D%20encodeURIComponent(m)%3B'%3B%0A%20%20s%2B%3D'window.open(dcUrl%20%2B%20m%2C%20%22dcWin%22%2C%20%22height%3D800%2Cwidth%3D1000%22)%3B'%3B%0A%20%20s%2B%3D'%7D)%3B'%3B%0A%20%20s%2B%3D'%7D)%3B'%3B%0A%20%20s%2B%3D'const%20sss%20%3D%20document.querySelectorAll(%22.showSnippet%22)%3B'%3B%0A%20%20s%2B%3D'Array.from(sss).forEach(function%20(ss)%20%7B'%3B%0A%20%20s%2B%3D'ss.addEventListener(%22click%22%2C%20e%20%3D%3E%20%7B'%3B%0A%20%20s%2B%3D'let%20n%20%3D%20ss.nextElementSibling%3B'%3B%0A%20%20s%2B%3D'if%20(ss.getAttribute(%22aria-expanded%22)%3D%3D%3D%22false%22)%20%7B'%3B%0A%20%20s%2B%3D'n.removeAttribute(%22hidden%22)%3B'%3B%0A%20%20s%2B%3D'ss.setAttribute(%22aria-expanded%22%2C%22true%22)%3B'%3B%0A%20%20s%2B%3D'%7D%20else%20%7B'%3B%0A%20%20s%2B%3D'n.setAttribute(%22hidden%22%2C%22hidden%22)%3B'%3B%0A%20%20s%2B%3D'ss.setAttribute(%22aria-expanded%22%2C%22false%22)%3B'%3B%0A%20%20s%2B%3D'%7D'%3B%0A%20%20s%2B%3D'%7D)%3B'%3B%0A%20%20s%2B%3D'%7D)%3B'%3B%0A%0A%20%20s%2B%3D'%3C%2Fscript%3E'%3B%0A%0A%20%20const%20popUpWinButtons%3Dwindow.open(''%2C%20'popUpWinButtons'%2C%20'height%3D800%2Cwidth%3D1000')%3B%0A%20%20popUpWinButtons.document.open()%3B%0A%20%20popUpWinButtons.document.write(s)%3B%0A%20%20popUpWinButtons.document.close()%3B%0A%7D%0AlistButtons()%3B%7D)()) [[4.1.2](https://www.w3.org/TR/WCAG22/#name-role-value)] + Searches for all real buttons on the page, and any element given a `role=button`. + Reports on the visible text, the accessible name (so you can compare side-by-side). + Flags any issues that might affect usage, such as keyboard focusability, Label in Name and more. + Notes any superfluous elements that could be removed. * [🔖anchor for List things with titles bookmarklet](https://a11y-tools.com/bookmarklets/#listtitles) [List things with titles](javascript:(function()%7B'use%20strict'%0Afunction%20listThingsWithTitles()%7B%0A%20%20console.clear()%3B%0A%20%20function%20insertAfter(newNode%2C%20referenceNode)%20%7B%0A%20%20%20%20referenceNode.parentNode.insertBefore(newNode%2C%20referenceNode.nextSibling)%3B%0A%20%20%7D%0A%20%20function%20isHidden(el)%20%7B%0A%20%20%20%20const%20style%3Dwindow.getComputedStyle(el)%3B%0A%20%20%20%20return%20((style.display%20%3D%3D%3D%20'none')%7C%7C(style.opacity%20%3D%3D%3D%200)%7C%7C((style.clipPath%20%3D%3D%3D%20'inset(100%25)')%26%26(style.clip%20%3D%3D%3D%20'rect(1px%2C%201px%2C%201px%2C%201px)'))%7C%7C((style.height%20%3D%3D%3D%20'1px')%26%26(style.width%20%3D%3D%3D%20'1px')%26%26(style.overflow%20%3D%3D%3D%20'hidden')))%3B%0A%20%20%7D%0A%20%20function%20attemptoToUnhide(el)%20%7B%0A%20%20%20%20const%20style%3Dwindow.getComputedStyle(el)%3B%0A%20%20%20%20if%20((style.position%3D%3D%3D%22absolute%22)%26%26(style.overflow%20%3D%3D%3D%20'hidden'))%20%7B%0A%20%20%20%20%20%20el.style.height%3D'auto'%3B%20%0A%20%20%20%20%20%20el.style.width%3D'auto'%3B%0A%20%20%20%20%20%20el.style.position%3D'relative'%3B%0A%20%20%20%20%20%20el.style.overflow%3D'visible'%3B%0A%20%20%20%20%20%20el.style.display%3D'block'%3B%0A%20%20%20%20%20%20el.style.opacity%3D1%3B%0A%20%20%20%20%7D%0A%20%20%20%20if%20((el.getAttribute('hidden')%3D%3D%3D%22%22)%7C%7C(el.getAttribute('hidden')%3D%3D%3D%22hidden%22)%7C%7C(el.getAttribute('hidden')%3D%3D%3D%22true%22))%20%7B%0A%20%20%20%20%20%20el.removeAttribute('hidden')%3B%0A%20%20%20%20%7D%0A%20%20%20%20if%20(style.visibility%20%3D%3D%3D%20'hidden')%20%7B%0A%20%20%20%20%20%20el.style.visibility%3D'visible'%3B%0A%20%20%20%20%7D%0A%20%20%20%20if%20(style.display%20%3D%3D%3D%20'none')%20%7B%0A%20%20%20%20%20%20el.style.display%3D'block'%3B%0A%20%20%20%20%7D%0A%20%20%20%20if%20(style.opacity%20%3D%3D%3D%200)%20%7B%0A%20%20%20%20%20%20el.style.opacity%3D1%3B%0A%20%20%20%20%7D%0A%20%20%7D%0A%20%20let%20s%3D''%3B%0A%20%20let%20row%3D''%3B%0A%20%20const%20elsWithTitles%3Ddocument.querySelectorAll('body%20%5Btitle%5D%2Ciframe')%3B%0A%20%20let%20i%3D1%3B%0A%20%20let%20identCount%3D0%3B%0A%20%20let%20issueCount%3D0%3B%0A%20%20let%20snippet%3D''%3B%0A%20%20let%20isInteractive%3B%0A%20%20let%20consoleOutput%3D''%3B%0A%20%20Array.from(elsWithTitles).forEach(function%20(elWithTitle)%20%7B%0A%20%20%20%20isInteractive%20%3D'No'%3B%0A%20%20%20%20if%20(%0A%20%20%20%20%20%20(elWithTitle.getAttribute('tabindex')%26%26(elWithTitle.getAttribute('tabindex')!%3D%3D'-1'))%7C%7C%0A%20%20%20%20%20%20%20%20(%0A%20%20%20%20%20%20%20%20%20%20(%0A%20%20%20%20%20%20%20%20%20%20%20%20(elWithTitle.tagName%3D%3D%3D'INPUT')%7C%7C%0A%20%20%20%20%20%20%20%20%20%20%20%20(elWithTitle.tagName%3D%3D%3D'BUTTON')%7C%7C%0A%20%20%20%20%20%20%20%20%20%20%20%20(elWithTitle.tagName%3D%3D%3D'TEXTAREA')%7C%7C%0A%20%20%20%20%20%20%20%20%20%20%20%20(elWithTitle.tagName%3D%3D%3D'SELECT')%7C%7C%0A%20%20%20%20%20%20%20%20%20%20%20%20(elWithTitle.tagName%3D%3D%3D'IFRAME')%7C%7C%0A%20%20%20%20%20%20%20%20%20%20%20%20(elWithTitle.tagName%3D%3D%3D'A')%0A%20%20%20%20%20%20%20%20%20%20)%20%26%26%20(%0A%20%20%20%20%20%20%20%20%20%20(elWithTitle.getAttribute('tabindex')!%3D%3D'-1')%26%26%0A%20%20%20%20%20%20%20%20%20%20(!elWithTitle.disabled)%0A%20%20%20%20%20%20%20%20%20%20)%0A%20%20%20%20%20%20%20%20)%0A%20%20%20%20%20%20)%20%7B%0A%20%20%20%20%20%20isInteractive%3D'Yes'%3B%0A%20%20%20%20%7D%0A%20%20%20%20const%20wrap%20%3D%20document.createElement('div')%3B%0A%20%20%20%20wrap.appendChild(elWithTitle.cloneNode(true))%3B%0A%20%20%20%20snippet%20%3D%20wrap.innerHTML%3B%0A%20%20%20%20let%20notes%3D''%3B%0A%20%20%20%20let%20warn%3Dfalse%3B%0A%20%20%20%20let%20err%3Dfalse%3B%0A%20%20%20%20elWithTitle.setAttribute('data-title-ref'%2C%20i)%3B%0A%20%20%0A%20%20%20%20let%20titleContainsImage%3Dfalse%3B%0A%20%20%20%20const%20images%3DelWithTitle.querySelectorAll('img')%3B%0A%20%20%20%20titleContainsImage%3Dimages.length%20%3E%200%3B%0A%20%20%20%20if%20(titleContainsImage)%20%7B%0A%20%20%20%20%20%20const%20imageText%3D''%3B%0A%20%20%20%20%20%20Array.from(images).forEach(function%20(image)%20%7B%0A%20%20%20%20%20%20%20%20const%20newSpan%3Ddocument.createElement(%22SPAN%22)%3B%0A%20%20%20%20%20%20%20%20newSpan.setAttribute('class'%2C%20'visually-hidden')%3B%0A%20%20%20%20%20%20%20%20newSpan.setAttribute('style'%2C%20'clip-path%3A%20inset(100%25)%3Bclip%3A%20rect(1px%2C%201px%2C%201px%2C%201px)%3Bheight%3A%201px%3Boverflow%3A%20hidden%3Bposition%3A%20absolute%3Bwhite-space%3A%20nowrap%3Bwidth%3A%201px%3B')%3B%0A%20%20%20%20%20%20%20%20newSpan.setAttribute('aria-hidden'%2C%20'true')%3B%0A%20%20%20%20%20%20%20%20if%20(image.getAttribute('alt'))%20%7B%0A%20%20%20%20%20%20%20%20%20%20newSpan.textContent%3D'%20'%20%2B%20image.getAttribute('alt')%20%2B%20'%20'%3B%0A%20%20%20%20%20%20%20%20%7D%20else%20%7B%0A%20%20%20%20%20%20%20%20%20%20newSpan.textContent%3D'**%20Image%20with%20empty%20or%20missing%20alt%20**'%3B%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20insertAfter(newSpan%2C%20image)%3B%0A%20%20%20%20%20%20%7D)%3B%0A%20%20%20%20%7D%0A%20%20%0A%20%20%20%20let%20tc%3DelWithTitle.textContent%3B%0A%20%20%0A%20%20%20%20if%20(elWithTitle.tagName%3D%3D%3D'IMG')%20%7B%0A%20%20%20%20%20%20tc%3DelWithTitle.getAttribute('alt')%3B%0A%20%20%20%20%7D%0A%20%20%20%20let%20accName%3Dtc%3B%0A%20%20%20%20let%20titleText%3DelWithTitle.getAttribute('title')%3B%0A%20%20%0A%20%20%20%20if%20(accName%3D%3D%3Dnull)%20%7B%0A%20%20%20%20%20%20accName%3D''%3B%0A%20%20%20%20%7D%0A%20%20%20%20if%20(titleText%3D%3D%3Dnull)%20%7B%0A%20%20%20%20%20%20titleText%3D''%3B%0A%20%20%20%20%7D%0A%20%20%0A%20%20%20%20if%20(isHidden(elWithTitle))%20%7B%0A%20%20%20%20%20%20%20attemptoToUnhide(elWithTitle)%3B%0A%20%20%20%20%20%20%20if%20(isHidden(elWithTitle))%20%7B%0A%20%20%20%20%20%20%20%20%20notes%2B%3D'-%20Element%20is%20hidden%3Cbr%3E'%3B%0A%20%20%20%20%20%20%20%7D%20else%20%7B%0A%20%20%20%20%20%20%20%20notes%2B%3D'-%20Element%20*was*%20hidden%20but%20has%20been%20temporarily%20revealed%20on%20the%20page%3Cbr%3E'%3B%0A%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%7D%0A%20%20%20%20if%20(err)%20%7Bwarn%3Dfalse%7D%0A%20%20%20%20row%2B%3D'%3Ctr'%3B%0A%20%20%20%20row%2B%3D'%20data-title-ref%3D%22'%20%2B%20i%20%2B%20'%22'%3B%0A%20%20%20%20if%20(accName.trim()%20%3D%3D%3D%20titleText.trim())%20%7B%0A%20%20%20%20%20%20warn%3Dfalse%3B%0A%20%20%20%20%20%20err%3Dfalse%3B%0A%20%20%20%20%7D%20else%20%7B%0A%20%20%20%20%20%20if%20(elWithTitle.tagName!%3D%3D%22IFRAME%22)%20%7B%0A%20%20%20%20%20%20%20%20warn%3Dfalse%3B%0A%20%20%20%20%20%20%20%20err%3Dtrue%3B%0A%20%20%20%20%20%20%20%20identCount%2B%2B%3B%0A%20%20%20%20%20%20%20%20notes%2B%3D'-%20The%20title%20text%20differs%20from%20the%20on-screen%20text.%3Cbr%3E'%3B%0A%20%20%20%20%20%20%20%20if%20(isInteractive%3D%3D%3D%22Yes%22)%20%7B%0A%20%20%20%20%20%20%20%20%20%20notes%2B%3D'-%20This%20is%20an%20interactive%20element%2C%20but%20the%20title%20attribute%20*may*%20be%20ignored%20by%20assistive%20tech%20(depending%20on%20user%20settings).%3Cbr%3E'%3B%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20if%20(isInteractive%3D%3D%3D%22No%22)%20%7B%0A%20%20%20%20%20%20%20%20%20%20notes%2B%3D'-%20As%20this%20is%20a%20non-interactive%20element%2C%20the%20title%20attribute%20will%20be%20ignored%20by%20assistive%20tech.%3Cbr%3E'%3B%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%20%20%0A%20%20%20%20if%20(elWithTitle.tagName%3D%3D%3D%22IFRAME%22)%20%7B%0A%20%20%20%20%20%20if%20(titleText.trim()%3D%3D%3D'')%20%7B%0A%20%20%20%20%20%20%20%20warn%3Dfalse%3B%0A%20%20%20%20%20%20%20%20err%3Dtrue%3B%0A%20%20%20%20%20%20%20%20identCount%2B%2B%3B%0A%20%20%20%20%20%20%20%20notes%2B%3D'An%20%3Ccode%3Eiframe%3C%2Fcode%3E%20MUST%20have%20a%20title%20attribute.%3Cbr%3E'%3B%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%20%20%20%20if%20(warn)%20%7B%0A%20%20%20%20%20%20row%2B%3D'%20class%3D%22warn%22'%3B%0A%20%20%20%20%7D%0A%20%20%20%20if%20(err)%20%7B%0A%20%20%20%20%20%20row%2B%3D'%20class%3D%22issue%20err%22'%3B%0A%20%20%20%20%7D%0A%20%20%20%20row%2B%3D'%3E'%3B%0A%20%20%20%20row%2B%3D'%3Ctd%3E'%20%2B%20tc%20%2B%20'%3C%2Ftd%3E'%3B%0A%20%20%20%20row%2B%3D'%3Ctd%3E'%20%2B%20titleText%20%2B%20'%3C%2Ftd%3E'%3B%0A%20%20%20%20if%20(accName.trim()%20%3D%3D%3D%20titleText.trim())%20%7B%0A%20%20%20%20%20%20if%20(accName.trim()!%3D%3D'')%20%7B%0A%20%20%20%20%20%20%20%20notes%2B%3D'-%20title%20text%20is%20identical%20to%20on-screen%20text%20(superfluous%2C%20but%20not%20harmful).%3Cbr%3E'%3B%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%20%20%20%20if%20(isInteractive%3D%3D%3D%22No%22)%20%7B%0A%20%20%20%20%20%20notes%2B%3D'-%20This%20is%20not%20an%20interactive%2Ffocusable%20element.%20The%20title%20attribute%20will%20not%20be%20available%20to%20anyone%20expect%20mouse%20users%20(touch%20screen%2C%20keyboard-only%2C%20assistive%20tech%20users%20all%20excluded).%3Cbr%3E'%3B%0A%20%20%20%20%7D%0A%20%20%20%20row%2B%3D'%3Ctd%3E'%20%2B%20isInteractive%20%2B%20'%3C%2Ftd%3E'%3B%0A%20%20%20%20row%2B%3D'%3Ctd%3E'%3B%0A%20%20%20%20if%20(warn)%20%7B%0A%20%20%20%20%20%20row%2B%3D'%3Cdiv%20class%3D%22issues%22%3EPossible%20title%20issue%20found%20with%20this%20element%3C%2Fdiv%3E'%3B%0A%20%20%20%20%7D%0A%20%20%20%20if%20(err)%20%7B%0A%20%20%20%20%20%20row%2B%3D'%3Cdiv%20class%3D%22issues%22%3EDefinite%20title%20issue%20found%20with%20this%20element%3C%2Fdiv%3E'%3B%0A%20%20%20%20%7D%0A%20%20%20%20consoleOutput%3D'Element%20with%20title%20%5C''%20%2B%20tc.trim()%20%2B%20'%5C'%3A%5Cn'%2Bnotes%2B'Markup%20with%20issue%3A%5Cn'%2Bsnippet%2B'%5Cn---------------%5Cn'%3B%0A%20%20%20%20row%2B%3Dnotes%20%2B%20'%3Cbr%3E%3Cbutton%20class%3D%22showSnippet%22%20type%3D%22button%22%20aria-label%3D%22Show%20markup%20snippet%22%20aria-expanded%3D%22false%22%3E%3Ccode%3E%26lt%3B%2F%26gt%3B%3C%2Fcode%3E%3C%2Fbutton%3E%3Cdiv%20class%3D%22snippet%22%20hidden%3E%3Clabel%20for%3D%22snip'%2B%20i%20%2B%20'%22%3EMarkup%20snippet%3C%2Flabel%3E%3Ctextarea%20id%3D%22snip'%2B%20i%20%2B%20'%22%20aria-label%3D%22Markup%20snippet%20for%20this%20node%22%3E'%20%2B%20snippet%20%2B%20'%3C%2Ftextarea%3E%3Cbutton%20type%3D%22button%22%20class%3D%22decrapulate%22%20aria-label%3D%22De-crapulate%20this%20markup%20snippet%22%3EDe-crapulate%3C%2Fbutton%3E%3C%2Fdiv%3E%3C%2Ftd%3E'%3B%0A%20%20%20%20row%2B%3D'%3Ctd%3E%3Cbutton%20data-title-ref%3D%22'%20%2B%20i%20%2B%20'%22%20class%3D%22highlightButton%22%20type%3D%22button%22%20aria-pressed%3D%22false%22%20aria-label%3D%22Highlight%20this%20issue%20on%20the%20page%20visually%22%3EShow%3C%2Fbutton%3E%3C%2Ftd%3E'%3B%0A%20%20%20%20row%2B%3D'%3C%2Ftr%3E'%3B%0A%20%20%20%20i%2B%2B%3B%0A%20%20%20%20if%20(warn%20%7C%7C%20err)%20%7B%0A%20%20%20%20%20%20issueCount%2B%2B%3B%0A%20%20%20%20%7D%0A%20%20%20%20if%20(err)%20%7B%0A%20%20%20%20%20%20consoleOutput%3DconsoleOutput.split('%3Ccode%3E').join('%60').split('%3C%2Fcode%3E').join('%60').split('%3Cbr%3E').join('%5Cn').split('%5Cn%5Cn').join('%5Cn')%3B%0A%20%20%20%20%20%20console.log(consoleOutput)%3B%0A%20%20%20%20%7D%0A%20%20%7D)%3B%0A%20%20s%3D'%3Cstyle%3E%5Baria-pressed%3Dtrue%5D%7Bcolor%3Awhite%3Bbackground%3Arebeccapurple%3B%7Ddiv.issues%7Bfont-weight%3Abold%3B%7D%3Btextarea%20%7Bmargin%3A5px%200%3B%7D.snippet%20label%20%7Bfont-weight%3Abold%3Bfont-size%3A0.8em%3Bcolor%3Ablack%3B%7D.snippet%7Bbackground%3A%23efefef%3Boutline%3A1px%20solid%20%23666%3Bpadding%3A5px%3Bmargin-top%3A5px%3B%7D.checkDiffs%7Bbackground%3APapayaWhip%3B%7D.checkDiffs%3Aafter%7Bcontent%3A%22Accessible%20name%20differs%22%3Bcolor%3A%23a50202%3Bfont-weight%3Abold%3Bfont-size%3A10px%3Bdisplay%3Ablock%7D.warn%20%7Bbackground%3Alightyellow%3B%7D.err%20%7Bbackground%3APapayaWhip%3Bcolor%3A%23a50202%3B%7D.visually-hidden%2C.a11y%2C.visuallyhidden%2C.sr-text%2C.sr-only%20%7Bclip-path%3A%20inset(100%25)%3Bclip%3A%20rect(1px%2C%201px%2C%201px%2C%201px)%3Bheight%3A%201px%3Boverflow%3A%20hidden%3Bposition%3A%20absolute%3Bwhite-space%3A%20nowrap%3Bwidth%3A%201px%3B%7D*%20%7B-webkit-box-sizing%3A%20border-box%3Bbox-sizing%3A%20border-box%3B%7Dhtml%20%7B%2F*border%3A%20.75em%20solid%20%23fff%3B*%2Fmin-height%3A%20100vh%3B%7Dbody%20%7Bbackground%3A%20%23f7f7f5%3Bcolor%3A%20%23333%3Bfont%3A%20400%20105%25%2F1.4%20%22Work%20Sans%22%2C%20sans-serif%3Bmargin%3A%201.5em%20auto%3Bmax-width%3A%2054em%3Bwidth%3A%2090%25%3B%7Da%3AelWithTitle%2Ca%3Avisited%20%7Bborder-bottom%3A%201px%20solid%20rgba(42%2C%20122%2C%20130%2C%20.5)%3Bcolor%3A%20%232b7a82%3Btext-decoration%3A%20none%3B%7Da%3Ahover%20%7Bborder-bottom%3A%202px%20solid%3Bcolor%3A%20%231e565c%3B%7Dbutton%3Afocus%2Ca%3Afocus%20%7Bbox-shadow%3A%20none%3Boutline-offset%3A%202px%3Boutline%3A%203px%20solid%20rgba(42%2C%20122%2C%20130%2C%20.75)%3B%7Da%3Afocus%20%7Bborder-bottom%3A%20none%3B%7Da%3Aactive%20%7Bbackground%3A%20%23333%3Bcolor%3A%20%23fff%3B%7Dcode%20%7Bfont-family%3A%20Consolas%2C%20monaco%2C%20monospace%3B-moz-tab-size%3A%204%3Btab-size%3A%204%3Btext-transform%3A%20none%3Bwhite-space%3A%20pre-wrap%3Bcolor%3Abrown%3B%7Dtextarea%20%7Bwidth%3A%20100%25%7Dlegend%20h2%2C%20legend%20h3%20%7Bmargin%3A%200%3B%7Dtable%20%7Bborder-collapse%3A%20collapse%3B%7Dth%2Ctd%20%7Bpadding%3A%2010px%3Bborder%3A2px%20solid%20%232b7a82%3B%7Dtable%20caption%20%7Bfont-weight%3A%20bold%3Btext-align%3A%20left%3Bmargin%3A1em%200%3B%7D%3C%2Fstyle%3E%3Ch1%3EList%20of%20elements%20with%20titles%20on%20this%20page.%3C%2Fh1%3E'%3B%0A%20%20if%20(identCount%3E0)%20%7Bs%2B%3D'%3Cinput%20type%3D%22checkbox%22%20id%3D%22showPotentialProblemsOnly%22%3E%3Clabel%20for%3D%22showPotentialProblemsOnly%22%3EShow%20only%20elements%20with%20definite%20title%20issues('%20%2B%20issueCount%20%2B%20').%3C%2Flabel%3E%3Cbr%3E'%3B%2F*s%2B%3DidentCount%20%2B%20'%20elements%20with%20identical%20titles%20were%20found.'%3B*%2F%7D%0A%20%20s%2B%3D'%20%3Cbutton%20class%3D%22highlightButtonAll%22%20type%3D%22button%22%20aria-pressed%3D%22false%22%3EHighlight%20all%20elements%20with%20%60title%60%20on%20page%3C%2Fbutton%3E'%3B%0A%20%20s%2B%3D'%3Ctable%20border%3D%221%22%20cellpadding%3D%225%22%3E%3Ccaption%3EAll%20things%20with%20title%20attributes%20on%20this%20page%3C%2Fcaption%3E%3Cthead%3E%3Ctr%20valign%3Dtop%3E%3Cth%20scope%3D%22col%22%3EOn-screen%20text%3C%2Fth%3E%3Cth%3ETitle%20text%3C%2Fth%3E%3Cth%3EInteractive%3F%3C%2Fth%3E%3Cth%20scope%3D%22col%22%3ENotes%3C%2Fth%3E%3Cth%3EHighlight%20on%20the%20page%3C%2Fth%3E%3C%2Ftr%3E%3C%2Fthead%3E%3Ctbody%3E'%20%2B%20row%20%2B%20'%3C%2Ftbody%3E%3C%2Ftable%3E'%3B%0A%20%20s%2B%3D'%3Cscript%3Efunction%20showElsWithTitles()%7B'%3B%0A%20%20s%2B%3D'var%20refWindow%3Dwindow.opener%3B'%3B%0A%20%20s%2B%3D'var%20highlightButtons%3Ddocument.querySelectorAll(%22.highlightButton%22)%3Bvar%20titleToHighlight%3BArray.from(highlightButtons).forEach(highlightButton%20%3D%3E%20%7BhighlightButton.addEventListener(%22click%22%2C%20e%20%3D%3E%20%7BtitleToHighlight%3D%22%5Bdata-title-ref%3D%5C'%22%20%2B%20highlightButton.getAttribute(%22data-title-ref%22)%20%2B%20%22%5C'%5D%22%3Bif%20(highlightButton.getAttribute(%22aria-pressed%22)%3D%3D%3D%22false%22)%20%7BrefWindow.document.querySelector(titleToHighlight).setAttribute(%22tabindex%22%2C%22-1%22)%3BrefWindow.document.querySelector(titleToHighlight).focus()%3BrefWindow.document.querySelector(titleToHighlight).style.outline%3D%224px%20dashed%20rebeccapurple%22%3BrefWindow.document.querySelector(titleToHighlight).style.outlineOffset%3D%22-4px%22%3BhighlightButton.setAttribute(%22aria-pressed%22%2C%22true%22)%3B%7D%20else%20%7BrefWindow.document.querySelector(titleToHighlight).style.outline%3D%22%22%3BhighlightButton.setAttribute(%22aria-pressed%22%2C%22false%22)%3B%7D%7D)%3B%7D)%3B'%3B%0A%20%20s%2B%3D'var%20highlightButtonAll%3Ddocument.querySelector(%22.highlightButtonAll%22)%3BhighlightButtonAll.addEventListener(%22click%22%2C%20e%20%3D%3E%20%7Bif%20(highlightButtonAll.getAttribute(%22aria-pressed%22)%3D%3D%3D%22false%22)%20%7BArray.from(highlightButtons).forEach(highlightButton%20%3D%3E%20%7BhighlightButton.setAttribute(%22aria-pressed%22%2C%22false%22)%3BhighlightButton.click()%3B%7D)%3BhighlightButtonAll.setAttribute(%22aria-pressed%22%2C%22true%22)%3B%7D%20else%20%7BArray.from(highlightButtons).forEach(highlightButton%20%3D%3E%20%7BhighlightButton.setAttribute(%22aria-pressed%22%2C%22true%22)%3BhighlightButton.click()%3B%7D)%3BhighlightButtonAll.setAttribute(%22aria-pressed%22%2C%22false%22)%3B%7D%7D)%3B'%3B%0A%20%20s%2B%3D'function%20hideGoodRows()%7BArray.from(trsWithoutIssue).forEach(trWithoutIssue%20%3D%3E%20%7BtrWithoutIssue.setAttribute(%22hidden%22%2C%22hidden%22)%3B%7D)%3B%7Dfunction%20showGoodRows()%7BArray.from(trsWithoutIssue).forEach(trWithoutIssue%20%3D%3E%20%7BtrWithoutIssue.removeAttribute(%22hidden%22)%3B%7D)%3B%7Dvar%20trsWithoutIssue%3Ddocument.querySelectorAll(%22tbody%20tr%3Anot(.issue)%22)%3Bvar%20showProblemCheckbox%3Ddocument.querySelector(%22%23showPotentialProblemsOnly%22)%3BshowProblemCheckbox.addEventListener(%22click%22%2C%20e%20%3D%3E%20%7Bif%20(showProblemCheckbox.checked)%20%7BhideGoodRows()%3B%7D%20else%20%7BshowGoodRows()%3B%7D%7D)%3B'%3B%0A%20%20s%2B%3D'%7Dwindow.addEventListener(%22load%22%2C%20(event)%20%3D%3E%20%7BshowElsWithTitles()%3B%7D)%3B%3C%2Fscript%3E'%3B%0A%20%20s%2B%3D'%3Cscript%3E'%3B%0A%20%20s%2B%3D'var%20dcUrl%20%3D%20%22https%3A%2F%2Flloydi.com%2Fa11y-tools%2Fmarkup-de-crapulator%2Findex.html%3Fmarkup%3D%22%3B'%3B%0A%20%20s%2B%3D'const%20dcs%20%3D%20document.querySelectorAll(%22.decrapulate%22)%3B'%3B%0A%20%20s%2B%3D'Array.from(dcs).forEach(function%20(dc)%20%7B'%3B%0A%20%20s%2B%3D'dc.addEventListener(%22click%22%2C%20e%20%3D%3E%20%7B'%3B%0A%20%20s%2B%3D'var%20m%20%3D%20dc.previousElementSibling.value%3B'%3B%0A%20%20s%2B%3D'm%20%3D%20encodeURIComponent(m)%3B'%3B%0A%20%20s%2B%3D'window.open(dcUrl%20%2B%20m%2C%20%22dcWin%22%2C%20%22height%3D800%2Cwidth%3D1000%22)%3B'%3B%0A%20%20s%2B%3D'%7D)%3B'%3B%0A%20%20s%2B%3D'%7D)%3B'%3B%0A%20%20s%2B%3D'const%20sss%20%3D%20document.querySelectorAll(%22.showSnippet%22)%3B'%3B%0A%20%20s%2B%3D'Array.from(sss).forEach(function%20(ss)%20%7B'%3B%0A%20%20s%2B%3D'ss.addEventListener(%22click%22%2C%20e%20%3D%3E%20%7B'%3B%0A%20%20s%2B%3D'let%20n%20%3D%20ss.nextElementSibling%3B'%3B%0A%20%20s%2B%3D'if%20(ss.getAttribute(%22aria-expanded%22)%3D%3D%3D%22false%22)%20%7B'%3B%0A%20%20s%2B%3D'n.removeAttribute(%22hidden%22)%3B'%3B%0A%20%20s%2B%3D'ss.setAttribute(%22aria-expanded%22%2C%22true%22)%3B'%3B%0A%20%20s%2B%3D'%7D%20else%20%7B'%3B%0A%20%20s%2B%3D'n.setAttribute(%22hidden%22%2C%22hidden%22)%3B'%3B%0A%20%20s%2B%3D'ss.setAttribute(%22aria-expanded%22%2C%22false%22)%3B'%3B%0A%20%20s%2B%3D'%7D'%3B%0A%20%20s%2B%3D'%7D)%3B'%3B%0A%20%20s%2B%3D'%7D)%3B'%3B%0A%20%20s%2B%3D'%3C%2Fscript%3E'%3B%0A%20%20%0A%20%20const%20popUpWinTitles%3Dwindow.open(''%2C%20'popUpWinTitles'%2C%20'height%3D800%2Cwidth%3D1000')%3B%0A%20%20popUpWinTitles.document.open()%3B%0A%20%20popUpWinTitles.document.write(s)%3B%0A%20%20popUpWinTitles.document.close()%3B%0A%7D%0AlistThingsWithTitles()%3B%7D)()) + Finds all elements that have a `title` attribute. + Warns where the `title` attribute is a duplicate of the visible text (can be filtered out from results). + Highlights where the title attribute is different from the on-screen text. + Automatically `console.log`s a phrase for each instance of an element with different `title` content that you can copy/paste for reporting purposes. #### Non a11y-specific tools, just generally useful dev tools (one hopes) ##### DOM Manipulation Tools * [🔖anchor for Attribute Stripper bookmarklet](https://a11y-tools.com/bookmarklets/#attributestripper) [Attribute Stripper](javascript:(function()%7Bfunction%20stripAttribs()%7Blet%20t%3D0%2Ce%3Dprompt(%22What%20attribute(s)%20do%20you%20want%20to%20remove%20(comma-separated)%22)%2Co%3De.split(%22%2C%22)%3Bo.forEach(e%3D%3E%7Blet%20o%3Ddocument.querySelectorAll(%22%5B%22%2Be%2B%22%5D%22)%3BArray.from(o).forEach(o%3D%3E%7Bo.removeAttribute(e)%2Cconsole.log(%22Stripped%20%60%22%2Be%2B%22%60%20attribute%20from%3A%20%22%2Co)%2Ct%2B%2B%7D)%7D)%2C0%3D%3D%3Dt%3Falert(%22No%20elements%20found%20that%20have%20attributes%20you%20provided%22)%3Aalert(t%2B%22%20elements%20found%20that%20have%20attributes%20you%20provided.%20See%20log%20for%20more%20details.%22)%7DstripAttribs()%7D)()) New Dec 2024 + Enter any attributes you want to strip out (comma-separated). + Well ... then they attributes are stripped. + That's basically it. I mean, not sure what else I can add. + 🚨 NOTE: This is destructive, there is no 'undo' feature (just reload page). * [🔖anchor for Element Stripper bookmarklet](https://a11y-tools.com/bookmarklets/#elementstripper) [Element Stripper](javascript:(function()%7Bfunction%20removeEls()%7Blet%20e%3D0%2Cl%3Dprompt(%22What%20HTML%20element%3F%20%5BTip%3A%20any%20valid%20CSS%20selector%20will%20work%5D%22)%3Bvar%20o%3Ddocument.querySelectorAll(l)%3Bconsole.clear()%2CArray.from(o).forEach(l%3D%3E%7Bconsole.log(%22Removed%3A%20%22%2Cl)%2Cl.remove()%2Ce%2B%2B%7D)%2C0%3D%3D%3De%3Falert(%22No%20elements%20found%20that%20match%20the%20selector%20%22%2Bl)%3Aalert(e%2B%22%20elements%20found%20that%20match%20the%20selector%20%22%2Bl%2B%22.%20See%20log%20for%20more%20details.%22)%7DremoveEls()%7D)()) New Dec 2024 + Enter HTML element (or any other valid CSS selector). + Poof! They're all removed from the page!. + 🚨 NOTE: This is destructive, there is no 'undo' feature (just reload page). * [🔖anchor for Node Killer bookmarklet](https://a11y-tools.com/bookmarklets/#nodekiller) [Node Killer](javascript:(function()%7Bconst%20createPoofSound%3D()%3D%3E%7Blet%20e%3Dnew(window.AudioContext%7C%7Cwindow.webkitAudioContext)%3Breturn()%3D%3E%7Blet%20t%3De.createOscillator()%2Cn%3De.createGain()%3Bt.connect(n)%2Cn.connect(e.destination)%2Ct.frequency.setValueAtTime(400%2Ce.currentTime)%2Ct.frequency.exponentialRampToValueAtTime(50%2Ce.currentTime%2B.1)%2Cn.gain.setValueAtTime(0%2Ce.currentTime)%2Cn.gain.linearRampToValueAtTime(.3%2Ce.currentTime%2B.02)%2Cn.gain.exponentialRampToValueAtTime(.01%2Ce.currentTime%2B.1)%2Ct.start(e.currentTime)%2Ct.stop(e.currentTime%2B.1)%7D%7D%2CcreateInfoPanel%3D()%3D%3E%7Blet%20e%3Ddocument.createElement(%22div%22)%3Breturn%20e.style.cssText%3D%60position%3A%20fixed%3Bbottom%3A%2020px%3Bleft%3A%2020px%3Bbackground%3A%20rgba(30%2C%200%2C%200%2C%200.8)%3Bcolor%3A%20%23fff%3Bpadding%3A%2010px%3Bborder-radius%3A%205px%3Bfont-family%3A%20monospace%3Bz-index%3A%2010000%3Bpointer-events%3A%20none%3Bmax-width%3A%2080%25%3Bword-wrap%3A%20break-word%3B%60%2Ce.id%3D%22infoPanel%22%2Ce.setAttribute(%22role%22%2C%22status%22)%2Cdocument.body.appendChild(e)%2Ce%7D%2CcreateStatusPanel%3D()%3D%3E%7Blet%20e%3Ddocument.createElement(%22div%22)%3Breturn%20e.setAttribute(%22id%22%2C%22zapperPanel%22)%2Ce.style.cssText%3D%60position%3A%20fixed%3Btop%3A%2020px%3Bright%3A%2020px%3Bbackground%3A%20rgba(60%2C%200%2C%200%2C%200.8)%3Bcolor%3A%20%23fff%3Bpadding%3A%2015px%3Bborder-radius%3A%205px%3Bfont-family%3A%20monospace%3Bz-index%3A%2010000%3Bpointer-events%3A%20none%3Bmax-width%3A%20300px%3Bword-wrap%3A%20break-word%3B%60%2Cdocument.body.appendChild(e)%2Ce%7D%2CcreateSmokeEffect%3D(e%2Ct%2Cn%2Co)%3D%3E%7Blet%20r%3Dn*o%2Ci%3DMath.min(Math.max(Math.floor(15*Math.sqrt(r)%2F100)%2C15)%2C50)%2Ca%3DMath.min(Math.max(Math.sqrt(r)%2F10%2C10)%2C30)%2Cl%3DMath.min(Math.max(Math.min(n%2Co)%2F2%2C50)%2C200)%3Bfor(let%20s%3D0%3Bs%3Ci%3Bs%2B%2B)%7Blet%20p%3Ddocument.createElement(%22div%22)%3Bp.style.cssText%3D%60position%3A%20fixed%3Bleft%3A%20%24%7Be%7Dpx%3Btop%3A%20%24%7Bt%7Dpx%3Bwidth%3A%20%24%7Ba%7Dpx%3Bheight%3A%20%24%7Ba%7Dpx%3Bbackground%3A%20rgba(128%2C%20128%2C%20128%2C%200.5)%3Bborder-radius%3A%2050%25%3Bpointer-events%3A%20none%3Bz-index%3A%209999%3B%60%2Cdocument.body.appendChild(p)%3Blet%20d%3Ds%2Fi*2*Math.PI%2Cu%3Dl%2F50*(2%2B2*Math.random())%2Cm%3DMath.cos(d)*u%2Cc%3DMath.sin(d)*u%2C%24%3D.5%2Cf%3D1%2Cg%3D.02*(200%2Fl)%2Cv%3D.05*(l%2F200)%2Ch%3D()%3D%3E%7Bif(%24%3C%3D0)%7Bp.remove()%3Breturn%7Dlet%20e%3DparseFloat(p.style.left)%2Ct%3DparseFloat(p.style.top)%3Bp.style.left%3D%60%24%7Be%2Bm%7Dpx%60%2Cp.style.top%3D%60%24%7Bt%2Bc%7Dpx%60%2C%24-%3Dg%2Cf%2B%3Dv%2Cp.style.opacity%3D%24%2Cp.style.transform%3D%60scale(%24%7Bf%7D)%60%2CrequestAnimationFrame(h)%7D%3BrequestAnimationFrame(h)%7D%7D%2CgetXPath%3De%3D%3E%7Bif(!e)return%22%22%3Bif(e.id)return%60%2F%2F*%5B%40id%3D%22%24%7Be.id%7D%22%5D%60%3Blet%20t%3D%5B%5D%3Bfor(%3Be%26%26e.nodeType%3D%3D%3DNode.ELEMENT_NODE%3B)%7Blet%20n%3De.nodeName.toLowerCase()%2Co%3De%2Cr%3D1%3Bfor(%3Bo%3Do.previousSibling%3B)o.nodeType%3D%3D%3DNode.ELEMENT_NODE%26%26o.nodeName%3D%3D%3De.nodeName%26%26r%2B%2B%3Br%3E1%26%26(n%2B%3D%60%5B%24%7Br%7D%5D%60)%2Ct.unshift(n)%2Ce%3De.parentNode%7Dreturn%60%2F%24%7Bt.join(%22%2F%22)%7D%60%7D%2CinitElementZapper%3D()%3D%3E%7Blet%20e%3DcreateInfoPanel()%2Ct%3DcreateStatusPanel()%2Cn%3DcreatePoofSound()%2Co%3Dnull%2Cr%3D!0%2Ci%3D!0%2Ca%3D!0%2Cl%3D%7Bkeydown%3Anull%2Cmouseover%3Anull%2Cmouseout%3Anull%2Cclick%3Anull%7D%2Cs%3D()%3D%3E%7Bif(!i)%7Bt.style.display%3D%22none%22%3Breturn%7Dt.style.display%3D%22block%22%2Ct.innerHTML%3D%60Element%20Zapper%20Controls%3A%3Cbr%3E-%20Hover%20over%20elements%3Cbr%3E-%20Click%20to%20zap%3Cbr%3E-%20ALT%20%2B%20Click%20%2F%20ALT%20%2B%20ENTER%20%3D%20zap%20all%20sibling%20elements%3Cbr%3E-%20Arrow%20keys%20to%20navigate%3Cbr%3E-%20'S'%20to%20toggle%20sound%20(%24%7Br%3F%22ON%22%3A%22OFF%22%7D)%3Cbr%3E-%20'H'%20to%20toggle%20help%20panel%60%7D%3Bs()%3Blet%20p%3Ddocument.createElement(%22style%22)%3Bp.textContent%3D%60.element-zapper-hover%20%7Boutline%3A%204px%20dashed%20black%20!important%3Bbox-shadow%3A%200%200%200%202px%20white%20!important%3Boutline-offset%3A%20-2px%20!important%3B%7D%60%2Cdocument.head.appendChild(p)%3Blet%20d%3Dn%3D%3E!!n%26%26n!%3D%3De%26%26n!%3D%3Dt%26%26(o%26%26o.classList.remove(%22element-zapper-hover%22)%2C(o%3Dn).classList.add(%22element-zapper-hover%22)%2Ce.textContent%3DgetXPath(n)%2C!0)%2Cu%3D(i%2Ca)%3D%3E%7Bif(!i%7C%7Ci%3D%3D%3De%7C%7Ci%3D%3D%3Dt)return%3Blet%20l%3Di.getBoundingClientRect()%2Cs%3Dl.left%2Bl.width%2F2%2Cp%3Dl.top%2Bl.height%2F2%3Br%26%26n()%2CcreateSmokeEffect(s%2Cp%2Cl.width%2Cl.height)%2CsetTimeout(()%3D%3E%7Bif(a.altKey)%7Blet%20t%3Di.parentElement%3Bt%26%26Array.from(t.children).filter(e%3D%3Ee!%3D%3Di).forEach(e%3D%3E%7BcreateSmokeEffect(e.getBoundingClientRect().left%2Be.getBoundingClientRect().width%2F2%2Ce.getBoundingClientRect().top%2Be.getBoundingClientRect().height%2F2%2Ce.getBoundingClientRect().width%2Ce.getBoundingClientRect().height)%2Ce.remove()%7D)%7Delse%20i.remove()%3Be.textContent%3D%22%22%2Co%3Dnull%7D%2C100)%7D%2Cm%3D()%3D%3E%7Ba%3D!1%2Cdocument.removeEventListener(%22keydown%22%2Cl.keydown%2C!0)%2Cdocument.removeEventListener(%22mouseover%22%2Cl.mouseover)%2Cdocument.removeEventListener(%22mouseout%22%2Cl.mouseout)%2Cdocument.removeEventListener(%22click%22%2Cl.click)%2Co%26%26o.classList.remove(%22element-zapper-hover%22)%2Ce.remove()%2Ct.remove()%3Blet%20n%3Ddocument.head.querySelector(%22style%5Bdata-zapper-style%5D%22)%3Bn%26%26n.remove()%7D%2Cc%3De%3D%3E%7Bif(%22q%22%3D%3D%3De.key.toLowerCase())%7Bm()%2Ce.preventDefault()%2Ce.stopPropagation()%3Breturn%7Dif(%22s%22%3D%3D%3De.key.toLowerCase())%7Br%3D!r%2Cs()%2Ce.preventDefault()%2Ce.stopPropagation()%3Breturn%7Dif(%22h%22%3D%3D%3De.key.toLowerCase())%7Bi%3D!i%2Cs()%2Ce.preventDefault()%2Ce.stopPropagation()%3Breturn%7Dif(!o)return%3Blet%20t%3Dnull%3Bswitch(e.key.toLowerCase())%7Bcase%22enter%22%3Aif(e.altKey)%7Blet%20n%3Do.parentElement%3Bn%26%26Array.from(n.children).filter(e%3D%3Ee!%3D%3Do).forEach(e%3D%3E%7BcreateSmokeEffect(e.getBoundingClientRect().left%2Be.getBoundingClientRect().width%2F2%2Ce.getBoundingClientRect().top%2Be.getBoundingClientRect().height%2F2%2Ce.getBoundingClientRect().width%2Ce.getBoundingClientRect().height)%2Ce.remove()%7D)%7Delse%20u(o%2Ce)%3Be.preventDefault()%2Ce.stopPropagation()%3Bbreak%3Bcase%22arrowup%22%3At%3Do.parentElement%3Bbreak%3Bcase%22arrowdown%22%3Alet%20a%3DArray.from(o.children).filter(e%3D%3Ee.nodeType%3D%3D%3DNode.ELEMENT_NODE)%3Bt%3Da%5B0%5D%3Bbreak%3Bcase%22arrowleft%22%3At%3Do.previousElementSibling%3Bbreak%3Bcase%22arrowright%22%3At%3Do.nextElementSibling%7Dt%26%26(e.preventDefault()%2Ce.stopPropagation()%2Cd(t))%7D%3Breturn%20l.keydown%3Dc%2Cdocument.addEventListener(%22keydown%22%2Cc%2C!0)%2Cl.mouseover%3De%3D%3E%7Ba%26%26d(e.target)%7D%2Cdocument.addEventListener(%22mouseover%22%2Cl.mouseover)%2Cl.mouseout%3Dt%3D%3E%7Ba%26%26t.target%3D%3D%3Do%26%26(t.target.classList.remove(%22element-zapper-hover%22)%2Co%3Dnull%2Ce.textContent%3D%22%22)%7D%2Cdocument.addEventListener(%22mouseout%22%2Cl.mouseout)%2Cl.click%3Dn%3D%3E%7Ba%26%26n.target!%3D%3De%26%26n.target!%3D%3Dt%26%26(u(n.target%2Cn)%2Cn.preventDefault()%2Cn.stopPropagation())%7D%2Cdocument.addEventListener(%22click%22%2Cl.click)%2C()%3D%3E%7Bdocument.removeEventListener(%22keydown%22%2Cc%2C!0)%2Cdocument.removeEventListener(%22mouseover%22%2Cd)%2Cdocument.removeEventListener(%22mouseout%22%2Cd)%2Cdocument.removeEventListener(%22click%22%2Cu)%2Cp.remove()%2Ce.remove()%2Ct.remove()%7D%7D%3BinitElementZapper()%7D)()) New Dec 2024 + This tool lets you click on any node on a web page to remove it from the DOM. + You can also navigate using arrow keys and then remove the node using ENTER. + Might be handy for removing discrete parts of a page before running a diagnostic tool. + It is (sort of) the opposite of the [Isolator](https://a11y-tools.com/bookmarklets/#isolator) bookmarklet. + NEW FEATURE: hold down ALT/Option key while clicking or pressing ENTER and it will keep the selected elements but remove all sibling elements (and leave rest of page intact). + 🚨 NOTE: This is destructive, there is no 'undo' feature (just reload page). + 🍿📽️ [Watch the Node Killer bookmarklet in action here](https://a11y-tools.com/bookmarklets/source/node-killer/#video). * [🔖anchor for Isolator bookmarklet](https://a11y-tools.com/bookmarklets/#isolator) [Isolator](javascript:(function()%7B%22use%20strict%22%3Bfunction%20getXpath(e)%7Blet%20t%2Co%3De%2Cn%3De.tagName.toLowerCase()%2Ci%3D%22%22%2Ca%3D%22%22%2Cr%3D%22%22%2Cl%3D%22%22%3Bfor(%3Bo.parentNode%3B)%7Bif((t%3Do.parentNode).tagName)%7Bi%3Dt.tagName.toLowerCase()%3Bconst%20e%3Dt.querySelectorAll(%22%3Ascope%20%3E%20%22%2Bo.tagName)%3Br%3De.length%3E1%3F%22%5B%22%2BparseInt(Array.from(e).indexOf(o)%2B1)%2B%22%5D%22%3A%22%22%2Ca%3D(n%3Do.tagName.toLowerCase())%2Br%2Bl%2Ba%2Cl%3D%22%2F%22%7Do%3Dt%7Dreturn%22%22%3D%3D%3Di%26%26(i%3Dn)%2Ca%3D%22%2F%2F%22%2Bi%2Br%2Bl%2Ba%7Dfunction%20isolate()%7Blet%20e%2Ct%2Co%2Cn%3D!0%2Ci%3D!1%3Bconst%20a%3Ddocument.querySelectorAll(%22*%22)%3Bfunction%20r(t%2Co)%7Be%3Dt%2Co.stopPropagation()%2Ci%7C%7Cs(t)%2Cd(e)%7Dfunction%20l(e)%7Be.classList.remove(%22isolatorHighlight%22)%7Dfunction%20s(e)%7Be.classList.add(%22isolatorHighlight%22)%7Dfunction%20d(e)%7Bconsole.clear()%2Cconsole.log(getXpath(e))%2Co.innerHTML%3DgetXpath(e)%7DArray.from(a).forEach(t%3D%3E%7Bt.addEventListener(%22click%22%2Co%3D%3E%7Bconsole.log(%22preventClicks%20%3D%20%22%2Cn)%2Cn%26%26(!function(t%2Co)%7Be%3Dt%2C%22HTML%22%3D%3D%3Dt.tagName%26%26(n%3D!1)%3B!function(e)%7Bif(!i)%7Bconst%20t%3De.parentNode%2Co%3Dt.childNodes%3B%22HTML%22!%3D%3Dt.tagName%3FArray.from(o).forEach(t%3D%3E%7Bt!%3D%3De%26%26t.remove()%7D)%3Ai%3D!0%7D%7D(t)%7D(t)%2Co.preventDefault())%7D)%2Ct.addEventListener(%22mouseover%22%2Co%3D%3E%7Be%3Dt%2Co.stopPropagation()%2Ci%7C%7Cs(t)%2Cd(e)%7D)%2Ct.addEventListener(%22mouseout%22%2Ce%3D%3E%7Bl(t)%7D)%7D)%2Cfunction()%7Bconst%20e%3Ddocument.createElement(%22style%22)%3Be.textContent%3D%22.isolatorHighlight%7Boutline%3A4px%20solid%20black!important%3Boutline-offset%3A-4px!important%3B-webkit-box-shadow%3A%200px%200px%200px%204px%20%23fff%3B%20box-shadow%3A%200px%200px%200px%204px%20%23fff%3B%7D%23infoPanel%20%7Bz-index%3A1000%3Bfont-size%3A20px%3Bbackground%3Argba(0%2C0%2C0%2C0.8)%3Bcolor%3A%23fff%3Bfont-weight%3Abold%3Bpadding%3A10px%3Bposition%3Afixed%3Bbottom%3A20px%3Bleft%3A20px%3Bfont-family%3Asans-serif%3B%7D%20%23infoPanel%3Aempty%20%7Bvisibility%3Ahidden%3B%7D%20%23infoPanel%20code%20%7Bcolor%3Alime%7D%22%2Cdocument.head.appendChild(e)%7D()%2C(o%3Ddocument.createElement(%22div%22)).setAttribute(%22id%22%2C%22infoPanel%22)%2Co.setAttribute(%22role%22%2C%22status%22)%2Cdocument.body.appendChild(o)%2Cdocument.addEventListener(%22keydown%22%2Cfunction(n)%7Bif(%22ArrowUp%22%3D%3D%3Dn.key%26%26(n.preventDefault()%2Ce.parentNode%26%26%22HTML%22!%3D%3De.tagName%26%26(l(e)%2Cconsole.log(%22currentEl.parentNode%20%3D%20%22%2Ce.parentNode)%2Ct%3De.parentNode%2Cs(e%3Dt))%2Cd(e)%2Co.textContent%3Do.textContent%2B%22%20(Press%20Return%20to%20isolate%20this%20element)%22)%2C%22ArrowLeft%22%3D%3D%3Dn.key%26%26(n.preventDefault()%2Ce.previousElementSibling%26%26(l(e)%2Cr(e%3De.previousElementSibling%2Cn)))%2C%22ArrowRight%22%3D%3D%3Dn.key%26%26(n.preventDefault()%2Ce.nextElementSibling%26%26(l(e)%2Cr(e%3De.nextElementSibling%2Cn)))%2C%22ArrowDown%22%3D%3D%3Dn.key%26%26(n.preventDefault()%2Ce.childNodes.length%3E1))%7Bl(e)%3Blet%20t%2Co%3D!1%3BArray.from(e.childNodes).forEach(e%3D%3E%7B1!%3D%3De.nodeType%7C%7Co%7C%7C(o%3D!0%2Ct%3De)%7D)%2Ct%26%26r(e%3Dt%2Cn)%7D%22Enter%22%3D%3D%3Dn.key%26%26(n.preventDefault()%2Ce.click())%7D)%2Cd(%22Isolator%20started.%20Click%20on%20element%20you%20want%20to%20isolate%20in%20the%20DOM%22)%7Disolate()%3B%7D)()) + Isolates a section of a web page by hiding all sibling elements of it, and all parent elements. + Hover over on elements on the page, then click when the correct element is highlighted. + Press the arrow keys to fine tune your selection (choose parent, child and sibling elements in the DOM) and confirm that selection with Enter. + 🚨 NOTE: This is destructive, there is no 'undo' feature (just reload page). + 🍿📽️[Watch the Isolator bookmarklet in action here](https://a11y-tools.com/bookmarklets/source/isolator/index.html#video). ##### Document/Node info Tools * [🔖anchor for Selector Selector bookmarklet](https://a11y-tools.com/bookmarklets/#selectorselector) [Selector Selector](javascript:(function()%7B!function()%7Blet%20e%3D!1%2Ct%3D%5B%5D%2Cr%3Dnull%2Cn%3D%22js%22%2Ci%3D%5B%5D%2Co%3Dnull%2Cl%3Dnull%2Ca%3Bfunction%20s(e)%7Blet%20t%3De.replace(%2F%5Cs%2B%2Fg%2C%22%20%22).trim()%3Breturn%20t.length%3E50%3Ft.substring(0%2C30)%2B%22...%22%3At%7Dfunction%20d(e)%7Breturn%5B%2F%5E%5B0-9a-f%5D%7B8%7D-%5B0-9a-f%5D%7B4%7D-%5B0-9a-f%5D%7B4%7D-%5B0-9a-f%5D%7B4%7D-%5B0-9a-f%5D%7B12%7D%24%2Fi%2C%2F%5E%5Ba-z0-9%5D%7B10%2C%7D%24%2Fi%2C%2F%5E(temp%7Cgenerated%7Cdynamic%7Cauto)%2Fi%5D.some(t%3D%3Et.test(e))%7Dfunction%20c(e)%7Blet%20t%3De%3Bfor(%3Bt%26%26t!%3D%3Ddocument.body%3B)%7Bif(t.id%26%26!d(t.id))%7Blet%20r%3Dt%2Cn%3D%5B%5D%3Bfor(%3Bt!%3D%3Dr%3B)%7Blet%20i%3D1%2Co%3Dt.previousSibling%3Bfor(%3Bo%3B)1%3D%3D%3Do.nodeType%26%26o.tagName%3D%3D%3Dt.tagName%26%26i%2B%2B%2Co%3Do.previousSibling%3Bn.unshift(%60%24%7Bt.tagName.toLowerCase()%7D%5B%24%7Bi%7D%5D%60)%2Ct%3Dt.parentNode%7Dreturn%60%2F%2F*%5B%40id%3D%22%24%7Br.id%7D%22%5D%24%7Bn.length%3E0%3F%22%2F%22%2Bn.join(%22%2F%22)%3A%22%22%7D%60%7Dt%3Dt.parentElement%7Dt%3De%3Blet%20l%3D%5B%5D%3Bfor(%3Bt%26%261%3D%3D%3Dt.nodeType%26%26t!%3D%3Ddocument.body%3B)%7Blet%20a%3D1%2Cs%3Dt.previousSibling%3Bfor(%3Bs%3B)1%3D%3D%3Ds.nodeType%26%26s.tagName%3D%3D%3Dt.tagName%26%26a%2B%2B%2Cs%3Ds.previousSibling%3Blet%20c%3Dt.tagName.toLowerCase()%3Bl.unshift(%60%24%7Bc%7D%5B%24%7Ba%7D%5D%60)%2Ct%3Dt.parentNode%7Dreturn%22%2F%22%2Bl.join(%22%2F%22)%7Dfunction%20u(e)%7Bl%26%26(l.innerHTML%3D%60Tag%3A%20%26lt%3B%24%7Be.tagName.toLowerCase()%7D%26gt%3B%3Cbr%3EXPath%3A%20%24%7Bc(e)%7D%3Cbr%3EText%3A%20%24%7Bs(e.textContent)%7D%60)%7Dfunction%20p(e)%7Breturn(document.querySelectorAll('%5Bdata-selector-highlight%3D%22hover%22%5D').forEach(e%3D%3E%7Be.removeAttribute(%22style%22)%2Ce.removeAttribute(%22data-selector-highlight%22)%7D)%2Ce)%3F(e.hasAttribute(%22data-selector-highlight%22)%26%26%22selected%22%3D%3D%3De.getAttribute(%22data-selector-highlight%22)%7C%7C(e.style.outline%3D%222px%20solid%20blue%22%2Ce.setAttribute(%22data-selector-highlight%22%2C%22hover%22)%2Cu(e))%2Ce)%3Anull%7Dfunction%20h(e%2Ct)%7Bif(!e)return%20null%3Bswitch(t)%7Bcase%22up%22%3Alet%20r%3De.parentElement%3Bfor(%3Br%3B)%7Bif(r.parentElement%7C%7Cr.previousElementSibling%7C%7Cr.nextElementSibling)return%20r%3Br%3Dr.parentElement%7Dreturn%20null%3Bcase%22down%22%3Areturn%20e.children%5B0%5D%7C%7Cnull%3Bcase%22left%22%3Areturn%20e.previousElementSibling%7C%7Ce.parentElement%26%26e.parentElement.previousElementSibling%7C%7Cnull%3Bcase%22right%22%3Areturn%20e.nextElementSibling%7C%7Ce.parentElement%26%26e.parentElement.nextElementSibling%7C%7Cnull%3Bdefault%3Areturn%20null%7D%7Dfunction%20p(e)%7Breturn(document.querySelectorAll('%5Bdata-selector-highlight%3D%22hover%22%5D').forEach(e%3D%3E%7Be.removeAttribute(%22style%22)%2Ce.removeAttribute(%22data-selector-highlight%22)%7D)%2Ce)%3F(e.getAttribute(%22data-selector-highlight%22)%26%26%22hover%22!%3D%3De.getAttribute(%22data-selector-highlight%22)%7C%7C(e.style.outline%3D%222px%20solid%20blue%22%2Ce.setAttribute(%22data-selector-highlight%22%2C%22hover%22)%2Cu(e))%2Ce)%3Anull%7Dfunction%20g(e)%7Bif(e.target.closest(%22%5Bdata-selector-ui%5D%22))return%3Be.preventDefault()%2Ce.stopPropagation()%3Blet%20r%3De.target%3Bif(!r.hasAttribute(%22data-selector-highlight%22)%7C%7C%22selected%22!%3D%3Dr.getAttribute(%22data-selector-highlight%22))%7Blet%20n%3Db(r)%2Ci%3Df(r)%3Bt.push(%7Belement%3Ar%2CstructuredSelector%3An%2CidSelector%3Ai%2CtextContent%3Ar.textContent.trim()%7D)%2Cr.removeAttribute(%22style%22)%2Cr.setAttribute(%22data-selector-highlight%22%2C%22selected%22)%2Cr.style.outline%3D%222px%20solid%20red%22%2Co%3Dr%7Dreturn!1%7Dfunction%20b(e)%7Blet%20t%3De%3Bfor(%3Bt%26%26t!%3D%3Ddocument.body%3B)%7Bif(t.id%26%26!d(t.id))%7Blet%20r%3Dt%2Cn%3D%5B%5D%3Bfor(t%3De%3Bt!%3D%3Dr%3B)%7Blet%20i%3Dt.tagName.toLowerCase()%2Co%3DArray.from(t.parentElement%3F.children%7C%7C%5B%5D).filter(e%3D%3Ee.tagName%3D%3D%3Dt.tagName)%3Bif(o.length%3E0)%7Blet%20l%3Do.indexOf(t)%2B1%3Bi%2B%3D%60%3Anth-child(%24%7Bl%7D)%60%7Dn.unshift(i)%2Ct%3Dt.parentElement%7Dreturn%60%23%24%7Br.id%7D%20%24%7Bn.join(%22%20%3E%20%22)%7D%60%7Dt%3Dt.parentElement%7Dt%3De%3Blet%20a%3D%5B%5D%3Bfor(%3Bt%26%26t!%3D%3Ddocument.body%3B)%7Blet%20s%3Dt.tagName.toLowerCase()%2Cc%3DArray.from(t.parentElement%3F.children%7C%7C%5B%5D).filter(e%3D%3Ee.tagName%3D%3D%3Dt.tagName)%3Bif(c.length%3E0)%7Blet%20u%3Dc.indexOf(t)%2B1%3Bs%2B%3D%60%3Anth-child(%24%7Bu%7D)%60%7Da.unshift(s)%2Ct%3Dt.parentElement%7Dreturn%20a.join(%22%20%3E%20%22)%7Dfunction%20f(e)%7Blet%20t%3De%3Bfor(%3Bt%26%26t!%3D%3Ddocument.body%3B)%7Bif(t.id%26%26!d(t.id))return%60%23%24%7Bt.id%7D%60%3Bt%3Dt.parentElement%7Dt%3De%3Blet%20r%3D%5B%5D%3Bfor(%3Bt%26%26t!%3D%3Ddocument.body%3B)%7Blet%20n%3Dt.tagName.toLowerCase()%2Ci%3DArray.from(t.parentElement%3F.children%7C%7C%5B%5D)%2Co%3Di.indexOf(t)%2B1%3Bi.length%3E1%26%26(n%2B%3D%60%3Anth-child(%24%7Bo%7D)%60)%2Cr.unshift(n)%2Ct%3Dt.parentElement%7Dreturn%20r.join(%22%20%22)%7Dfunction%20c(e)%7Blet%20t%3De%2Cr%3Dnull%3Bfor(%3Bt%26%26t!%3D%3Ddocument.body%3B)%7Bif(t.id%26%26!d(t.id))%7Br%3Dt%3Bbreak%7Dt%3Dt.parentElement%7Dif(r)%7Bt%3De%3Blet%20n%3D%5B%5D%3Bfor(%3Bt!%3D%3Dr%3B)%7Blet%20i%3D1%2Co%3Dt.previousSibling%3Bfor(%3Bo%3B)1%3D%3D%3Do.nodeType%26%26o.tagName%3D%3D%3Dt.tagName%26%26i%2B%2B%2Co%3Do.previousSibling%3Bn.unshift(%60%24%7Bt.tagName.toLowerCase()%7D%5B%24%7Bi%7D%5D%60)%2Ct%3Dt.parentNode%7Dreturn%60%2F%2F*%5B%40id%3D%22%24%7Br.id%7D%22%5D%24%7Bn.length%3E0%3F%22%2F%22%2Bn.join(%22%2F%22)%3A%22%22%7D%60%7Dt%3De%3Blet%20l%3D%5B%5D%3Bfor(%3Bt%26%261%3D%3D%3Dt.nodeType%26%26t!%3D%3Ddocument.body%3B)%7Blet%20a%3D1%2Cs%3Dt.previousSibling%3Bfor(%3Bs%3B)1%3D%3D%3Ds.nodeType%26%26s.tagName%3D%3D%3Dt.tagName%26%26a%2B%2B%2Cs%3Ds.previousSibling%3Blet%20c%3Dt.tagName.toLowerCase()%3Bl.unshift(%60%24%7Bc%7D%5B%24%7Ba%7D%5D%60)%2Ct%3Dt.parentNode%7Dreturn%22%2F%22%2Bl.join(%22%2F%22)%7Dfunction%20m(e%2Ct)%7Bif(e.element.id%26%26!d(e.element.id))switch(t)%7Bcase%22js%22%3Areturn%60document.querySelector(%22%23%24%7Be.element.id%7D%22)%3B%60%3Bcase%22css%22%3Areturn%60%23%24%7Be.element.id%7D%60%3Bcase%22xpath%22%3Areturn%60%2F%2F*%5B%40id%3D%22%24%7Be.element.id%7D%22%5D%60%7Dswitch(t)%7Bcase%22js%22%3Areturn%60document.querySelector(%22%24%7Be.structuredSelector%7D%22)%3B%60%3Bcase%22css%22%3Adefault%3Areturn%20e.structuredSelector%3Bcase%22xpath%22%3Areturn%20e.xpathSelector%7D%7Dfunction%20x(e%2Cn)%7Bi.forEach(e%3D%3E%7Be.removeAttribute(%22aria-hidden%22)%7D)%2Ci%3D%5B%5D%2Ce.remove()%2Cn.remove()%2Ct.forEach(e%3D%3E%7Be.element.style.outline%3D%22%22%7D)%2Ct%3D%5B%5D%2Cdocument.querySelectorAll(%22%5Bdata-selector-highlight%5D%22).forEach(e%3D%3E%7Be.removeAttribute(%22style%22)%2Ce.removeAttribute(%22data-selector-highlight%22)%7D)%2Cr%26%26r.focus()%7Dwindow.startElementSelection%3Dfunction()%7Be%7C%7C(e%3D!0%2Ca%3Dfunction%20o()%7Blet%20d%3Ddocument.createElement(%22button%22)%3Bd.textContent%3D'I%20am%20done%20%5Bpress%20%22d%22%5D'%2Cd.setAttribute(%22data-selector-ui%22%2C%22true%22)%2Cd.style.cssText%3D%60position%3A%20fixed%3Btop%3A%2020px%3Bleft%3A%2020px%3Bz-index%3A%2010000%3Bpadding%3A%2010px%2020px%3Bbackground%3A%20%234CAF50%3Bcolor%3A%20white%3Bborder%3A%20none%3Bborder-radius%3A%204px%3Bcursor%3A%20pointer%3Bfont-size%3A%2016px%3B%60%2Cd.addEventListener(%22click%22%2Co%3D%3E%7Bo.stopPropagation()%2Ce%3D!1%2Cdocument.removeEventListener(%22click%22%2Cg%2C!0)%2Ca.doneButton.remove()%2Cdocument.body.style.cursor%3D%22default%22%2Cl%26%26l.remove()%2Cfunction%20e(o)%7B(i%3DArray.from(document.body.children).filter(e%3D%3E%22true%22!%3D%3De.getAttribute(%22data-selector-ui%22)%26%26!e.contains(document.getElementById(%22selectorSelectorDialog%22)))).forEach(e%3D%3E%7Be.setAttribute(%22aria-hidden%22%2C%22true%22)%7D)%2Cr%3Ddocument.activeElement%3Blet%20l%3Dfunction%20e()%7Blet%20t%3Ddocument.createElement(%22div%22)%3Breturn%20t.setAttribute(%22data-selector-ui%22%2C%22true%22)%2Ct.style.cssText%3D%60position%3A%20fixed%3Btop%3A%200%3Bleft%3A%200%3Bright%3A%200%3Bbottom%3A%200%3Bbackground%3A%20rgba(0%2C%200%2C%200%2C%200.5)%3Bz-index%3A%2010000%3B%60%2Ct%7D()%3Bdocument.body.appendChild(l)%3Blet%20a%3Ddocument.createElement(%22div%22)%3Ba.setAttribute(%22data-selector-ui%22%2C%22true%22)%2Ca.setAttribute(%22role%22%2C%22dialog%22)%2Ca.setAttribute(%22id%22%2C%22selectorSelectorDialog%22)%2Ca.setAttribute(%22aria-modal%22%2C%22true%22)%2Ca.setAttribute(%22aria-labelledby%22%2C%22dialog-title%22)%2Ca.setAttribute(%22aria-describedby%22%2C%22selectorSelectorDescription%22)%2Ca.setAttribute(%22tabindex%22%2C%22-1%22)%2Ca.style.cssText%3D%60position%3A%20fixed%3Btop%3A%2050%25%3Bleft%3A%2050%25%3Btransform%3A%20translate(-50%25%2C%20-50%25)%3Bwidth%3A%2080%25%3Bmax-width%3A%20800px%3Bmax-height%3A%2080vh%3Bbackground%3A%20white%3Bpadding%3A%2020px%3Bborder-radius%3A%208px%3Bbox-shadow%3A%200%200%2020px%20rgba(0%2C0%2C0%2C0.2)%3Bz-index%3A%2010001%3Boverflow-y%3A%20auto%3Bfont-family%3A%20monospace%3B%60%3Blet%20d%3Ddocument.createElement(%22div%22)%3Bd.style.cssText%3D%60display%3A%20flex%3Bjustify-content%3A%20space-between%3Balign-items%3A%20center%3Bmargin-bottom%3A%201em%3B%60%3Blet%20u%3Ddocument.createElement(%22h1%22)%3Bu.id%3D%22dialog-title%22%2Cu.setAttribute(%22data-selector-ui%22%2C%22true%22)%2Cu.style.cssText%3D%60margin%3A%200%3Bfont-family%3A%20sans-serif%3Bfont-size%3A%201.5em%3B%60%2Cu.textContent%3D%22Your%20selections%22%3Blet%20p%3Ddocument.createElement(%22div%22)%3Bp.style.cssText%3D%60font-size%3A%200.9em%3Bcolor%3A%20%23666%3Bmargin-top%3A%200.5em%3B%60%2Cp.textContent%3D%22Press%20T%20to%20toggle%20between%20JS%2C%20CSS%2C%20and%20XPath%20selectors%22%2Cp.setAttribute(%22id%22%2C%22selectorSelectorDescription%22)%3Blet%20h%3Ddocument.createElement(%22button%22)%3Bh.setAttribute(%22data-selector-ui%22%2C%22true%22)%2Ch.setAttribute(%22data-copy-button%22%2C%22true%22)%2Ch.textContent%3D%22Copy%20all%20JS%20selectors%22%2Ch.style.cssText%3D%60padding%3A%208px%2016px%3Bmargin-right%3A%2030px%3Bbackground%3A%20%234CAF50%3Bcolor%3A%20white%3Bborder%3A%20none%3Bborder-radius%3A%204px%3Bcursor%3A%20pointer%3Bfont-size%3A%2014px%3B%60%3Bvar%20g%2Cb%3Ddocument%2Cf%3Db.createElement(%22style%22)%3Bb.head.appendChild(f)%2C(g%3Df.sheet).insertRule(%22%23selectorSelectorDialog%20%7Bbackground%3Awhite!important%3Boutline%3A2px%20solid%20black%3B%7D%22%2C0)%2Cg.insertRule(%22%23selectorSelectorDialog%20*%20%7Bcolor%3Ablack!important%3B%7D%22%2C0)%2Ch.addEventListener(%22click%22%2Casync()%3D%3E%7Btry%7Bawait%20navigator.clipboard.writeText(o.map((e%2Ct)%3D%3E%60Element%20%24%7Bt%2B1%7D%20(%22%24%7Bs(e.textContent)%7D%22)%3A%24%7Bm(e%2Cn)%7D%60).join(%22%5Cn%22))%3Blet%20e%3Dh.textContent%3Bh.textContent%3D%22Copied!%22%2Cdocument.querySelector(%22%23copyStatus%22).textContent%3D%22Copied%22%2Ch.style.background%3D%22%2345a049%22%2CsetTimeout(()%3D%3E%7Bh.textContent%3De%2Cdocument.querySelector(%22%23copyStatus%22).textContent%3D%22%22%2Ch.style.background%3D%22%234CAF50%22%7D%2C2e3)%7Dcatch(t)%7Bconsole.error(%22Failed%20to%20copy%20text%3A%22%2Ct)%2Ch.textContent%3D%22Failed%20to%20copy%22%2Ch.style.background%3D%22%23f44336%22%2CsetTimeout(()%3D%3E%7Bh.textContent%3D%60Copy%20all%20%24%7Bn.toUpperCase()%7D%20selectors%60%2Ch.style.background%3D%22%234CAF50%22%7D%2C2e3)%7D%7D)%2Cd.appendChild(u)%2Cd.appendChild(h)%3Blet%20y%3Ddocument.createElement(%22dl%22)%3By.setAttribute(%22data-selector-ui%22%2C%22true%22)%2Co.forEach((e%2Ct)%3D%3E%7Be.xpathSelector%3Dc(e.element)%3Blet%20r%3Ddocument.createElement(%22dt%22)%3Br.setAttribute(%22data-selector-ui%22%2C%22true%22)%2Cr.style.cssText%3D%60font-size%3A%201.2em%3Bmargin%3A%201em%200%200.5em%3Bfont-family%3A%20sans-serif%3B%60%2Cr.textContent%3D%60Element%20%24%7Bt%2B1%7D%20(%22%24%7Bs(e.textContent)%7D%22)%60%3Blet%20i%3Ddocument.createElement(%22dd%22)%2Co%3Ddocument.createElement(%22div%22)%3Bo.setAttribute(%22data-selector-ui%22%2C%22true%22)%2Co.setAttribute(%22data-selector-content%22%2C%22true%22)%2Co.setAttribute(%22data-item-index%22%2Ct)%2Co.setAttribute(%22contenteditable%22%2C%22true%22)%2Co.setAttribute(%22tabindex%22%2C%220%22)%2Co.style.cssText%3D%60padding%3A%205px%3Bmargin%3A%205px%200%3Bbackground%3A%20%23f5f5f5%3Bcursor%3A%20pointer%3Bwhite-space%3A%20nowrap%3Boverflow-x%3A%20auto%3B%60%2Co.textContent%3Dm(e%2Cn)%2Co.addEventListener(%22click%22%2Cfunction(e)%7Be.stopPropagation()%3Blet%20t%3Ddocument.createRange()%3Bt.selectNodeContents(this)%3Blet%20r%3Dwindow.getSelection()%3Br.removeAllRanges()%2Cr.addRange(t)%7D)%2Cy.appendChild(r)%2Ci.appendChild(o)%2Cy.appendChild(i)%7D)%3Blet%20%24%3Ddocument.createElement(%22button%22)%3B%24.setAttribute(%22data-selector-ui%22%2C%22true%22)%2C%24.textContent%3D%22%5Cxd7%22%2C%24.setAttribute(%22aria-label%22%2C%22Close%20dialog%22)%2C%24.style.cssText%3D%60position%3A%20absolute%3Btop%3A%2015px%3Bright%3A%2010px%3Bbackground%3A%20none%3Bborder%3A%20none%3Bfont-size%3A%2024px%3Bcursor%3A%20pointer%3Bpadding%3A%205px%2010px%3B%60%2C%24.onclick%3De%3D%3E%7Be.stopPropagation()%3Blet%20t%3Ddocument.querySelector('%5Bdata-selector-ui%5D%5Bstyle*%3D%22background%3A%20rgba%22%5D')%3Bx(t%2Ca)%7D%2Ca.appendChild(%24)%2Ca.appendChild(d)%2Ca.appendChild(p)%2Ca.appendChild(y)%2Cdocument.body.appendChild(a)%2Cdocument.addEventListener(%22keydown%22%2Cfunction(e)%7Bif(%22t%22%3D%3D%3De.key.toLowerCase())%7Bswitch(n)%7Bcase%22js%22%3An%3D%22css%22%3Bbreak%3Bcase%22css%22%3An%3D%22xpath%22%3Bbreak%3Bcase%22xpath%22%3An%3D%22js%22%7D!function%20e(r)%7Blet%20i%3Dr.querySelectorAll(%22%5Bdata-selector-content%5D%22)%3Bi.forEach(e%3D%3E%7Blet%20r%3De.getAttribute(%22data-item-index%22)%2Ci%3Dt%5Br%5D%3Be.textContent%3Dm(i%2Cn)%7D)%3Blet%20o%3Dr.querySelector(%22%5Bdata-copy-button%5D%22)%3Bo%26%26(o.textContent%3D%60Copy%20all%20%24%7Bn.toUpperCase()%7D%20selectors%60)%7D(a)%7D%7D)%2Cfunction%20e(t)%7Blet%20r%3Dt.querySelectorAll('button%2C%20%5Bhref%5D%2C%20input%2C%20select%2C%20textarea%2C%20%5Btabindex%5D%3Anot(%5Btabindex%3D%22-1%22%5D)')%2Cn%3Dr%5B0%5D%2Ci%3Dr%5Br.length-1%5D%3Bt.addEventListener(%22keydown%22%2Cfunction(e)%7Bif(%22Escape%22%3D%3D%3De.key)%7Blet%20r%3Ddocument.querySelector('%5Bdata-selector-ui%5D%5Bstyle*%3D%22background%3A%20rgba%22%5D')%3Bx(r%2Ct)%3Breturn%7D%22Tab%22%3D%3D%3De.key%26%26(e.shiftKey%3Fdocument.activeElement%3D%3D%3Dn%26%26(e.preventDefault()%2Ci.focus())%3Adocument.activeElement%3D%3D%3Di%26%26(e.preventDefault()%2Cn.focus()))%7D)%7D(a)%2Ca.focus()%7D(t)%7D)%2Cdocument.body.appendChild(d)%2Cdocument.addEventListener(%22keydown%22%2Cfunction(e)%7B%22d%22%3D%3D%3De.key.toLowerCase()%26%26d.click()%7D)%3Blet%20u%3Ddocument.createElement(%22div%22)%3Breturn%20u.setAttribute(%22role%22%2C%22status%22)%2Cu.setAttribute(%22id%22%2C%22copyStatus%22)%2Cu.style.cssText%3D%60clip-path%3A%20inset(100%25)%3Bclip%3A%20rect(1px%2C%201px%2C%201px%2C%201px)%3Bheight%3A%201px%3Boverflow%3A%20hidden%3Bposition%3A%20absolute%3Bwhite-space%3A%20nowrap%3Bwidth%3A%201px%3B%60%2Cdocument.body.appendChild(u)%2C(l%3Ddocument.createElement(%22div%22)).id%3D%22nodeDetails%22%2Cl.setAttribute(%22role%22%2C%22status%22)%2Cl.style.cssText%3D%60position%3A%20fixed%3Bbottom%3A%2020px%3Bleft%3A%2020px%3Bbackground%3A%20rgba(0%2C0%2C0%2C0.8)%3Bcolor%3A%20white%3Bpadding%3A%2010px%3Bborder-radius%3A%204px%3Bz-index%3A%2010000%3Bfont-family%3A%20monospace%3Bword-wrap%3A%20break-word%3B%60%2Cdocument.body.appendChild(l)%2C%7BdoneButton%3Ad%7D%7D()%2Cp(o%3Ddocument.activeElement%7C%7Cdocument.body)%2Cdocument.addEventListener(%22click%22%2Cg%2C!0)%2Cdocument.addEventListener(%22keydown%22%2Cfunction(r)%7Bif(e)%7Bif(%5B%22ArrowUp%22%2C%22ArrowDown%22%2C%22ArrowLeft%22%2C%22ArrowRight%22%5D.includes(r.key)%26%26r.preventDefault()%2C%22Tab%22%3D%3D%3Dr.key)%7BsetTimeout(()%3D%3E%7Blet%20e%3Ddocument.activeElement%3Be%26%26e!%3D%3Do%26%26(o%3De%2Ce.hasAttribute(%22data-selector-highlight%22)%26%26%22selected%22%3D%3D%3De.getAttribute(%22data-selector-highlight%22)%7C%7Cp(e))%7D%2C0)%3Breturn%7Dswitch(r.key)%7Bcase%22ArrowUp%22%3Ao%3Dh(o%2C%22up%22)%3Bbreak%3Bcase%22ArrowDown%22%3Ao%3Dh(o%2C%22down%22)%3Bbreak%3Bcase%22ArrowLeft%22%3Ao%3Dh(o%2C%22left%22)%3Bbreak%3Bcase%22ArrowRight%22%3Ao%3Dh(o%2C%22right%22)%3Bbreak%3Bcase%22Enter%22%3Ar.preventDefault()%2Co%26%26(!o.hasAttribute(%22data-selector-highlight%22)%7C%7C%22selected%22!%3D%3Do.getAttribute(%22data-selector-highlight%22))%26%26(t.push(%7Belement%3Ao%2CstructuredSelector%3Ab(o)%2CidSelector%3Af(o)%2CtextContent%3Ao.textContent.trim()%7D)%2Co.removeAttribute(%22style%22)%2Co.setAttribute(%22data-selector-highlight%22%2C%22selected%22)%2Co.style.outline%3D%222px%20solid%20red%22)%7Do%26%26(!o.hasAttribute(%22data-selector-highlight%22)%7C%7C%22selected%22!%3D%3Do.getAttribute(%22data-selector-highlight%22))%26%26p(o)%7D%7D)%2Cdocument.addEventListener(%22mousemove%22%2Cfunction(t)%7Bif(!e)return%3Blet%20r%3Dt.target%3Br%3D%3D%3Do%7C%7Cr.hasAttribute(%22data-selector-highlight%22)%26%26%22selected%22%3D%3D%3Dr.getAttribute(%22data-selector-highlight%22)%7C%7Cp(o%3Dr)%7D)%2Cdocument.body.style.cursor%3D%22pointer%22%2Cconsole.log(%22Selection%20mode%20started.%20Use%20arrow%20keys%20to%20navigate%2C%20ENTER%20to%20select%2C%20or%20use%20mouse%20and%20click.%22))%7D%7D()%2CstartElementSelection()%7D)()) New Dec 2024 + A tool that lets you click on multiple elements on a web page (or navigate the DOM using arrow keys, ENTER to select) and gets all nodes referenced that can be shown as XPATH, JS or CSS selector. + Press the 'I am done' button when you've finished capturing. + All captured values are shown in a dialog and easy to copy individually. + You can copy all values in one go, too. + 🍿📽️ [Watch the Selector Selector bookmarklet in action here](https://a11y-tools.com/bookmarklets/source/selector-selector/#video). * [🔖anchor for Xpath getter bookmarklet](https://a11y-tools.com/bookmarklets/#xpathgetter) [XPATH & Source getter](javascript:(function()%7B%22use%20strict%22%3Bconsole.clear()%3Bvar%20tempDOMContent%2CcurrentEl%2CcurrentElTagName%2CthisTagName%2CsearchScope%2CnewCollection%2CuseIDRefs%3D!0%2ChidePanels%3D!1%2CtargetAndSourceCompilationReadable%3D%22%22%2CtargetAndSourceCompilationProcessed%3D%22%22%2CnewTargetsAddedCount%3D0%2CallowAlerts%3D!0%2CfirstEntry%3D!0%3Bfunction%20removeEl(e)%7Bdocument.querySelector(%22%23%22%2Be)%26%26document.querySelector(%22%23%22%2Be).remove()%7Dfunction%20getXpath(e)%7BcurrentEl%3De%2CcurrentElTagName%3De.tagName.toLowerCase()%3Blet%20t%2Cn%3D%22%22%2Co%3D%22%22%2Cr%3D%22%22%2Ca%3D%22%22%3Bfor(%3BcurrentEl.parentNode%3B)%7Bif((t%3DcurrentEl.parentNode).tagName)%7Bn%3Dt.tagName.toLowerCase()%3Blet%20l%3Dt.querySelectorAll(%22%3Ascope%20%3E%20%22%2BcurrentEl.tagName)%3Br%3Dl.length%3E1%3F%22%5B%22%2BparseInt(Array.from(l).indexOf(currentEl)%2B1)%2B%22%5D%22%3A%22%22%2CcurrentElTagName%3DcurrentEl.tagName.toLowerCase()%3Blet%20i%3DcurrentEl.getAttribute(%22id%22)%3Bo%3Di%26%26useIDRefs%3F'%2F*%5B%40id%3D%22'%2Bi%2B'%22%5D'%2Ba%2Bo%3AcurrentElTagName%2Br%2Ba%2Bo%2Ca%3D%22%2F%22%7DcurrentEl%3Dt%7D%22%22%3D%3D%3Dn%26%26(n%3DcurrentElTagName)%2Co%3D%22%2F%2F%22%2Bn%2Br%2Ba%2Bo%3Blet%20s%3Do.split(%22%2F%2F*%22)%3Breturn%20s.length%3E1%26%26(o%3D%22%2F%2F*%22%2B(o%3Ds%5Bs.length-1%5D))%2Co%7Dfunction%20getXpathAndSource()%7Blet%20e%2Ct%2Cn%2Co%2Cr%2Ca%2Cl%2Ci%2Cs%2Cd%2Cu%3D!1%3Bif(!document.querySelector(%22%23tempDOMDumpingGround%22))%7Blet%20c%3Ddocument.createElement(%22div%22)%3Bc.setAttribute(%22id%22%2C%22tempDOMDumpingGround%22)%2Cc.setAttribute(%22hidden%22%2C%22hidden%22)%2Cdocument.body.appendChild(c)%7Dlet%20p%3Ddocument.querySelectorAll(%22*%22)%3Bfunction%20m()%7Bo.remove()%2Cdocument.querySelector(%22%23xpathGetterStyles%22).remove()%7Dfunction%20g()%7B!function%20e(t%2Cn)%7Blet%20o%3Ddocument.querySelector(%22%23allTargetsFileDownloadLinkReadable%22)%3Bo.textContent%3D%22Download%20targets%20(Readable)%22%2Co.setAttribute(%22href%22%2C%22data%3Atext%2Fplain%3Bcharset%3Dutf-8%2C%22%2BencodeURIComponent(n))%2Co.setAttribute(%22download%22%2Ct)%7D(%22xpaths-targets-selected.html%22%2CtargetAndSourceCompilationReadable)%2Cfunction%20e(t%2Cn)%7Blet%20o%3Ddocument.querySelector(%22%23allTargetsFileDownloadLinkProcessed%22)%3Bo.textContent%3D%22Download%20targets%20(Processed)%22%2Co.setAttribute(%22href%22%2C%22data%3Atext%2Fplain%3Bcharset%3Dutf-8%2C%22%2BencodeURIComponent(n))%2Co.setAttribute(%22download%22%2Ct)%7D(%22xpaths-targets-selected-processed.html%22%2CtargetAndSourceCompilationProcessed)%7Dfunction%20h(e%2Ct%3D4)%7Blet%20n%3D%22string%22%3D%3Dtypeof%20e%3Fe%3Ae.outerHTML%3Bn%3Dn.replace(%2F%3C!--(.*%3F)--%3E%2Fg%2C%22%22)%3Blet%20o%3D%22%22%2Cr%3D0%2Ca%3D%22%20%22.repeat(t)%2Cl%3Dnew%20Set(%5B%22area%22%2C%22base%22%2C%22br%22%2C%22col%22%2C%22embed%22%2C%22hr%22%2C%22img%22%2C%22input%22%2C%22link%22%2C%22meta%22%2C%22param%22%2C%22source%22%2C%22track%22%2C%22wbr%22%5D)%2Ci%3De%3D%3E%7Blet%20t%3De.match(%2F%5E%3C(%5B%5E%20%3E%5D%2B)%2F)%3Breturn%20t%26%26l.has(t%5B1%5D.toLowerCase())%7D%2Cs%3D(e%3D%3E%7Blet%20t%3D%5B%5D%2Cn%3D%2F(%3C%5B%5E%3E%5D%2B%3E%7C%5B%5E%3C%5D%2B)%2Fg%2Co%3Bfor(%3Bnull!%3D%3D(o%3Dn.exec(e))%3B)%7Blet%20r%3Do%5B0%5D.trim()%3Br%26%26t.push(r)%7Dreturn%20t%7D)(n)%3Breturn%20s.forEach((e%2Ct)%3D%3E%7Bif(e.toLowerCase().startsWith(%22%3C!doctype%22))%7Bo%2B%3De%2B%22%5Cn%22%3Breturn%7Dif(e.startsWith(%22%3C%2F%22))%7Br%3DMath.max(0%2Cr-1)%2Co%2B%3Da.repeat(r)%2Be%2B%22%5Cn%22%3Breturn%7Dif(e.startsWith(%22%3C%22)%26%26!e.startsWith(%22%3C%2F%22))%7Blet%20n%3Ds%5Bt%2B1%5D%2Cl%3Ds%5Bt%2B2%5D%3Bn%26%26!n.startsWith(%22%3C%22)%26%26l%26%26l.startsWith(%22%3C%2F%22)%3F(o%2B%3Da.repeat(r)%2Be%2Bn%2Bl%2B%22%5Cn%22%2Cs%5Bt%2B1%5D%3D%22%22%2Cs%5Bt%2B2%5D%3D%22%22)%3A(o%2B%3Da.repeat(r)%2Be%2B%22%5Cn%22%2C!e.endsWith(%22%2F%3E%22)%26%26!i(e)%26%26r%2B%2B)%3Breturn%7De.startsWith(%22%3C%22)%7C%7C(o%2B%3Da.repeat(r)%2Be%2B%22%5Cn%22)%7D)%2Co.trim().replace(%2F%5E%5Cs%2B%24%2Fgm%2C%22%22).replace(%2F%5Cn%5Cn%2B%2Fg%2C%22%5Cn%22)%7Dfunction%20b(e%2Ct)%7Bvar%20n%3Bu%7C%7C((o%3Ddocument.createElement(%22div%22)).setAttribute(%22id%22%2C%22outputPanel%22)%2Co.setAttribute(%22tabindex%22%2C%22-1%22)%2Co.setAttribute(%22role%22%2C%22region%22)%2Co.setAttribute(%22aria-label%22%2C%22Xpath%20and%20Source%20values%22)%2C(l%3Ddocument.createElement(%22input%22)).setAttribute(%22id%22%2C%22outputPanel_input%22)%2C(r%3Ddocument.createElement(%22textarea%22)).setAttribute(%22id%22%2C%22outputPanel_textarea%22)%2Cr.setAttribute(%22aria-label%22%2C%22Source%20code%22)%2C(i%3Ddocument.createElement(%22label%22)).setAttribute(%22for%22%2C%22outputPanel_input%22)%2Ci.textContent%3D%22XPATH%20locator%22%2C(a%3Ddocument.createElement(%22label%22)).setAttribute(%22for%22%2C%22outputPanel_textarea%22)%2Ca.textContent%3D%22Source%20code%20(formatted%2Findented)%22%2C(s%3Ddocument.createElement(%22button%22)).setAttribute(%22type%22%2C%22button%22)%2Cs.textContent%3D%22Close%22%2C(d%3Ddocument.createElement(%22button%22)).setAttribute(%22type%22%2C%22button%22)%2Cd.setAttribute(%22title%22%2C%22Adds%20a%20somewhat%20decrapulated%20version%20after%20the%20proper%20markup%22)%2Cd.innerHTML%3D'%3Cspan%20aria-hidden%3D%22true%22%3E%5CuD83D%5CuDCA9%20%3C%2Fspan%3EDecrapulate%20LITE%20%5Bd%5D'%2Co.appendChild(i)%2Co.appendChild(l)%2Co.appendChild(a)%2Co.appendChild(r)%2Co.appendChild(s)%2Co.appendChild(d)%2Cl.addEventListener(%22click%22%2Ce%3D%3E%7Bl.select()%2Ce.stopPropagation()%7D)%2Cr.addEventListener(%22click%22%2Ce%3D%3E%7Br.select()%2Ce.stopPropagation()%7D)%2Co.addEventListener(%22click%22%2Ce%3D%3E%7Be.stopPropagation()%7D)%2Ci.addEventListener(%22click%22%2Ce%3D%3E%7Be.stopPropagation()%7D)%2Ca.addEventListener(%22click%22%2Ce%3D%3E%7Be.stopPropagation()%7D)%2Cs.addEventListener(%22click%22%2Ce%3D%3E%7Bm()%7D)%2Cd.addEventListener(%22click%22%2Ce%3D%3E%7Bx()%7D)%2Cdocument.body.appendChild(o)%2Cu%3D!0)%2Cg()%2Cw(e)%2Cl.value%3DgetXpath(e)%3Blet%20c%3Dh(e)%3B(tempDOMContent%3Ddocument.querySelector(%22%23tempDOMDumpingGround%22)).innerHTML%3Dc%3Blet%20p%3DtempDOMContent.querySelectorAll(%22%3Ascope%20*%22)%3BtempDOMContent.querySelectorAll(%22%3Ascope%3E*%22)%3Blet%20b%3D0%3BArray.from(p).forEach(e%3D%3E%7Bb%2B%2B%7D)%2Cb%3E20%26%26allowAlerts%26%26confirm(%22There%20are%20quite%20a%20lot%20of%20child%20nodes%20in%20here%20(%22%2Bb%2B%22%20in%20total).%20Do%20you%20want%20to%20only%20reference%20the%20parent%20node%20(all%20inner%20contents%20replaced%20with%20'...')%3F%5Cn%5CnOK%20%3D%20Abbreviate%5CnCancel%20%3D%20Leave%20as-is%22)%26%26(b%3D0%2CArray.from(p).forEach(e%3D%3E%7B1!%3D%2B%2Bb%26%26e.remove()%7D)%2Cc%3D(c%3Dh(tempDOMContent.innerHTML)).split(%22%5Cn%22).join(%22%5Cn...%5Cn%22))%2Cc%3Dc.split('%20class%3D%22%22').join(%22%22)%2Cr.value%3Dc%2CfirstEntry%7C%7C(targetAndSourceCompilationReadable%2B%3D%22%5Cn%3C!--%20%3D%3D%3D%3D%20END%20target%20and%20source%20markup%20%3D%3D%3D%3D%20--%3E%5Cn%5Cn%5Cn%22)%2CtargetAndSourceCompilationReadable%2B%3D%22%3C!--%5Cn%22%2BgetXpath(e)%2B%22%5Cn--%3E%5Cn%22%2Bc%2CtargetAndSourceCompilationProcessed%2B%3DgetXpath(e)%2B%22~~~%2F%2F~~~%22%2B(n%3Dc).replace(%2F%3E%5Cs%2B%3C%2Fg%2C%22%3E%3C%22).replace(%2F%5E%5Cs%2B%7C%5Cs%2B%24%2Fgm%2C%22%22).replace(%2F%5Cn%2Fg%2C%22%22).replace(%2F%5Cs%7B2%2C%7D%2Fg%2C%22%20%22).replace(%2F%5Cs*%3D%5Cs*%2Fg%2C%22%3D%22).replace(%2F%5Cs%2B%2Fg%2C%22%20%22).replace(%2F%5Cs%2B%3E%2Fg%2C%22%3E%22)%2B%22%5Cn%22%2Cconsole.log(%22LOGGED%3A%5Cn%22%2CtargetAndSourceCompilationReadable)%2CfirstEntry%3D!1%7Dfunction%20f()%7Bdocument.querySelector(%22%23outputPanel%22)%26%26document.querySelector(%22%23outputPanel%22).setAttribute(%22hidden%22%2C%22hidden%22)%2Cdocument.querySelector(%22%23allTargetsFileDownloadLinkProcessed%22)%26%26document.querySelector(%22%23allTargetsFileDownloadLinkProcessed%22).setAttribute(%22hidden%22%2C%22hidden%22)%2Cdocument.querySelector(%22%23allTargetsFileDownloadLinkReadable%22)%26%26document.querySelector(%22%23allTargetsFileDownloadLinkReadable%22).setAttribute(%22hidden%22%2C%22hidden%22)%7Dfunction%20k()%7Bdocument.querySelector(%22%23outputPanel%22)%26%26document.querySelector(%22%23outputPanel%22).removeAttribute(%22hidden%22)%2Cdocument.querySelector(%22%23allTargetsFileDownloadLinkProcessed%22)%26%26document.querySelector(%22%23allTargetsFileDownloadLinkProcessed%22).removeAttribute(%22hidden%22)%2Cdocument.querySelector(%22%23allTargetsFileDownloadLinkReadable%22)%26%26document.querySelector(%22%23allTargetsFileDownloadLinkReadable%22).removeAttribute(%22hidden%22)%7Dfunction%20v()%7BArray.from(p).forEach(e%3D%3E%7Bw(e)%7D)%7Dfunction%20y(t%2Cn)%7Be%3Dt%2CsearchScope%3Dt%2Cn.stopPropagation()%2CE(t)%2CA(e)%7Dfunction%20w(e)%7Be.classList.remove(%22tempHighlight%22)%7Dfunction%20E(e)%7Be.classList.add(%22tempHighlight%22)%7Dfunction%20A(e)%7Bn.innerHTML%3DgetXpath(e)%7Dfunction%20x()%7Blet%20e%3Ddocument.querySelector(%22%23outputPanel_textarea%22)%2Ct%3Dfunction%20e(t)%7Blet%20n%3Dnew%20Set(%5B%22id%22%2C%22class%22%2C%22style%22%2C%22title%22%2C%22lang%22%2C%22dir%22%2C%22tabindex%22%2C%22accesskey%22%2C%22contenteditable%22%2C%22hidden%22%2C%22translate%22%2C%22draggable%22%2C%22spellcheck%22%2C%22onabort%22%2C%22onblur%22%2C%22oncancel%22%2C%22oncanplay%22%2C%22oncanplaythrough%22%2C%22onchange%22%2C%22onclick%22%2C%22onclose%22%2C%22oncontextmenu%22%2C%22oncuechange%22%2C%22ondblclick%22%2C%22ondrag%22%2C%22ondragend%22%2C%22ondragenter%22%2C%22ondragexit%22%2C%22ondragleave%22%2C%22ondragover%22%2C%22ondragstart%22%2C%22ondrop%22%2C%22ondurationchange%22%2C%22onemptied%22%2C%22onended%22%2C%22onerror%22%2C%22onfocus%22%2C%22oninput%22%2C%22oninvalid%22%2C%22onkeydown%22%2C%22onkeypress%22%2C%22onkeyup%22%2C%22onload%22%2C%22onloadeddata%22%2C%22onloadedmetadata%22%2C%22onloadstart%22%2C%22onmousedown%22%2C%22onmouseenter%22%2C%22onmouseleave%22%2C%22onmousemove%22%2C%22onmouseout%22%2C%22onmouseover%22%2C%22onmouseup%22%2C%22onmousewheel%22%2C%22onpause%22%2C%22onplay%22%2C%22onplaying%22%2C%22onprogress%22%2C%22onratechange%22%2C%22onreset%22%2C%22onresize%22%2C%22onscroll%22%2C%22onseeked%22%2C%22onseeking%22%2C%22onselect%22%2C%22onshow%22%2C%22onsort%22%2C%22onstalled%22%2C%22onsubmit%22%2C%22onsuspend%22%2C%22ontimeupdate%22%2C%22ontoggle%22%2C%22onvolumechange%22%2C%22onwaiting%22%2C%22accept%22%2C%22accept-charset%22%2C%22action%22%2C%22autocomplete%22%2C%22autofocus%22%2C%22checked%22%2C%22disabled%22%2C%22enctype%22%2C%22form%22%2C%22formaction%22%2C%22formenctype%22%2C%22formmethod%22%2C%22formnovalidate%22%2C%22formtarget%22%2C%22height%22%2C%22list%22%2C%22max%22%2C%22maxlength%22%2C%22min%22%2C%22minlength%22%2C%22multiple%22%2C%22name%22%2C%22pattern%22%2C%22placeholder%22%2C%22readonly%22%2C%22required%22%2C%22size%22%2C%22src%22%2C%22step%22%2C%22type%22%2C%22value%22%2C%22width%22%2C%22autoplay%22%2C%22controls%22%2C%22crossorigin%22%2C%22loop%22%2C%22muted%22%2C%22playsinline%22%2C%22poster%22%2C%22preload%22%2C%22href%22%2C%22hreflang%22%2C%22media%22%2C%22rel%22%2C%22target%22%2C%22download%22%2C%22ping%22%2C%22referrerpolicy%22%2C%22colspan%22%2C%22rowspan%22%2C%22headers%22%2C%22scope%22%2C%22allowfullscreen%22%2C%22allowpaymentrequest%22%2C%22frameborder%22%2C%22sandbox%22%2C%22srcdoc%22%2C%22alt%22%2C%22ismap%22%2C%22longdesc%22%2C%22srcset%22%2C%22sizes%22%2C%22usemap%22%2C%22async%22%2C%22defer%22%2C%22integrity%22%2C%22nomodule%22%2C%22nonce%22%2C%22cite%22%2C%22datetime%22%2C%22kind%22%2C%22label%22%2C%22start%22%2C%22coords%22%2C%22shape%22%5D)%2Co%3Ddocument.createElement(%22div%22)%3Bo.innerHTML%3Dt%3Blet%20r%3Do.getElementsByTagName(%22*%22)%3Bfunction%20a(e%2Ct)%7BArray.from(e.attributes).filter(e%3D%3Ee.name.startsWith(t)).forEach(t%3D%3Ee.removeAttribute(t.name))%7Dfor(let%20l%20of%20r)%7Blet%20i%3DArray.from(l.attributes).filter(e%3D%3E!e.name.startsWith(%22data-%22)%26%26!n.has(e.name))%3Bi.forEach(e%3D%3E%7Bconsole.log(%60Stripping%20invalid%20attribute%3A%20%5C%60%24%7Be.name%7D%5C%60%20from%20element%3A%60%2Cl)%2Cl.removeAttribute(e.name)%7D)%2Cl.removeAttribute(%22class%22)%2Cl.removeAttribute(%22style%22)%2Cl.removeAttribute(%22dir%22)%2Cl.removeAttribute(%22lang%22)%2Cl.removeAttribute(%22onclick%22)%2Ca(l%2C%22ng-%22)%2Ca(l%2C%22_ng%22)%7Dreturn%20o.innerHTML%7D(e.value)%3Be.value%3D%22%5CuD83D%5CuDCA9%20De-Crapulated%20version%20%5CuD83D%5CuDCA9%5Cn%22%2Bt%2CtargetAndSourceCompilationReadable%2B%3D%22%5Cn%5Cn%5CuD83D%5CuDCA9%20De-Crapulated%20version%20%5CuD83D%5CuDCA9%5Cn%22%2Bt%2Cn.innerHTML%3D'%3Cspan%20aria-hidden%3D%22true%22%3E%5CuD83D%5CuDC4D%5CuD83D%5CuDCA9%20%3C%2Fspan%3EDe-Crapulation%20Finished!%3Cspan%20aria-hidden%3D%22true%22%3E%20%5CuD83D%5CuDCA9%5CuD83D%5CuDC4D%3C%2Fspan%3E'%7Dfunction%20L()%7Bn.innerHTML%3D%60%3Cp%3EXpath%20and%20Source%20getter%20started.%3C%2Fp%3E%3Cul%3E%3Cli%3EHover%20over%20on%20elements%20on%20the%20page%2C%20then%20click%20when%20the%20correct%20element%20is%20highlighted%3C%2Fli%3E%3Cli%3EOr%20%3Ckbd%3ETAB%3C%2Fkbd%3E%20to%20a%20focusable%20element%20on%20the%20page%20and%20then%20press%20the%20arrow%20keys%20to%20fine%20tune%20your%20selection%20(choose%20parent%2C%20child%20and%20sibling%20elements%20in%20the%20DOM)%20and%20confirm%20that%20selection%20with%20%3Ckbd%3EEnter%3C%2Fkbd%3E%3C%2Fli%3E%3Cli%3EYou%20can%20toggle%20the%20xpath%20type%20(using%20%5C%60id%5C%60%20references%20where%20present%20or%20DOM%20position)%20by%20pressing%20%3Ckbd%3Ex%3C%2Fkbd%3E%20key%3C%2Fli%3E%3Cli%3EFind%20all%20elements%20at%20same%20DOM%20level%20by%20pressing%20%3Ckbd%3Ea%3C%2Fkbd%3E%20key%20(keep%20pressing%20%3Ckbd%3Ea%3C%2Fkbd%3E%20to%20move%20up%20the%20DOM%20tree%20while%20searching%20for%20same%20elements%2C%20then%20press%20%3Ckbd%3EY%3C%2Fkbd%3E%20to%20commit%20targets)%3C%2Fli%3E%3Cli%3EPress%20%3Ckbd%3Ei%3C%2Fkbd%3E%20to%20see%20these%20%3Cstrong%3Ei%3C%2Fstrong%3Enstructions%20again%20at%20any%20time%3C%2Fli%3E%3Cli%3EPress%20%3Ckbd%3Eh%3C%2Fkbd%3E%20to%20%3Cstrong%3Eh%3C%2Fstrong%3Eide%2Fshow%20the%20display%20of%20the%20output%20(capture)%20panel%20as%20needed%20(in%20case%20it%20is%20obscuring%20a%20target)%3C%2Fli%3E%3Cli%3EPress%20%3Ckbd%3Eq%3C%2Fkbd%3E%20to%20%3Cstrong%3Eq%3C%2Fstrong%3Euit%20the%20tool%20and%20restore%20page%20to%20previous%20state%3C%2Fli%3E%3C%2Ful%3E%60%7Dv()%2CArray.from(p).forEach(e%3D%3E%7Be.addEventListener(%22click%22%2Ct%3D%3E%7B%22allTargetsFileDownloadLinkReadable%22!%3D%3De.getAttribute(%22id%22)%26%26(t.stopPropagation()%2Ct.preventDefault()%2Cb(e%2Ct)%2Cn.innerHTML%3D%22Values%20captured%20for%20%22%2BgetXpath(e))%7D)%2Ce.addEventListener(%22focus%22%2Ct%3D%3E%7By(e%2Ct)%7D)%2Ce.addEventListener(%22mouseover%22%2Ct%3D%3E%7By(e%2Ct)%7D)%2Ce.addEventListener(%22mouseout%22%2Ce%3D%3E%7Bv()%7D)%2Ce.addEventListener(%22blur%22%2Ce%3D%3E%7Bv()%7D)%7D)%2C!function%20e()%7Blet%20t%3Ddocument.createElement(%22style%22)%3Bt.setAttribute(%22id%22%2C%22xpathGetterStyles%22)%2Ct.textContent%3D%60%23outputPanel%20button%20%7Bborder%3A1px%20solid%20white%3Bcolor%3Awhite!important%3Bbackground%3Ablack%3Bheight%3A2em%3Bmargin-right%3A1em%3B%7D%23outputPanel%20label%20%7Bcolor%3Awhite%3B%7D%23outputPanel%2C%20%23outputPanel%20*%20%7Bfont-size%3A20px%3Bfont-family%3Asans-serif%3B%7D%23outputPanel%20%7Bposition%3Afixed%3Bbottom%3A80px%3Bright%3A20px%3Bpadding%3A20px%3Bbackground%3Ablack%3Bwidth%3A50vw%3Bz-index%3A10000%3Boutline%3A3px%20solid%20white%3Bborder-radius%3A5px%3B%7D%23outputPanel%20input%2C%20%23outputPanel%20textarea%20%7Bwidth%3A100%25%3Bdisplay%3Ablock%3Bmargin%3A10px%200%3Bbackground%3Awhite%3Bcolor%3Ablack%3B%7D%23outputPanel%20textarea%20%7Bheight%3A5em%3B%7D%23outputPanel%20textarea%20%7Bfont-family%3Amonospace%3B%7D.tempHighlight%7Boutline%3A4px%20solid%20black!important%3Boutline-offset%3A-4px!important%3B-webkit-box-shadow%3A%200px%200px%200px%204px%20%23fff%3Bbox-shadow%3A%200px%200px%200px%204px%20%23fff%3B%7D%23infoPanel%20%7Bz-index%3A100000%3Bfont-size%3A20px%3Bbackground%3Argba(0%2C0%2C0%2C0.8)%3Bcolor%3A%23fff%3Bfont-weight%3Anormal%3Bpadding%3A10px%3Bposition%3Afixed%3Btop%3A50%25%3Bleft%3A50%25%3Btransform%3Atranslate(-50%25%2C-50%25)%3Bmax-width%3A50vw%3Bfont-family%3Asans-serif%3Boverflow-wrap%3A%20break-word%3Boutline%3A3px%20solid%20white%3Bborder-radius%3A5px%3B%7D%23infoPanel%3Aempty%20%7Bvisibility%3Ahidden%3B%7D%23infoPanel%20code%20%7Bcolor%3Alime%7D%23allTargetsFileDownloadLinkReadable%20%7Bright%3A20px%3Bbackground%3Argba(41%2C%2098%2C%2024%2C0.9)%3B%7D%23allTargetsFileDownloadLinkProcessed%20%7Bright%3A280px%3Bbackground%3Argba(135%2C%2048%2C%20167%2C0.9)%3Boutline%3A3px%20solid%20white%3Bborder-radius%3A5px%3B%7D.allTargetsFileDownloadLink%20%7Bposition%3Afixed%3Bbottom%3A20px%3Bcolor%3Awhite!important%3Bfont-weight%3Abold%3Bpadding%3A10px%3Bfont-family%3Asans-serif%3Bfont-size%3A16px%3Bz-index%3A10000%3Boutline%3A3px%20solid%20white%3Bborder-radius%3A5px%3B%7D.allTargetsFileDownloadLink%3Aempty%7Bvisibility%3Ahidden%7D%23infoPanel%20kbd%20%7Bcolor%3Ayellow%3Bbackground%3Atransparent!important%3B%7D%60%2Cdocument.head.appendChild(t)%7D()%2C(n%3Ddocument.createElement(%22div%22)).setAttribute(%22id%22%2C%22infoPanel%22)%2Cn.setAttribute(%22role%22%2C%22status%22)%2Cdocument.body.appendChild(n)%2Cfunction%20e()%7Blet%20t%3Ddocument.createElement(%22a%22)%3Bt.setAttribute(%22id%22%2C%22allTargetsFileDownloadLinkReadable%22)%2Ct.setAttribute(%22class%22%2C%22allTargetsFileDownloadLink%22)%2Ct.addEventListener(%22click%22%2Ce%3D%3E%7Bg()%2CallTargetsFileDownloadLinkReadable.setAttribute(%22download%22%2C%22XPATH-and-Source-Code---human-readable.html%22)%2Ce.stopPropagation()%7D)%2Cdocument.body.appendChild(t)%7D()%2Cfunction%20e()%7Blet%20t%3Ddocument.createElement(%22a%22)%3Bt.setAttribute(%22id%22%2C%22allTargetsFileDownloadLinkProcessed%22)%2Ct.setAttribute(%22class%22%2C%22allTargetsFileDownloadLink%22)%2Ct.addEventListener(%22click%22%2Ce%3D%3E%7Bg()%2CallTargetsFileDownloadLinkProcessed.setAttribute(%22download%22%2C%22XPATH-and-Source-Code---machine-readable.log%22)%2Ce.stopPropagation()%7D)%2Cdocument.body.appendChild(t)%7D()%2Cfunction%20o()%7Bdocument.addEventListener(%22keydown%22%2Cfunction(r)%7Bvar%20a%2Cl%3Bif(%22Escape%22%3D%3D%3Dr.key%26%26m()%2C%22h%22%3D%3D%3Dr.key)%7Br.preventDefault()%3Blet%20i%3Ddocument.querySelector(%22%23outputPanel%22)%3Bi%26%26(i.hasAttribute(%22hidden%22)%3F(i.removeAttribute(%22hidden%22)%2Cn.innerHTML%3D%22Output%20panel%20shown%22)%3A(i.setAttribute(%22hidden%22%2C%22hidden%22)%2Cn.innerHTML%3D%22Output%20panel%20hidden%22))%7Dif(%22d%22%3D%3D%3Dr.key%26%26(r.preventDefault()%2Cx())%2C%22ArrowUp%22%3D%3D%3Dr.key%26%26(r.preventDefault()%2Ce.parentNode%26%26%22HTML%22!%3D%3De.tagName%26%26(w(e)%2CE(e%3Dt%3De.parentNode))%2CA(e)%2Cn.textContent%3Dn.textContent%2B%22%20%5CuD83D%5CuDC48%20Press%20Return%20to%20get%20this%20element's%20details%22)%2C%22ArrowLeft%22%3D%3D%3Dr.key%26%26(r.preventDefault()%2Ce.previousElementSibling%26%26(w(e)%2Cy(e%3De.previousElementSibling%2Cr)))%2C%22ArrowRight%22%3D%3D%3Dr.key%26%26(r.preventDefault()%2Ce.nextElementSibling%26%26(w(e)%2Cy(e%3De.nextElementSibling%2Cr)))%2C%22ArrowDown%22%3D%3D%3Dr.key%26%26(r.preventDefault()%2Ce.childNodes.length%3E1))%7Bw(e)%3Blet%20s%3D!1%2Cd%3BArray.from(e.childNodes).forEach(e%3D%3E%7B1!%3D%3De.nodeType%7C%7Cs%7C%7C(s%3D!0%2Cd%3De)%7D)%2Cd%26%26y(e%3Dd%2Cr)%7Dif(%22x%22%3D%3D%3Dr.key%26%26((useIDRefs%3D!useIDRefs)%3Fn.innerHTML%3D%22Using%20ID%20refs%20(where%20available)%20to%20get%20xpath%22%3An.innerHTML%3D%22Using%20element%20position%20in%20DOM%20to%20get%20xpath%22)%2C%22y%22%3D%3D%3Dr.key%26%26(n.innerHTML%3D%22Added%20%22%2BnewTargetsAddedCount%2B%22%20targets%20to%20the%20list%22%2CallowAlerts%3D!1%2CArray.from(newCollection).forEach(e%3D%3E%7Be.click()%7D)%2CallowAlerts%3D!0)%2C%22i%22%3D%3D%3Dr.key%26%26L()%2C%22a%22%3D%3D%3Dr.key%26%26(thisTagName%3De.tagName.toLowerCase()%2CsearchScope.parentNode%26%26(searchScope%3DsearchScope.parentNode)%2Ca%3DsearchScope%2Cl%3DthisTagName%2CnewTargetsAddedCount%3D(newCollection%3Da.querySelectorAll(l)).length%2Cv()%2CArray.from(newCollection).forEach(e%3D%3E%7BE(e)%7D)%2Cn.innerHTML%3D%22%3Cp%3E%22%2BnewTargetsAddedCount%2B%22%20Possible%20matching%20targets%20found%20(highlighted%20visually)%3C%2Fp%3ESearching%3A%3Cbr%3E%22%2BgetXpath(a)%2B%22%3Cbr%3Efor%20tagName%20%60%22%2Bl%2B%22%60%3Cp%3EOpen%20console%20for%20matched%20elements.%3C%2Fp%3E%3Cp%3EPress%20%3Ckbd%3Ey%3C%2Fkbd%3E%20key%20to%20commit%20these%20targets%3C%2Fp%3E%22)%2C%22Enter%22%3D%3D%3Dr.key%26%26(r.preventDefault()%2Ce.click())%2C%22q%22%3D%3D%3Dr.key)%7Br.preventDefault()%3Blet%20u%3Ddocument.querySelectorAll(%22*%22)%3BArray.from(u).forEach(e%3D%3E%7Be.removeEventListener(%22click%22%2Cb)%2Ce.removeEventListener(%22focus%22%2Cy)%2Ce.removeEventListener(%22mouseover%22%2Cy)%2Ce.removeEventListener(%22mouseout%22%2Cv)%2Ce.removeEventListener(%22blur%22%2Cv)%2Ce.classList.remove(%22tempHighlight%22)%7D)%2CremoveEl(%22tempDOMDumpingGround%22)%2CremoveEl(%22infoPanel%22)%2CremoveEl(%22allTargetsFileDownloadLinkReadable%22)%2CremoveEl(%22allTargetsFileDownloadLinkProcessed%22)%2CremoveEl(%22outputPanel%22)%3Blet%20c%3Ddocument.querySelector(%22%23xpathGetterStyles%22)%3Bc%26%26c.remove()%2Cdocument.removeEventListener(%22keydown%22%2Co)%2Cconsole.log(%22XPath%20getter%20script%20stopped%20and%20cleaned%20up.%22)%7D%7D)%7D()%2CL()%7DremoveEl(%22tempDOMDumpingGround%22)%2CremoveEl(%22infoPanel%22)%2CremoveEl(%22allTargetsFileDownloadLinkReadable%22)%2CremoveEl(%22allTargetsFileDownloadLinkProcessed%22)%2CremoveEl(%22outputPanel%22)%2CgetXpathAndSource()%7D)()) UPDATED Dec 2024 + Click on elements on the page. + As you click, the XPATH reference for each element is added to a list in console. + You can copy that list or click on the download link to get all the captured nodes (saved as an HTML file that includes the XPATH reference and formatted/indented HTML source. + After running, you can quit by pressing 'q' and the tool will remove all panels, buttons, event listeners, and restore markup back as it was before. ##### Miscellaneous Tools * [🔖anchor for Outliner bookmarklet](https://a11y-tools.com/bookmarklets/#outliner) [Outliner](javascript:(function()%7Bfunction%20outlineEls()%7Blet%20e%3D0%2Ct%3Dprompt(%22What%20HTML%20element%3F%20%5BTip%3A%20any%20valid%20CSS%20selector%20will%20work%5D%22)%2Co%3Dprompt(%22What%20color%3F%20%5Bcolor%20name%20or%20hex%20value%20works%5D%5Cn%5CnTIP%3A%20you%20can%20undo%20the%20outline%20afterwards%20by%20pressing%20'q'%20without%20having%20to%20reload%20page%22%2C%22red%22)%3Bvar%20l%3Ddocument.querySelectorAll(t)%3Bconsole.clear()%2Cfunction%20e(t)%7Blet%20o%3Ddocument.createElement(%22style%22)%3Bo.setAttribute(%22id%22%2C%22outlinerStyles%22)%2Co.textContent%3D%60.a11y-tools-outliner%20%7Bbox-shadow%3A%200px%200px%200px%2010px%20white%3Boutline%3A%203px%20solid%20%24%7Bt%7D%3Boutline-offset%3A%20-2px%3B%7D%60%2Cdocument.head.appendChild(o)%7D(o)%2CArray.from(l).forEach(t%3D%3E%7Bconsole.log(%22Outlined%3A%22)%2Cconsole.log(t)%2Ct.classList.add(%22a11y-tools-outliner%22)%2Ce%2B%2B%7D)%2C0%3D%3D%3De%3Falert(%22No%20elements%20found%20that%20match%20the%20selector%20%22%2Bt)%3Aalert(e%2B%22%20elements%20found%20that%20match%20the%20selector%20%22%2Bt%2B%22.%20See%20log%20for%20more%20details.%22)%2Cdocument.addEventListener(%22keydown%22%2Cfunction(e)%7B%22q%22%3D%3D%3De.key%26%26(e.preventDefault()%2Cfunction%20e()%7Blet%20t%3Ddocument.querySelectorAll(%22.a11y-tools-outliner%22)%3BArray.from(t).forEach(e%3D%3E%7Be.classList.remove(%22a11y-tools-outliner%22)%7D)%3Blet%20o%3Ddocument.querySelector(%22%23outlinerStyles%22)%3Bo.remove()%7D())%7D)%7DoutlineEls()%7D)()) + Enter HTML element (or any other valid CSS selector). + Choose a colour. + Bam! All those bad boys are highlighted on the page. Sure it's a one-trick pony. Nothing wrong with ponies. + After running, you can quit by pressing 'q' and the tool will remove all highlights, restore markup back as it was before. * [🔖anchor for Blur Everything bookmarklet](https://a11y-tools.com/bookmarklets/#blureverything) [Blur Everything](javascript:(function()%7Bfunction%20grayScale(e)%7Blet%20r%3D10%3Bvar%20l%2Ct%3De.createElement(%22style%22)%3Be.head.appendChild(t)%2C(l%3Dt.sheet).insertRule(%22body%20%7Bfilter%3Ablur(%22%2Br%2B%22px)%3B%7D%22%2C0)%2Cdocument.addEventListener(%22keydown%22%2Cfunction(e)%7B%22ArrowUp%22%3D%3D%3De.key%26%26(e.preventDefault()%2Cr%2B%2B%2Cl.deleteRule(0)%2Cl.insertRule(%22body%20%7Bfilter%3Ablur(%22%2Br%2B%22px)%3B%7D%22%2C0))%2C%22ArrowDown%22%3D%3D%3De.key%26%26(e.preventDefault()%2Cr%3E0%26%26r--%2Cl.deleteRule(0)%2Cl.insertRule(%22body%20%7Bfilter%3Ablur(%22%2Br%2B%22px)%3B%7D%22%2C0))%7D)%7DgrayScale(document)%3Bvar%20iframes%3Ddocument.querySelectorAll(%22iframe%22)%3BArray.from(iframes).forEach(e%3D%3E%7BgrayScale(e.contentWindow.document)%7D)%7D)()) New Dec 2024 + Not entirely useful but hey, maybe you might just want a quick way of showing how small fonts or low contrast text is difficult for old farts like me.. + Run the bookmarklet, everything blurs. + You can increase/decrease the amount of blur after that by pressing up/down arrow keys. + If you want to reset, just arrow down to zero blur. * [🔖anchor for Blur Everything Except... bookmarklet](https://a11y-tools.com/bookmarklets/#blureverythingexcept) [Blur Everything Except...](javascript:(function()%7B'use%20strict'%3Bfunction%20findAllSiblings(node)%20%7B%2F%2F%20Set%20to%20store%20unique%20sibling%20elementsconst%20siblings%20%3D%20new%20Set()%3B%2F%2F%20Function%20to%20add%20siblings%20of%20an%20elementfunction%20addSiblings(element)%20%7Bif%20(!element)%20return%3B%2F%2F%20Get%20parent%20elementconst%20parent%20%3D%20element.parentElement%3B%2F%2F%20If%20no%20parent%2C%20we're%20doneif%20(!parent)%20return%3B%2F%2F%20Find%20all%20children%20of%20the%20parent%2C%20excluding%20the%20original%20elementArray.from(parent.children).filter(child%20%3D%3E%20child%20!%3D%3D%20element).forEach(sibling%20%3D%3E%20siblings.add(sibling))%3B%2F%2F%20Recursively%20move%20up%20the%20DOM%20treeaddSiblings(parent)%3B%7D%2F%2F%20Start%20the%20sibling%20finding%20processaddSiblings(node)%3Breturn%20Array.from(siblings)%3B%7Dfunction%20checkIfElIsBlockLevel(element)%20%7Bif%20(!(element%20instanceof%20Element))%20%7Bthrow%20new%20Error('Input%20must%20be%20a%20DOM%20element')%3B%7Dconst%20computedStyle%20%3D%20window.getComputedStyle(element)%3Bconst%20displayValue%20%3D%20computedStyle.display%3Bconst%20isBlockLevel%20%3D%20%5B'block'%2C'flex'%2C'grid'%2C'table'%2C'list-item'%2C'table-row'%2C'table-cell'%5D.includes(displayValue)%3Breturn%20isBlockLevel%3B%7Dfunction%20getXpath(el)%20%7Blet%20xpath%20%3D%20''%3Blet%20current%20%3D%20el%3Bwhile%20(current%20%26%26%20current.parentNode)%20%7Bif%20(!current.tagName)%20%7Bcurrent%20%3D%20current.parentNode%3Bcontinue%3B%7Dconst%20tagName%20%3D%20current.tagName.toLowerCase()%3Bconst%20parent%20%3D%20current.parentNode%3Bconst%20siblings%20%3D%20parent.querySelectorAll(%60%3Ascope%20%3E%20%24%7BtagName%7D%60)%3Bconst%20index%20%3D%20siblings.length%20%3E%201%20%3F%20%60%5B%24%7BArray.from(siblings).indexOf(current)%20%2B%201%7D%5D%60%20%3A%20''%3Bxpath%20%3D%20xpath%20%3F%20%60%24%7BtagName%7D%24%7Bindex%7D%2F%24%7Bxpath%7D%60%20%3A%20%60%24%7BtagName%7D%24%7Bindex%7D%60%3Bcurrent%20%3D%20parent%3B%7Dreturn%20%60%2F%2F%24%7Bxpath%7D%60%3B%7Dfunction%20pickElement()%20%7Bfunction%20addAppStyles()%20%7Bconst%20elementPickerStyles%20%3D%20document.createElement('style')%3BelementPickerStyles.setAttribute('id'%2C%20'elementPickerStyles')%3BelementPickerStyles.textContent%20%3D%20%60.a11y-tools-highlight-block%20%7Bbox-shadow%3A%200px%200px%200px%202px%20black%2C%200px%200px%200px%203px%20yellow%3Boutline%3A%201px%20solid%20yellow%3Boutline-offset%3A%20-1px%3B%7D.a11y-tools-highlight-inline%20%7Bbackground%3Alime%3Bcolor%3Ablack!important%3Boutline%3A%202px%20solid%20black%3B%7D%23infoPanel%20%7Bz-index%3A%201000%3Bfont-size%3A%2020px%3Bbackground%3A%20rgba(0%2C0%2C0%2C0.8)%3Bcolor%3A%20%23fff%3Bfont-weight%3A%20bold%3Bpadding%3A%2010px%3Bposition%3A%20fixed%3Bbottom%3A%2020px%3Bleft%3A%2020px%3Bfont-family%3A%20sans-serif%3Bvisibility%3A%20hidden%3B%7D%23infoPanel%3Anot(%3Aempty)%20%7Bvisibility%3A%20visible%3B%7D%23infoPanel%20code%20%7Bcolor%3A%20lime%3B%7D.a11y-tools-blurred-elements%20%7Bfilter%3Ablur(5px)%3Bopacity%3A0.8%3B%7D.a11y-tools-highlighted-element-block%20%7Bbox-shadow%3A%200px%200px%200px%202px%20black%2C%200px%200px%200px%203px%20lime%3Boutline%3A1px%20solid%20lime%3Boutline-offset%3A-1px%3B%7D.a11y-tools-highlighted-element-inline%20%7Boutline%3A2px%20solid%20black%3B%7D%60%3Bdocument.head.appendChild(elementPickerStyles)%3B%7Dconst%20state%20%3D%20%7BcurrentEl%3A%20null%2CpreventClicks%3A%20true%2ChasRun%3A%20false%2CisActive%3A%20true%7D%3Bconst%20infoPanel%20%3D%20(()%20%3D%3E%20%7Bconst%20panel%20%3D%20document.createElement('div')%3Bpanel.id%20%3D%20'infoPanel'%3Bpanel.setAttribute('role'%2C%20'status')%3Bdocument.body.appendChild(panel)%3Breturn%20panel%3B%7D)()%3Bfunction%20removeAllHighlights()%7Bconst%20allHighlightedEls%20%3D%20document.querySelectorAll('.a11y-tools-highlighted-element-block%2C.a11y-tools-highlighted-element-inline%2C.a11y-tools-blurred-elements')%3BallHighlightedEls.forEach(el%20%3D%3E%20%7Bel.classList.remove('a11y-tools-highlighted-element-block')%3Bel.classList.remove('a11y-tools-highlighted-element-inline')%3Bel.classList.remove('a11y-tools-blurred-elements')%3B%7D)%3B%7Dfunction%20highlightElement(el)%20%7BremoveAllHighlights()%3BremoveInfoPanel()%3Bconst%20allSiblings%20%3D%20findAllSiblings(el)%3BallSiblings.forEach(sibling%20%3D%3E%20%7Bif%20(checkIfElIsBlockLevel(el))%20%7Bel.classList.add('a11y-tools-highlighted-element-block')%3B%7D%20else%20%7Bel.classList.add('a11y-tools-highlighted-element-inline')%3B%7Dsibling.classList.add('a11y-tools-blurred-elements')%3B%7D)%3B%7Dfunction%20updateElement(el%2C%20shouldHighlight%20%3D%20true)%20%7Bif%20(!el%20%7C%7C%20!state.isActive)%20return%3Bif%20(state.currentEl)%20%7Bstate.currentEl.classList.remove('a11y-tools-highlight-block')%3Bstate.currentEl.classList.remove('a11y-tools-highlight-inline')%3B%7Dstate.currentEl%20%3D%20el%3Bif%20(shouldHighlight%20%26%26%20!state.hasRun)%20%7Bif%20(checkIfElIsBlockLevel(el))%20%7Bel.classList.add('a11y-tools-highlight-block')%3B%7D%20else%20%7Bel.classList.add('a11y-tools-highlight-inline')%3B%7D%7DinfoPanel.innerHTML%20%3D%20getXpath(el)%3B%7Dconst%20keyHandlers%20%3D%20%7BArrowUp%3A%20(e)%20%3D%3E%20%7Be.preventDefault()%3Bif%20(state.currentEl%3F.parentNode%3F.tagName%20!%3D%3D%20'HTML')%20%7BupdateElement(state.currentEl.parentNode)%3BinfoPanel.textContent%20%2B%3D%20'%20(Press%20Return%20to%20isolate%20this%20element)'%3B%7D%7D%2CArrowLeft%3A%20(e)%20%3D%3E%20%7Be.preventDefault()%3BupdateElement(state.currentEl%3F.previousElementSibling)%3B%7D%2CArrowRight%3A%20(e)%20%3D%3E%20%7Be.preventDefault()%3BupdateElement(state.currentEl%3F.nextElementSibling)%3B%7D%2CArrowDown%3A%20(e)%20%3D%3E%20%7Be.preventDefault()%3Bconst%20firstElementChild%20%3D%20Array.from(state.currentEl%3F.childNodes%20%7C%7C%20%5B%5D).find(node%20%3D%3E%20node.nodeType%20%3D%3D%3D%201)%3BupdateElement(firstElementChild)%3B%7D%2CEnter%3A%20(e)%20%3D%3E%20%7Be.preventDefault()%3Bstate.currentEl%3F.click()%3B%7D%7D%3B%2F%2F%20Store%20event%20listeners%20to%20allow%20removalconst%20eventListeners%20%3D%20%7Bkeydown%3A%20null%2Cclick%3A%20%5B%5D%2Cmouseover%3A%20%5B%5D%2Cmouseout%3A%20%5B%5D%7D%3Bfunction%20removeAllEventListeners()%20%7B%2F%2F%20Remove%20key%20event%20listenerif%20(eventListeners.keydown)%20%7Bdocument.removeEventListener('keydown'%2C%20eventListeners.keydown)%3B%7D%2F%2F%20Remove%20click%2C%20mouseover%2C%20and%20mouseout%20listeners%20from%20all%20elementsdocument.querySelectorAll('*').forEach(el%20%3D%3E%20%7BeventListeners.click.forEach(listener%20%3D%3E%20el.removeEventListener('click'%2C%20listener))%3BeventListeners.mouseover.forEach(listener%20%3D%3E%20el.removeEventListener('mouseover'%2C%20listener))%3BeventListeners.mouseout.forEach(listener%20%3D%3E%20el.removeEventListener('mouseout'%2C%20listener))%3B%7D)%3B%2F%2F%20Clear%20listener%20arrayseventListeners.click%20%3D%20%5B%5D%3BeventListeners.mouseover%20%3D%20%5B%5D%3BeventListeners.mouseout%20%3D%20%5B%5D%3B%7Dfunction%20removeInfoPanel()%7Bif%20(infoPanel%20%26%26%20infoPanel.parentNode)%20%7BinfoPanel.parentNode.removeChild(infoPanel)%3B%7D%7Dfunction%20stopElementPicker()%20%7B%2F%2F%20Remove%20any%20existing%20highlighted%20nodesremoveHighlightedNodes()%3B%2F%2F%20Stop%20processingstate.isActive%20%3D%20false%3Bstate.preventClicks%20%3D%20false%3B%2F%2F%20Remove%20all%20event%20listenersremoveAllEventListeners()%3BremoveInfoPanel()%3B%7Dfunction%20removeHighlightedNodes()%20%7Bconst%20allOutlinedEls%20%3D%20document.querySelectorAll('.a11y-tools-highlight')%3BArray.from(allOutlinedEls).forEach((el)%20%3D%3E%20%7Bel.classList.remove('a11y-tools-highlight')%3B%7D)%3Bconst%20elementPickerStyles%20%3D%20document.querySelector('%23elementPickerStyles')%3Bif%20(elementPickerStyles)%20elementPickerStyles.remove()%3B%7D%2F%2F%20Key%20event%20handler%20for%20quitting%20and%20other%20actionseventListeners.keydown%20%3D%20(e)%20%3D%3E%20%7B%2F%2F%20Check%20for%20quit%20keyif%20(e.key%20%3D%3D%3D%20'q'%20%26%26%20state.isActive)%20%7Bconsole.log('quitting')%3Be.preventDefault()%3BstopElementPicker()%3Breturn%3B%7D%2F%2F%20Existing%20key%20handlersconst%20handler%20%3D%20keyHandlers%5Be.key%5D%3Bif%20(handler%20%26%26%20state.isActive)%20handler(e)%3B%7D%3Bdocument.addEventListener('keydown'%2C%20eventListeners.keydown)%3B%2F%2F%20Add%20event%20listeners%20to%20all%20elements%20with%20trackingdocument.querySelectorAll('*').forEach(el%20%3D%3E%20%7Bconst%20clickListener%20%3D%20(e)%20%3D%3E%20%7Bif%20(state.preventClicks%20%26%26%20state.isActive)%20%7Be.preventDefault()%3Be.stopPropagation()%3Bstate.hasRun%20%3D%20el.tagName%20%3D%3D%3D%20'HTML'%3Bstate.preventClicks%20%3D%20!state.hasRun%3BhighlightElement(el)%3BupdateElement(el)%3B%7D%7D%3Bel.addEventListener('click'%2C%20clickListener)%3BeventListeners.click.push(clickListener)%3Bconst%20mouseoverListener%20%3D%20(e)%20%3D%3E%20%7Bif%20(state.isActive)%20%7Be.stopPropagation()%3BupdateElement(el)%3B%7D%7D%3Bel.addEventListener('mouseover'%2C%20mouseoverListener)%3BeventListeners.mouseover.push(mouseoverListener)%3Bconst%20mouseoutListener%20%3D%20()%20%3D%3E%20%7Bif%20(state.isActive)%20%7Bstate.currentEl%3F.classList.remove('a11y-tools-highlight')%3B%7D%7D%3Bel.addEventListener('mouseout'%2C%20mouseoutListener)%3BeventListeners.mouseout.push(mouseoutListener)%3B%7D)%3BaddAppStyles()%3BinfoPanel.textContent%20%3D%20'%5C'Blur%20Everything%20Except...%5C'%20started.%20Click%20on%20element%20you%20want%20to%20highlight%20(leaving%20everything%20else%20blurred).%20Press%20%22q%22%20to%20quit.'%3B%7DpickElement()%7D)()) New Dec 2024 + Click on any section of a web page and everything else on the page becomes a blur, while the selected portion gets a clear border. + You can also navigate and select using arrow keys and then remove the node using ENTER. + Possibly a handy tool to use when indicating a part of a page in documentation, error reporting and such like. * [🔖anchor for Freeze the DOM (debugger) bookmarklet](https://a11y-tools.com/bookmarklets/#DOMfreezer) [Freeze the DOM (debugger)](javascript:(function()%7Bif(confirm(%22Make%20sure%20dev%20tools%20is%20open%20before%20running%3A%5Cn%5CnOK%20%3D%20Dev%20Tools%20is%20running%5CnCancel%20%3D%20Give%20me%20a%20minute%2C%20I'll%20open%20it%20up%20and%20then%20try%20again%22))%7Bfunction%20addAppStyles()%7Bconst%20e%3Ddocument.createElement(%22style%22)%3Be.textContent%3D%22%23DOMfreezeTimer%20%7Bline-height%3A1%3Btext-align%3Acenter%3Bposition%3Afixed%3Btop%3A50%25%3Bleft%3A50%25%3Bbackground%3Ablack%3Bopacity%3A0.8%3Bcolor%3Awhite%3Bfont-size%3A5em%3Bpadding%3A1em%3Bborder-radius%3A10px%3Btransform%3A%20translate(-50%25%2C-50%25)%3B%7D%23DOMfreezeTimer.frozen%7Bfont-size%3A3em%7D%22%2Cdocument.head.appendChild(e)%7Dfunction%20addActionFloatingPanelToBody()%7Bconst%20e%3Ddocument.createElement(%22div%22)%3Be.setAttribute(%22id%22%2C%22DOMfreezeTimer%22)%2Ce.setAttribute(%22role%22%2C%22alert%22)%2Cdocument.body.appendChild(e)%7DaddAppStyles()%2CaddActionFloatingPanelToBody()%3Bconst%20e%3Ddocument.querySelector(%22%23DOMfreezeTimer%22)%3Bfunction%20countdown(t)%7Bconsole.clear()%2Cconsole.log(t)%2Ce.textContent%3Dt%7Dcountdown(%223%22)%2CsetTimeout(()%3D%3E%7Bcountdown(%222%22)%7D%2C1e3)%2CsetTimeout(()%3D%3E%7Bcountdown(%221%22)%7D%2C2e3)%2CsetTimeout(()%3D%3E%7Be.classList.add(%22frozen%22)%2Ccountdown(%22DOM%20Frozen%20for%20inspection%22)%2CsetTimeout(()%3D%3E%7Be.remove()%7D%2C5e3)%7D%2C3e3)%7D%7D)()) + Kick starts the dev tools debugger. + Provides a 3-second countdown while you 'prepare your DOM'. + Debugger takes over so you can then start inspecting dynamic content that might otherwise disappear (dialogs, hover content etc). * [🔖anchor for Unframe iFrames bookmarklet](https://a11y-tools.com/bookmarklets/#unframeiframes) [Unframe iFrames](javascript:(function()%7B'use%20strict'%0Afunction%20unframeAllTheIframes()%7B%0A%20%20console.clear()%3B%0A%20%20let%20links%3D%22%22%3B%0A%20%20const%20iframes%3Ddocument.querySelectorAll('iframe')%3B%0A%20%20Array.from(iframes).forEach(function%20(iframe)%20%7B%0A%20%20%20%20if%20(iframe.src.indexOf(%22http%22)%3D%3D%3D0)%20%7B%0A%20%20%20%20%20%20links%2B%3D%22%3Ca%20class%3D%5C%22unframed-link%5C%22%20href%3D%5C%22%22%20%2B%20iframe.src%20%2B%20%22%5C%22%20target%3D%5C%22_blank%5C%22%3EiFrame%3C%2Fa%3E%22%3B%0A%20%20%20%20%7D%0A%20%20%7D)%3B%0A%20%20let%20newDiv%20%3D%20document.createElement(%22DIV%22)%3B%0A%20%20newDiv.innerHTML%20%3D%20links%3B%0A%20%20newDiv.setAttribute(%22id%22%2C%22unframedLinksContainer%22)%3B%0A%20%20document.querySelector(%22body%22).appendChild(newDiv)%3B%0A%20%20const%20iframeLinks%3Ddocument.querySelectorAll('.unframed-link')%3B%0A%20%20Array.from(iframeLinks).forEach(function%20(iframeLink)%20%7B%0A%20%20%20%20iframeLink.click()%3B%0A%20%20%7D)%3B%0A%20%20setTimeout(function()%7B%0A%20%20%20%20document.querySelector('%23unframedLinksContainer').remove()%3B%0A%20%20%7D%2C%20500)%3B%0A%0A%7D%0AunframeAllTheIframes()%3B%7D)()) + Finds all `iframe` elements that start with http in the src. + Opens each of the `iframe`s in a new window. + That's it. Do whatever you need to do with those pages after that ..., A11y Bookmarklets | A11y Tools, a11y-tools.com, 01jenttc2bk4j645xnvrdzmsm7.