How a Small Oversight In GSAP’s New Website Has Such a Big Impact

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!

#html #accessibility #animations #frontend #gsap

[frontendfyi]

≫ 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!

[bravefastrabbit]

Thank you for helping all the semi-blind people aspiring to become web-animators.

[jenhail]

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.

[pablofernandezruiz]

This is so true. I hope more and more developers take into consideration people with different abilities when developing their site.

[DUBviral]

Love your content! Your videos alway stand up in quality compared to so many other fronted channels! cheers :)

[dfgatorfan]

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.

[madebyjonny]

This is a great video, refreshing to have a video that shows how to improve on accessibility and not just bashing the inaccessible site

[monarchgamr]

Understandable but I doubt a visually or physically impaired individual is the target audience for an animation library

[MarthaHenry-rw]

Thomas Robert Hernandez David Young Steven

[danglad]

No, it's amazing for user experience, this voice is like you are in a high-speed elevator😃.

[mohamed-zhioua]

even the performance tested with lighthouse was 46%, it will be more bad with unlighthouse

[by_huy]

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

[vdemcak]

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.

[FULTONOFFICIALKFV]

Bro, only developers will visit that website so leave the accessibility alone, the website is fine