dgtlmoon / dgtlmoon/changedetection.io
[a11y] Lighthouse-detected gaps in dashboard UI: form labels, main landmark, link names, table header scopes
- Dominant language
- Python
- Stars
- 34.1k
- Forks
- 2k
- Avg merge
- 23h 38m
- Merged PRs (30d)
- 67
Description
## Summary
Running [Lighthouse](https://developer.chrome.com/docs/lighthouse/overview) (v12) against a stock changedetection.io 0.54.10 dashboard surfaced four reproducible accessibility audit failures in the upstream UI. None are critical (a11y score 86/100 — already pretty good), but each is a small fix that would push the score higher and improve assistive-technology UX.
## Environment
- changedetection.io 0.54.10 (uv-installed via PyPI on Python 3.13)
- Default theme, no custom CSS
- Lighthouse 12.x via `npx lighthouse` against the running dashboard
## Lighthouse audit failures
1. **Form elements do not have associated labels** — search/filter inputs in the dashboard's main grid lack `` or `aria-label` attributes. Screen readers announce them as "edit" with no context.
2. **Document does not have a `` landmark** — the body wraps content in `
3. **Links do not have a discernible name** — a few icon-only links (e.g., the per-watch action icons) have no text content or `aria-label`. Screen readers announce them as "link" with no destination hint.
4. **`` headers missing scope** — the watch list table uses `` without `scope="col"` or `scope="row"`, so the header → cell association isn't conveyed to assistive tech.
These are stable across page loads — not flaky audits.
## Suggested fix scope
All four are template-only fixes (no JS / backend changes), each in the `templates/` directory. Estimated effort: under an hour total. I'm happy to open a PR if there's interest, but wanted to confirm desire/scope before doing so.
## Why I'm filing
Self-hosting the dashboard for a personal price monitor; Lighthouse gives a useful "is this UI clean?" signal. Wanted to surface concrete a11y gaps for upstream improvement rather than fork-and-patch downstream.
Contributor guide
Research direction
Run Lighthouse 12 against a stock dashboard, then inspect the affected templates/ files for the dashboard inputs, page wrapper, icon-only links, and watch-list table. Done means the four named accessibility audits pass, with labels or accessible names, a main landmark, and table header associations present; rerun Lighthouse to verify.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- html
- Domain
- accessibility, frontend
- Issue type
- Bug
- Difficulty
- 2/5
- Estimated time
- Under an hour
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 58/100