web-accessibility-auditor

Use the native `<dialog>` element with `showModal()`, which handles focus trapping automatically. Move focus into the modal on open, hide the background with `aria-hidden="true"`, support the Escape key, and return focus to the triggering button on close.

Use native interactive elements like `<button>` and `<a>` instead of clickable divs, since they include built-in focus and Enter/Space key behavior. Never remove focus outlines globally; use `:focus-visible` to show outlines only for keyboard users.

Prefer native HTML elements first, since they carry built-in semantics and keyboard support. Add ARIA only for custom widgets like accordions or tabs, using states such as `aria-expanded`, `aria-pressed`, and `aria-invalid` to communicate behavior to screen readers.

No, placeholder is not a label because it disappears when the user types, causing cognitive loss. Every input needs an associated `<label>` linked via `for`/`id` or implicit wrapping, with errors announced using `aria-describedby` and `role="alert"`.

Content injected without a page reload is invisible to screen readers unless it uses a live region. Add `aria-live="polite"` for non-urgent updates like result counts, or `role="alert"` for errors that must interrupt the user immediately.