Angular Material mat-label accessibility

Question

I have a mat-form-field with a text input control. I have a mat-label and I also put an aria-label attribute attr.aria-label on the input element directly.

Is the mat-label sufficient for screen readers by itself? Is the attr.aria-label necessary or redundant?

<mat-form-field appearance="outline" floatLabel="always">
<mat-label>Username</mat-label>
<input attr.aria-label="Username" formControlName="Username" matInput>
</mat-form-field>

The same question goes for the mat-select control.

<mat-form-field appearance="outline" floatLabel="always">
  <mat-label>Cars</mat-label>
  <mat-select formControlName="Car">
    <mat-option *ngFor="let car of cars" [value]="car.name">
    {{car.name}}
    </mat-option>
  </mat-select>
</mat-form-field>

Answer 1

Important note about difference between [attr.aria-label] and [aria-label]:

For a button you can set a dynamic aria-label like this:

 <button [attr.aria-label]="'This is a button for ' + buttonDescription">Click me</button>

This won't work for all material controls since some define an @Input('aria-label') property, which sets the attribute internally (via @Hostbinding)

mat-select is one such control

Source code:

@Input('aria-label')
ariaLabel: string

Therefore if you do try to use [attr.] syntax for mat-select it won't work because the control will actually overwrite your explicitly set attribute (since the ariaLabel input property to mat-select never gets set!).

<mat-select [attr.aria-label]="'This will be overwritten with undefined!'">...</mat-select>

Instead you must just use aria-label input property.

 <mat-select [aria-label]="'Choose your own adventure! ' + 123">...</mat-select>

 <mat-select aria-label="{{ 'Choose your own adventure - ' + 123 }}">...</mat-select>

 <mat-select aria-label="Choose your own adventure 123">...</mat-select>

A build will tell you if you use [aria-label] when you should be using [attr.aria-label] (because the compiler will tell you there's no such input property). So if you don't want to go seek out the API for the control you're using start with [aria-label].

https://material.angular.io/components/select/api

Answer 2

if you are using the mat label field, you should not place an aria-label on the input element directly. In your case it's redundant.

If a floating label is specified, it will be automatically used as the label for the form field control. If no floating label is specified, you should label the form field control using aria-label, aria-labelledby or

[https://material.angular.io/components/form-field/overview][1]