WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Return to Top Link

for

From: Swift, Daniel P.
Date: Oct 17, 2018 9:49AM


Absolutely - this code would cause a problem because the click binding function happens before the element is created (actually, before the element has the ID):

$(document).ready(function(){
$('#backToTop').click(function(){
$("#someAnchor").animate({ scrollTop: 0 }, 900).attr("tabindex","0").focus();
return false;});
});
$('main').attr('id', 'someAnchor');
});

The above example is pretty silly, but it illustrates the flaw in the click binding occurring before the element exists. Specifically, it is trying to bind the click destination to the element whose ID does not exist yet.

We ended up delaying the binding by using the set timeout function which was far from elegant. IMO, a better solution would've been using a loop to check for the existence of the object and then create the binding once it's found.

Does that make sense?

Dan Swift
Senior Web Specialist
Enterprise Services
West Chester University
610.738.0589

-----Original Message-----
From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On Behalf Of JP Jamous
Sent: Wednesday, October 17, 2018 11:27 AM
To: 'WebAIM Discussion List' < <EMAIL REMOVED> >
Subject: Re: [WebAIM] Return to Top Link

Unfortunately, I cannot because the pages are still in stage and have not hit prod yet. Can you explain to me the binding concept please as I am not familiar with how Jquery executes? Also, can you give me a general idea of how you were able to work around it?



--------------------
JP Jamous
Senior Digital Accessibility Engineer
E-Mail Me |Join My LinkedIn Network
--------------------


-----Original Message-----
From: WebAIM-Forum < <EMAIL REMOVED> > On Behalf Of Swift, Daniel P.
Sent: Wednesday, October 17, 2018 9:49 AM
To: WebAIM Discussion List < <EMAIL REMOVED> >
Subject: Re: [WebAIM] Return to Top Link

JP:

Are you able to provide a link? To me, this sounds like the binding is taking place before the element that it links to is created (when it fails).
Does that make sense? When I was developing for SharePoint, I remember encountering a similar situation and that was the cause.

Dan Swift
Senior Web Specialist
Enterprise Services
West Chester University
610.738.0589

-----Original Message-----
From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On Behalf Of JP Jamous
Sent: Wednesday, October 17, 2018 10:31 AM
To: 'WebAIM Discussion List' < <EMAIL REMOVED> >
Subject: [WebAIM] Return to Top Link

Folks,



Another interesting situation I have on my plate. There is a "Return to Top"
link that is supposed to jump the user to the page content or <main>. It uses a Jquery to perform a page scroll.



I tested the link and sometimes it works and other times it fails. When it fails, it jumps the screen reader user to the top of the DOM. The other concern is that <main> has this markup.



<main id="page-content" tabindex="-1">



I don't like the tabindex="-1" because JAWS in IE causes problems when tabbing.



Any idea what would be the best way to implement this so it is always functional and does not malfunction at times? Any feedback will be greatly appreciated.







--------------------

JP Jamous

Senior Digital Accessibility Engineer

<mailto: <EMAIL REMOVED> > E-Mail Me | <http://linkedin.com/in/JPJamous>; Join My LinkedIn Network

--------------------