How to label *ngIf blocks with ARIA attributes?

Question

I was wondering how to tag my Angular app with ARIA attributes per the WAI-ARIA specification. Suppose I had the following template,

<div id="no-1" *ngIf="some_condition">some text</div>
<div id="no-2" *ngIf=!some_condition">some other text</div>

<button (click)="some_condition = !some_condition">switch</button>

What is the proper way to tag these elements with ARIA attributes? It's my understanding *ngIf removes the element from the DOM altogether, so is an aria-hidden necessary on either of the divs? Neither element will be present in the DOM when aria-hidden is true, so it seems pointless. I'm not sure if it helps screen readers, though, so I want to be sure.

Second, since both divs fill the same position in the DOM based on the value of some_condition, should they both have the same ID? And should the button have an aria-controls that refers to that ID? If not, how do I specify the relationship between the divs and the button?

Answer 1

It's my understanding *ngIf removes the element from the DOM altogether, so is an aria-hidden necessary on either of the divs?

Correct; the element will not exist on the page, so aria-hidden isn't necessary.

Second, since both divs fill the same position in the DOM based on the value of some_condition, should they both have the same ID?

If you don't need the ID for anything specific, then it is good practice to avoid duplicate IDs, but it won't hurt anything when they are not showing at the same time.

And should the button have an aria-controls that refers to that ID? If not, how do I specify the relationship between the divs and the button?

It's a good idea to include aria-controls. If both divs use the same ID, then it's straight-foward.

<div id="no-1">...</div>
<button attr.aria-controls="no-1">Click Me!</button>

If the divs use different IDs then it's still simple, but you will want to use some logic either in component TS or inline like so:

<div id="no-1" *ngIf="some_condition">some text</div>
<div id="no-2" *ngIf=!some_condition">some other text</div>

<button [attr.aria-controls]="some_condition ? 'no-1' : 'no-2'">Click Me!</button>

Notice how I defined the ARIA attribute. In angular, you should prepend the attribute with attr. This applies to any ARIA attribute you want to add. Some examples:

<!-- this assigns the label inline HTML -->
<section attr.aria-label="This section is important"></section>

<!-- this expects a variable called myLabelVariable to be defined in the component -->
<section [attr.aria-label]="myLabelVariable"></section>