Reading child element when parent is focused - accessability

Question

I am using the mat-tab-group from https://material.angular.io/components/tabs/overview.(used complex labels approach with ng-template)

The tab contains a name of the tab and a button to close the tab.

Whenever i focus the tab, it reads both aria-labels of name and a button. When tab is focused, it should read only the name but not the close button aria label. When tab is focused currently and then clicking on tab will focus the close button, at this time it should read the close button aria label.

How to do this ?

Code:

<mat-tab-group dynamicHeight [(selectedIndex)]="activeTabIndex" (selectedTabChange)="changetab($event)">
<mat-tab *ngFor="let tab of Tabs; let i = index" [label]="tab.name" [attr.sortColumn]="tab.sortBy" [attr.sortOrder]="tab.sortOrder"
  [attr.viewId]="tab.id" [attr.viewObjectID]="tab.viewObjectId" attr.aria-label="{{tab.name}}">
    <ng-template mat-tab-label>
        <div class="tab-container">
            <div class="somestyle">
                <span class="tab-name" [matTooltip]="tab.name">{{tab.name}}</span>
            </div>
            <button mat-icon-button tabindex="0" id="{{tab.id}}" class="close-btn" (keyup)="closeTab($event,view)" (click)="closeTab($event,view)" attr.aria-label="{{closetab}}">
                <mat-icon class="material-icons">cancel</mat-icon>
            </button>
        </div>
    </ng-template>
</mat-tab>

The output of this : I am using "jaws" for screen reading tool. When we focus on tab, it reads tab name and close button label ( attr.aria-label="{{tab.name}}" and attr.aria-label="{{closetab}}").

brennanyoung · Answer 1 · 2019-10-01T11:58:46.593

Do you need to use aria-label at all?

The WAI-ARIA Practices document has this at the top of its "Read Me First" section:

No ARIA is better than Bad ARIA

The mat-tab-group examples simply use a text node inside the tab (which is a button with role="tab") for the accessible name. That should be adequate. Let the visual label be the accessible name, if possible.

The only reason you should use aria-label on a button is if the accessible name should be different from the button label. e.g. in cases where only an icon or unicode glyph is used as the visual label, in place of human-readable text.

In all other cases, just put the accessible name in a text node inside the button. (You may of course wrap it in span or other inline elements - as the mat-tab-group example does, if you need more refined styling).

This is true of other GUI controls too, although the visual label mechanism differs between element types. (e.g. The <input> element needs a corresponding <label>, which is both visible and understood by screenreaders because of the for attribute.)

If you must use aria-label, make sure it is on the element that gets focus, otherwise the screen readers will each try to guess what you want the accessible name to be, with unpredictable results. I suspect this is what you are experiencing.

Also, if I am not mistaken, you are adding the 'body' of the tab (including the close box) to the focusable tab itself. This is not the correct structure. Again, let the mat-tab-group example be your guide.

score -1 · Answer 2 · answered Jul 19 '19 at 13:04

-1

You should be able to overwrite what is read on focusing the entire tab, if you add an aria-label="Your preferred text here" to the tab element.

answered Jul 19 '19 at 13:04

Tobias Christian Jensen

152
10

Yes, i tried but still it reads the close button aria-label. I think you have not seen the mat-tab element, i am already using it. – Shashank G Jul 19 '19 at 13:07
I tested on VoiceOver. Which screen-reader do you use? Can you post here exactly what it outputs/reads? – Tobias Christian Jensen Jul 19 '19 at 17:44
I use "jaws" for screen reading tool. When we focus on tab, it reads tab name and close button label ( attr.aria-label="{{tab.name}}" and attr.aria-label="{{closetab}}"). – Shashank G Jul 22 '19 at 08:52

Reading child element when parent is focused - accessability

2 Answers2