Accessible Web Design: What Is It & How To Do It

Read Pablo's post about Accessibility: uxdesign.cc/designing-for-acc...
Mentioned Chrome extention: chrome.google.com/webstore/de...
MDS Contrast tool: usecontrast.com/
Check out Accessibe: accessibe.com
-
Learn how to design high-value websites:
bit.ly/Flux-Learn-Web-Design
-
Learn how to build custom websites in hours using Webflow:
bit.ly/Flux-Learn-Webflow
-
Flux is proudly sponsored by Webflow, start a new account with an awesome discount:
bit.ly/FluxWebflowDiscount
-
Instagram: / ransegall
Twitter: / ransegall
-
Gear & Book Recommendations: bit.ly/2ohFOuj
#webdesign #accessibility #webdevelopment

[@samsara2752]

It would be awesome if you added official captions to this accessibility video since it's about accesibility :)

[@FluxAcademy]

That's a good point! thanks for your suggestion.

[@trendyuxi1]

😁

[@SUVIDHYA1]

​@@trendyuxi1 hhjhlj

[@SUVIDHYA1]

​@@trendyuxi1 8hpojjj😊&₹&₩

[@SUVIDHYA1]

U😊gj

[@keiths314]

This is a growing issue in our industry - thanks for the good tips and suggestions, Ran. Everything you mentioned is just the sort of thing that had management and my developer friends and colleagues in a previous job all running around in circles trying to get the company’s older websites compliant. As you suggest - it’s so much better for us to tackle accessibility as early in the design/development cycle as possible.

[@SweetEvieE4700]

Thank you Flux. I am new to web developing/designing. I am like so new as in I’m taking a class. Your channel was recommend by edX. Thank you for the great education and food for thought I am now a subscriber. I look forward to learning from you!

[@rushirajpara6815]

Very well Ran Segall, The tool sounds really interesting, looking forward to exploring the same.

[@daronsimon4448]

Hey Ran! Thanks for the video-it's super concise and informative! Have you considered making another video on the topic, but going into a bit more detail? As someone early in their accessible design journey, it'd be really helpful to see things like how you add accessibility annotations to your designs, or the processes of how you weave accessibility into a project from start to end. Thanks!

[@chrisnunn5400]

Thanks for this Ran. Accessible design is so important and increasingly so. I'm working in and being trained in accessibility right now. Every designer that works on electronic media needs to watch this video ASAP.

[@user-st5gy7ep7o]

Chris Nunn where are you getting your training?

[@chrisnunn5400]

​@@user-st5gy7ep7o I'm getting my training from Colleen Gratzer of Gratzer Graphics (gratzergraphics.com). Her agency specializes in accessibility and she herself has spoken at the U.S. Department of the Interior on accessibility. While I actually work with her directly on projects, her web accessibility course is coming out soon. You can get on the notification list by visiting creative-boost.com/website-accessibility-course/. Check her out too, Ran. She really knows her stuff on WCAG compliance. You guys would have an awesome convo.

[@craigthomas4565]

Hey Ran this is an amazing informated video. Learnt a lot from it. Hope you carry on with this series like this.

[@FluxAcademy]

Thanks Craig!

[@chaoticneutral3487]

Great video. Firefox also has a browser based accessibility extension that annotates errors and it's called WAVE.

[@acertainredpanda1115]

The trend to make websites more accessible is the coolest one since the decline of true flat design. Thank you for your tips, I'll be sure to implement these in my next project!

[@user-vc1zz6ok6h]

These different types of videos are great which I didn't know I had so accessibility here we come thank you😮

[@omeralsoma_]

Very interesting topic Gray Simon from designcours talk about this like 3 week ago something like that but when you talk about it sound very important thank you 🙃

[@valerierogers4960]

Thank you! This is such a helpful video :)

[@eeka3109]

I have been waiting for someone to put out content like this! Accessibility is absolutely fascinating. My company has started to implement this in my UX team. I'm also working on my portfolio and making it fully accessible with webflow. Please let me know if I can share my findings with you. :) I've had to change my way of thinking when choosing elements like divs vs lists. I've also figured out how to use aria labels. That really brings screenreaders to life.

[@geralddomogma1691]

hello Eeka! Can you share your insights about accesibility test? Might used for my present research study. Thank you! :)

[@kindnessorimolade641]

I'd love if you could share your research regarding headings and subtitle (H1 -H6), how they can be used more efficiently to improve accessibility

[@kreativeincagency9126]

Awesome breakdown of the different aspects of web accessibility! 🙌

[@marexibinsa2915]

Thank you so much for this informative video. You explained so well and I am no longer confused.

[@jozsefszabados1183]

Really cool video, this is the first time I heard about these things. Thanks Bro!

[@asananddevsingh]

This was the first time I knew so much about accessibility. Thanks

[@FluxAcademy]

Thanks! More to come! 😊

[@rajatsawarkar]

this guy is in love with tht purple hue light and purple color, just a simple suggestion get a bigger light with a fading screen and point it at an angle on your face from left or right of the camera

[@altyaper43]

I loved your video, very well explained, I've a child with special needs and this topic is very important for me.

[@benstanbury]

Hey Ran. Great video. When you mention 'Developed correctly' at 11:00 and you discuss 'article' 'navigation' 'footer' etc, does Webflow do this correctly when it exports the code?

[@MarkusEicher70]

Hello Flux. Thank you for sharing this with us! 👍

[@zoltanbereczki3850]

I like your Nielsen Norman Group-ish approach videos. You know... the basics. :) Looking forward this new season of longer and more in-depth videos

[@ShahzainAli-tl8sk]

What a brilliant video. Great advice, simple and practical.

[@jserr9682]

I love your videos , but it would be great if you do more tutorials on this

[@honzarotrekl3636]

Thanks a lot, very useful video.

[@SirSajjad]

Keep up producing useful tutorials. All the best.

[@purple88able]

Super helpful thank you!

[@sten360]

Accessibility has always been a bit of a conflicting topic for me. While obviously we can all agree that it's very important, doing it the 100% correct way often introduces a lot of restrictions to the design meaning less creativity/originality, and potentially significantly increases development time, which a lot of clients don't want to pay for (and yet some people expect this stuff by default). A lot of the smaller sites we make in our agency will most likely never have a visitor that actually makes use of the features either, so it's mostly just difficult to justify the sacrifices, especially financially. We try to always cover the basic stuff like alt tags, focus states, sometimes tabindexes and screenreader texts and such, but proper WCAG compliance is only a topic discussed when the clients themselves want it and are willing to pay for the extra work.

[@stoogel]

WCAG AA level compliance should be easy. In a lot of countries, web accessibility is the law (Canada is one example with large fines). In others, companies can at least set themselves up for lawsuits.

[@aimeedanger]

It would be great if you had a transcript for this (since it's about accessibility). I have an invisible disability (ADHD) and LOOOVE transcripts because your video is t-o-o sl-o-o-o-w-w-w...

[@tramarthomas6105]

Use subtitles

[@stoogel]

Speed up the video, also the auto-generated captions are fine.

[@jnerikaat]

Wow, pretty awesome video.

[@user-bo5ew4op8w]

It's a good accessible web design video

[@riadul798]

awesome video!

[@salmantanirverdiyev9110]

Hi thank you for the video, the link for accessibilty extension doesn't work, could you update it please?

[@kamranimtiaz2215]

I just want to say you are doing great work. But you are also working on your videos. I think that magenta light should be outside the view.

[@FluxAcademy]

yeah, I know.. will improve, thanks!

[@momcilom]

Really good video, but what happened to the desciption?

[@FluxAcademy]

fixed. sorry!

[@notifier2Demo]

"Mentioned Chrome extention" - the link is broken

[@thisiskdn]

By the way I think it's "impairment" and not "imparities", as imparity means inequality (e.g., income imparity)

[@webaccessibilitytool]

Good efforts

[@sehrishbalouch7068]

The link to the mentioned chrome extension is not working

[@ravikirangundala4257]

Hi, I have a problem like, after selecting any option from combo box, screen reader announcing as "combo box option collapsed required", but I need a custom message like "option selected combo box collapsed required" how can I achieve this. Please help me out from this problem.

[@altha-rf1et]

Do have a problem with the natural speaking program that I tried to install but when I speak does not come up all misspelled words cannot understand me

[@fannyfranzen7561]

Thanks

[@victormendoza3295]

Maybe just make the label the same color as the background to have both labels.

[@roberto-maddaloni]

Like the new setup, except for the light positioning. It changes a lot and distracts me from what you're saying..

[@MaiiyamR89]

I can't access the chrome extension, can someone tell me what is the name of the extension?

[@FluxAcademy]

Hey! Check out our free resources on our website. Maybe it can help: www.flux-academy.com/

[@DeDaina]

The chrome extension link is not working, gives 404

[@dumitrascuandreim]

I cannot stop looking into the light. I suggest adding a new one to your left to balance and focus on you or put the existing one outside the frame. Sorry for being annoying

[@AbidYoussef]

big up 🙏

[@nuclear5744]

תודה

[@altha-rf1et]

Disable I work part time told my employer several issues that are ADA code violations that are major issues that they could be sued for I will bring up their Web site to make is it is good

[@apricotbranding]

wave.webaim.org is also good for accessibility testing. But consider accessibility testing with real users

[@FluxAcademy]

Thanks for sharing!

[@priscillali-fo-sjoe6591]

I cant find the links in the description 😦

[@FluxAcademy]

sorry, updated!

[@waterelementalgirl3270]

ran: makes a video on web accessibility also ran: doesn't caption the video Great video, though.

[@FluxAcademy]

will you help make captions?

[@waterelementalgirl3270]

@@FluxAcademy I'm really, really, busy right now. I don't think I have the time in my schedule to do something like that. I appreciate the offer, really, but I'm sorry, I can't.

[@Enavian]

@@FluxAcademy Whoa whoa whoa. I'm sure you didn't intend to, but this can come off as really problematic behaviour. It is NOT the responsibility of people who need accessibility accommodations to make your products accessible. It's not OK to make customers build you ramps. It's not OK to make those who need captions to make you captions.

[@ProductJonas]

Looking at the accessibe.com website makes me doubt that these guys know what they're doing.

[@FluxAcademy]

Why do you say that?

[@ProductJonas]

​@@FluxAcademy the website is incredibly crowded and i don't know what to look at. It literally gives me anxiety because there is so much information on one page. I mean, I haven't tried the product, but it left not a good, first impression. It feels like they ignored almost all other design principles haha.

[@ProductJonas]

but sorry, I don't want to complain about this website. Awesome video man. I love it! :)

[@youstubers5722]

@@ProductJonas Agreed, I had the same feeling of anxiety. Just seconds on the site and had to leave

[@davidacreates]

@@ProductJonas lol i felt the same exact way when i landed on the site.

[@mnbvlkjhgpoiuyt]

jump to 4:00 if you want to skip right to the useful info

AccessiBe is a great product and it's soo easy to use but there is one BIG disadvantage: you can't translate on your own the fileds like you can in some free plugin's (which are not so great like accessiBe). I really like it, but at the moment, not being able to translate is a deal break for me.

[@texxs01]

So basically you think it's about old school usability, pretty sure there's WAY more to it than this. For instance, you ever heard of a screen reader?

[@user-vc1zz6ok6h]

Ausume

[@tramarthomas6105]

Imagine being sued over poor contrast

[@atalatal]

4 minutes and 20 seconds intro. Thanks.

[@YohanPenny]

Accessibe has been sued multiple times because of their widgets inability to do this :)

[@BobbyUI]

I hate orange.

[@Uxarif]

Hey! Flux it's tutorial very helpful for & all designer If you have online UI UX mentorship place share with me :)

[@FluxAcademy]

You’re welcome to check our website for our courses: flux-academy.com

[@jkovert]

You'd better get this right, because Accessibility Karens are on a rampage.

[@davidvernon3119]

As devs or job is to create value. Only 18ish% of the population needs accessibility. Why spend time on features whose value is diminished 80% from the git go? I get the feel good aspect of this, but the business value seems dubious

[@lucasbatista2117]

What kinds of laws are these? They are Israeli laws? That story of suing is crazy...

[@rushirajpara6815]

I have heard one story of Mc Donald's being sued on the same aspects. This are ingeneral laws of designing website with certain fundamentals so customer get what they are looking for.

[@FluxAcademy]

There are laws in Israel but also in the US and around the world

[@issamabdoh394]

free palesitne free GAZA

[@gavinvaz7322]

Did you say you are from Israel? Love you man, that’s the land of my saviour Jesus Christ. May God bless you.