Excellent video. Just a reminder that accessibility is NOT for the disabled people only. For instance, imagine you are watching a recipe on KZread 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

@varuncanhandle

10 ай бұрын

But how do I go back? my hands are oily please help me

@maxpfister5105

10 ай бұрын

That’s right because it improves the UX for all!

@dennis_benjamin

10 ай бұрын

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.

@silasobviously

10 ай бұрын

@@varuncanhandle the Crouton app has a feature where you can wink with your left and right eyes to go back and forward

@The-Great-Brindian

10 ай бұрын

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 👀

I’m a legally blind dev, so this is really important to me. Thank you!

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.

@WebDevSimplified

10 ай бұрын

I never knew about this section of the Rendering tab. I have always just used the CSS emulations and had no idea this existed.

@DmitryShpika

10 ай бұрын

​@@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.

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

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, ...

Amazing video! Great information in a short video, straight to the point, thanks!

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.

This is just great, in 13 minutes a lot of stuff is covered. Thanks.

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.

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"

Awesome video. We should talk more about accessibility tools. AI is also a great helper to improve and evaluate the accessibility of a page

Now everybody and their dog will be able to view the site

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.

How do you enable the Contrast ratio information in dev tools? That do not show at all in my dev tools (chrome)

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

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.).

Great video! Thanks Kyle as always! 👍👍

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.

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!

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.

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.

@stevezelaznik5872

9 ай бұрын

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)

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

Would like to see a good accessibility course that includes BOTH WCAG understanding and how to interpret them to make accessible components

@GingerKiwiDev

8 ай бұрын

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. 😊

How do I do all this in Firefox instead of chrome

Amazing!

Can I have code of this blog 👈😐? I just love 💕 how it looks 🤩

Thx for video

Need a partytown working with NextJS pages router and GTM preview mode. Please 🙏

superb .. thanks

Thanks for the great video

You forgot to meantion WAI-ARIA which is very important

Hey bro I want to what is the difference between only react + vite vs react javascript swc?

Thank you so much

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.

easy tool behind really first template

I'm curious: Is there a reason, you use a header element inside your article but not a footer?

Thanks!

@WebDevSimplified

8 ай бұрын

Welcome!

spcy bool syntax entity lock for app

can you explain your pc configuration ?

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.

@groff8657

10 ай бұрын

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.

@cherubin7th

10 ай бұрын

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.

@talkdatrue

9 ай бұрын

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.

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 😔

This is just intro to accessibility, so title is little bit odd.

@caseyvandyke7051

6 ай бұрын

Exactly this doesn’t even scratch the surface.

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...

@stevezelaznik5872

9 ай бұрын

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.

@GingerKiwiDev

8 ай бұрын

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.

Kyle, has anyone ever told you that you look quite a bit like a young Fabian Forte?

@stormybear4986

10 ай бұрын

upload.wikimedia.org/wikipedia/commons/thumb/3/38/1959_Fabian_Forte.jpg/220px-1959_Fabian_Forte.jpg

Lawsuits? I just thought less people can use and enjoy my website if its not accessibility friendly.

@CFalcon030

9 ай бұрын

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.

What!!!! I appreciate this video!

While I do all my best to provide accessibility-safe solutions, noone will ever sue a small developer for not doing it, be real.

seems like such a pain in the neck

@harmez7

10 ай бұрын

no in the ass

@stevezelaznik5872

10 ай бұрын

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.

@talkdatrue

9 ай бұрын

That’s not true. Accessibility optimized websites look like ish 100% of the time.

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.

accessibility is really hard

Am I the only one getting the cringe over those wrapping the not to be 😰🤦🏽‍♂️ Great video either way!

Sue thé maker of the tools in return

Please answer this : Is DSA (recursion, different sortings , graphs , trees ) needed for improving logic building in Web Development.

@newuser689

10 ай бұрын

Keep doing web dev until u need it. Knowing the algorithms will always give u an advantage regardless

@z3rocodes

10 ай бұрын

Depends on what you're building. Landing page? No. A web app that allows editing in a browser (Figma, Photoshop, etc)? Yes. What you're really trying to figure out is if you can skip learning DSA and it all depends on how much excellence at your craft means to you and the type of work you want to do.

Why would you say something so controversial yet so brave?

While I appreciate the actual content, I question the use of a thumbnail image with only the words: “Accessibility Sucks!”

@Kali187

10 ай бұрын

Cheap clickbait, but it works :D

Can we sue blind people for not having proper eyes.. Just a bad joke.. Websites need to be optimised for everyone..

i am from INDIA unfortunately. i can't afford the amount of this like doller to inr it is way more high for me!!!

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

10 ай бұрын

its not useless if you lose 2% of your users. Who cares

@Raphael-jo1rp

10 ай бұрын

@@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.

You talk about accessibility, but you use ableist language? Please consider not doing that. Thank you!

An unnecessarily arrogant or presumptive title imo.

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

Nice tips channel but you should stop using all this misleading video covers

making the colors accessible are just PAIN

@venkatesheraser

9 ай бұрын

@@luke5100 i do understand, i myself suffer from RP but the tools are that will help to make things easiear are just crap

why do you shake your head all the time? it is so disturbing

How dafuq somebody can be sued for not making accessibility for blind person etc. Let me guess, America?

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.

@stevezelaznik5872

9 ай бұрын

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.

@JJ-rv7tt

2 ай бұрын

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... 😑)

That's a new Jackson! is it 7 or is it 8 ? Great Contents by the way

@WebDevSimplified

10 ай бұрын

7 string. It is tons of fun to play and sounds great

@rowheadrex

10 ай бұрын

@@WebDevSimplified awaiting GuitarPlaySimplified :)