How a Small Oversight In GSAP’s New Website Has Such a Big Impact
Вставка
- Опубліковано 10 жов 2023
- When I checked Twitter this morning, lot’s of people were sharing GSAP’s cool new website. There’s so many (micro) animations on there - it just looks stunning! It’s really a piece of frontend (and design) craftsmanship!
However, the moment I dug a bit deeper, I got sad pretty quick. Their website is optimised to look as sexy as possible - but while doing that, they totally forgot to take accessibility into account. Join me in today’s video as we discover what MacOS’ VoiceOver thinks about GSAP’s new website, and how you can prevent such issues in your website. The fix is so easy, but makes such a big difference!
Of course all of use make mistakes, and this for sure was never the intention of the team. If anything, I hope this video helps in improving GSAP’s website, so it’s also better accessible to screen readers. On top of that, with these examples I hope to learn these small tricks to you, so you can improve you day to day work with this as well!
✨ Become a PRO today via www.frontend.fyi/pro
🔗 Check my other article and video about staggered animations I showed in the video here: www.frontend.fyi/v/staggered-...
📺 Or watch that video directly on UA-cam here: • Master Staggered Text ...
#html #accessibility #animations #frontend #gsap - Наука та технологія
≫ This has been fixed! ≪
Within hours the team pushed a fix to make sure the accessibility was on point again. Hats of to the team for responding so quick!
They also reached out to me and told me they will even bake this solution into the library itself, so even people who aren't aware of it, still deliver good accessibility! I love it!
Thank you for helping all the semi-blind people aspiring to become web-animators.
All of the comments here saying that this isn't necessary is like saying not to put a wheelchair ramp in front of a museum because anyone who would need the ramp wouldn't want to go into the museum anyway.
Great job making this video and clearly explaining the issue! Accessibility is incredibly important and often overlooked.
Thank you Jen!! Appreciate it!
This is so true. I hope more and more developers take into consideration people with different abilities when developing their site.
Love your content! Your videos alway stand up in quality compared to so many other fronted channels! cheers :)
Thanks for the kind words, appreciate them!
Thanks for the Dev guide.
The worst thing of their new website is the amount of broken links and things missing where they used to be. The scrolltrigger demos page is completely gone and the documentation is laid out completely differently. Very frustrating.
Sorry to hear 😢
This is a great video, refreshing to have a video that shows how to improve on accessibility and not just bashing the inaccessible site
Thank you so much. Fully agree with you!
Really good catch.
Good point.
No, it's amazing for user experience, this voice is like you are in a high-speed elevator😃.
This is something all developers that like to create these kind of sexy websites - including me - should watch. It's incredibly so simple to make websites more inclusive by adding several lines of code. Thank you so much for this one
YES! 100% - this is exactly the reason I shared this one. Think we see too many hype based videos not teaching best practices, I try to change that 😁 (also knowing I’m not perfect either).
even the performance tested with lighthouse was 46% , it will be more bad with unlighthouse
We're getting greens across the board over here. Was there a particular page you were having perf issues on?
If it's a site-wide test, our forums will definitely drag the average down. They're heavy, legacy PHP - but the rest of the site is static/prefetched and the docs are a PWA. Should be pretty nippy.
pagespeed.web.dev/analysis/https-gsap-com/zra8umgz3m
This gives a 35 on mobile and 66 on desktop for performance. But honestly, things like LCP are quite hard to satisfy if you have a large animation directly in view, like your h1. It skews the statistic quite a bit. So I honestly think there isn’t really a lot to worry about here.
Understandable but I doubt a visually or physically impaired individual is the target audience for an animation library
Absolutely true. However, if the site isn’t accessible, a visually impaired user can’t even learn what the page is about. And that’s bad imo. Even if they would never use the library itself. Plus it’s of course an example you set as the creator of the library, right.
Bro, only developers will visit that website so leave the accessibility alone, the website is fine
I get your initial response. But do realize that when accessibility is not on point you’re practically denying people with visual impairments “access” to your website. Despite it being so easy to fix. In my opinion it’s then a no brainer to fix this and let as many people as possible enjoy the website.
Glad that the team already responded and acknowledged it - they will fix it and bake the solution into the library 🙏
No. Not leaving it alone since they are not a startup, they are literally a established firm
dont all websites using these specific gsap functions have this problem
Right, developers cant be visually impaired
I don't think this is an issue to be honest. The goal of this website is not to be accessible as something like Facebook(visually impared people are not going to be fancy web developers anyways), but rather it should show off all of the features of GSAP which it does really well.
But shouldn’t someone who is visually impaired at least be able to get to know what GSAP even is? If the website isn’t accessible, they will never get to know. So they won’t even know it’s an animation library. If I imagine that person being me I’d get sad for being “excluded” in such a way.
So I think it’s the task of all of us frontend devs to make sure the web is inclusive to as many people as possible. Even if the website is about a tool a visually impaired user might never use. It’s not up to us to judge what they want to learn and what not.