Project A11Y: how we upgraded Cloudflare’s dashboard to adhere to industry accessibility standards

What this post added

This post details the significant effort to make the Cloudflare dashboard accessible, adhering to WCAG 2.1 AA and Section 508 standards. Key technical contributions include: re-writing internal form components for improved validation, error handling, labels, and input descriptions; re-engineering charts and graphs for keyboard and screen reader accessibility, including a case study on time series graphs that involved iterative design and implementation of visual differentiation techniques (fading unfocused items, sequential colors) and keyboard navigation; correcting heading tags using a borrowed technique for page structure; reworking SVGs for proper labeling and assistive technology exposure; upgrading inaccessible node modules; overhauling color usage and contributing accessible sequential colors to the design system; and fixing numerous bugs related to incorrect HTML element usage. Additionally, chart and graph data is now downloadable in CSV format to meet WCAG 1.1.1.