Open experiment
Aurora bar chart
A responsive five-column comparison chart built as a semantic list. Each focusable column exposes the same concise data label on keyboard focus and pointer hover.
Lab tested Responsive Dark mode
- Version
- 1.0.0
- Updated
- 2026-08-02
- Dependencies
- Zero
<figure class="cmp-aurora-bars" aria-labelledby="cmp-aurora-bars-title">
<figcaption>
<span id="cmp-aurora-bars-title">Weekly activation</span><strong>+24.8%</strong>
</figcaption>
<ol aria-label="Activation by weekday">
<li tabindex="0" style="--cmp-bar: 0.46"><b>46%</b><i></i><span>Mon</span></li>
<li tabindex="0" style="--cmp-bar: 0.63"><b>63%</b><i></i><span>Tue</span></li>
<li tabindex="0" style="--cmp-bar: 0.55"><b>55%</b><i></i><span>Wed</span></li>
<li tabindex="0" style="--cmp-bar: 0.82" data-best><b>82% · best</b><i></i><span>Thu</span></li>
<li tabindex="0" style="--cmp-bar: 0.71"><b>71%</b><i></i><span>Fri</span></li>
</ol>
</figure>
No runtime reactions detected Open in Editor
Validated in the lab
Experiment report
- Schema and source files passed
- Responsive test passed
- Keyboard test passed
- No console errors
Component ingredients
- Dependencies
- None
- Browser support
- Current Chrome, Current Edge, Current Firefox, Current Safari
- Version
- 1.0.0
- Last tested
- 2026-08-02
Accessibility notes
- The chart is a labelled list and every item includes its visible value.
- The best result is identified with text as well as color.
- Focus reveals the same data annotation as hover.
License: MIT License for open-source use, modification, and distribution.