CODEWITHSUNDEEP
htmlaccessibility
chocolate cake
chocolate cake

Reputation: 2489

How to nest role attributes in HTML?

I need to nest some elements where two elements have a role attribute. Is it possible that the inner elements are also read out?

My code:

<div class="panel-heading" role="tab">
    <div class="panel-title">
            <div class="row">
                <div class="icons">
                    <div class="icon" role="link" aria-label="Go to new page" [routerLink]="['/newpage']"></div>
                </div>
                <div class="description" role="text" aria-label="One plus one is two">
                    <div class="description-text">
                        1 + 1 = 2
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

I simplified the code. So I have to say that the role="tab" has to be there.

Does someone know how I could achieve this?

It would be also okay, if the second text is on the role="tab" element

Upvotes: 0

Views: 119

Answers (1)

Adam
Adam

Reputation: 18855

I still can't click on the icon, because the role="tab" div is marked in voice over mode..

You don't have a tabindex=0 attribute on your link. If you have problem clicking on this link, then you have to set this attribute in order for the link to be pressable.

There's no problem with having a role=tab element which encloses a role=link element. It's quite common.

Upvotes: 1

Related Questions