You Suck At Accessibility (But You Don't Have To)
HTML-код
- Опубликовано: 14 май 2024
- 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
Excellent video. Just a reminder that accessibility is NOT for the disabled people only. For instance, imagine you are watching a recipe on RUclips 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 👀
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 RUclips 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, ...
Great video! Thanks Kyle as always! 👍👍
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.
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.
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
Thanks for the great video
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.
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!
Thank you so much
Amazing!
Thx for video
superb .. thanks
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.).
Now everybody and their dog will be able to view the site
How do you enable the Contrast ratio information in dev tools? That do not show at all in my dev tools (chrome)
How do I do all this in Firefox instead of chrome
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.
Need a partytown working with NextJS pages router and GTM preview mode. Please 🙏
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.
can you explain your pc configuration ?
Hey bro I want to what is the difference between only react + vite vs react javascript swc?
I'm curious: Is there a reason, you use a header element inside your article but not a footer?
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. 😊
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
Thanks!
Welcome!
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
What!!!! I appreciate this video!
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)
Can I have code of this blog 👈😐?
I just love 💕 how it looks 🤩
You forgot to meantion WAI-ARIA which is very important
spcy bool syntax entity lock for app
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 😔
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.
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.
accessibility is really hard
This is just intro to accessibility, so title is little bit odd.
Exactly this doesn’t even scratch the surface.
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
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.
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
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.
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!”
Cheap clickbait, but it works :D
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.
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.
i am from INDIA unfortunately. i can't afford the amount of this like doller to inr it is way more high for me!!!
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.
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.
Can we sue blind people for not having proper eyes.. Just a bad joke.. Websites need to be optimised for everyone..
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.
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
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
Nice tips channel but you should stop using all this misleading video covers
An unnecessarily arrogant or presumptive title imo.
why do you shake your head all the time? it is so disturbing
You talk about accessibility, but you use ableist language? Please consider not doing that. Thank you!
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 :)