2

I am designing a form in Angular 2 using Angular Material. I have to assign a label for my input box. For that I need to use aria-label. This is my code, in which I have to apply the label before "Department" select box:

<mat-form-field >
    <mat-select placeholder="Department"  [(value)]="selecteddept" >
        <mat-option *ngFor="let department of departments"
 [value]="department.value">
            {{ department.viewValue }}
        </mat-option>
    </mat-select>
</mat-form-field>

But I have confusion regarding its position in the code. Can anyone clear my confusion?

Edric
  • 24,639
  • 13
  • 81
  • 91
Adynh
  • 219
  • 4
  • 19

1 Answers1

3

You should put the aria-label directly into the <mat-select> tag. The tag is an input field.

Also look up the Angular Material Documentation, which states that the select component can have an aria-label for accessibility.

General the use of an aria-label is to provide a label for screen readers. I may suggest to read further into it on SO: What is an aria-label and how I should I use it? or on MDN: Using the aria-label attribute.

NiklasPor
  • 9,116
  • 1
  • 45
  • 47
  • But how to write exact syntax? i have tried like this `aria-label="Department"` And also `aria-label="%aria-label Department"`. But not working. please Suggest syntax. – Adynh Jan 12 '18 at 08:38
  • @Adynh The ```aria-label``` property is not a label which you can see. It is used for example by screen readers to read out loud an element, which has no other label defined. Maybe you should consider looking it up on [MDN web docs](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute). For me the aria-label="label text for screen reader" worked without problem. I copied your sourcecode and added the aria-label in the – NiklasPor Jan 13 '18 at 12:16
  • Is necessary to add any library for aria-label in angular 2. Because now I had added aria-label in . It is not showing any error but not working also. – Adynh Jan 15 '18 at 08:38