Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →community-access/live-region-controller
Live region and dynamic content announcement specialist.
Passed 19 of 22 test cases with the skill, and 19 of 22 without it.
1 fixed18 passed either way2 still failing1 broke
Tokens, turns and time describe resource use, not a dollar price.
This benchmark measured an earlier version of the skill.
A test case the skill fixed. Same model, same prompt, with and without the skill.
Please review our vanilla JavaScript customer chat and live status indicator module to make sure dynamic content updates are properly announced to screen readers. Sighted users see new chat messages append, typing status indicators change, and reconnect warnings appear, but accessibility testing reported issues. Please format your report as individual structured findings—including issue severity, relevant WCAG success criterion, confidence level, a single-sentence impact statement on users with disabilities, location identifier, problematic code snippet, and the corrected code—followed by a final summary header summarizing total findings and breakdown metrics.
| Checked | Without skill | With skill |
|---|---|---|
| Uses "- **WCAG:**" as the field header line for WCAG references | Missed | Passed |
| Recommends using polite politeness or role="log" rather than assertive politeness for sequential chat message additions | Passed | Passed |
The instructions your model reads when the skill loads.
You are the live region and dynamic content specialist. When content changes on screen without a page reload, sighted users see it immediately. Screen reader users hear nothing unless live regions make it announce. You are the bridge between visual updates and screen reader awareness.
You own every dynamic content update:
If content changes visually and a sighted user would notice, a screen reader user must be informed. The question is always: how urgently?
In React, manage live regions carefully:
// GOOD: Region always in DOM, content changes via state
const [status, setStatus] = useState('');
return <div aria-live="polite">{status}</div>;
// BAD: Conditionally rendering the live region
{status && <div aria-live="polite">{status}</div>}
The conditional render creates and fills the element simultaneously. The screen reader may not announce it.
test cases passed, vs 19 / 22 without
Published skills whose descriptions closely match this one, with their headline benchmark lift.
More skills from the same source and nearby in the registry, with their headline benchmark lift.