How Apple Solves This Webflow Accessibility Issue

Get the cloneable for this project (affiliate link)
try.webflow.co...
Join my Webflow Wizards Community
/ timothyricks
Try Lumos at lumos.timothyr...

[@ihor.design]

these 9 minutes gave me more useful information than a lot of courses

[@zecostinhacodm]

That's always the case with Tricks!

[@badboujee]

wow that's next level stuff. i didnt know it's bad practice to make the entire card a link... will have to watch this video once or twice more on half speed to absorb all the information 😆

[@ryan-from-verow]

Amazing video as always Tim!

[@lyuhakusho]

YES I'VE BEEN WAITING FOR THIS! THANK YOU!!

[@yash7630]

Ay yo Timothy what's up 3 videos back to back lovee it hahah 🥳

[@rimbodesigns]

Great video thank Timothy !

[@fpv_jesus]

Dude... I love you

[@vince7858]

Really helpful video as always! Quick question: Have you ever experimented with making a button component that supports dynamic SVG icons? I think it could be a game-changer. I’ve been trying to predefine a set of SVGs, assign each one a unique ID, and then dynamically reference them across the site using tags. The idea is to host the SVGs in a file and call them by their IDs, making it easy to swap or update icons without having to create multiple button variations. I’ve seen others struggle with this, so it might make for a really useful follow-up video!

[@timothyricks]

Hi Vince, thank you for the suggestion! I think uploading the svg as a file means we could no longer change their color on hover of the button. I've been using a component slot in my button so that any svg can be added inside.

[@diegoalfonsomendozagutierr4416]

Great tip as always Tim. Is this also how they do links on social media post? Just like X or Instagram where the full block is a link but the elements inside are links also. Looking forward to implement this with a component too.

[@timothyricks]

Thank you! Instagram and X follow a slightly different process because they're web apps. Often they'll assign click events to divs instead of buttons or links. Sometimes they'll add the required workarounds to make those actions accessible to keyboard users and other times they don't.

[@anenglishmanyoutube]

Could you make a video covering the new 'rich text' structure on lumos 2.0.4? I have looked over the latest cloneable and see some changes in how 'rich text' is being used for headings etc. I had a look at the docs but nothing is covering the changes. Would be amazing to update my current work area to the new version.

[@timothyricks]

Hi, there's two differences. First, the Plain Text fields are removed now to simplify the component. If we need a plain text heading, we would just use a regular heading element instead of the component. And lastly, the rich text element now has a class of u-hide-rich-text-media to hide any images or videos that might be accidentally added inside the heading. .u-hide-rich-text-media > *:not(h1,h2,h3,h4,h5,h6,p,blockquote) { display: none !important; }

[@anenglishmanyoutube]

@@timothyricks Thanks :-)

[@Hamdouche.M]

Will lumos work on wordpress the same way?

[@jorgagostini1013]

Really interesting! Would this approach also work in Webflow‘s editor? So the links can be changed by the client?

[@timothyricks]

This can work in Webflow's new Edit Mode inside the designer. See the cloneable as an example. Sadly, link blocks have never been editable in Webflow's traditional editor. Only Webflow's button element works there.

[@jorgagostini1013]

@@timothyricksthanks for clarifying! Its such a shame that the new editor doesn’t allow to make things bold or italic as easily as the old one…

[@Sergy_Kondrashin]

🐐 👑👑👑

[@kevynlevine]

What’s the importance of having the border radius inherit?

[@JannisTimm]

when people navigate a website with keyboard it will add a outline to focused elements. Just looks nicer

[@timothyricks]

It ensures the focus outline matches the radius of the parent card or button. It also makes the clickable area match the shape of the card or button. Otherwise clicking in the corners of a rounded button would trigger a click event from a rectangle link inside it.