apjeljpachdcjkgnamgppgfkmddadcki
Helps inspecting the css stacking contexts and solving the z-index war. Have you ever tried to use the z-index property, just to find out that, no matter how high you set it, it won't work as expected? That's because the z-index property relies on an implicit concept called "stacking contexts". After looking up what they are and how they work (informations you can find on MDN), you can use this devtools extension to inspect these contexts and troubleshoot any z-index problem you might face. This extension will add a new panel that will show stacking contexts in a tree view, and will also append a new sidebar to the elements panel with some useful information about the selected element. To check an in-depth documentation please refer to the github page: https://github.com/andreadev-it/stacking-contexts-inspector If you want to report an issue or to make a feature request, please use the Issue section in the aforementioned github repository. CHANGELOG: • v. 1.1.16 - Added check for container queries (thanks @gismya !) • v. 1.1.15 - Switched to scripting api and added support for pseudoelements. • v. 1.1.14 - Fixed problem with permission for manifest v3. • v. 1.1.13 - Moved to manifest v3. Added z-index to the stacking context panel sidepan as well. • v. 1.1.12 - Fixed bug with vendor-prefixed properties not detected when checking for stacking contexts. • v. 1.1.11 - Added z-index value to the "Context details" section in the sidebar. • v. 1.1.10 - Removed unnecessary permission request to comply to the CWS Security Policy. • v. 1.1.9 - Implemented context DOM node inspection within iframes and shadowDOM. Now the extension works also on local files (file:/// scheme). • v. 1.1.8 - Added warning when the page changes, support for shadow DOM and basic settings. • v. 1.1.7 - Little style fixes. Now it's also available on Firefox because of some little code changes. Cleaned code. • v. 1.1.5 - Fixed bug related to css modules transition (unstyled spinner). • v. 1.1.4 - Added dark theme (previously it was unusable with the dark theme on). • v. 1.1.3 - Fixed bug on page navigation. • v. 1.1.2 - Added support for iframes without the "src" attribute (some iframes with "src" might work, but it shouldn't be expected). Also, the loading indicator has been introduced in the sidebar (elements panel) too, and the sidebar now has its own "refresh contexts" button. • v. 1.1.1 - Fixed bug where static contexts created by their parent having a display flex or grid where not detected. • v. 1.1.0 - Now the extension works on tabs that were already open when it was installed. - The right-click context menu has been replaced by contextual buttons, because it wasn't working correctly (it might be added again in the future). - Now the context tree page will show a loading indicator when the stacking context are taking a long time to load. - On the developer side, all the code has been moved to preact, as a first step to make it open source. • v. 1.0.1 - Small accessibility changes and visual tweaks.
VisBug
Open source web design debug tools built with JavaScript: a FireBug for designers. - Point, click, move, resize & tinker - Edit or style any page, in any state, like it's an artboard - Inspect styles, spacing, distance, accessibility and alignment - Nitpick layouts & content, in the real end environment, at any device size - Leverage adobe/sketch skills - Edit text, replace images - Design within the chaos: use production or prototypes and the odd states they produce, as artboards and design opportunities - Design while DevTools simulates latency, i18n, media queries, platform constraints, CPUs, screensize, etc - Make more decisions on the front end of your site/app (a11y, responsive, edge cases, etc) - No waiting for developers to expose their legos, just go direct and edit the end state (regardless of framework) and execute/test an idea Give power to designers & content creators, in a place where they currently feel they have little to none, **by bringing design tool interactions and hotkeys to the browser**
WAVE Evaluation Tool
Evaluate web accessibility within your browser. WAVE is a web accessibility evaluation tool developed by WebAIM.org. It provides visual feedback about the accessibility of your web content by injecting icons and indicators into your page. No automated tool can tell you if your page is accessible, but WAVE facilitates human evaluation and educates about accessibility issues. All analysis is done entirely within the Chrome browser allowing secure valuation of intranet, local, password protected, and other sensitive web pages. To run a WAVE report, simply click on the WAVE icon to the right of your browser address bar, or select "WAVE this page" from the context menu. WAVE errors align with WCAG 2.2 failures. The WAVE interface facilitates human evaluation of many other aspects of accessibility and Web Content Accessibility Guidelines, ADA, and Section 508 compliance. Version 3.3.1.0 (May 2026) - Various bug fixes and performance enhancements. Update AIM score to align with 2026 WebAIM Million. Version 3.3.0.4 (December 2025) - Bug fix for scripting exception with some pages with small text. Minor interface improvements. Version 3.3.0.3 (November 2025) provides performance, interface, and testing improvements. Improved support for ARIA headings and prefers-reduced-motion user settings. Version 3.3.0.0 (October 2025) adds numerous new features, enhancements, and bug fixes. Resetting the extension no longer refreshes the page, thus supporting better testing of dynamic content. The Summary and Details panel are now combined. The AIM Score is presented. Viewing the Order, Structure, or Contrast tabs now filters to only relevant page icons. The WAVE sidebar can now be collapsed out of view. Version 3.2.7.2 (September 2024) fixes a bug that disallowed checking of local files and suppresses errors in some cases where role="presentation" is present. Version 3.2.7.0 (August 2024) adds compatibility with Manifest v3. Inputs with aria-disabled=true are no longer considered for contrast checking. Version 3.2.6.0 (August 2024) adds support for contrast checking when foreground alpha/opacity is defined. The Contrast sidebar tools are updated to support foreground alpha. Also numerous minor bug fixes and improvements. Version 3.2.5.3 (February 2024) fixes numerous minor bugs and adds testing refinements. Some hidden inputs are no longer incorrectly flagged as not labeled. Version 3.2.4.4 (October 2023) fixes a few minor bugs with testing hidden content and with the sidebar contrast tools. Version 3.2.3.9 (June 2023) removes the warning message on UserWay pages due to them removing code that changes page content when the WAVE extension is activated. Version 3.2.3.8 (June 2023) includes numerous accessibility test enhancements, several minor bug fixes, and simplification of the contrast checking tools. Users are informed that WAVE results may be manipulated on pages that utilize UserWay or accessiBe overlays. Version 3.2.3 (March 2023) includes several minor bug fixes. A previous update to test for contrast errors in hidden elements has been reverted. While this was useful for finding contrast errors in drop-down menus, tab panels, dialog windows, etc., identification of errors in hidden elements caused user confusion and, in some rare cases, false positives. Version 3.2 (December 2022) includes over 100 bug fixes and performance enhancements. The extension no longer utilizes jQuery, resulting in faster testing and better compatibility with a variety of pages. A new Navigation Order panel is available that shows the navigation order, element roles, and accessible names (what is read by a screen reader) for all navigable elements. Version 3.1.6 (October 2021) includes numerous bug fixes and test rule enhancements for better testing contrast (filters, background images, and other complex color definitions are better handled), document language (IANA-defined language values are now tested), empty links and buttons (better ARIA support for accessible name computations), broken ARIA references, etc., etc. Performance and accessibility has been improved. Version 3.1.3 (November 2020) includes performance enhancements and fixes several minor bugs, including fixes for multiple alerts for some pseudo-lists and disabled controls being incorrectly flagged for contrast failures. Version 3.1.2 (October 2020) fixes several minor bugs, including with the Structure tab sometimes incorrectly showing no structure, and improves performance and accessibility testing reliability. Version 3.1 (September 2020) includes new accessibility tests (region, figure, possible list, select element missing label, and image with title), improved contrast checking, expanded lang attribute value checking, and numerous other bug fixes and improvements. Version 3.0.9 (July 2020) includes numerous bug fixes, improved accessibility, and improved color contrast checking including fewer false positives and expanded contrast checking for form inputs.
axe DevTools - Web Accessibility Testing
Accessibility Checker for Developers, Testers, and Designers in Chrome ★Digital accessibility testing right in your browser: The Axe DevTools Extension is an automated accessibility testing tool that helps you find and fix accessibility issues early in web development right in your Chrome browser. It helps ensure your team gets fast, accurate, actionable results so you can save time on costly reworks, and create digital experiences that are compliant and work for everyone. ★Leverage the global standard in automated web accessibility testing: The free version of the Axe DevTools Extension gives you the tools to conduct page-by-page, automated accessibility testing—all run on Axe-core, the global standard in automated web accessibility testing. With the free browser extension, teams get a useful introduction to accessibility and a quick, automated way to catch defects, all while benefiting from the same reliable and consistent results trusted by industry leaders around the world. ★Find and fix even more accessibility issues with AI and automated testing: Upgrade to the pro version of the Axe DevTools Extension to move faster, smarter, and further streamline workflows with AI-enhanced features, intelligent guided testing, component-level checks, the ability to test entire user flows, central administration, deduplicated results, Jira integration, and more. Dev teams can use this pro version of the browser extension to fix a majority of issues before production by combining traditional test automation with AI, reducing remediation costs and saving time. It’s great for teams who want to check specific pages, groups of pages, or workflows for accessibility issues. To learn more about the Axe DevTools Extension visit https://www.deque.com/axe/devtools/extension Use of this extension is governed by this license agreement https://www.deque.com/terms-of-use/axe-ext/ and the privacy policy linked under the developer information Data collection information can be found here: https://docs.deque.com/devtools-server/4.0.0/en/data-collection#axe-devtools-browser-extension-free Upgrading to the Axe DevTools Extension pro plan gives you more control over what data is collected.
Accessibility Insights for Web
Accessibility Insights for Web helps developers quickly find and fix accessibility issues. The default keyboard shortcut to launch Accessibility Insights for Web is [Ctrl+Shift+K]. If that doesn't work, follow these instructions: 1. Select Shift+Alt+T to move focus to the Chrome address bar 2. Select the Left arrow key to move focus to the Accessibility Insights for Web extension. 3. Select the Space key to open the extension.
