diff --git a/README.md b/README.md index 4bda13d..b8f0737 100644 --- a/README.md +++ b/README.md @@ -1,9 +1,99 @@ # AbleDOM -Continuous detection of typical web application accessibility problems. +A continuous accessibility (a11y) monitor for modern web applications. + +AbleDOM is a lightweight JavaScript/TypeScript library that observes your DOM in real-time and detects common accessibility issues as they appear. _Here be dragons_. +## Installation + +```bash +npm install abledom +# or +yarn add abledom +# or +pnpm add abledom +``` + +## Quick start + +```typescript +import { AbleDOM } from "abledom"; + +const _ableDOM = new AbleDOM(window, { log: window.console?.error }); + +// ...Create and add rules and exceptions +``` + +### Using rules + +```typescript +import { AbleDOM, ContrastRule } from "abledom"; + +const contrastRule = new ContrastRule(); +this._ableDOM.addRule(contrastRule); +``` + +### Adding valid exceptions + +```typescript +import { AbleDOM, ContrastRule } from "abledom"; + +const contrastExceptions: ((element: HTMLElement) => boolean)[] = [ + (element: HTMLElement) => { + return element.style?.display === "none"; + }, + (element: HTMLElement) => { + return element.datalist?.ignore === "true"; + }, +]; + +const contrastRule = new ContrastRule(); + +contrastExceptions.forEach((exception) => contrastRule.addException(exception)); + +this._ableDOM.addRule(contrastRule); +``` + +## Rules + +### AtomicRule + +Detects focusable elements nested inside other atomic focusable elements (like buttons, links, or inputs). Prevents confusing interactive hierarchies that can break keyboard navigation and assistive technology functionality. + +### BadFocusRule + +Monitors focus changes to detect when focus is stolen by invisible elements. Helps identify scenarios where focus moves to elements that users cannot see, creating a poor accessibility experience. + +### ContrastRule + +Validates color contrast ratios between text and background colors according to WCAG standards. Ensures text meets minimum contrast requirements (4.5:1 for normal text, 3:1 for large text) for readability. + +### ExistingIdRule + +Verifies that elements referenced by `aria-labelledby`, `aria-describedby`, or `