Link to home
Create AccountLog in
Avatar of APD Toronto
APD TorontoFlag for Canada

asked on

Can I use aria-hidden on DIV

Hi,

I'm trying to resolve the 1 Missing Link and 2 Empty links reported at https://wave.webaim.org/report#/www.aces-project.com by adding aria-hidden=true to #lightbox, because it is hidden from sighted users with all nested elements, but why is Wave ignoring this?

on my original code at www.aces-project.com, you'll find
<div id="lightbox" class="lightbox" aria-hidden="true" style="display: none;">

Open in new window

But Wave deleted my aria-hidden

Thanks.
Avatar of Alicia St Rose
Alicia St Rose
Flag of United States of America image

It looks like you cannot add aria-hidde="true" to an element that has a focus within it. Is there a descendant element in the lightbox that is clickable?

The following is from Mozilla Developer Documentation:

Description

Adding aria-hidden="true" to an element removes that element and all of its children from the accessibility tree. This can improve the experience for assistive technology users by hiding:
  • purely decorative content, such as icons or images
  • duplicated content, such as repeated text
  • offscreen or collapsed content, such as menus
According to the fourth rule of ARIA, aria-hidden="true" should not be used on a focusable element. Additionally, since this attribute is inherited by an element's children, it should not be added onto the parent or ancestor of a focusable element.
Using aria-hidden="false" will not re-expose the element to assistive technology if any of its parents specify aria-hidden="true".
Avatar of APD Toronto

ASKER

I'm not sure what #lightbox does as it is handled by the Appointment Pro theme.

I do see that it is hidden to sighted users with display: none; but don't know if this changes. How do I handle this?
ASKER CERTIFIED SOLUTION
Avatar of Alicia St Rose
Alicia St Rose
Flag of United States of America image

Link to home
membership
Create an account to see this answer
Signing up is free. No credit card required.
Create Account
I didn't  know that the Lightbox is popup, how do you activate it?
I don't know the details of your theme, but that empty link is probably the trigger. It needs to be an anchor that works as the method to open the popup. That's why there can't be an actual link in there. Everything is happening in a js file. The code in that file is referencing that ID: #lightbox. There is probably some initialization code in the head of the document as well, that is referencing that ID.