Join GitHub today
GitHub is home to over 28 million developers working together to host and review code, manage projects, and build software together.Sign up
Linear MatStepper step headers do not pass aXe accessibility checks #10727
Bug, feature request, or proposal:
When in linear mode the mat stepper headers fail aXe accessibility checks because they do not have enough contrast.
What is the expected behavior?
Checks do not fail
What is the current behavior?
The number (in the circle next to the label text) fails with:
The actual label fails with:
What are the steps to reproduce?
Which versions of Angular, Material, OS, TypeScript, browsers are affected?
Sorry for the delay, just wrapping up some loose ends with the semester concluding. So I did some testing while running the aXe accessibly engine (which does test for WCAG AA), and found that the color contrast ratios are closer to
One way I found fixing this would be to increase the contrast (which would in turn, dark the container element.
Just an example to open up discussion:
This leads into the same treatment needed to be applied to the
I'm all for the fix, but looking into the Material Spec regarding accessibly, they never claim to be WCAG AA compliant. Even the website itself when analyzed by aXe fails for a multitude of color contrast related reasons. https://material.io/guidelines/usability/accessibility.html#accessibility-color-contrast
I believe this problem also applies to all uses of the "secondary text" color in the theme palette. We are seeing the contrast test fail with the label text of a de-selected (or read-only) input field.
The Material guidelines do recommend compliance with WCAG 2.0: