About this set
Feature comparison tables for pricing pages, built as real HTML tables rather than a grid of divs, so screen readers can announce the plan and the feature for every cell. Full comparison, sticky header and feature column compares three analytics plans across sixteen features in four groups: usage, reports, data and security, and support. The header row with each plan’s name, price and button stays at the top while you scroll the table, and the feature names stay on the left while you scroll sideways on a phone. The recommended column is tinted, outlined at the top and labelled Recommended. The table sits in a scroll region that is focusable with the keyboard, named by the section heading and described by a short hint. Free and paid, with a caption is a compact two-plan table for a scheduling app, with a visible caption, a tinted Pro column and the buttons in the table footer. Values that are words, such as Next business day, are written out, and ticks and crosses come with visually hidden Included and Not included text.
What’s included
- Real table markup with column headers, row headers and row group headers
- Sticky plan header and sticky feature column inside a scroll region
- Scroll region is focusable, labelled and described for keyboard users
- Ticks and crosses come with visually hidden Included and Not included text
- Compact two-plan table with a visible caption and footer buttons
Accessibility
Plans are column headers, features are row headers and each group of rows has a rowgroup header, so a screen reader reads the plan and feature for each value. The scroll region has role region, a name from the heading, a description from the hint, tabindex 0 so it can be scrolled with the keyboard, and a 3px focus outline. Buttons show an outline on focus and their colour transition stops under prefers-reduced-motion.
Customise it
Change --ct-accent, --ct-rec for the recommended column tint and --ct-line on .ct, and the max-height of .ct-scroll. In Bootstrap the cells use --bs-table-bg and --bs-table-border-color; in Tailwind edit the bg-[#eef3ff] column utilities.
