{"id":20510088,"url":"https://github.com/dequelabs/agnostic-axe","last_synced_at":"2025-04-13T22:33:33.115Z","repository":{"id":47936338,"uuid":"222701292","full_name":"dequelabs/agnostic-axe","owner":"dequelabs","description":"Framework agnostic accessibility reporter, powered by axe-core","archived":false,"fork":false,"pushed_at":"2023-10-04T12:40:29.000Z","size":1173,"stargazers_count":81,"open_issues_count":16,"forks_count":6,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-04-13T05:53:15.120Z","etag":null,"topics":["a11y","a11y-testing","accessibility","axe-core"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/agnostic-axe","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dequelabs.png","metadata":{"files":{"readme":"README.MD","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-11-19T13:21:33.000Z","updated_at":"2025-04-11T06:15:41.000Z","dependencies_parsed_at":"2024-06-21T17:51:17.881Z","dependency_job_id":"c1256f05-64bb-48a2-a901-c513f0c34292","html_url":"https://github.com/dequelabs/agnostic-axe","commit_stats":null,"previous_names":["juliettepretot/agnostic-axe"],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dequelabs%2Fagnostic-axe","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dequelabs%2Fagnostic-axe/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dequelabs%2Fagnostic-axe/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dequelabs%2Fagnostic-axe/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dequelabs","download_url":"https://codeload.github.com/dequelabs/agnostic-axe/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248670503,"owners_count":21142901,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["a11y","a11y-testing","accessibility","axe-core"],"created_at":"2024-11-15T20:27:46.093Z","updated_at":"2025-04-13T22:33:33.064Z","avatar_url":"https://github.com/dequelabs.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# agnostic-axe\n\nDeveloper tool that continously observes the DOM to detect accessibility issues. Its audits are powered by [axe-core](https://github.com/dequelabs/axe-core).\n\n![Screenshot of an opened website, with accessibility issues displayed in the browser console](screenshot.jpg)\n\n## Basic Usage\n\nThis is all you need to start reporting accessibility issues to the browser console:\n\n```js\nimport('https://unpkg.com/agnostic-axe@3').then(\n  ({ AxeObserver, logViolations }) =\u003e {\n    const MyAxeObserver = new AxeObserver(logViolations)\n    MyAxeObserver.observe(document)\n  }\n)\n```\n\n\u003e To try agnostic-axe, paste the above code into the browser console on a site of your choosing.\n\nWhen adding agnostic-axe to your project, be sure to only import it in your development environment. Else your application will use more resources than necessary. ([Here's an example of how to do this with webpack](WEBPACK_EXAMPLE.MD))\n\n## API Details\n\n### AxeObserver constructor\n\nAccepts one parameter:\n\n- `violationsCallback` (required). A function that is invoked with an array of violations, as reported by [axe-core](https://github.com/dequelabs/axe-core). To log violations to the console, simply pass the `logViolations` function exported by this module.\n\n### AxeObserver.observe\n\nAccepts one parameter:\n\n- `targetNode` (required). A DOM node. AxeObserver audits this node, and continously monitors it for changes. If a change has been detected, AxeObserver audits the parts that have changed, and reports any new accessibility defects.\n\nTo observe multiple nodes, one can call the `AxeObserver.observe` method multiple times.\n\n```js\nMyAxeObserver.observe(document.getElementById('react-main'))\nMyAxeObserver.observe(document.getElementById('vue-header'))\nMyAxeObserver.observe(document.getElementById('page-footer'))\n```\n\n### AxeObserver.disconnect\n\nAccepts no parameters.\n\nInvoke this method to stop observing the DOM. This also clears the cache of violations that were already reported.\n\n```js\nMyAxeObserver.disconnect()\n```\n\n### Interacting with the axe-core API\n\nThe instance of axe-core used by agnostic-axe is exported by this module. Import it to interact with the [axe-core API](https://github.com/dequelabs/axe-core/blob/develop/doc/API.md).\n\n```js\nimport('https://unpkg.com/agnostic-axe@3').then(\n  ({ axeCoreInstance, AxeObserver, logViolations }) =\u003e {\n    axeCoreInstance.registerPlugin(myPlugin)\n    // ...\n  }\n)\n```\n\n## Comparison with react-axe\n\nUnlike framework specific implementations of [axe-core](https://github.com/dequelabs/axe-core), such as [react-axe](https://github.com/dequelabs/react-axe), agnostic-axe uses a [MutationObserver](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver) to listen for changes directly in the DOM. This has two advantages:\n\n1. It works with all web frameworks, and with any of their versions. This is key, as for example, at the time of writing, [react-axe](https://github.com/dequelabs/react-axe) does not work with the newer React features (function components and fragments), while agnostic-axe does supports them.\n2. It only runs audits if the actual DOM changes. This means it uses less resources than [react-axe](https://github.com/dequelabs/react-axe), which runs audits when components rerender, even if their output does not change.\n\nagnostic-axe is optimized for performance. Its audits are small chunks of work that run in the browser's idle periods.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdequelabs%2Fagnostic-axe","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdequelabs%2Fagnostic-axe","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdequelabs%2Fagnostic-axe/lists"}