About this set
A contribution-style heatmap: a year of days laid out as 52 week columns of seven cells, each shaded in one of five greens by how much happened that day, with month labels across the top, Monday, Wednesday and Friday down the side and a Less to More legend. It suits developer profiles, habit trackers, learning streaks and any dashboard that shows a year of daily activity at a glance. The grid is CSS grid with grid-auto-flow: column, so cells fill week by week, and the shade is one class per cell. Because a field of coloured squares means nothing to a screen reader, the grid is exposed as a single image with a descriptive label, and a visually hidden table lists the commit total for every month as text. The heatmap sits in a horizontally scrollable region with a minimum width of 700 pixels, so the cells stay readable on a phone instead of shrinking to dots; that region is focusable so it can be scrolled with the keyboard. The Bootstrap version uses a card and utilities around the same grid, and the Tailwind version sets the five shades as theme colours.
What’s included
- 52 weeks by 7 days on CSS grid, filled column by column
- Five shades from a single set of custom properties
- Visually hidden table of monthly totals as the text alternative
- Keyboard-scrollable region keeps cells legible at 375px
- Plain CSS, Bootstrap and Tailwind versions of the same design
Accessibility
The cell grid has role="img" with a label that summarises it, and the same data is available as a hidden table of commits per month with a caption and headers. The month and weekday labels are hidden from assistive tech because the table covers them. The scrollable region has tabindex="0", an aria-label and a 2px violet focus outline. Nothing animates.
Customise it
Change --hm-0 to --hm-4 (the five shades) and --hm-muted on .heat in plain CSS and Bootstrap, or the --color-hm-* theme colours in Tailwind. Cell size follows the container; the min-width of 700px sets when scrolling starts.
