GC Design System
Home Start to use Page templates overview Basic page Components overview Breadcrumbs Button Card Checkboxes Container Date input Date modified Details Error message Error summary Fieldset File uploader Footer Grid Header Heading Icon Input Language toggle Link Notice Pagination Radios Screenreader-only Search Select Side navigation Signature Stepper Text Textarea Theme and topic menu Top navigation CSS shortcuts overview Reset styles Responsive layout State Box sizing Container sizing Display Overflow Position Visibility Font Font family Font size Font style Font weight Line height Link colour Link size Link text decoration List style Text align Text colour Text overflow Text transform Word break Margin Padding Align content Align items Align self Flex Flex direction Flex grow Flex shrink Flex wrap Gap Grid columns Grid rows Justify content Justify items Justify self Order Place content Place items Place self Background colour Border colour Border radius Border style Border width Icon names Icon size Image Cursor Pointer events Transition Styles overview Design tokens Colour tokens Spacing tokens Typography tokens Contact us Get involved Find a demo

Accessibility in the GC Design System

Our accessibility standards

The GC Design System meets or exceeds WCAG 2.1 AA, making it fully compliant with Government of Canada accessibility standards.

Public servants who use the components as intended are creating Government of Canada websites and applications in line with accessibility standards.

Our accessibility checklist

The entire GC Design System builds in accessibility from the start to meet accessibility standards. This includes this website, as well as design tokens and components.

Interactive elements, like buttons, links, and form fields, have clear and visible focus states to guide people who use keyboard navigation. Keyboards can be used to navigate the system by people who cannot use a mouse. Screen readers can be used to navigate the system by people using assistive technologies. The components are responsive so people have consistent experiences regardless of the device they use.

Visuals

Text and interface elements meet or exceed the required colour contrast ratios to maintain readability for people with low vision or colour blindness. In addition to colour, visual cues like shapes, icons, or bold text, are used to indicate important information for people with colour blindness. Screen magnifiers can be used by people with low vision to zoom in on content without losing functionality. Accessibility formatting like Accessible Rich Internet Applications (ARIA) roles and landmarks is preserved and works in different environments. Images and non-text content include appropriate alt text to provide a description for people relying on screen readers. Accessible Rich Internet Applications (ARIA) roles and attributes are used so interactive elements, like menus, buttons, and forms, can be identified and operated by assistive technologies.

Clarity

Form fields follow guidance to have accessible labels, clear instructions, and are compatible with assistive technologies. Clear and actionable guidance appears when there are errors in forms or interactions so people know how to fix the error.

How we test for accessibility

Before components are released, we leverage automated tools that scan tokens, components, and website for accessibility issues. This early-stage testing allows us to resolve common issues before deeper testing begins. We conduct testing with people who have accessibility needs, including individuals with various disabilities. This ensures our system is functional and usable in a range of scenarios that automated testing cannot fully capture. We’re always looking at new accessibility rules and best practices from different industries. We add new findings and suggestions to our design system guidance.

Contact us

If you have any questions or encounter any accessibility barriers while using the GC Design System,‌ contact us.

We’re committed to addressing any issues promptly to ensure an inclusive experience for all.

2025-10-20