New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Linear MatStepper step headers do not pass aXe accessibility checks #10727

Closed
mitchellwills opened this Issue Apr 5, 2018 · 5 comments

Comments

Projects
5 participants
@mitchellwills

mitchellwills commented Apr 5, 2018

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:
Element has insufficient color contrast of 2.67 (foreground color: #ffffff, background color: #9e9e9e, font size: 10.5pt, font weight: normal)

The actual label fails with:
Element has insufficient color contrast of 2.67 (foreground color: #9e9e9e, background color: #ffffff, font size: 10.5pt, font weight: normal)

What are the steps to reproduce?

https://stackblitz.com/edit/angular-vy7pqw?file=app/stepper-overview-example.html

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

HEAD

@raygervais

This comment has been minimized.

Contributor

raygervais commented Apr 9, 2018

I'd like to take a look into resolving this, and will start by referencing the material guidelines for accessibly related semantics. Are you testing for WCAG AA, or AAA?

@mitchellwills

This comment has been minimized.

mitchellwills commented Apr 9, 2018

I'm not sure, I believe we are using whatever the default is for aXe.

@raygervais

This comment has been minimized.

Contributor

raygervais commented Apr 17, 2018

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 2.44:1 instead of 4.5:1.

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:

Before:

screen shot 2018-04-16 at 8 45 50 pm

Font Color: FFF
Background Color: rgba(0,0,0,.38)


After:

screen shot 2018-04-16 at 8 49 07 pm

Font Color: FFF
Background Color: rgba(0, 0, 0, .54)


This leads into the same treatment needed to be applied to the mat-stepper labels, which also would need to adjust the font color to the same background color mentioned above to meet WCAG AA Compliance.

The final 'fix' would look as the following:
screen shot 2018-04-16 at 8 52 42 pm

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

Thoughts?

@literalpie

This comment has been minimized.

literalpie commented Jun 21, 2018

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:

All text should be legible and meet accessibility standards. The Web Content Accessibility Guidelines (WCAG 2.0) level AA requires a 4.5.1 color contrast between text and background for normal text, and 3:1 to large text.

source

@mmalerba

This comment has been minimized.

Contributor

mmalerba commented Jul 3, 2018

@raygervais sorry for slow response, I've been OOO for a while. I think it's more important to be accessible than exactly on spec. The change in your screenshot looks good if you want to send a PR for it

@jelbourn jelbourn added this to Not started in a11y fix-it via automation Oct 30, 2018

@josephperrott josephperrott moved this from Not started to In-progress in a11y fix-it Nov 6, 2018

@josephperrott josephperrott added the has pr label Nov 6, 2018

@josephperrott josephperrott self-assigned this Nov 6, 2018

a11y fix-it automation moved this from In-progress to Done Nov 10, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment