Accessibility Audit about material-components-web

[sgomes]

As an update, we're hoping to do some internal audits on this with Google experts.

In the meantime, we'd also love any community feedback on any accessibility rules we might be breaking. @leifoolsen : you always had good feedback on MDL v1, so if you decide to use MDC-Web in the future, please don't be shy about filing issues! :)

[traviskaufman]

Accessibility Devtools Audit Results for Components

Component	Overall Indicator	# Passing Tests	# Failing Tests	# N/A Tests	Warnings / Failures
Button	✅	9	0	17	Contrast ratio too low for disabled raised buttons, accent buttons, and raised accent buttons. I believe this needs to be handled from the design side of things since these colors come from the spec.
Card	✅	5	0	20	Contrast ratio too low for primary and action sections in dark theme card. I believe this needs to be handled from the design side of things since these colors come from the spec.
Checkbox	✅	8	0	19	We could probably make checkbox even more semantic by attaching role="presentation" to the mdc-checkbox__background div
Drawer - Temporary	✅	9	0	17
Drawer - Permanent	✅	9	0	18
FAB	⚠️	7	0	18	Contrast ratio too low for text on non-plain FABs (similar to buttons above). Absolute FAB in example missing aria-label
Icon Toggle	✅	11	0	15	Contrast ratio too low for "light icon on background" example
List	✅	16	0	10	Contrast ratio too low for end detail on light background
Select	✅	11 (menu closed) / 13 (menu open)	0	14 (menu closed) / 11 (menu open)	Contrast ratio too low for unselected list items in select menu
Simple Menu	✅	14	0	12
Radio	✅	8	0	19	Similar to checkbox, we may want to consider giving the radio background role="presentation"
Snackbar	✅	11	0	15	Contrast ratio too low for action button text
Textfield	✅	11	0	15	Contrast ratio too low for text field labels

Main takeaway seems to be that our typographic color guidelines don't seem to have a high enough contrast with their backgrounds, which is a design consideration since those values are taken from spec.

Keyboard Controls status for dynamic components

Component	Keyboard controls
Button	Built on top of <button>; same functionality
Checkbox	Built on top of <input type="checkbox">; same functionality
Temporary Drawer	Tab-to-focus; perhaps this needs arrow-key-based navigation?
FAB	Built on top of <button>; same functionality
Icon Toggle	Tab-focus, spacebar to toggle
Select	Tab-focus, spacebar to open, escape to cancel, arrow-keys to navigate, spacebar to select, enter to select
Simple Menu	Arrow-keys to navigate, escape to cancel, spacebar to select, enter to select
Radio	Built on top of <input type="radio">; same functionality
Snackbar	None. Needs to not disappear when action button is focused. Tracking in #28
Textfield	Built on top of <input type="text">; same functionality

Other issues

• Temporary drawers don't trap focus: tracking at #1

[traviskaufman]

Overall, I think we are headed in a good direction cc @omerziv

[traviskaufman]

Haven't heard anything negative from our A11y peeps, so closing this for now. We will conduct another review as we near our "beta" milestone.