Eric Meyer explores how to create a diagonally split header cell in HTML tables while maintaining accessibility. Starting with a naive two-row thead approach, he consults accessibility experts Alice Boxhall and Adrian Roselli, who flag a WCAG 1.3.3 violation caused by an incomplete row. The fix uses rowspan on column headers. For the visual diagonal, he uses CSS relative/absolute positioning on thead rows combined with a linear-gradient background. A Safari bug prevents relative positioning on thead, requiring a hacky @supports (font: -apple-system-body) workaround. The solution is presented as a live CodePen demo, and the author invites screen reader users to test and report any remaining accessibility issues.
478 Impressions