Accessibility/WCAG compliance issues are so understated by a lot of people. So frustrating that basic things like contrast, headers, and alt text are ignored by a lot of Web Dev channels. Thank you so much Kyle for this extremely helpful video!
@@wennwenn1422 my comment is mainly addressed to anyone making a commercial project used by the public. Small businesses get sued all the time for ADA issues because it's something their $500 website neglected
wow. this was so much better than I expected. I was recently tasked to implement the first Skip to Main Content and used display (which is fine) but the translate with all the other skip links really looks great. great work for a little talked about but REAL CORPORATE need!
There is also aria-flowto which is a powerful technology. It allows you to present a list of alternate next elements in the tab order. You list the IDs separated by spaces, and it will present each as an option in a list, with the name of the target being the accessible name of the element (i.e. if it is a section, main, article, etc., It'll be the top level heading, or on an image, alt text, or on anything else, an aria-label).
there is so much anchor and button on a complex website like youtube for example using mouse is a no brainer the best way to go, that "skip to" shortcut feature only make sense for a simple website like blogs or search engine
Adding a skip link is good practice but if you actually use a screenreader you don't have to tab thru everything to get to where you want. You can tab by headlines or even sections thru , for instance, the rotor feature in Voiceover. So if you have semantic html that helps too.
Thanks for this. I really appreciate such a nice tip for everyone to know. I'm a blind dev and sometimes think devs take a11y guidelines as rocket science. You are showing that is not the case here :)
Awesome you're covering this right now because I'm currently working on key navigation for my project. This feature looks great and so easy to do! I'll definitely be putting one or more of these hidden tab links in my web application.
I use the keyboard to navigate and honestly I never knew of this. I don't use tab thought. It's odd to me that tab is the modern standard. But this is good to know and I'll definitely do it for personal little projects.
The start of good accessible web design is good web design though. Get the structure of your page clean and machine readable; and don't bombard people with crap before the main content, and you won't need so many tricks. Another important thing is having font sizes based on the User-Agent's root font size, scared with rem/em. Many people have poor eyesight and use massive text sizes, don't force them to blow everything up just to see text on your website.
Thanks for new feature. Can you please make video about form autofill(saved user and password) event listener in chrome. Have problems with login button disabling
Granted, I’m still listening to this, and not watching you code… However, I am surprised as a web developer you don’t know about the aria, Contin… Because aria allows this
Once i have ever built a website for a coding competition and i secretly put a hidden Rick roll link at the bottom left of the page. Luckily no one find out 😹 and i won
Mr/s B commented down Accessibility/WCAG compliance issues are so understated by a lot of people. So frustrating that basic things like contrast, headers, and alt text are ignored by a lot of Web Dev channels. Thank you so much Kyle for this extremely helpful video!
Accessibility/WCAG compliance issues are so understated by a lot of people. So frustrating that basic things like contrast, headers, and alt text are ignored by a lot of Web Dev channels. Thank you so much Kyle for this extremely helpful video!
Do you mean by web devs making short tutorials? Or the cheepo devs who just spend a few hours building sites for cheaps? 🤣
Depends on projects. It takes effort to be compliant.
@avfr That's how you get into a lawsuit for discrimination against a protected class
@@wennwenn1422 my comment is mainly addressed to anyone making a commercial project used by the public. Small businesses get sued all the time for ADA issues because it's something their $500 website neglected
It's also overstated by a lot of people
wow. this was so much better than I expected. I was recently tasked to implement the first Skip to Main Content and used display (which is fine) but the translate with all the other skip links really looks great. great work for a little talked about but REAL CORPORATE need!
There is also aria-flowto which is a powerful technology. It allows you to present a list of alternate next elements in the tab order. You list the IDs separated by spaces, and it will present each as an option in a list, with the name of the target being the accessible name of the element (i.e. if it is a section, main, article, etc., It'll be the top level heading, or on an image, alt text, or on anything else, an aria-label).
Nice content! Didn't realize there's such feature at all because I'm using only mouse to navigate all the time.
there is so much anchor and button on a complex website like youtube for example using mouse is a no brainer the best way to go, that "skip to" shortcut feature only make sense for a simple website like blogs or search engine
Your tutorials are so easily understandable a beginner kid can understand them. Love you from bottom of my heart ❤️
Adding a skip link is good practice but if you actually use a screenreader you don't have to tab thru everything to get to where you want. You can tab by headlines or even sections thru , for instance, the rotor feature in Voiceover. So if you have semantic html that helps too.
Great job as usual, Kyle! Simple and straight to the point. More content on accessibility in big Web Dev channels like yours would be much appreciated
I had seen the "skip to main content" button in various places and wondered what it is for. Now it makes sense
Very nice tip for accessibility. Most users won't need this but the ones who do will definitely appreciate it!
Thanks for this. I really appreciate such a nice tip for everyone to know. I'm a blind dev and sometimes think devs take a11y guidelines as rocket science. You are showing that is not the case here :)
Good idea for making skip links to every part of your page, and making it useful for more than just screen readers.
Nice one! Would have been great if you navigated using voice over to emphasize how frustrating it can be if the accessibility is not done right.
Thank you for raising awareness on such an important topic, I have to admit I'm also guilty of skipping accessibility features :S
Awesome you're covering this right now because I'm currently working on key navigation for my project. This feature looks great and so easy to do! I'll definitely be putting one or more of these hidden tab links in my web application.
Thats for accessibility-related to my UX studies - helps a lot !
This is brilliant! I'm going to start implementing this into my websites.
Really informative video on accessibility. Thanks a lot. I'd really appreciate a full course or playlist of everything on accessibility 😀
I use the keyboard to navigate and honestly I never knew of this. I don't use tab thought. It's odd to me that tab is the modern standard. But this is good to know and I'll definitely do it for personal little projects.
The start of good accessible web design is good web design though. Get the structure of your page clean and machine readable; and don't bombard people with crap before the main content, and you won't need so many tricks.
Another important thing is having font sizes based on the User-Agent's root font size, scared with rem/em. Many people have poor eyesight and use massive text sizes, don't force them to blow everything up just to see text on your website.
For older Browser compatibility use 'transform'...
'translate' is only since Chrome v103 available!
.skip-link{
...
transform: translateY(-100%);
transition: transform 150ms ease-in-out;
}
.skip-link:focus {
transform: translateY(0%);
}
Thanks for new feature. Can you please make video about form autofill(saved user and password) event listener in chrome. Have problems with login button disabling
For Tailwind CSS users, use "sr-only" (documentation at tailwindcss.com/docs/screen-readers)
You have to give the skip link a display block or inline block property too
I hono had no idea about this. Thank you for the video! :)
thanks for this! very useful information on how to make a site more accessible.
So that's why sometimes touchpad doesn't work and I have to use arrow keys? It's probably a bug but really annoying me and I'm lazy to investigate
Thank you for providing great knowledge !
thank you for making a video about a11y! would love to see more, like screen-reader only stuff :)
Very importent and very easy thnak you very much for this
Kyle is my mentor ...... gosh! I love dis bro
Nice one for covering this
Great short tutorials as always.
. 💕
Thanks brother, for the amazing info that you provide
Thanks kyle for making a good tutorial like this
These same skip links are equally useful for skipping really long lists, if there is valuable content afterwards.
Simple and smart. Thanks for sharing!
I’ve always wondered about this, thank you
How to prevent those ids appearing in the url?
Thanks for this advice!!!!!!
Very cool content!
Thanks
so simple yet so useful
how to start html file from visual studio code?
How do membership sites achieve this same accessibility? Also, Google or Yahoo?
Really nice tips ! thanks
'...how a single unseeable link, which you've probably never even seen before' oh really?
People who discovered this today xD
Interesting!! Thank you ✊🏻
Good Explanation ❤
super interesting.
Granted, I’m still listening to this, and not watching you code… However, I am surprised as a web developer you don’t know about the aria, Contin… Because aria allows this
You didn't format this comment correctly, so what you meant is not accessible.
"...an invisible link which you've probably never seen..." 😉
Nice!
Amazing
Nice idea.
great!
Skip link is weak.
Real staff is Vimium extension!
Once i have ever built a website for a coding competition and i secretly put a hidden Rick roll link at the bottom left of the page. Luckily no one find out 😹 and i won
"nearly every" majority of sites have no accessibility at all
wow nice content
Let me guess: "Skip to content/navigation" button?
Yep i was right
Hi bro, did anyone said you look like Homelander
Well well!
it is easy if you are in the developer mode
You don't understand skip links idea.
Intresting...
Cool
Dude this thumbnail is cursed.
I don't get it. Why should I worry about people navigating with tabs? Who are they?
humans, that's all you neeed to worry. :)
Mr/s B commented down
Accessibility/WCAG compliance issues are so understated by a lot of people. So frustrating that basic things like contrast, headers, and alt text are ignored by a lot of Web Dev channels. Thank you so much Kyle for this extremely helpful video!
There are blind users that use screen readers to navigate websites. Doing these things improves their user experience.
Oh i see.. but I guess not every business website requires this feature. It depends on your targeted audience
@@dmitrykulakov662 Recently, there was a blind programmer in Kyle's comment section. So I guess it is more necessary than we think.