E-mail List Archives
Thread: Help with a WAVE error
Number of posts in this thread: 7 (In chronological order)
From: Angela French
Date: Tue, Sep 27 2016 11:22AM
Subject: Help with a WAVE error
No previous message | Next message →
Hello,
I am doing an accessibility review for this site: http://bridgetocollegecourses.org/
In the bottom section of each page is a carousel containing videos and associated description. WAVE is telling me there is a broken ARIA reference. "An aria-labelledby or aria-describedby reference exists, but the target for the reference does not exist." However when I look in the source code I'm not seeing any ARIA used at all.
If someone could help me understand this error in the context of this site, I'd appreciate it.
Thank you,
Angela French
Internet/Intranet Specialist
Washington State Board for Community and Technical Colleges
360-704-4316
= EMAIL ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = >
www.sbctc.edu<;http://www.sbctc.edu/>;
From: Birkir R. Gunnarsson
Date: Tue, Sep 27 2016 11:42AM
Subject: Re: Help with a WAVE error
← Previous message | Next message →
Angela
Are you looking at the DOM or the source code (you should be looking
at the DOM, e.g. using browser developer tools or Firebug when the
page is loaded).
It is quite possible the ARIA was added by JavaScript on page load.
aria-labelledby or aria-describedby need a valid ID reference. Then
found, the content of that referenceis spoken as he element's
accessible name or description (respectively).
If the ID reference is not valid (or is empty), you should get this warning.
If you use the aXe plug-in for Firefox or Chrome you should see this
error as well as the snippet of HTML where the error occurred.
Maybe Wave does this too, but I know aXe does.
Thanks
-B
On 9/27/16, Angela French < = EMAIL ADDRESS REMOVED = > wrote:
> Hello,
> I am doing an accessibility review for this site:
> http://bridgetocollegecourses.org/
>
> In the bottom section of each page is a carousel containing videos and
> associated description. WAVE is telling me there is a broken ARIA
> reference. "An aria-labelledby or aria-describedby reference exists, but the
> target for the reference does not exist." However when I look in the source
> code I'm not seeing any ARIA used at all.
>
> If someone could help me understand this error in the context of this site,
> I'd appreciate it.
>
> Thank you,
>
>
>
> Angela French
> Internet/Intranet Specialist
> Washington State Board for Community and Technical Colleges
> 360-704-4316
> = EMAIL ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = >
> www.sbctc.edu<;http://www.sbctc.edu/>;
>
> > > > >
--
Work hard. Have fun. Make history.
From: Beranek, Nicholas
Date: Tue, Sep 27 2016 11:44AM
Subject: Re: Help with a WAVE error
← Previous message | Next message →
Hi Angela, the culprit appears to be the aria-describedby references in the carousel:
<div class="slick-slide slick-current slick-active" data-slick-index="1" aria-hidden="false" tabindex="-1" role="option" aria-describedby="slick-slide01" style="width: 456px; position: relative; left: -456px; top: 0px; z-index: 999; opacity: 1;">
If you run aXe, it will give you specifics for 3 other instances (http://www.deque.com/products/axe/)
One way to verify this is to check for that ID on the page:
document.getElementById('slick-slide01');
This returns 'null' in the console.
I hope this helps,
Nick Beranek
Capital One
From: Beranek, Nicholas
Date: Tue, Sep 27 2016 11:58AM
Subject: Re: Help with a WAVE error
← Previous message | Next message →
Angela, in my haste I neglected to address the other part of your question: what does this mean in the context of the site?
It doesn't appear to mean much. Some AT's, such as JAWS, may announce that the user can read the help text using a keyboard shortcut. Since the description is not available, that may be a little disorienting. What's more impactful is the fact that none of the slides (the thumbnails) are actionable via keyboard.
My assumption is that they wanted to reference the heading and paragraph above the carousel in addition to the alt text for each image.
--
Nick Beranek
Digital Accessibility Team
On 9/27/16, 1:44 PM, "WebAIM-Forum on behalf of Beranek, Nicholas" < = EMAIL ADDRESS REMOVED = on behalf of = EMAIL ADDRESS REMOVED = > wrote:
Hi Angela, the culprit appears to be the aria-describedby references in the carousel:
<div class="slick-slide slick-current slick-active" data-slick-index="1" aria-hidden="false" tabindex="-1" role="option" aria-describedby="slick-slide01" style="width: 456px; position: relative; left: -456px; top: 0px; z-index: 999; opacity: 1;">
If you run aXe, it will give you specifics for 3 other instances (http://www.deque.com/products/axe/)
One way to verify this is to check for that ID on the page:
document.getElementById('slick-slide01');
This returns 'null' in the console.
I hope this helps,
Nick Beranek
Capital One
From: Angela French
Date: Tue, Sep 27 2016 12:05PM
Subject: Re: Help with a WAVE error
← Previous message | Next message →
Hi Birkir,
Yes, I was looking at the view source. I can see it now when using Firebug. Not sure how this code is injected into the DOM. This is a WordPress site so I'm not sure I can even fix the problem.
From: Beranek, Nicholas
Date: Tue, Sep 27 2016 12:24PM
Subject: Re: Help with a WAVE error
← Previous message | Next message →
Hey Angela, this site is using slick: http://kenwheeler.github.io/slick/
It appears that aria-describedby is referencing the dots navigation beneath the carousel. If you were to add these dots, then that would fix the issues.
Here's an example they provide:
$('.one-time').slick({
dots: true,
infinite: true,
speed: 300,
slidesToShow: 1,
adaptiveHeight: true
});
Add 'dots: true- to the arguments and that should do it!
Also, totally tongue-in-cheek for your situation, but check this out: http://www.shouldiuseacarousel.com
Nick
--
Nick Beranek
Digital Accessibility Team
On 9/27/16, 2:05 PM, "WebAIM-Forum on behalf of Angela French" < = EMAIL ADDRESS REMOVED = on behalf of = EMAIL ADDRESS REMOVED = > wrote:
Hi Birkir,
Yes, I was looking at the view source. I can see it now when using Firebug. Not sure how this code is injected into the DOM. This is a WordPress site so I'm not sure I can even fix the problem.
From: Angela French
Date: Tue, Sep 27 2016 12:29PM
Subject: Re: Help with a WAVE error
← Previous message | No next message
Thanks! I am doing the review to determine if we want to invest the resources to make this site accessible (if it's even possible) or bring the content in under a different site that is management in our CMS. I will keep your email in the event I am asked to actually try to fix the issues. Regarding your link....my sentiments exactly.
Angela French