CODEWITHSUNDEEP
htmlvoiceoveraccessible
OZZIE
OZZIE

Reputation: 7388

VoiceOver reading hidden elements

On the site I am working on we have 1) A mobile header 2) a desktop header. Both are loaded but images are lazy loaded + some of the desktop contents.

We are working on making the website accessible to blind people, I am testing with VoiceOver on Mac.

When I am testing it seems to want to read the mobile menu no matter what I do however.

<div aria-hidden="true" hidden style="display: none; visibility: hidden;">
    <nav aria-hidden="true">
        <div>
            <div class="react-hamburger-menu" aria-hidden="true">
                <!-- ... -->
            </div>
        </div>
    </nav>
</div>

We need to render both because on a large tablet it will be the mobile header in portrait and deskt(ish) header in landscape mode.

I can't find anything else to make it stop reading this. It reads this deepest child still as a button and proceeeds to read the whole mobile menu (after I've gone through the whole desktop version)

Edit: I am using Mac OS High Sierra 10.13.6.

Upvotes: 1

Views: 3837

Answers (1)

OZZIE
OZZIE

Reputation: 7388

Seems like I had missed some elements that were moved using React Portal, also VoiceOver seems to not read only display: block; visibility: hidden; elements, and not really care much about aria-hidden="true"

Upvotes: 1

Related Questions