Getting started with web accessibility with Ashlee Boyer

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

Күн бұрын

Accessibility is a big topic that can seem hard to get into because there is so much to learn! Being far from an accessibility expert myself, but doing my best to learn more about it, I interviewed Ashlee Boyer to talk about what accessibility is, why it matters, and how we can get started with it without feeling overwhelmed.
🔗 Links
✅ Follow Ashlee on Twitter: / ashleemboyer
✅ The a11y Project: www.a11yproject.com
✅ Tatiana Mac's article on prefers-reduced-motion: tatianamac.com/posts/prefers-...
✅ WAI-ARIA authoring practices: www.w3.org/TR/wai-aria-practi...
Spoon theory - happiful.com/what-is-the-spoo...
⌚ Timestamps
00:00 - Introduction
01:10 - Introduction to Ashlee
03:52 - What does "improve accessibility" mean?
05:32 - The four categories of disabilities
07:18 - Visual disabilities
09:14 - The importance of semantic HTML
10:49 - Auditory disabilities
13:35 - Motor disabilities
16:08 - Cognitive disabilities
20:37 - ARIA roles
24:17 - You don't have to learn it all at once
28:30 - Dark mode
#a11y
--
Come hang out with other dev's in my Discord Community
💬 / discord
Keep up to date with everything I'm up to
✉ www.kevinpowell.co/newsletter
Come hang out with me live every Monday on Twitch!
📺 / kevinpowellcss
---
Help support my channel
👨‍🎓 Get a course: www.kevinpowell.co/courses
👕 Buy a shirt: teespring.com/stores/making-t...
💖 Support me on Patreon: / kevinpowell
---
My editor: VS Code - code.visualstudio.com/
---
I'm on some other places on the internet too!
If you'd like a behind the scenes and previews of what's coming up on my KZfaq channel, make sure to follow me on Instagram and Twitter.
Twitter: / kevinjpowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell
---
And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

Пікірлер: 131

@zackaryhall8593 3 жыл бұрын

As a legally blind web developer I thank you for this video and would love to see more content on web accessibility. Thank you.

@flowerofash4439 2 жыл бұрын

wow would love to see your products

@clevermissfox 8 ай бұрын

I’m very curious about learning proper accessibility practices too and KZfaq is sorely lacking in content about accessibility

@dave6012 3 жыл бұрын

I love when experts like this are down to earth and chill. Nice gem of an interview here. Thanks for sharing with us non-twitch casuals!

@Martin-4D 3 жыл бұрын

Maybe a series of component specific ARIA stuff? Like What ARIA you need for an accordion?

@JeremyWhiteford1 3 жыл бұрын

@Martin. If you can use predefined components from the browser that's always the best route. For example if you can use for your accordions, the browsers have built in accessibility already. That particular element won't work on IE 11 but is great if you're not supporting that far back.

@bekjohansson3016 3 жыл бұрын

Yes! Please espeically about the HTML Semantics and how to use them correctly! I love your channel and courses and have learned so much thank you!!

@nitram_nosnibor 3 жыл бұрын

Kevin you are a very good interviewer, you know when to speak and when to listen, thank you for this I really enjoyed it and it will be my "go to" video when I get to my accessibility phase.

@ClaudiaSCabrera 2 жыл бұрын

Thank you so much for this interview! I'm currently studying about web accessibility and is encouraging to listen to people who actually working on it

@Stoney_Eagle 3 жыл бұрын

Great talk, I learned a lot. I definitely want to see more on this, specially the traps and the absolute don'ts

@jacedddd 3 жыл бұрын

Hey Kevin, I'd just like to say thankyou for your content. I'm a backend/PHP dev, and your vids have helped me understand the modern front end much better. HTML and CSS have changed a lot since I learned them originally.

@nomadshiba 2 жыл бұрын

wish there was a longer video, talking about all aria attributes , going over them one by one and tricks you can do with them

@connorallen162 3 жыл бұрын

Thanks for putting this out! I had been vaguely intimidated by the idea of accessibility and this made me feel a lot more empowered to build for accessibly!

@jennifermagpantay7933 3 жыл бұрын

That was brilliant! I m glad you have brought this subject to your channel, Kevin! And yes, please, bring more content like that and mainly practical stuff!!

@user-vm8gm8tg3u Жыл бұрын

I really learnt many things here. Thankyou so much Kevin for arranging call with Ashlee. So thankful to Ashlee for explaining each part of view in accessibility. I am working on this role to support Blind peoples. I found this content is worth for my knowledge in order to understand the blind peoples need.

@MarkusEicher70 2 жыл бұрын

Hi Kevin. Thank you for sharing this interview with us. I'm new at web design and I want to do it right from the start. Having my pages as accessible as possible is one of my goals. Just started experimenting with ARIA. I try to keep in mind that no ARIA is better than bad ARIA. 😎

@mariofigueiredo2245 3 жыл бұрын

Haven't seen the video yet, but the quality is always top notch ! Learned a lot from you, thanks for everything, keep it up !

@damo190 3 жыл бұрын

Thank you so much. That's what I was expecting in this channel.

@Meko_J 3 жыл бұрын

I’m subscribing, and I really hope you will make more content about accessibility. This is part of web dev I want to get better at. Thanks!

@PritamTirpude23 3 жыл бұрын

Awesome session Kevin... Accessibility is an important part of the web development. We have to take care of all our users while building a website or a web app. Ashlee elucidated very nicely and easy, hope we can see more sessions on web accessibility. 👍🏾

@clevermissfox 8 ай бұрын

Learned a new word today! Elucidated!! Synonyms are clarify, explain, illuminate.

@mohnishsatidasani7552 2 жыл бұрын

Great video. Would love to have a whole series on accessibility

@sebiporini 3 жыл бұрын

Ouuuuuuuu. I was seriously waiting for this. I cant watch the video now, but i am saving it right now and i will check it tonight :) (Great friday plan). Thanks Kevin! I'm slowly assigning you the place of "best CSS youtuber". Your videos help me a lot. (And you also speak very clear, this is really helpful for non-english native speakers).

@CesarWilliamBR 3 жыл бұрын

Great video! Thanks for sharing it! It would be great to have a video showing code samples of the best practices for accessibility.

@TheZamirOrion Жыл бұрын

How come this video doesn't have more views? Share this as much as you can. It is gold for all level developers. Thanks for the great content.

@YorkshireLen Жыл бұрын

Clear, concise, informative. Thank you.

@watchandlol 2 жыл бұрын

Yes, would like to see more on accessibility. There are a lot of accessibility considerations that I hadn't thought of prior to watching this. Most interesting

@MikeGoodwin773 3 жыл бұрын

Great video. Really liked the breakdown of the different categories.

@claralopez-uribe Жыл бұрын

Thank you for this video! I will have to look through your list of videos to see what content you’ve already covered…I would love to see a video on a strategy for selecting and testing a color palette for a website design

@jilherme 3 жыл бұрын

this topic needs more attention. Great content!

@metanoia6033 Жыл бұрын

I learned a lot in this short video! Thank you

@peenoise363 3 жыл бұрын

Thanks KP for sharing this, more power to your channel.

@ronnelrodriguez8312 Жыл бұрын

Thanks for this very informative content. I'm just about to start learning web accessibility and I'm pretty sure that this will be a good guide while going through.

@Lioness99a 2 жыл бұрын

In the section about aria labels, Ashlee said that you should be testing them to make sure you're not making life more confusing for people. I'd love a video on how to do that testing - I'm fascinated by the accessiblity capabilities of the web, but I'm very much in that initial, rather overwhelmed, phase of learning! Looking forwards to more accessibility content on this channel though, I'm learning so much from your videos

@seraphinduvolzairo5938 Жыл бұрын

Get the NVDA screen reader and try to navigate your website with it

@Lioness99a Жыл бұрын

@@seraphinduvolzairo5938 I have and it confused me no end! As a team, we have been trying our best to be as accessible as possible but you never truly know how good what you've done is until you talk with a screen reader user who has used your website (which we don't have)

@seraphinduvolzairo5938 Жыл бұрын

@@Lioness99a Yes, it is a struggle. And there's confusion sometimes with which aria attribute to use. My best bet is that AI (chatGPT) might be able to help more extensively with that in the future.

@Lioness99a Жыл бұрын

@@seraphinduvolzairo5938 That's actually a really great suggestion! I might give it a try

@bharathirajaT 3 жыл бұрын

Expected accessibility related contents for very long time from you. Need more content on this like handling dark, white modes(only on win 10) and high contrast modes. Handling narrator, standard scrren readers. A perfect standard borders while hovering/clicking. A simple landing page which covers screen readers, high contrast, dark/ white modes, Navigations, hovering effects , ideal font sizes, maximum size of screen that we should consider for responsiveness would be great.

@chlouis-girardot Ай бұрын

Thank you so much Ashlee & Kevin ! I learned a lot 🙏

@danisob3633 2 жыл бұрын

very intereseting. i had never thought about that, and im glad ive heard about it before i start working

@michaelbeckett7656 3 жыл бұрын

i am a big fan of yours! i'd love to see you cover the basics of aria so us wannabe Kevins can get started ;)

@albertclemente8739 3 жыл бұрын

Loved. Thanks!!

@mrgreyknight0001 3 жыл бұрын

Great video, would love to see more videos like this

@archiem6323 3 жыл бұрын

Great video. 👍 Accessibility matters, of course.🙂

@PrinjuVaidyan 3 жыл бұрын

Loved this episode Every frontend developer needs to know these

@afzalmahmudd8365 3 жыл бұрын

I found clear path. Thank you sir all time😍.

@daniellelindblom7753 25 күн бұрын

This is a fantastic video!

@AmandaLucaseu 2 жыл бұрын

Great video would love to see more on accessibility

@kuntaldas2843 3 жыл бұрын

thanks for making extra effort of editing and uploading it to youtube.

@RickBeacham 2 жыл бұрын

Alot of great knowledge here and something I have been meaning to comeback to for awhile.... Accessibility is now a must for most websites served through out the US, depending upon the state. I was notified recently we could be sued if your website accessibility is not in compliance with local laws. It would also be nice to see laws for accessibility in different regions of the world. For instance, what are the laws for accessibility compliance in Canada compared to the USA, MEX, JP, and UK?

@AmitKumar-cp6mx 6 ай бұрын

She gives me postive energy ❤

@dougc84 3 жыл бұрын

I'm sure this will be lost, but I have a cool idea for you (and one that I've struggled with a bit as well): You know how iOS started the whole on/off switch kind of thing? There's a million different ways of approaching that, from React stuff, to pure CSS, but I'd love to see your take on how to build an on/off toggle, for the web, using only CSS, and, most importantly, with it being accessible! For that matter, I'd love to see some of your approaches to designing forms - you do a lot of layout and design stuff, but forms are an essential part of web dev. Combine that with some accessibility stuff too!

@nhuphan7112 2 жыл бұрын

Great talk and love more video on web accessibility especially for junior devs 😊

@gelbehexe2010 3 жыл бұрын

Thanks, wanna learn more! 👍

@JuanCastro-C 3 жыл бұрын

Thank you Kevin, as always, great content. By the way, nice shirt!

@KevinPowell 3 жыл бұрын

Thanks!

@jacobsiegel9144 2 жыл бұрын

Question-- can dropdown menus be accessible? Should they be avoided due to animation requirements?

@smatplacid 3 жыл бұрын

Kevin,love your work and that you bring such topics over the table like ppl me doing this job long term is amazing. No comma,sry

@jfiosi Жыл бұрын

Around 22:40, Ashlee said "bad ARIA" but the CC in Safari put up on my screen: "no ARIA is better than better ARIA". Lol, watching in Dec 2022.

@DarrenbyDesign 7 ай бұрын

Love this more content like this please

@leepaulison4928 3 жыл бұрын

As you get into Accessibility, please consider a video on 508 Compliance as it relates to webpages and IoT.

@mekesiabrown625 2 жыл бұрын

GTK!

@totalolage 3 жыл бұрын

What percentiles are targeted in terms of accessibility? Should it be the same as spec compatibility (so 95% is the norm I think), or less? More?

@stbrown2744 3 жыл бұрын

😎 awesome keep it up . Waiting for awesome videos like this ..

@irisamirza9132 3 жыл бұрын

Wow, I've learnt a lot of things from this vid! Btw Kevin, I was wondering if you can consider in doing a dark mode tutorial? Because all the tutorials that I follow doesn't stay (ie: if I set it to dark mode, and refresh it, it turns back to light mode). Thanks!

@KevinPowell 3 жыл бұрын

I already have one! kzfaq.info/get/bejne/rdWUiqd6ybydco0.html

@irisamirza9132 3 жыл бұрын

@@KevinPowell thanks! God bless ya Kevin 🎉

@kdfksfkldsklfkldsff 3 жыл бұрын

Nice video! Maybe you can start by covering stuff like color contrast, text size, videos or animations all in one video. (since they are more basic) sort of like a introduction to accessibility.

@lucienchu9649 3 жыл бұрын

Would be great if there is more content about accessibility of web development.

@PrinjuVaidyan 3 жыл бұрын

Please do a video about all aria practices

@sandiladhikari7903 3 жыл бұрын

I actually had a question to ask to you, Kevin. Do you also do back end development or just front end? Is it also your profession or just passion?

@KevinPowell 3 жыл бұрын

Front of the front end :D It was part of my profession, but now content creation is my official job title, with some things on the side to keep me going :)

@ujjawalchatterjee 3 жыл бұрын

An interesting and important talk for budding developers.

@welling1 3 жыл бұрын

I'd love to see a very basic video on how to correctly implement keyboard navigation on a site.

@mordicai4296 11 ай бұрын

Give us a deeper dive into ARIA. Take a premade dynamic component and just focus on writing some ARIA magic for it.

@MegamanXGold 3 жыл бұрын

Maybe find a site that looks really inaccessible, has mountains of nested divs, and you try to make a 100% accessible version of it. Starting with making the site use semantic tags in part 1, dealing with exceptions using aria in part 2, fixing the styles to make it look just like the original (but with color/contrast accessibility in mind) in part 3, testing and fixing any keyboard/navigation flow issues in part 4, then actually testing the site with a screen reader and making some final tweaks and discussing the experience in review in part 5. :)

@vinsoncolminas6200 3 жыл бұрын

Love it

@simonmoon6672 3 жыл бұрын

Hi Kevin. Are u from Australia? Just wondering what state?

@confused_horse Жыл бұрын

The device disconnect at @02:19 is really messing with me

@anuragyadav1813 3 жыл бұрын

Please make a video on scroll snap 🖤

@verawat 3 жыл бұрын

Awesome.

@bythealphabet Жыл бұрын

Very interesting

@BrinleyBlogette 10 ай бұрын

I love this! I'm starting a bootcamp through University of New Brunswick, Canada (UNB) and I'm wondering if "specializing in accessability" is a thing in the dev world or if its just a must for all developers? I have MS and never imagined attempting to be a software developer but through blogging and creating numerous landing pages, I've discovered a new interest. Now, I'm trying to think about how I can carve out a tiny area to specialize in. Is a focus in specializing in accessability a worthy thing in 2023-2024?

@KevinPowell 10 ай бұрын

You could 100% specialize in it. It's a topic most people don't have a deep enough understanding of, and can be very nuanced. Only issue is, if that's your role, your often fighting uphill battles. It's a fight worth fighting, but one a lot of people get frustrated with at times

@otachiking 5 ай бұрын

MasyaAllah, thanks Kevin 👍🏻👍🏻

@momakplayz7985 3 жыл бұрын

Ashlee: says a word kevin: *nobs head* Love your videos by the way Kevin 😁

@adamjamiu6764 3 жыл бұрын

Can you play with Page Transition with CSS

@KevinPowell 3 жыл бұрын

I have something in the works, but it might be a little while :)

@adamjamiu6764 3 жыл бұрын

@@KevinPowell ☕🍵

@gavinjones 3 жыл бұрын

Love the triforce shirt

@KevinPowell 3 жыл бұрын

Thanks :D

@eckrin 3 жыл бұрын

Could you do a video on how to handle browser zoom? Would appreciate it 🙂

@leonid20000 11 ай бұрын

Thank you for your video Kevin. I developed an opensource browser extension that enables tab navigation using speech recognition and Large Language Models. I hope it enhances the browsing experience for everyone. Full demo in my videos (Odin Tabs)

@mattjmcguire00 3 жыл бұрын

good stuff

@franciscobarria3647 Жыл бұрын

Please a big video about ARIA

@alex-suciu 3 жыл бұрын

not much content on this area so would be really nice if u cover more in depth videos on this topic.

@boris_js 3 жыл бұрын

Topic on Web accessibility and no discussion on ADA compliance or other similar guidelines?

@aprilmcelia1969 2 жыл бұрын

I really enjoyed the interview but have a criticism. It isn't just about disability. Access considerations can also be like how much bandwidth the site or program uses for people in less connected countries if that is an audience consideration. Like that is one of the big power moves of Messenger and Whatsapp is that it doesn't consume phone data, so someone in a country without much wifi, but mobile data can be on those apps all day long.

@GauravKumar-ue7nz 3 жыл бұрын

We need more such videos like Twitch content on KZfaq

@mascatrails661 2 жыл бұрын

Do you already have a video on using semantic HTML? That could be a good video topic

@KevinPowell 2 жыл бұрын

Already in the queue, is coming out this upcoming Thursday!

@mascatrails661 2 жыл бұрын

@@KevinPowell awesome! looking forward to it! one question I have is in regards to nesting semantic components. ie: the header and nav: Is it ok/correct/best practice to put the nav inside the header as a child? Or should it go on the same level as a sibling?

@mascatrails661 2 жыл бұрын

@@KevinPowell Another good topic for accessibility could be how to remove hidden elements from the tab order

@jfiosi Жыл бұрын

Unless I missed it, how about listing some websites that are good examples of accessibility in practice and action. (Not including sites that talk about accessibility.)

@uplink-on-yt Жыл бұрын

HTML popups. Those things that want you to enter your email to sign-up to their newsletter. These are annoying even for those of us without disabilities. There you are, reading, when bam, this thing jumpscares you. I guess login popups are easier to handle, as hey are user-activated (something goes into an "expanded" state, and you don't care it's a popup)

@alexander-van-aken Жыл бұрын

For all windows users, it's not your computer that has a USB device get disconnected at 2:20

@jameslesperance1 3 жыл бұрын

Have you dealt with repetitive strain injury?

@Ostap1974 3 жыл бұрын

I think accessibility is bit like source code quality. Typically there is not too much incentive from customers for it, but I find it as a professional curtesy not to implement a solution that does not take it into account.

@chiragagrawal3501 3 жыл бұрын

Can you do a CSS challenge with Clement Mihailescu.

@ruinfirefly2088 3 жыл бұрын

2:19 I got scared, I thought something disconnected on my pc

@shamimbinzahid 3 жыл бұрын

2:19 jumped to my discord tab xD

@27sosite73 7 ай бұрын

THANK YOU mr. Kevin Powell THANK YOU mr. Kevin Powell THANK YOU mr. Kevin Powell THANK YOU mr. Kevin Powell THANK YOU mr. Kevin Powell

@banupopulusu2365 4 ай бұрын

Hey kevin you understand ppl comments ? I am sure majority of them icluding me want aria detailed video Is that i need to shout multiple times to you please can u do it