{"id":17803618,"url":"https://github.com/mattcheely/axe-live","last_synced_at":"2026-02-06T00:02:12.798Z","repository":{"id":35121729,"uuid":"208923632","full_name":"MattCheely/axe-live","owner":"MattCheely","description":"Framework-agnostic live accessibility checks","archived":false,"fork":false,"pushed_at":"2023-03-04T04:44:40.000Z","size":250,"stargazers_count":0,"open_issues_count":2,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-14T17:05:01.950Z","etag":null,"topics":["accessibility","axe"],"latest_commit_sha":null,"homepage":"","language":"Elm","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/MattCheely.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-09-17T00:30:13.000Z","updated_at":"2022-05-01T16:34:57.000Z","dependencies_parsed_at":"2024-10-27T13:07:34.823Z","dependency_job_id":null,"html_url":"https://github.com/MattCheely/axe-live","commit_stats":{"total_commits":41,"total_committers":2,"mean_commits":20.5,"dds":0.3414634146341463,"last_synced_commit":"bd86a6dfb4d2afe90affca40d47fb3c299c5d258"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MattCheely%2Faxe-live","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MattCheely%2Faxe-live/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MattCheely%2Faxe-live/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MattCheely%2Faxe-live/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/MattCheely","download_url":"https://codeload.github.com/MattCheely/axe-live/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247671333,"owners_count":20976729,"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":["accessibility","axe"],"created_at":"2024-10-27T12:47:25.737Z","updated_at":"2026-02-06T00:02:12.754Z","avatar_url":"https://github.com/MattCheely.png","language":"Elm","funding_links":[],"categories":[],"sub_categories":[],"readme":"# axe-live\n\n\nhttps://user-images.githubusercontent.com/604797/121821320-4fa6e400-cc66-11eb-8362-45f20306e416.mp4\n\n\n## About\n\naxe-live is a framework-agnostic tool for running accessibility checks against web\napplications. It uses Deque Labs' [axe](https://www.deque.com/axe/) library to highlight and disable\nelements on the page which have accessibility problems. The goal is to provide something like compiler\nerrors for accessibilty during the development cycle. This should help problems get addressed right\naway rather than waiting on a QA process or user reports.\n\n## Installation\n\n```\nnpm install axe-live\n```\n\nor\n\n```\nyarn add axe-live\n```\n\n## Setup\n\nWhen your app is running in development mode, start axe-live:\n\n```javascript\nimport * as AxeLive from \"axe-live\";\n\nAxeLive.run();\n```\n\nBy default, axe-live will watch for changes to your document and try to efficiently re-check when it updates.\n\nYou can customize the behavior by passing an options object to `run()`:\n\n```javascript\nimport * as AxeLive from \"axe-live\";\n\nAxeLive.run({\n  // The node on the page that should be checked, defaults to document\n  target: document.getElementById('#app'),\n  // Whether or not to re-run Axe on DOM changes, defaults to true\n  watch: true,\n  // Whether or not to start with a minimal display, defaults to false\n  minimized: false,\n  // Axe configuration options, defaults to Axe defaults\n  axeOptions: { runOnly: ['wcag2a', 'wcag2aa'] }\n});\n```\n\nThe axe configuration options are passed directly to axe-core's\n[`axe.run`](https://www.deque.com/axe/core-documentation/api-documentation/#api-name-axerun)\n[options parameter](https://www.deque.com/axe/core-documentation/api-documentation/#options-parameter). \n\n## Important Notes\n\nAutomated checks can ensure you've not made any basic mistakes, but are only part of a robust a11y solution. \nMany of the WCAG guidelines cannot be evaluated automatically, and require a human assesment. It's worthwhile \nto try your app out with a screenreader and think about the usability of the experience for impared users. \n\nThe `axe-core` libarary is _very_ large. You should configure your build to only bundle `axe-live` when \nrunning in development mode. Otherwise your users will pay an unnecesarily high cost in download times\nfor your app.\n\nOn DOM changes, the watcher is conservative in what it asks Axe to check. Specifically, it only checks changed\nelements and elements that were previously in error. This is to make checks faster, but it may result in a rare\nmiss in the event of a change that renders a previously valid elment invalid. (e.g. a label disappears, making\na previously correct input invalid)\n\nBecause items in error are re-checked when the DOM changes, it's a good idea to fix any problems that affect\nlarge ancestor elements first. If your `html` or `body` elements have a problem, sort those out first so every\nchange doesn't re-check your whole page.\n\nThe error highlights are generated from selectors output by axe, wich are only as specific as they need to be.\nIf you have axe-live running while a page is adding elements, you may see some highlights briefly appear and\nthen disappear as new elements are added that match older selectors before axe runs again.\n\nFrequent DOM changes like JS-based animations that update style attributes could lead to checks that run too\nfrequently. You may want to turn off automatic re-checking for fewer pauses in that situation.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmattcheely%2Faxe-live","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmattcheely%2Faxe-live","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmattcheely%2Faxe-live/lists"}