Getting started with web accessibility with Ashlee Boyer
HTML-код
- Опубликовано: 28 май 2024
- 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 RUclips 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!
As a legally blind web developer I thank you for this video and would love to see more content on web accessibility. Thank you.
wow would love to see your products
I’m very curious about learning proper accessibility practices too and RUclips is sorely lacking in content about accessibility
Maybe a series of component specific ARIA stuff? Like What ARIA you need for an accordion?
@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.
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!
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!!
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.
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
Great talk, I learned a lot.
I definitely want to see more on this, specially the traps and the absolute don'ts
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.
wish there was a longer video, talking about all aria attributes , going over them one by one
and tricks you can do with them
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!
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!!
Haven't seen the video yet, but the quality is always top notch ! Learned a lot from you, thanks for everything, keep it up !
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.
Thank you so much. That's what I was expecting in this channel.
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. 😎
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.
Clear, concise, informative. Thank you.
Great video.
Would love to have a whole series on accessibility
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. 👍🏾
Learned a new word today! Elucidated!! Synonyms are clarify, explain, illuminate.
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!
Great video. Really liked the breakdown of the different categories.
Great video! Thanks for sharing it! It would be great to have a video showing code samples of the best practices for accessibility.
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).
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
I learned a lot in this short video! Thank you
Great video. 👍 Accessibility matters, of course.🙂
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
this topic needs more attention. Great content!
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
Get the NVDA screen reader and try to navigate your website with it
@@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)
@@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.
@@seraphinduvolzairo5938 That's actually a really great suggestion! I might give it a try
Thanks KP for sharing this, more power to your channel.
She gives me postive energy ❤
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.
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.
very intereseting. i had never thought about that, and im glad ive heard about it before i start working
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 ;)
I found clear path. Thank you sir all time😍.
Great video, would love to see more videos like this
thanks for making extra effort of editing and uploading it to youtube.
Give us a deeper dive into ARIA. Take a premade dynamic component and just focus on writing some ARIA magic for it.
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?
Great video would love to see more on accessibility
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!
Loved. Thanks!!
Great talk and love more video on web accessibility especially for junior devs 😊
Loved this episode
Every frontend developer needs to know these
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.
As you get into Accessibility, please consider a video on 508 Compliance as it relates to webpages and IoT.
GTK!
Thank you Kevin, as always, great content. By the way, nice shirt!
Thanks!
Thanks, wanna learn more! 👍
Love this more content like this please
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
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!
I already have one! ruclips.net/video/wodWDIdV9BY/видео.html
@@KevinPowell thanks! God bless ya Kevin 🎉
Would be great if there is more content about accessibility of web development.
😎 awesome keep it up . Waiting for awesome videos like this ..
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.
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. :)
An interesting and important talk for budding developers.
Question-- can dropdown menus be accessible? Should they be avoided due to animation requirements?
Please do a video about all aria practices
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?
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
I'd love to see a very basic video on how to correctly implement keyboard navigation on a site.
Love it
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.
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?
Please make a video on scroll snap 🖤
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?
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 :)
Awesome.
Hi Kevin. Are u from Australia? Just wondering what state?
Very interesting
Could you do a video on how to handle browser zoom? Would appreciate it 🙂
Ashlee: says a word
kevin: *nobs head*
Love your videos by the way Kevin 😁
The device disconnect at @02:19 is really messing with me
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)
Please a big video about ARIA
good stuff
For all windows users, it's not your computer that has a USB device get disconnected at 2:20
MasyaAllah, thanks Kevin 👍🏻👍🏻
Love the triforce shirt
Thanks :D
Can you play with Page Transition with CSS
I have something in the works, but it might be a little while :)
@@KevinPowell ☕🍵
not much content on this area so would be really nice if u cover more in depth videos on this topic.
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)
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.)
Do you already have a video on using semantic HTML? That could be a good video topic
Already in the queue, is coming out this upcoming Thursday!
@@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?
@@KevinPowell Another good topic for accessibility could be how to remove hidden elements from the tab order
We need more such videos like Twitch content on RUclips
Topic on Web accessibility and no discussion on ADA compliance or other similar guidelines?
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
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.
2:19 jumped to my discord tab xD
Have you dealt with repetitive strain injury?
Can you do a CSS challenge with Clement Mihailescu.
2:19 I got scared, I thought something disconnected on my pc
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
2 comment :)
4th comment today😅
As EU has enforced the a11y law starting June 2024, a11y will no more be an option or a
nice-to-have to an even larger number of projects.
Animations should be off by default? 😦
The five (ATM) false have being....false.
Examples, man. Could have been much more useful. You took all the spoons of energy and just recommended documentation...