Have You Heard of "Accessibility-First"?!

[@JacobODonnellDesign]

I like what you're saying. It seems like accessibility is overlooked in general, so that might be the real reason you don't see anyone else talking about this. So many designers seem to be under the false impression that an interface is just the screens they create in Figma. From what I understand, most designers tend to lack the technical chops to even implement accessibility, and they also get frustrated dealing with anything they feel is "technical". You'd think since designers are supposed to be focused on having empathy for their users that the tasks of implementing accessibility should fall into their laps, but most can barely code HTML/CSS, let along Javascript to any actual proficiency. Also, many web designers seem to come primarily from a graphic/visual design background and seem to think designing digital products/websites is mostly about designing the visual elements and not the actual functionality.

[@webflowandcode]

I have to agree. It is quite ironic. I’ve even had negative and ignorant responses with regards to accessibility from the Webflow community in my other videos. Maybe to get a rise out of me I don’t know. But it’s sad nonetheless. Something to consider is that Webflow gives the impression it takes care of everything for you from a technical perspective. Which it doesn’t (video incoming on that one). Saying that, an accessible website can take advantage of a simpler design but maybe hasn’t been thought of because nobody knew a technical way to differentiate user interfaces

[@JacobODonnellDesign]

@@webflowandcode I was watching this video the other day: kzbin.info/www/bejne/e6W8pYyknd2YhMU. This guy is one of the biggest online influences for developers and he seems to not care much about accessibility either. I bought the Pinegrow Wordpress Plugin the other day after seeing your videos. I like how its just straight HTML/CSS and doesn't have any weird abstractions like Webflow (like their button element just being a link with a style pre-applied under the hood).

[@webflowandcode]

For better or worse Theo’s background is actually backend. He’s fairly new to Frontend and so doesn’t know the fundamentals. His jumping off point was React. That’s not to discredit him whatsoever but he’s a backend dev trying his hand at front end. He doesn’t really talk too much about styling either. I call people like him “front-end engineers” (tooling, libraries, logic) whereas I’m more of a classic “UI developer” (my terminology). I’m not sure where I’m going with this but accessibility is not a sexy subject. People are bored of it unless you can give sexy examples of it in action. I thought I might at least pique the interests of an “easier” way to do accessibility when thinking about interactivity.

[@JacobODonnellDesign]

@@webflowandcode Good luck! It for sure is the type of thing that bores most people to death, which is sad for the people that will negatively affect.

[@wwxstackdeveloper]

Thank you for diving into all of this. I find information I don't know to be extremely sexy..And accessibility is still grey to me. So that makes this a very sexy video. Thank you for your thoughts.

[@webflowandcode]

Sexy! Cheers for tuning in

[@timothyricks]

Thank you! This seems like a great idea to me for menus. Would there be a way for users to skip past all the links if they need? And focusing off the last link closes the menu?

[@webflowandcode]

A common accessibility method is to provide a “skip to content” link before any of the header stuff which is just an anchor link to the main section of the page. Regarding your second point, maybe I don’t understand but when the user tabs off the last link, the menu closes (all this was achieved with :focus-within 🙌 should’ve mentioned that one). Is that what you mean?

[@timothyricks]

@@webflowandcode Oh, I see! Thank you! I wonder if using a list element allows the users to choose to enter the list or skip past it. I still have so much to learn and test. Using :focus-within sounds like a really clean solution. I usually animate menus with GSAP so need to find the JS alternative.

[@webflowandcode]

You could use a list but even better is to use a nav (which is semantically correct) with a list inside. Nav’s are sectioning elements so screen readers will “jump” between sectioning elements. In this case it will announce that the user is on a navigation element, if they choose to enter it’ll announce a “list element”. I hope that makes sense Header > Nav > ul. Yeah if you use GSAP you’d need to add/amend ARIA roles to announce what’s just happened. You can do this with GSAP. They don’t document the available vars very well (probably because there are so many) but by adding attr: { ariaHidden: ‘true’ } to the vars object it’ll change HTML attributes. But I guess what I’m saying in this video is that you might be able to avoid all this nonsense by rethinking the accessible experience and only making non screenreader users click a button to show the nav.

[@timothyricks]

@@webflowandcode Thanks so much! I'm with you on that. It sounds like the hamburger icon wouldn't need to be focusable. When the user tabs off the logo, the menu could automatically open. When they tab off the menu, it could automatically close. Great idea! It's a much cleaner solution

[@webflowandcode]

I do exactly this. Hide the burger menu when I detect keyboard user. I would like to do more extensive testing on that detection though if I’m honest but it’s a concept nonetheless. On mobile for example, an accessibility user swipes the screen to “tab”. Is this detected as mouse move?! I don’t know