WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: Help with a WAVE error

for

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

-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Angela French
Sent: Tuesday, September 27, 2016 1:22 PM
To: WebAim Forum ( = EMAIL ADDRESS REMOVED = ) < = EMAIL ADDRESS REMOVED = >
Subject: [WebAIM] Help with a WAVE error

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/>;

The information contained in this e-mail is confidential and/or proprietary to Capital One and/or its affiliates and may only be used solely in performance of work or services for Capital One. The information transmitted herewith is intended only for use by the individual or entity to which it is addressed. If the reader of this message is not the intended recipient, you are hereby notified that any review, retransmission, dissemination, distribution, copying or other use of, or taking of any action in reliance upon this information is strictly prohibited. If you have received this communication in error, please contact the sender and delete the material from your computer.

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

-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Angela French
Sent: Tuesday, September 27, 2016 1:22 PM
To: WebAim Forum ( = EMAIL ADDRESS REMOVED = ) < = EMAIL ADDRESS REMOVED = >
Subject: [WebAIM] Help with a WAVE error

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/>;

The information contained in this e-mail is confidential and/or proprietary to Capital One and/or its affiliates and may only be used solely in performance of work or services for Capital One. The information transmitted herewith is intended only for use by the individual or entity to which it is addressed. If the reader of this message is not the intended recipient, you are hereby notified that any review, retransmission, dissemination, distribution, copying or other use of, or taking of any action in reliance upon this information is strictly prohibited. If you have received this communication in error, please contact the sender and delete the material from your computer.
The information contained in this e-mail is confidential and/or proprietary to Capital One and/or its affiliates and may only be used solely in performance of work or services for Capital One. The information transmitted herewith is intended only for use by the individual or entity to which it is addressed. If the reader of this message is not the intended recipient, you are hereby notified that any review, retransmission, dissemination, distribution, copying or other use of, or taking of any action in reliance upon this information is strictly prohibited. If you have received this communication in error, please contact the sender and delete the material from your computer.

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.

-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Birkir R. Gunnarsson
Sent: Tuesday, September 27, 2016 10:42 AM
To: WebAIM Discussion List
Subject: Re: [WebAIM] Help with a WAVE error

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/>;
>
> > > archives at http://webaim.org/discussion/archives
> >


--
Work hard. Have fun. Make history.

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.

-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Birkir R. Gunnarsson
Sent: Tuesday, September 27, 2016 10:42 AM
To: WebAIM Discussion List
Subject: Re: [WebAIM] Help with a WAVE error

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/>;
>
> > > archives at http://webaim.org/discussion/archives
> >


--
Work hard. Have fun. Make history.
The information contained in this e-mail is confidential and/or proprietary to Capital One and/or its affiliates and may only be used solely in performance of work or services for Capital One. The information transmitted herewith is intended only for use by the individual or entity to which it is addressed. If the reader of this message is not the intended recipient, you are hereby notified that any review, retransmission, dissemination, distribution, copying or other use of, or taking of any action in reliance upon this information is strictly prohibited. If you have received this communication in error, please contact the sender and delete the material from your computer.

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

-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Beranek, Nicholas
Sent: Tuesday, September 27, 2016 11:24 AM
To: WebAIM Discussion List
Subject: Re: [WebAIM] Help with a WAVE error

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.

-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Birkir R. Gunnarsson
Sent: Tuesday, September 27, 2016 10:42 AM
To: WebAIM Discussion List
Subject: Re: [WebAIM] Help with a WAVE error

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/>;
>
> > > archives at http://webaim.org/discussion/archives
> >


--
Work hard. Have fun. Make history.
The information contained in this e-mail is confidential and/or proprietary to Capital One and/or its affiliates and may only be used solely in performance of work or services for Capital One. The information transmitted herewith is intended only for use by the individual or entity to which it is addressed. If the reader of this message is not the intended recipient, you are hereby notified that any review, retransmission, dissemination, distribution, copying or other use of, or taking of any action in reliance upon this information is strictly prohibited. If you have received this communication in error, please contact the sender and delete the material from your computer.