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

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

[@ashkanahmadi]

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

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

[@maxpfister5105]

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

[@espendennis]

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]

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

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]

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]

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

[@luke5100]

Same here. I have very little vision so I am fully screen reader dependent for using computers/phones/etc. How about you?

[@DmitryShpika]

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]

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]

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

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

[@RealZero]

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

[@ArielFerro]

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!

[@luke5100]

As a fellow Blind dev I agree, though I’m disappointed he comes right out of the gate focusing on lawsuits, not doing it because it’s the right thing to do

[@theisoj]

Great video! Thanks Kyle as always! 👍👍

[@saadarman4718]

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

[@SusanneMistric]

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.

[@luke5100]

Wow. You really get it! As a blind developer myself, I don’t think I could have even explained it that perfectly and succinctly. Thank you thank you thank you! It drives me nuts when devs get lazy and just use divs for everything, relying on styling to make them behave in the desired manner. It’s like, People - HTML 5 has a whole bunch of great semantic elements - use them! Lol

[@user-ik7rp8qz5g]

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"

[@maxwebstudio]

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

[@Shulkerkiste]

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

[@luke5100]

As a developer who is also blind, I will tell you, try to use semantic HTML 5 elements whenever possible instead of using divs and styling them to behave like other elements. For example, if you are creating a nav bar, use instead of . Screen readers are designed to recognize and interact with HTML elements. If you can’t do that for whatever reason, learn how to use role and aria attributes appropriately. These are basically metadata that communicate to screen readers how to interact with/announce the element. I can’t tell you how much it annoys me how many devs get lazy and just use divs for everything, relying on the CSS framework as a crutch instead of actually using what HTML 5 provides for us. By even asking, you are light years ahead of most lol. Good luck!

[@offroaders123]

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]

Thanks for the great video

[@gordash_tech]

Amazing!

[@luke5100]

As a technology user and software developer who is also blind, I really appreciate that you made this video. It’s kind of a bummer you have to convince people to care about accessibility with reasons like avoiding lawsuits or getting better Google hits, but whatever it takes, I’m all for it. At the same time, reading through these comments, it’s disappointing that so many people are not only unaware of the importance of accessibility but actively hostile toward it. I’ve literally come across people saying, “why should I have to make my website accessible to people with disabilities?” Or people accusing people with disabilities of being “entitled” for simply wanting to be able to use a website like anyone else. Expecting to be able to just use something at its most basic level is not entitlement. I would say to all of these so-called developers, please just step aside. We don’t need you in the industry. To those of you showing genuine curiosity about how to get better at accessibility, thank you! Keep it up and spread the word. Share what you’ve learned in a blog post so others can benefit

[@sanecatlady]

I noticed the hostility, too. It's very shameful and sad :/

[@gingerkiwidev]

Also, accessible apps make code easier to read and maintain. Who wants to get lost in an endless sea of divs? Basic accessibility isn’t hard. It just requires some thought, planning, and consistency. Yes, there’s nuances once you get into specifics like knowing how to use ARIA, but just code semantically and most use cases for ARIA are avoided. The dev community is awesome. Just ask someone!

[@narekgalstyan6550]

Thx for video

[@sunilbehera7380]

Thank you so much

[@hollow_ego]

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

[@screamtwice]

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

[@luke5100]

Blind person here and NVDA is by far my favorite screen reader. Windows also comes with narrator and Mac/iOS comes with voiceover, so even if you don’t download any third-party screen readers there’s always something available to test your work with

[@joosia7452]

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.

[@rana_ny]

superb .. thanks

[@dave6012]

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

[@kuttarn]

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

[@codedusting]

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

[@blackpurple9163]

How do I do all this in Firefox instead of chrome

[@weshuiz1325]

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

[@umiterdemyigitoglu4074]

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.

[@elizabeth00653]

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

[@gingerkiwidev]

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

[@arfanchowdhury6329]

can you explain your pc configuration ?

[@tmbarral664]

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]

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)

[@MeisterOghrin]

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

[@jacobphillips9235]

Thanks!

[@WebDevSimplified]

Welcome!

[@augustuscaeser8939]

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

[@skzahirulislam2820]

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

[@justinezema5318]

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

[@luke5100]

What makes you say that?

[@mikerussell9349]

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.

[@dragx26]

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

[@mecozir]

easy tool behind really first template

[@codernerd7076]

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

[@grenadier4702]

You forgot to meantion WAI-ARIA which is very important

[@spreadItWide]

What!!!! I appreciate this video!

[@stormybear4986]

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

[@stormybear4986]

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

[@neodevils]

So jumping from h1 to h3 is bad 😔

[@JasonLatouche]

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]

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.

[@luke5100]

Take off your programmer hat for a moment and just think like a normal person reading a document. The top level heading is going to be your title. Anything beyond that should be a lower level heading. It just makes sense. It’s what readers expect

[@gingerkiwidev]

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.

[@mecozir]

spcy bool syntax entity lock for app

[@jovan4614]

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

[@caseyvandyke7051]

Exactly this doesn’t even scratch the surface.

[@Ostap1974]

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

[@ziadxcode]

accessibility is really hard

[@luke5100]

So is using a website that isn’t accessible when you are blind, like me. Maybe try to think of it from the users standpoint

[@zunnoorainrafi5985]

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

[@newuser689]

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

[@z3rocodes]

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]

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

[@albinmiftari1832]

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

[@CFalcon030]

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.

[@BradenJohnYoung]

Why would you say something so controversial yet so brave?

[@howuseehim]

Sue thé maker of the tools in return

[@epotnwarlock]

seems like such a pain in the neck

[@harmez7]

no in the ass

[@stevezelaznik5872]

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]

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

[@Michael-hs5vg]

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

[@Kali187]

Cheap clickbait, but it works :D

[@niravparmar7856]

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]

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]

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]

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.

[@luke5100]

Sounds like a bunch of excuses from a subpar developer if you ask me. As a blind person who is also a professional developer, your attitude is poisonous to our industry. If you aren’t interested in making your sites inclusive to as broad a range of users as you can, please step aside. For starters, you’re probably missing out on business. Secondly, you’re probably missing out on Google search prioritization. Finally, and most importantly, You’re making it needlessly hard or impossible for a percentage of the population to access your applications and websites. If you were an architect and you designed commercial properties like grocery stores and shopping centers for the general public, how do you think it would be received if you said, “making my designs wheelchair accessible is just too hard, so I wish I didn’t have to do it.”

[@luke5100]

@@cherubin7th no. You know what sucks? Being a blind person, visiting a website or downloading an app for something I want to or need to accomplish and not being able to do that because the damn thing isn’t accessible. In this day and age, there is no excuse for that. There are all kinds of tools, including nifty AI tools these days, that take almost all the brain work and effort out of it. Anyone who is still griping about having to make their website usable to the general public is a crappy developer who needs to just get out of the game

[@Raphael-jo1rp]

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]

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

[@Raphael-jo1rp]

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

[@AlexandreMoreauLemay]

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.

[@djordje1999]

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

[@suhailgaming1267]

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

[@Its_me_CineQ]

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

[@luke5100]

If you’re a business with a public facing website, it should absolutely need to be accessible. Anyone who doesn’t think so is an idiot. That would be like saying Dominos Pizza shouldn’t have to make their physical stores accessible to people in wheelchairs. Give me a break

[@talkdatrue]

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]

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.

[@Argylleagen]

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

[@webixr]

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

[@venkatesheraser]

making the colors accessible are just PAIN

[@luke5100]

Well, just imagine how difficult it is for a person with color blindness trying to use a website or application where somebody didn’t take the time to do that. If you aren’t willing to put in the work to make your apps inclusive, this is probably the wrong business for you

[@venkatesheraser]

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

[@oleggranevskij6872]

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

[@harmez7]

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

[@richochet]

An unnecessarily arrogant or presumptive title imo.

[@alsorew]

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

[@mister.kosmos]

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

[@rowheadrex]

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

[@WebDevSimplified]

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

[@rowheadrex]

@@WebDevSimplified awaiting GuitarPlaySimplified :)