You Suck At Accessibility (But You Don't Have To)

Рет қаралды 53,496

Күн бұрын

Accessibility is incredibly difficult to get right. There are tons of competing standards, there are not good resources to learn from, and it is incredibly hard to test. All of this combine together to make for a miserable and difficult experience. In this video I will talk about why this is and most importantly give you actionable tips you can follow to easily make your websites more accessible.
📚 Materials/References:
MDN Accessibility Docs: developer.mozilla.org/en-US/d...
W3C Full Accessibility Docs: www.w3.org/WAI/standards-guid...
W3C Beginner Accessibility Docs: www.w3.org/WAI/fundamentals/
🌎 Find Me Here:
My Blog: blog.webdevsimplified.com
My Courses: courses.webdevsimplified.com
Patreon: / webdevsimplified
Twitter: / devsimplified
Discord: / discord
GitHub: github.com/WebDevSimplified
CodePen: codepen.io/WebDevSimplified
⏱️ Timestamps:
00:00 - Introduction
01:19 - Color Accessibility
03:54 - Visual Hierarchy
06:10 - Learning Resources
07:05 - Screen Reader Tips
#Accessibility #WDS #WebDevelopment

Пікірлер: 120

@ashkanahmadi 8 ай бұрын

Excellent video. Just a reminder that accessibility is NOT for the disabled people only. For instance, imagine you are watching a recipe on KZfaq 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 8 ай бұрын

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

@maxpfister5105 8 ай бұрын

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

@espendennis 8 ай бұрын

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 8 ай бұрын

@@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 8 ай бұрын

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.

@DmitryShpika 8 ай бұрын

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 👀

@SethWilson 8 ай бұрын

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

@ArielFerro 8 ай бұрын

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!

@RealZero 8 ай бұрын

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

@DmitryShpika 8 ай бұрын

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 8 ай бұрын

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 8 ай бұрын

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

@joshthayer7642 8 ай бұрын

As a QA I push accessibility a lot. So glad to see this from the dev side. Great video!

@Shulkerkiste 8 ай бұрын

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

@theisoj 8 ай бұрын

Great video! Thanks Kyle as always! 👍👍

@SusanneMistric 8 ай бұрын

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.

@user-ik7rp8qz5g 8 ай бұрын

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"

@saadarman4718 7 ай бұрын

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

@maxwebstudio 8 ай бұрын

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

@weshuiz1325 8 ай бұрын

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

@joosia7452 4 ай бұрын

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.

@offroaders123 8 ай бұрын

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!

@goombagrenade 8 ай бұрын

Thanks for the great video

@screamtwice 8 ай бұрын

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

@hollow_ego 8 ай бұрын

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

@gordash_tech 8 ай бұрын

Amazing!

@sunilbehera7380 8 ай бұрын

Thank you so much

@rana_ny 4 ай бұрын

superb .. thanks

@narekgalstyan6550 8 ай бұрын

Thx for video

@dave6012 8 ай бұрын

The axe devtools chrome extension is free and goes into more depth than lighthouse.

@kuttarn 8 ай бұрын

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

@justinezema5318 8 ай бұрын

At this rate, I think I should from web development to something like python or c++

@umiterdemyigitoglu4074 7 ай бұрын

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.

@jacobphillips9235 8 ай бұрын

Thanks!

@WebDevSimplified 7 ай бұрын

Welcome!

@augustuscaeser8939 6 ай бұрын

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

@elizabeth00653 8 ай бұрын

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

@GingerKiwiDev 7 ай бұрын

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

@tmbarral664 8 ай бұрын

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 8 ай бұрын

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)

@codedusting 8 ай бұрын

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

@MeisterOghrin 8 ай бұрын

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

@arfanchowdhury6329 8 ай бұрын

can you explain your pc configuration ?

@blackpurple9163 8 ай бұрын

How do I do all this in Firefox instead of chrome

@skzahirulislam2820 8 ай бұрын

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

@mikerussell9349 8 ай бұрын

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.

@spreadItWide 8 ай бұрын

What!!!! I appreciate this video!

@dragx26 8 ай бұрын

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

@mecozir 8 ай бұрын

easy tool behind really first template

@grenadier4702 5 ай бұрын

You forgot to meantion WAI-ARIA which is very important

@codernerd7076 8 ай бұрын

Did you forget to link the videos in the end.... or didn't you find any good ones?!

@stormybear4986 8 ай бұрын

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

@stormybear4986 8 ай бұрын

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

@mecozir 8 ай бұрын

spcy bool syntax entity lock for app

@neodevils 8 ай бұрын

So jumping from h1 to h3 is bad 😔

@JasonLatouche 8 ай бұрын

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 8 ай бұрын

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 7 ай бұрын

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.

@jovan4614 8 ай бұрын

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

@caseyvandyke7051 5 ай бұрын

Exactly this doesn’t even scratch the surface.

@ziadx3 8 ай бұрын

accessibility is really hard

@Ostap1974 7 ай бұрын

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

@howuseehim 8 ай бұрын

Sue thé maker of the tools in return

@epotnwarlock 8 ай бұрын

seems like such a pain in the neck

@harmez7 8 ай бұрын

no in the ass

@stevezelaznik5872 8 ай бұрын

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 8 ай бұрын

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

@albinmiftari1832 8 ай бұрын

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

@CFalcon030 8 ай бұрын

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.

@zunnoorainrafi5985 8 ай бұрын

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

@newuser689 8 ай бұрын

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

@z3rocodes 8 ай бұрын

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.

@NCorsoProducciones 7 ай бұрын

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

@niravparmar7856 8 ай бұрын

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 8 ай бұрын

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 8 ай бұрын

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 8 ай бұрын

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.

@BradenJohnYoung 8 ай бұрын

Why would you say something so controversial yet so brave?

@Michael-hs5vg 8 ай бұрын

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

@Kali187 8 ай бұрын

Cheap clickbait, but it works :D

@AlexandreMoreauLemay 8 ай бұрын

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.

@suhailgaming1267 8 ай бұрын

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

@venkatesheraser 8 ай бұрын

making the colors accessible are just PAIN

@venkatesheraser 7 ай бұрын

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

@djordje1999 8 ай бұрын

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

@Raphael-jo1rp 8 ай бұрын

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 8 ай бұрын

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

@Raphael-jo1rp 8 ай бұрын

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

@Argylleagen 8 ай бұрын

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

@talkdatrue 8 ай бұрын

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 8 ай бұрын

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 22 күн бұрын

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

@oleggranevskij6872 8 ай бұрын

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

@mister.kosmos 8 ай бұрын

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

@richochet 8 ай бұрын

An unnecessarily arrogant or presumptive title imo.

@alsorew 5 ай бұрын

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

@webixr 8 ай бұрын

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

@Its_me_CineQ 8 ай бұрын

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

@harmez7 8 ай бұрын

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