E-mail List Archives

Search E-mail List Archives for

Number of posts in this thread: 2 (In chronological order)

From: Mark Magennis
Date: Mon, Jun 19 2017 5:21AM
Subject: Invalid ARIA attribute value - is this a problem?
No previous message | Next message →

Quick question, I hope. aXe is reporting an invalid ARIA attribute value aria-controls="navbar-dropdown-option-1-dropdown" in the following code for a mega-menu.

<button aria-expanded="false" aria-controls="navbar-dropdown-option-1-dropdown">
<div id="navbar-dropdown-option-1-dropdown" aria-hidden="false">

Investigation reveals that the div in the second line is only being added to the DOM when the mega-menu is opened. So technically, aXe is right because the id doesn't exist until then. But is this likely to cause any issues in practice?

Thanks,
Mark

Mark Magennis
Tel: +353 (0)87 6060 162
Skype: mark.magen
LinkedIn: ie.linkedin.com/in/markmagennis
Twitter: @markmagennis

From: Birkir R. Gunnarsson
Date: Mon, Jun 19 2017 6:28AM
Subject: Re: Invalid ARIA attribute value - is this a problem?
← Previous message | No next message

Mark

No, not really.
All that aria-controls does (in some screen reader/browser
combination) is to enable the user to move from the controlling
element to the controlled element (e.g. with a keyboard shortcut).
In your construct those elments are consecutive in the code/navigation
order so that option is unlikely to ever be used.
It's good to have this relationship from a semantic correctness
perspective and future compatibility (once browser/a.t. vendors come
up with more innovative ways to take advantage), but for now the
impact to the user is minimal to none.
-B

On 6/19/17, Mark Magennis < = EMAIL ADDRESS REMOVED = > wrote:
> Quick question, I hope. aXe is reporting an invalid ARIA attribute value
> aria-controls="navbar-dropdown-option-1-dropdown" in the following code for
> a mega-menu.
>
> <button aria-expanded="false"
> aria-controls="navbar-dropdown-option-1-dropdown">
> <div id="navbar-dropdown-option-1-dropdown" aria-hidden="false">
>
> Investigation reveals that the div in the second line is only being added to
> the DOM when the mega-menu is opened. So technically, aXe is right because
> the id doesn't exist until then. But is this likely to cause any issues in
> practice?
>
> Thanks,
> Mark
>
> Mark Magennis
> Tel: +353 (0)87 6060 162
> Skype: mark.magen
> LinkedIn: ie.linkedin.com/in/markmagennis
> Twitter: @markmagennis
>
>
> > > > >


--
Work hard. Have fun. Make history.