I had to pause the video in the middle to actually appreciate and like this as it is such an informative video with all the practical examples. Thank you 😊
Great video, full of really helpful accessibility advice. On an unrelated note for video courses, a number of sites break the videos up into 5 to 7 minute chunks. This can be good for the those that want to dip in out of content rather than scrubbing through 45 minutes of video to find a specific point. Or just rewatching a particular section. Just a thought. 😊
A bunch of missing things from the video : 1. For any scenario in which you need to use font sizes, use em/rem, which essentially respects the browser's settings that the user manually configured 2. There are a bunch of a11y plugins for websites 3. If you can, you must always let the user toggle between light mode, dark mode and auto. Always relying on prefers-color-scheme is bad because some users prefer that only some websites are dark mode 4. color-scheme CSS property 5. No "aria" is better than a bad use of "aria" 6. Follor a11y-casts for nore info (a TH-cam show by Google developers)
Superb stuff! I used to view a11y as a (very distant) afterthought and/or something nice-to-have but in no way crucial. Been working on a public sector project for the city I live in for a couple of years now, and naturally the a11y requirements are quite high, and rightly so. This has really opened my eyes (pun not intended) to the sort of pain that e.g. screen reader users can experience when a11y is lacking or not done right, and now it's a crucial part of how I write code/brainstorm with the designer.
While I do appreciate this video a lot and got to know a lot about accessibility, it would be even better if there were live examples with a screen reader showing the actual effect of each of these options.
Shalom afternoon Mr. K Very helpful and super handy. The developer tools have become very sophisticated, the Emulate vision deficiencies is most nifty neat.
Thank you not only for bringing technical info, but reminding about the subject. Sad that I don't have time to address all those issues, someday, when I have a real user 🙂. As for `autofocus`, you forgot to mention it works only for static elements. If you are building dynamically the page it won't kick in, you need to make JS call to set the focus. My point is it has some value of course, but limited.
19 วันที่ผ่านมา +4
Awesome content! Really! Just one minor update though. Aria-Live OFF "Indicates that updates to the region should not be presented to the user unless the user is currently focused on that region." as per the MDN Docs.
Accessibility has always been an issue and mostly overlooked beyond the basics, but at least you're young enough that you didn't have to suffer through the browser standards chaos that persisted for 15+ years before chrome took over.
My man I like the way you do your stuff, I am a veteran software dev/eng & a lot of enterprise architecture experience. I have a strong desire to enhance my web framework aimed at delivering extremely fast time to delivery and ease of use. As you know many organizations need better data management and visibility but lack the resources to onboard an engineering team. I think a future version (refinement) of my platform will nicely satisfy this need. Certainly there is always room for improvement but I really think you should have a chat with me to see the concept. My family has some autism I am undiagnosed but it's clear that I'm hyper fixated on coding and have been for many decades. I need someone that likes the spotlight to partner with and help get some patrons. Let's chat.
You should have mentioned the tag with name="color-scheme" Essentially, since the browser first parses the HTML, if the user's OS is dark, the web page will instantly load in dark mode rather than load in light mode and change to dark
browser doesnt care about your heading levels if you are using or role="region" to create a hierarchy of content. heading levels are only taken into account when you dont have an hierarchy, for example content generated with rich text editors or from markdown. which doesn't have normal html hierarchy. this is good because its hard to follow content hierarchy if you are using components. so you can just use everywhere as long as you are using (s) for hierarchy. but i still dont like saying `h2` which sounds weird, so i usually do without aria-level. also for or role="region" to work, you also have to give it a label with `aria-label` or `aria-labelledby` otherwise browser treats it as no different than a element.
@@aurelian3401 No it's not. That's just superstition. It's not only a good practice but also a great "field" wrapper/selector for a form field, removing the need for a made up class name. It's semantically correct and better for accessibility. Even picocss examples uses like that. You only use `for` attribute for more complex designs. Similar to how can you use `form` attribute for more complex designs.
OH MY GOD THE REDDIT/TUMBLR IMAGE VIEWER SUCKS when I open an image in a new tab they have a header/footer and when I zoom in it makes the header/footer larger and the image smaller!! I'M TRYING TO READ THE IMAGE, GOD DAMNIT!
Not quite everything on accessibility but a really good introduction. The fonts for dyslectic are highly contested though and I for one would not recommend having functionalities for switshing. If the user wants different fonts, they can change them in the browser.
before watching the video: i think you should consider changing the video title. i don't think a youtuber whose channel isn't primarily about accessibility should say that their video about accessibility is the only one i'll need. people's needs are diverse; there will always be new things to learn about accessibility.
Someone in their clear mind uses kindle or any other screen reader for browsing the web? Really? 😂 Those dont even support js. Anyways, im glad we develop a b2b service and we dont give a shit about that accessibility stuff.s thank god
It feels like this guy is reading my mind and pacing his lessons perfectly with my career path, step by step.
Exactly, the same feeling!
22:42 It's usually favorable to style the outline rather than the border, considering that the outline doesn't take any physical space
I had to pause the video in the middle to actually appreciate and like this as it is such an informative video with all the practical examples. Thank you 😊
Great video, full of really helpful accessibility advice. On an unrelated note for video courses, a number of sites break the videos up into 5 to 7 minute chunks. This can be good for the those that want to dip in out of content rather than scrubbing through 45 minutes of video to find a specific point. Or just rewatching a particular section. Just a thought. 😊
Suggestion: split up into multiple videos, because its very information dense and would be more enjoyable to consume in small chunks
A bunch of missing things from the video :
1. For any scenario in which you need to use font sizes, use em/rem, which essentially respects the browser's settings that the user manually configured
2. There are a bunch of a11y plugins for websites
3. If you can, you must always let the user toggle between light mode, dark mode and auto. Always relying on prefers-color-scheme is bad because some users prefer that only some websites are dark mode
4. color-scheme CSS property
5. No "aria" is better than a bad use of "aria"
6. Follor a11y-casts for nore info (a TH-cam show by Google developers)
Superb stuff! I used to view a11y as a (very distant) afterthought and/or something nice-to-have but in no way crucial. Been working on a public sector project for the city I live in for a couple of years now, and naturally the a11y requirements are quite high, and rightly so. This has really opened my eyes (pun not intended) to the sort of pain that e.g. screen reader users can experience when a11y is lacking or not done right, and now it's a crucial part of how I write code/brainstorm with the designer.
I was searching for this. Please, do something like this about SEO
While I do appreciate this video a lot and got to know a lot about accessibility, it would be even better if there were live examples with a screen reader showing the actual effect of each of these options.
Shalom afternoon Mr. K
Very helpful and super handy.
The developer tools have become very sophisticated, the Emulate vision deficiencies is most nifty neat.
this video deserves way more views and likes , thanks man !
Thank you not only for bringing technical info, but reminding about the subject. Sad that I don't have time to address all those issues, someday, when I have a real user 🙂. As for `autofocus`, you forgot to mention it works only for static elements. If you are building dynamically the page it won't kick in, you need to make JS call to set the focus. My point is it has some value of course, but limited.
Awesome content! Really!
Just one minor update though. Aria-Live OFF "Indicates that updates to the region should not be presented to the user unless the user is currently focused on that region." as per the MDN Docs.
Isn't that the same behavior as if the attribute wasn't set on the element?
@kamoroso94 yeah... Because it's the default for it.
Mr. K, you surely know your stuff!
Thank you for putting this together! Lots of new tools in the belt for me. 🙏
This video came at the right time. Thank you so much
Thank you, Kyle.
24:30 pretty sure you didn't actually click the link with the spacebar - you just scrolled down one page. to click the link, you need to press enter
Accessibility has always been an issue and mostly overlooked beyond the basics, but at least you're young enough that you didn't have to suffer through the browser standards chaos that persisted for 15+ years before chrome took over.
Very helpful session 👍🏾❤
Thank you a lot for the video 💕
What a great video. Thank you for your efforts.
it fucking amazing bro i need more of this
My man I like the way you do your stuff, I am a veteran software dev/eng & a lot of enterprise architecture experience. I have a strong desire to enhance my web framework aimed at delivering extremely fast time to delivery and ease of use. As you know many organizations need better data management and visibility but lack the resources to onboard an engineering team. I think a future version (refinement) of my platform will nicely satisfy this need. Certainly there is always room for improvement but I really think you should have a chat with me to see the concept. My family has some autism I am undiagnosed but it's clear that I'm hyper fixated on coding and have been for many decades. I need someone that likes the spotlight to partner with and help get some patrons. Let's chat.
You should have mentioned the tag with name="color-scheme"
Essentially, since the browser first parses the HTML, if the user's OS is dark, the web page will instantly load in dark mode rather than load in light mode and change to dark
I have never heard of that. I will have to look into that.
23:17 Actually there's a real easy fix to it use outline-width/ border-width : 0 instead of using the none
so helpful! thanks a lot
as always, best in the business!, quality content.
Thanks so much for this video, it is very helpful.
Thank you *very much* for this video.
browser doesnt care about your heading levels if you are using or role="region" to create a hierarchy of content.
heading levels are only taken into account when you dont have an hierarchy, for example content generated with rich text editors or from markdown.
which doesn't have normal html hierarchy.
this is good because its hard to follow content hierarchy if you are using components. so you can just use everywhere as long as you are using (s) for hierarchy. but i still dont like saying `h2` which sounds weird, so i usually do without aria-level.
also for or role="region" to work, you also have to give it a label with `aria-label` or `aria-labelledby` otherwise browser treats it as no different than a element.
thanks
This is GOLD 👏
thanks kyle
Great video
thank you
How is this the only accessibility video you will ever need if this is barely a overview?
Awesome! ❤❤❤❤❤
you can also wrap the with
Bad practice, label is label, input is input, don't wrap them
@@aurelian3401 No it's not. That's just superstition.
It's not only a good practice but also a great "field" wrapper/selector for a form field, removing the need for a made up class name.
It's semantically correct and better for accessibility.
Even picocss examples uses like that. You only use `for` attribute for more complex designs. Similar to how can you use `form` attribute for more complex designs.
@@nomadshiba I'm imagine you putting the in the place of 😁😁😁
OH MY GOD THE REDDIT/TUMBLR IMAGE VIEWER SUCKS
when I open an image in a new tab they have a header/footer and when I zoom in it makes the header/footer larger and the image smaller!! I'M TRYING TO READ THE IMAGE, GOD DAMNIT!
Hey Kyle. I was just thinking of accessibility 2 minutes before I got the notification of this video. Weird 🤪 but awesome. Thanks!
yeah Google knows you more than you do
Not quite everything on accessibility but a really good introduction. The fonts for dyslectic are highly contested though and I for one would not recommend having functionalities for switshing. If the user wants different fonts, they can change them in the browser.
You're the coolest.
But when using frameworks like angular and reactjs, how to make sure it generates good accessible content
25:42 A live transcript like Coursera does to all its courses.
it's 2024 and still the same background with that guitar xD
12:20 this is what youtube does with their dark mode. my eyes start bleeding after 10 minutes of reading comment section
Accessibility is very broad. Lucky, I like my website inaccessible so I don't have to learn this.
before watching the video: i think you should consider changing the video title. i don't think a youtuber whose channel isn't primarily about accessibility should say that their video about accessibility is the only one i'll need. people's needs are diverse; there will always be new things to learn about accessibility.
That’s just like… your opinion, man
What about after watching the video?
28:25 lookin at you mobile ads
Interesting. So youtube is navigable by keyboard only.
Someone in their clear mind uses kindle or any other screen reader for browsing the web? Really? 😂
Those dont even support js.
Anyways, im glad we develop a b2b service and we dont give a shit about that accessibility stuff.s thank god
First comment ❤
Consider to hide your head on videos.. "hindustani" style headshake is very distracting
it's about accessibility.. so people can read his lips.. you know?
@terminalterm2367 there is a thing called subtitles... you know?
aitutorialmaker AI fixes this. The Only Accessibility Vi