window.requestAnimationFrame is undefined in some browsers

[user0474975]

I get exception "object doesn't support property or method "requestAnimationFrame" in tota11y.min.js

This is IE 11 or Edge on Windows 7 and 10 on the following website: https://www.mylambton.ca

The following line, found on another GitHub issue, added to the bookmarklet seems to fix it, but it might be better added to the min.js? Sorry I don't know that much about JS.

window.requestAnimationFrame = window.requestAnimationFrame || function(callback) { window.setTimeout(callback,16) };

[jdan]

Hello!

Thank you very much for the detailed issue report. Looks like I'll need to provide the alternative for requestAnimationFrame just as you suggested. My apologies for overlooking this.

[user0474975]

You are very welcome and I'm glad it was helpful. We were hoping to deploy this bookmarklet to all the web content editors in our organization (a college) but it will need to work in IE. Will updates on this bug be posted to this page? If not, where can I track whether the issue is fixed? Thanks!

[jdan]

@user0474975 Yep I'll go ahead and update here. I should have a fix in place by end of week, if you need something faster feel free to add the following above where you include tota11y:

<script>
window.requestAnimationFrame = window.requestAnimationFrame || function(callback) { window.setTimeout(callback,16) };
</script>
<script src="./js/tota11y.min.js"></script>

But if you are instead asking all developers to use the bookmarklet, that solution won't necessarily work for you. I'm very much interested in hearing more about how you're using tota11y - sounds like an awesome use-case!

[user0474975]

Yes, we'll be asking all our content editors to download the bookmarklet from your page, (where the documentation is), so we will happily wait until the issue is fixed and released.

Sure thing. As a college we have a few different systems that require multiple editors, such as our Learning Information System where teachers enter course information for students to access, or our current student and staff website which has a distributed editor model (each department is responsible for maintaining their own content). Because much of this content is on password-protected sites, tools that use crawlers (like Siteimprove) cannot tell these editors whether their content is WCAG-compliant since crawlers cannot access those pages. So we were in need of a client-side, cross-browser tool that is user-friendly enough for non-technical users. Tota11y fit the bill for us (except for this one little bug) and I really love that it offers the editors suggestions on how to fix what is "broken".

Sorry for being so wordy :) Let me know if you have any other questions.

[jdan]

Hey @user0474975,

Got a PR up for review now - #83 :)

Thanks for the detailed report of how you're using tota11y. Sounds like a very interesting use-case. If you have any feature requests (we're not really a compliance tool but there's some overlap) please let us know! I'm also making tota11y extensible in the near future.

[jdan]

@user0474975,

The fix has landed! I'm going to put out a new release in the next few minutes and update accordingly with instructions. Thanks for your patience.

[jdan]

You're all set!

https://github.com/Khan/tota11y/releases/tag/0.1.3

Let me know how it works out - we don't aggressively support IE9 but I bet I can make things work without much issue (or at least fail gracefully)

[user0474975]

Thank you for doing this so quickly! We only support IE11+ on our campus so I wouldn't be able to test that for you, but I'm hoping to be able to start downloading and pilot testing sometime this week.

[jdan]

Oh, my apologies! I was under the impression that IE10 and above supported requestAnimationFrame.

I'm on Windows right now, and interestingly I can access window.requestAnimationFrame everywhere except https://www.mylambton.ca/. Looks like the following line is telling IE (on my machine, IE11) to use IE9 compatibility mode.

<meta http-equiv="X-UA-Compatible" content="IE=9">

Happy to have the simply polyfill in anyway :)

[user0474975]

You are correct - the website was designed quite a few years ago and we had to force IE9 compatibility for some of our custom applications. (The site is slated for a redesign at which time this will be addressed). I had forgotten about that :) But the browser we were using to view it was IE 11 (win7) and Edge (win10).

I had tested Tota11y on quite a few sites with Internet Explorer and didn't catch on as to why most sites worked with the bookmarklet and a few didn't. Of course the websites can set their IE mode. Sorry for the oversight.

[jdan]

No worries at all. At the very least, we should have some messaging to say that the browser isn't supported, or perhaps disable certain plugins which may be problematic. tota11y's going through a rewrite now, so we'll make it a bit easier to address this.

But thanks again for bringing all of this to my attention. If you come across any weirdness please don't hesitate to be noisy!