Excellent video. Just a reminder that accessibility is NOT for the disabled people only. For instance, imagine you are watching a recipe on UA-cam and your hands are oily or you are busy chopping but you want the video to go back 5 seconds because you missed a step. That is also accessibility since having dirty hands is having disabled hands at that particular moment. Unfortunately, when accessibility is mentioned, people automatically think of blind or deaf people but even non-disabled users benefit from all sorts of accessibility features
Exactly...Also contrast on a page counts as accessibility but applies to everybody who stares at the screen for a certain amount. Accessibility applies to all users in various amounts.
Well its primarily to cater for those who are physically disadvantaged, its sole purpose of existing that is. Clearly it wasn't introduced as a means to tackle the problem of using a smart phone with oily hands. Lets be real for just a second please if we may. Don't mislead the already confused youth.
After watching this, I actually went and adjusted contrast in CSS on my blog. Nobody reads it, but now people with eyesight issues can ignore it without any strain on their eyes 👀
Thanks a lot for this! Being a blind dev myself, you simply raised awareness about a11y among all the developers you teach everyday! Thank you very much!
Thank you very much for this, quite some important info, it's nice to also see someone mention that you should actually have meaning links and not just "read more", so, reall nice! One thing about accessibility in the case of this video though: Actual checked and uploaded captions on UA-cam are easier to read and, compared to auto-generated, much more reliable. So, especially in accessibility videos, it would be awesome to have dedicated captions/subtitles uploaded. Often you can even just copy-paste the automated ones with maybe small corrections and it'll still be displayed in a more pleasant, and not word-by-word, way. 🙂 Thank you for this work either way!
Chrome devtools have all color blindness and blurring tests as tools. It's in the Rendering tab/section. May be hidden by default, there's "more tools" in the kebab menu.
Thank you Kyle as always! For those seeing the message 'No contrast information available,' check the target DOM element in the 'Computed' tab of your browser's developer tools. Ensure that both the color and background-color CSS attributes are defined.
A search engine accesses a website exactly like a blind person. So aside from being the right thing to do, making sure your website is accessible is also the smart thing to do. If you consider accessibilty from the beginning of a project, it’s no big deal. Retrofitting accessibility is another story. Alternative text should replace with words what you are trying to convey with an image. Sometimes that’s a description, sometimes it isn’t. A semantically correct layout doesn’t necessarily need Aria. It’s better not to use Aria at all than to use it incorrectly. Keyboard access is also a critical part of accessibility. Every component of a site should be reachable in the sites logical order without a mouse, including drop-down menus. In reality, if you think about it, we may all just be temporarily abled, and if you know anything about the creator of HTML (Sir Tim Berners-Lee) you know that it was his intention from the beginning for the WWW to be accessible to all.
Great video! It would be really helpful, if you could make more videos about accessibility. For example: How to create an accessible navigation bar, form, modal, ...
When I worked as web designer, I always worked on my designs with full desaturation filter turned on half of time. This way it was really easy to account for all types of color blindness at the same time. Although designing itself was much harder than "green good, red bad"
Great video on an important topic. We are still unfortunately very far from accessible web. So many sites are totally unusable even with keyboard or similar input device. I guess the main reason is that default focus styles do not look that great so devs and designers tend to hide them. That's why I'm actually currently building a CSS library/tailwind-plugin with different "fancy" static and animated focus styles to tackle the issue. From accessibility standpoint they are definitely not perfect and for example animations have their own accessibility issues. But still, even an over-the-top animated focus style is a lot better than no focus style at all.
best way to test accessibility is to get feedback from real people. many things are not measured well by these tools. accessibility is for everyone thank you for talking about 11:49 it.
Would also be really great to know how deal with headers, main, section tags etc. in a web application (meaning not a blog post, rather static content, etc.).
It doesn't help when you tell the screen reader in example to not look at an input with every single method you can think of, display: none; pointer-events: none; aria-hidden="true" inert, it still interacts with the input and not the label you are using with a role of switch and aria-checked that you update with JS. Screen reader off: site works with accessibility taken into account. With screen reader (Narrator), it breaks the site. Like come on.. there needs to be more trust put into the devs to make a site accessible too. When the screen reader ignores half the things you are doing to make something much more accessible, it's just annoying to try make a site accessible. I have already made sure to turn Enter and spacebar key inputs into clicks for elements that needs it as well, but Narrator destroys all the effort I've put towards accessibility. So annoying.
Kyle, about your H1s, question for you : could we say an article is a document by itself therefore it has its own hierarchy ? In other words we could have a H1 inside an article even if this article is into a H2, let’s say.
It doesn't have its own hierarchy. Header hierarchies apply to the entire page. You don't get to reset to 1 because you started an article. If you use a screen reader, it lists all of the headers and their levels on the entire page. It doesn't break it down by section. (At least not the Mac screen reader. I can't speak for any others)
I agree! There’s such a lack of video content on accessible components! I’d definitely watch and share one. I’m a technical content writer and started a “Quick A11y Tips for Devs” (with coffee and cats theme) series on my blog that starts from scratch with vanilla html and css. I’m gradually building out the example “Crazy Cats Coffee” site to include vanilla js, then Tailwind, and React. Covering all the major topics in the IAAP Web Accessibility Specialist (WAS) certification. Changing domains and updating sites this week. I’m “Ginger Kiwi” .blog and on Toronto JavaScript. Another upcoming article A11y videos for devs (for 2024) will include this video. Awesome. 😊
can you please do an entire playlist on clean code that can work with any language? I am working with GO and want to see how I can clean up my code so it is dead simple and beautiful
It's a convention. Also, if you care about SEO, whatever is important to Google is by default important to you. If you have multiple H1 tags, Google treats your site as low quality, and they'll punish you for it by ranking your page farther down for any given search query.
Google “IAAP WAS Body of Knowledge” sections 1.1.4 “POUR principles” Perceivable, Operable, Understandable, Robust”. Keeping semantic html structure fulfills Perceivable, assists with Operable, Understandable, and Robust. It makes a document - which is what a web page is - navigable by screen readers and refreshable braille displays.
if my site is not accessible, it might be due to my lack of knowledge. maybe i m a student and just learning things. there's always scope for learning something new. people shouldn't sue websites except one with heavy graphics, flashes, disturbing imagery without warning of so. one shouldn't take the ENTIRE WORLD for granted that everyone will cope up with their "specific" situation. That doesn't mean we shouldn't optimize our site for everyone. we should if there's a scope. but no people OWN my website to sue me for my contrast or Christmas color choices.
I assume there is money involved, and companies like dominoes provide a service which requires a price. If you're just building a blog project. Maybe people won't sue you, because they don't have a case against you, as you're not a company providing a paid service.
Sucks, but most people feel entitled to the labor of others. I you pay attention, 99 % of all politics is people fighting over the tax money others payed.
It’s all about money. There are shady US law firms that target small-medium eCommerce businesses with lawsuits and give them 2 options settle the dispute between them or go to court. Obviously if you pay directly the law firm that file the lawsuit against you, you pay less than going to court. And that’s all they do, they jump from one eCommerce to another. It has nothing to do with disabled people, that’s just an excuse to make easy money. It’s all legalized and possible because of US equality laws bs.
Americans with disabilities act. If you are not American you have probably never encountered this. In the EU you will have accessibility requirements for either EU funded or government projects. However since there is no objective way to check for accessibility, you just might need to pass HTML 5 and WCAG validations. You can do that while making your site very inaccessible to users of screen readers.
The payoff, besides avoiding lawsuits, is that accessible websites tend to have better design for everybody. When untrained people use an inaccessible site, they don’t think “ugh this isn’t accessible,” but the user experience tends to be vaguely crappy.
Why should I invest money in making my website and SaaS software accessible? It's only for a small minority so the ROI isn't there. The fact the ADA makes it legally mandated to do so is an aberration.
One of the problem new web dev always ignore. They deliver visually good website but completely ruined by massive accessibility issues... No matter how good your website looks, if it's not accessible, it's useless.
@@stefangarofalo3131 That's exactly the mentality to avoid. Beside, 15% of the world’s population has some sort of disability, we are far from your random number. You should consider looking in the website monsido who talk about accessibility statistics as this topic is growing bigger each year and becomes necessary to understand.
Accessible color schemes are so damn ugly tho (except for b/w). Like damn, the entire world has to suffer these horrendous color schemes just because of a meager 1 percent. Accessibility and design don't go very well together
Unfortunately Accessibility is not something that a single dev can do on their own. It requires a lot of work and specialized people, that have deep understanding and that’s their main job. Yes, you can try to have everything in place.. but you’ll never be 100% complaint. It’s impossible to reach AAA even on a default blank html page with no styles.
A site that partially implements accessibility is way better than one that doesn't even try. I agree with you that no single developer can master all of web accessibility. It requires a community of accessibility experts with a culture of peer-review.
AAA is not intended for most websites. AAA is intended for specialist applications that cater specifically to people with disabilities. A is the bare minimum, AA is the ideal level to implement. In Europe websites are required by law to be WCAG 2.1 AA compliant
I mean... I work my ass off to create a beautiful UI if you cant see my work then I ask you to not visit my site, by all the respects! (I hope those who have said this havent lost their eyes... 😑)
I know that the topic has nothing to do with the video, but for humanity. Recently, Israel bombed a house in southern Gaza, killing at least 10 people - 7 of them children. So far, the number of killers in Gaza has exceeded 3,500 dead, most of whom are children and women. I hope that To have a voice in this for humanity
Excellent video. Just a reminder that accessibility is NOT for the disabled people only. For instance, imagine you are watching a recipe on UA-cam and your hands are oily or you are busy chopping but you want the video to go back 5 seconds because you missed a step. That is also accessibility since having dirty hands is having disabled hands at that particular moment. Unfortunately, when accessibility is mentioned, people automatically think of blind or deaf people but even non-disabled users benefit from all sorts of accessibility features
But how do I go back? my hands are oily please help me
That’s right because it improves the UX for all!
Exactly...Also contrast on a page counts as accessibility but applies to everybody who stares at the screen for a certain amount. Accessibility applies to all users in various amounts.
@@varuncanhandle the Crouton app has a feature where you can wink with your left and right eyes to go back and forward
Well its primarily to cater for those who are physically disadvantaged, its sole purpose of existing that is. Clearly it wasn't introduced as a means to tackle the problem of using a smart phone with oily hands. Lets be real for just a second please if we may. Don't mislead the already confused youth.
After watching this, I actually went and adjusted contrast in CSS on my blog. Nobody reads it, but now people with eyesight issues can ignore it without any strain on their eyes 👀
lol
I’m a legally blind dev, so this is really important to me. Thank you!
Thanks a lot for this! Being a blind dev myself, you simply raised awareness about a11y among all the developers you teach everyday! Thank you very much!
Thank you very much for this, quite some important info, it's nice to also see someone mention that you should actually have meaning links and not just "read more", so, reall nice!
One thing about accessibility in the case of this video though: Actual checked and uploaded captions on UA-cam are easier to read and, compared to auto-generated, much more reliable.
So, especially in accessibility videos, it would be awesome to have dedicated captions/subtitles uploaded.
Often you can even just copy-paste the automated ones with maybe small corrections and it'll still be displayed in a more pleasant, and not word-by-word, way. 🙂
Thank you for this work either way!
As a QA I push accessibility a lot. So glad to see this from the dev side. Great video!
Chrome devtools have all color blindness and blurring tests as tools. It's in the Rendering tab/section. May be hidden by default, there's "more tools" in the kebab menu.
I never knew about this section of the Rendering tab. I have always just used the CSS emulations and had no idea this existed.
@@WebDevSimplifiedThey chose a weird place for it. It would make more sense if it was in the accessibility tab, not at the very bottom of rendering.
wow. this is so helpful. thanks dmitry
Thank you Kyle as always! For those seeing the message 'No contrast information available,' check the target DOM element in the 'Computed' tab of your browser's developer tools. Ensure that both the color and background-color CSS attributes are defined.
A search engine accesses a website exactly like a blind person. So aside from being the right thing to do, making sure your website is accessible is also the smart thing to do. If you consider accessibilty from the beginning of a project, it’s no big deal. Retrofitting accessibility is another story. Alternative text should replace with words what you are trying to convey with an image. Sometimes that’s a description, sometimes it isn’t. A semantically correct layout doesn’t necessarily need Aria. It’s better not to use Aria at all than to use it incorrectly. Keyboard access is also a critical part of accessibility. Every component of a site should be reachable in the sites logical order without a mouse, including drop-down menus. In reality, if you think about it, we may all just be temporarily abled, and if you know anything about the creator of HTML (Sir Tim Berners-Lee) you know that it was his intention from the beginning for the WWW to be accessible to all.
Great video!
It would be really helpful, if you could make more videos about accessibility.
For example: How to create an accessible navigation bar, form, modal, ...
This is just great, in 13 minutes a lot of stuff is covered. Thanks.
Amazing video! Great information in a short video, straight to the point, thanks!
When I worked as web designer, I always worked on my designs with full desaturation filter turned on half of time. This way it was really easy to account for all types of color blindness at the same time. Although designing itself was much harder than "green good, red bad"
Thanks!
Welcome!
Great video on an important topic. We are still unfortunately very far from accessible web. So many sites are totally unusable even with keyboard or similar input device. I guess the main reason is that default focus styles do not look that great so devs and designers tend to hide them. That's why I'm actually currently building a CSS library/tailwind-plugin with different "fancy" static and animated focus styles to tackle the issue. From accessibility standpoint they are definitely not perfect and for example animations have their own accessibility issues. But still, even an over-the-top animated focus style is a lot better than no focus style at all.
Now everybody and their dog will be able to view the site
Awesome video. We should talk more about accessibility tools.
AI is also a great helper to improve and evaluate the accessibility of a page
best way to test accessibility is to get feedback from real people. many things are not measured well by these tools. accessibility is for everyone thank you for talking about 11:49 it.
At this rate, I think I should from web development to something like python or c++
The axe devtools chrome extension is free and goes into more depth than lighthouse.
We use the free NVDA program for our screen reader testing, it's a lot like JAWS, I believe it works on both Windows and Mac
Do you have a second channel or anything where you feature your guitar skills? I've been curious to hear your playing for a long time!
How do you enable the Contrast ratio information in dev tools? That do not show at all in my dev tools (chrome)
Would also be really great to know how deal with headers, main, section tags etc. in a web application (meaning not a blog post, rather static content, etc.).
It doesn't help when you tell the screen reader in example to not look at an input with every single method you can think of, display: none; pointer-events: none; aria-hidden="true" inert, it still interacts with the input and not the label you are using with a role of switch and aria-checked that you update with JS. Screen reader off: site works with accessibility taken into account. With screen reader (Narrator), it breaks the site. Like come on.. there needs to be more trust put into the devs to make a site accessible too. When the screen reader ignores half the things you are doing to make something much more accessible, it's just annoying to try make a site accessible. I have already made sure to turn Enter and spacebar key inputs into clicks for elements that needs it as well, but Narrator destroys all the effort I've put towards accessibility. So annoying.
Great video! Thanks Kyle as always! 👍👍
Kyle, about your H1s, question for you : could we say an article is a document by itself therefore it has its own hierarchy ? In other words we could have a H1 inside an article even if this article is into a H2, let’s say.
It doesn't have its own hierarchy. Header hierarchies apply to the entire page. You don't get to reset to 1 because you started an article. If you use a screen reader, it lists all of the headers and their levels on the entire page. It doesn't break it down by section. (At least not the Mac screen reader. I can't speak for any others)
Would like to see a good accessibility course that includes BOTH WCAG understanding and how to interpret them to make accessible components
I agree! There’s such a lack of video content on accessible components! I’d definitely watch and share one.
I’m a technical content writer and started a “Quick A11y Tips for Devs” (with coffee and cats theme) series on my blog that starts from scratch with vanilla html and css. I’m gradually building out the example “Crazy Cats Coffee” site to include vanilla js, then Tailwind, and React. Covering all the major topics in the IAAP Web Accessibility Specialist (WAS) certification. Changing domains and updating sites this week. I’m “Ginger Kiwi” .blog and on Toronto JavaScript.
Another upcoming article A11y videos for devs (for 2024) will include this video. Awesome. 😊
You Don't have to be blind or visually impaired to want a screen reader. Great way to force the Selfie Spy cam to not be taped over. Cheers.
can you please do an entire playlist on clean code that can work with any language? I am working with GO and want to see how I can clean up my code so it is dead simple and beautiful
I'm curious: Is there a reason, you use a header element inside your article but not a footer?
How do I do all this in Firefox instead of chrome
Can I have code of this blog 👈😐?
I just love 💕 how it looks 🤩
Thanks for the great video
This is just intro to accessibility, so title is little bit odd.
Exactly this doesn’t even scratch the surface.
Did you forget to link the videos in the end.... or didn't you find any good ones?!
So jumping from h1 to h3 is bad 😔
Hey bro I want to what is the difference between only react + vite vs react javascript swc?
Need a partytown working with NextJS pages router and GTM preview mode. Please 🙏
I've got really confused about having only one H1 per page... Like, why would that matters? I would like to see examples and proofs...
It's a convention. Also, if you care about SEO, whatever is important to Google is by default important to you. If you have multiple H1 tags, Google treats your site as low quality, and they'll punish you for it by ranking your page farther down for any given search query.
Google “IAAP WAS Body of Knowledge” sections 1.1.4 “POUR principles” Perceivable, Operable, Understandable, Robust”. Keeping semantic html structure fulfills Perceivable, assists with Operable, Understandable, and Robust. It makes a document - which is what a web page is - navigable by screen readers and refreshable braille displays.
You forgot to meantion WAI-ARIA which is very important
superb .. thanks
Amazing!
can you explain your pc configuration ?
Thank you so much
if my site is not accessible,
it might be due to my lack of knowledge.
maybe i m a student and just learning things.
there's always scope for learning something new.
people shouldn't sue websites except one with heavy graphics, flashes, disturbing imagery without warning of so. one shouldn't take the ENTIRE WORLD for granted that everyone will cope up with their "specific" situation.
That doesn't mean we shouldn't optimize our site for everyone. we should if there's a scope. but no people OWN my website to sue me for my contrast or Christmas color choices.
I assume there is money involved, and companies like dominoes provide a service which requires a price. If you're just building a blog project. Maybe people won't sue you, because they don't have a case against you, as you're not a company providing a paid service.
Sucks, but most people feel entitled to the labor of others. I you pay attention, 99 % of all politics is people fighting over the tax money others payed.
It’s all about money.
There are shady US law firms that target small-medium eCommerce businesses with lawsuits and give them 2 options settle the dispute between them or go to court. Obviously if you pay directly the law firm that file the lawsuit against you, you pay less than going to court.
And that’s all they do, they jump from one eCommerce to another. It has nothing to do with disabled people, that’s just an excuse to make easy money.
It’s all legalized and possible because of US equality laws bs.
Thx for video
Kyle, has anyone ever told you that you look quite a bit like a young Fabian Forte?
upload.wikimedia.org/wikipedia/commons/thumb/3/38/1959_Fabian_Forte.jpg/220px-1959_Fabian_Forte.jpg
While I do all my best to provide accessibility-safe solutions, noone will ever sue a small developer for not doing it, be real.
easy tool behind really first template
Lawsuits? I just thought less people can use and enjoy my website if its not accessibility friendly.
Americans with disabilities act. If you are not American you have probably never encountered this. In the EU you will have accessibility requirements for either EU funded or government projects. However since there is no objective way to check for accessibility, you just might need to pass HTML 5 and WCAG validations. You can do that while making your site very inaccessible to users of screen readers.
That's a new Jackson! is it 7 or is it 8 ?
Great Contents by the way
7 string. It is tons of fun to play and sounds great
@@WebDevSimplified awaiting GuitarPlaySimplified :)
What!!!! I appreciate this video!
spcy bool syntax entity lock for app
While I appreciate the actual content, I question the use of a thumbnail image with only the words: “Accessibility Sucks!”
Cheap clickbait, but it works :D
Why would you say something so controversial yet so brave?
seems like such a pain in the neck
no in the ass
The payoff, besides avoiding lawsuits, is that accessible websites tend to have better design for everybody. When untrained people use an inaccessible site, they don’t think “ugh this isn’t accessible,” but the user experience tends to be vaguely crappy.
That’s not true. Accessibility optimized websites look like ish 100% of the time.
Please answer this :
Is DSA (recursion, different sortings , graphs , trees ) needed for improving logic building in Web Development.
Keep doing web dev until u need it. Knowing the algorithms will always give u an advantage regardless
accessibility is really hard
Can we sue blind people for not having proper eyes.. Just a bad joke.. Websites need to be optimised for everyone..
Am I the only one getting the cringe over those wrapping the not to be 😰🤦🏽♂️
Great video either way!
One H1 per page is a myth
Why should I invest money in making my website and SaaS software accessible? It's only for a small minority so the ROI isn't there. The fact the ADA makes it legally mandated to do so is an aberration.
Sue thé maker of the tools in return
One of the problem new web dev always ignore. They deliver visually good website but completely ruined by massive accessibility issues...
No matter how good your website looks, if it's not accessible, it's useless.
its not useless if you lose 2% of your users. Who cares
@@stefangarofalo3131 That's exactly the mentality to avoid. Beside, 15% of the world’s population has some sort of disability, we are far from your random number.
You should consider looking in the website monsido who talk about accessibility statistics as this topic is growing bigger each year and becomes necessary to understand.
An unnecessarily arrogant or presumptive title imo.
You talk about accessibility, but you use ableist language? Please consider not doing that. Thank you!
Nice tips channel but you should stop using all this misleading video covers
Accessible color schemes are so damn ugly tho (except for b/w). Like damn, the entire world has to suffer these horrendous color schemes just because of a meager 1 percent. Accessibility and design don't go very well together
making the colors accessible are just PAIN
@@luke5100 i do understand, i myself suffer from RP but the tools are that will help to make things easiear are just crap
Unfortunately Accessibility is not something that a single dev can do on their own.
It requires a lot of work and specialized people, that have deep understanding and that’s their main job. Yes, you can try to have everything in place.. but you’ll never be 100% complaint.
It’s impossible to reach AAA even on a default blank html page with no styles.
A site that partially implements accessibility is way better than one that doesn't even try. I agree with you that no single developer can master all of web accessibility. It requires a community of accessibility experts with a culture of peer-review.
AAA is not intended for most websites. AAA is intended for specialist applications that cater specifically to people with disabilities. A is the bare minimum, AA is the ideal level to implement. In Europe websites are required by law to be WCAG 2.1 AA compliant
i am from INDIA unfortunately. i can't afford the amount of this like doller to inr it is way more high for me!!!
How dafuq somebody can be sued for not making accessibility for blind person etc. Let me guess, America?
I mean... I work my ass off to create a beautiful UI
if you cant see my work then I ask you to not visit my site, by all the respects!
(I hope those who have said this havent lost their eyes... 😑)
I know that the topic has nothing to do with the video, but for humanity. Recently, Israel bombed a house in southern Gaza, killing at least 10 people - 7 of them children. So far, the number of killers in Gaza has exceeded 3,500 dead, most of whom are children and women. I hope that To have a voice in this for humanity
why do you shake your head all the time? it is so disturbing