Accessibility issue using mat-checkbox,mat-slide-toggle and mat-select

[chetankumar45]

On running accessibility tool AMP, below issues are identified due to mat checkbox and select.

1. Provide alternative text for images - The svg added for check mark dose not have alt text.

2. Ensure ARIA roles, states, and properties are valid - Not able to added aria-checked, how can we added fix this issue.

If the same mat-checkbox is replaced by input type="checkbox" none of the issue will be reproduced.

Checkbox code -
<mat-checkbox aria-label="Select" (click)="checkboxSelected($event,row)" (change)="$event ? selection.toggle(row) : null" [checked]="selection.isSelected(row)">
Select

Toggle code -

{{broadcastMessageToggleValue}}

Please validate and provide the solution.

Thanks,
Chetan

[crisbeto]

1. The SVG inside the checkbox is purely decorative so it doesn't need its own description. The description for the checkbox is provided through the label.
2. mat-checkbox is using an input[type="checkbox"] internally already.

[josephperrott]

Closing, as noted above the SVG does not require alt text as it is decorative and its status is presented by the status of the checkbox, the aria-checked state is handled by the underlying native checkbox control.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}