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

so when I arrived in my new studio this morning look around you it's new it's still AI we're working on that but when I arrived here I saw on Twitter a lot of various tweets about the new gab website and I mean look at it it just looks really really sexy if we one more time refresh there's a lot of these really nice animations everything moves and if you keep on scrolling there's just so many micro animations and it's really great but I am also so a little bit disappointed because what I'm trying to teach you is best practices I think animations are super useful and really really nice however one thing that's way more important is accessibility and that's honestly where this page lags in but it's so simple to add let me quickly put on my headphones and open my voice over app on Mac so I can show you what I mean so the way visually impaired users often navigate a website is by navigating them by headings and that's also why they are super important and that's exactly where in this case the Gap website lacks a little bit and it's not that they're not using them they're using them in all of the right places I think however let's quickly open voice over on Mac and listen what happens when I select the first heading Arc homepage vertical line if youve never heard this homage vertical line this voice content one of the tools you are currently on web content to enter the web area press control option shift down arrow if you've never heard this this is voice over and this is actually what visually impaired users use or at least one of those tools now I can select every heading on this page one by one so I can quickly scan through the content and that is how visually impaired users or at least one of the ways they navigate the site now let's first select the H1 heading level one 25 items a image n a i m image a T1 14 more items you are currently on a heading level one this is not useful at all and what's happening here well if we quickly inspect elements less than body style data member equals false greater than expand voice over if we quickly inspect this heading you see that it's split into different spans with each having their own letter and that's actually what voiceover is reading it is thinking every letter has its own meaning and should be pronounced separately because it's in its own container and that's exactly where the problem Rises because if I would turn on voice over once more voice over on Arc homepage vertical line set window home heading level one heading level two 55 items this app allows you to level one e level one F level one F level one O Level 1 R level one t level one L level one e Level One S level one 44 more items you voice overall this is useless now if there is a visually impaired user going to this website they still need to know what TP is is and what it does but they can't use this page and now if we quickly take a look at one of the examples I made recently as well and this is not to say that I'm the best at all but it is proving a point that I want to teach best practices and that's not making the most fancy website ever but it should also be useful because if we now turn on the voice over here and we go to this very first text which also has an animation if we quickly refresh then you see that it also fades in however if we now Focus this heading heading level one hello you you are currently on heading level one hello you and we go to the second heading that's also there heading level two this is written on a typing machine tick tick tick tac tac it just head level and why is it any different well firstly it's still in all of these different spans so it should be broken in the same way right however there is one thing that that's also added on here and that is that the text is actually twice in this heading the first one has a Cass name of screen reader only so it means that this first label is not visible to people who are able to see but that's exactly what is read by the screen reader because this second label with all of the letters split into different spans that's hidden with Arya hidden so that means that voice over won't read out all of these letters but will resort to the previous span to read out allow to user and that makes the experience for the screen rear work as well you could also use an area label attribute on your heading that would have the exact same result however you would still need to area hidden the text inside of it otherwise it could still try to pronounce it depending on the screen reader you are using so one more time I think animations are nice but are secondary to accessibility and especially a big company like Gap who has a lot of very smart people there I think they firstly should make sure that things like this just don't happen and of course we all make mistakes but I hope that this video at least triggers them to fix that so visually impaired users can also enjoy this website at least its content so this was a very short impromptu video taking place in my new studio where I will share more about very soon I hope you thought this was useful and that it inspired you to also think more about things like accessibility because this is very very important and as a front-end developer it's our task to make sure that it is accessible to as many people as possible thank you so much for watching and I hope to see you in the next [Music] video

Channel: Frontend FYI

Views: 8,329

Keywords: frontend, webdevelopment, css, css animations, accessibility

Id: yVn-YeqgTio

Length: 5min 46sec (346 seconds)

Published: Wed Oct 11 2023