I am using Angular 9 and material library and I have this code which is throwing the above error. What am I doing wrong?
<mat-checkbox aria-label="check me" id="check_me">Check me!</mat-checkbox>
This input (type=radio) should not have an aria-checked attribute, as it has a native semantic checked state
Viewed 263
2 Answers
First rule of ARIA is: don't use ARIA if you can use native HTML to achieve the same result.
In this case, <input type="radio"> doesn't need (and should not use) aria-checked because HTML already offers a checked attribute for that type of element. If you're setting aria-checked, it's the wrong thing.
It could be that the developers of mat-checkbox do not know this, and is rendering the element state using aria-checked rather than checked. If so, that's their bug.
Incidentally, I don't think you need aria-label here either, because the element has a text node which is presumably visible on screen. (You could also use a label element.) You should remove it.
aria-label should be reserved for cases where there is no onscreen text label (such as a button labeled with an icon or an image), or in the much more rare cases where there is an intention to provide a label to assistive technology which differs from the onscreen text label for some reason.
Note that checked is a boolean attribute, which means it does not require a value (and will be treated as "true" even if you give it the value "false"). For a false value, omit the attribute entirely.
Accessibility
MatCheckbox uses an internal <input type="checkbox"> to provide an accessible experience. This internal checkbox receives focus and is automatically labelled by the text content of the element. Avoid adding other interactive controls into the content of , as this degrades the experience for users of assistive technology.
Always provide an accessible label via aria-label or aria-labelledby for checkboxes without descriptive text content. For dynamic labels, MatCheckbox provides input properties for binding aria-label and aria-labelledby. This means that you should not use the attr. prefix when binding these properties, as demonstrated below.
<mat-checkbox [aria-label]="isSubscribedToEmailsMessage">
</mat-checkbox>
Related