Stop Making This BIG Mistake With Clickable Cards (Use "Clickable Parent" & "Focus Parent" Instead)

Рет қаралды 9,087

Күн бұрын

You're making a big web design mistake if you're wrapping entire cards and content groups in link wrappers.
It's not proper HTML, it's not great for SEO, and it's terrible for accessibility.
This dedicated video teaches the "clickable parent" and "focus parent" techniques for properly linking clickable content groups like cards so you can maintain good anchor linking techniques, clean SEO, and proper accessibility while still achieving cards that are fully clickable and focusable.
** MY TOOLS **
🔥 AutomaticCSS (ACSS) - automaticcss.com
🔥 Frames - getframes.io
See all my recommended tools here: geary.co/tools/
** INNER CIRCLE **
Step your design/dev game up, make more money, and get the full scoop on scaling your digital agency! When it comes to the Inner Circle, I don't hold back.
⭕ In-depth design & dev trainings
⭕ Business, sales, & marketing trainings
⭕ Agency resources & downloadables
⭕ Vibrant, quality community with zero toxicity
⭕ ...and much more!
Learn more and join here: geary.co/inner-circle/
** SOCIAL **
👉 FB - / marketingkev
👉 LinkedIn - / kevingeary
** CHAPTERS **
0:00 The Mistake and its Implications
07:28 A Better Approach
16:30 Clickable Parent From Scratch
19:55 Focus Parent From Scratch
24:40 When to NOT Use Clickable Parent

Пікірлер: 145

@Gearyco 8 ай бұрын

Sorry, my kids were bouncing, bumping, and banging upstairs at the start of the video. Treacherous conditions to work in!

@ted-e-baer 8 ай бұрын

Thank you for the dedicated video on these two topics, Kevin. Great content as usual.

@bluetheredpanda 8 ай бұрын

Great video as always, the structure of this one was even better than usual Sidenote:I love how I'm both annoyed and delighted when I get a notification for a new video from you. It's like, come on, Kevin, I need to work and not binge your content! But also, you know… keep 'em coming 😂

@Gearyco 8 ай бұрын

Thanks again!

@brianrougeau9120 7 ай бұрын

Thank you Kevin. This is very generous of you and very useful.

@evzone700 8 ай бұрын

Clear, well explained and easy to understand how to use it. Thanks Kevin.

@davidwalls2304 8 ай бұрын

Thanks for this video Kevin. I kind of knew the approach based on some of your prior videos but this one really cleared everything up for me. This is really very useful content that helps others really level up their development skills.

@RiyazShihabdeen 3 ай бұрын

Kevin, your tutorial is absolutely fantastic. It's evident you've mastered every aspect. Your time and effort are highly appreciated.

@Gearyco 3 ай бұрын

🙏

@laurelbraun9428 2 ай бұрын

This video is so helpful. I keep coming back to it!

@satolbo 8 ай бұрын

I love how with every video I learn more CSS selectors! Thanks!

@Gearyco 8 ай бұрын

More to come!

@SenorRobinHood 8 ай бұрын

Stellar video Kevin. Thanks for actually explaining the behind the scenes and writing out the CSS. Just made a big product listings card for an estate agent site I'm working on far more accessible due to this.

@Gearyco 8 ай бұрын

Fantastic!

@KshitijShah89 8 ай бұрын

Superb content as always Kevin! Learning so much.

@thecommittedman 5 ай бұрын

Kevin, you are on a whole different level with these tutorials and the passionate energy you bring to them. Can't wait to be on my call with you tomorrow.

@Gearyco 5 ай бұрын

💪🏻

@Julie-gh5ir 8 ай бұрын

Thank you so much ! Very easy to understand, the video is great, I understood everything, and I learned a lot. 🤩

@aminulhaque_bkk 8 ай бұрын

Amazing. Thanks for a great tutorial as always. ❤

@beehivenetwork2099 8 ай бұрын

Kevin, hats off for what you doing. Packed with usefull inofmations as always. Thank you!

@Gearyco 8 ай бұрын

Glad you like them!

@getsomemilc 3 ай бұрын

Awesome vid. I'm a designer turned front-end dev and your tuts are making me level up so hard!

@danieleromano7442 8 ай бұрын

Many tnx for your support! 👍

@Michael_M 2 ай бұрын

Thanks Kevin! Great lesson!

@md.jabedkhan1791 5 ай бұрын

I didn't think this way before but now everything is clear and I will try to do this for my future work. Thank you so much, Kevin

@OlegYarkayev 4 ай бұрын

Kevin you are the best. Your videos are pure gold. You know your craft and you are very passionate about it. This is the reason why your videos are so good. This is the only channel people need if they want to learn. Thank you very very much!

@Gearyco 4 ай бұрын

Thank you 🙏

@Jmfwebdesign 8 ай бұрын

Great video and Thankyou for the utility classes they are a great help. Acss is so awesome 😍 keep it up :)😊

@fiqihalfarizy4843 8 ай бұрын

I will never tell this to my fellow developers or they will be greater than me 😂

@SteveKinzey 8 ай бұрын

Fantastic! Thank you so much for your insight and for showing us exactly how to do it.

@SteveKinzey 8 ай бұрын

Just shared this video with a group of my friends in a WordPress meetup.

@evaniveson Ай бұрын

So simple. Amazing!

@jhc827 Ай бұрын

Very, very helpful. I learned a lot. Thanks, Kevin. Now I have to redo all the cards on all my websites.

@nicocubero4853 7 ай бұрын

Great video. Thanks man. 👌🏻👏🏻

@MedienHusky 8 ай бұрын

Hi Kevin, this is another excellent video! Thanks a lot!

@emadhosen 8 ай бұрын

Thanks for the tutorial Kevin.

@ileftmybody 8 ай бұрын

Great content. I learn so much with each of your videos. Thank you very much! Together with your videos, the money for your software is well spent.

@Gearyco 8 ай бұрын

Great to hear!

@LupusDesign 8 ай бұрын

Every tutorial is a diamond 💎

@iamjoshkoop 8 ай бұрын

Learned how ot make far better cards today with one simple video! Thanks as always Kevin!

@derekshort 7 ай бұрын

Another great lesson!

@chrisgreen5711 8 ай бұрын

Great tutorial and explanation Kevin 👍👍👍

@tobias3464 8 ай бұрын

Nice lesson! Thanks again!

@lazfatih61 8 ай бұрын

This is amazing, thank you very much!

@WellMetMunro Ай бұрын

very good video! Love this type of topic.

@ocratest 8 ай бұрын

Excellent tutorial - thanks for :focusing on accessibility! Gaining attention but still very neglected by developers.

@sajjadnajafi415 8 ай бұрын

amazing as always! (it solved my problem with linking slider slides to the posts as well! )

@pedrocosta3818 8 ай бұрын

Great content! A mandatory tutorial. Thanks aggain, Kevin!

@Gearyco 8 ай бұрын

You're very welcome!

@andrew_schaeffer 6 ай бұрын

Great stuff thanks!

@NewPulseLabs 8 ай бұрын

Great video! I was one of the 9/10, but just swapped my site over now. One thing to be aware of: if you set your focus styling as a box shadow instead of outline, it may get overridden if your element already has a box shadow applied to it.

@Gearyco 8 ай бұрын

Just depends on order of CSS. But you can use a lot of different focus styles doesn’t have to be box shadow.

@klitos15 24 күн бұрын

Beautiful!!

@AmandaLucaseu 8 ай бұрын

Super video Kevin!

@dahunsi 8 ай бұрын

I did not hear the children. Maybe I will hear them when I watch it again. I never realised the code base for clickable parent and focus parent were that simple. I was just using them as available. Another great tutorial. Grateful as usual.

@xvm.ch. 8 ай бұрын

Please more Video like this

@stefanionescu9881 7 ай бұрын

This is gold

@StnurTube 8 ай бұрын

Like they say "another one" :) Thänks!

@defiantamerica 8 ай бұрын

Mentioning ACSS several times is an ad. 😂 This was a helpful video none the less.

@Gearyco 8 ай бұрын

Ads are turned off on almost all my videos. It’s a good trade off, yeah?

@marcovanderziel 8 ай бұрын

Thank you for this video, it's good to watch and learn. I also thougt it was not permitted to put block elements like a div inside an inline element like an a. That's why you used a span (inline) inside the Twitter link, right?

@Gearyco 8 ай бұрын

More or less yeah.

@HadeeRoslan 8 ай бұрын

Excellent tutorial. Thank you. Shouldn't the description be included as an accessibility item?

@Gearyco 8 ай бұрын

No need, the text is always readable. We are just ensuring they’re not forced to read it.

@jensonyang 8 ай бұрын

😱 enlightenment!

@samuelflimel2207 8 ай бұрын

Great video :)

@ruemorg7 6 ай бұрын

Great video! Thanks (-Gary-) Kevin! One question, when I add a gradient overlay in bricks builder, the clickable area retracts back to just H2 and the absolute position doesnt seem to work. Have you come across this before? Many thanks for your insights!

@Gearyco 6 ай бұрын

#WhoIsGary

@bloggerkickstart9060 5 ай бұрын

Great video, btw how to get the hangman for the chrome ? and what keyboard shortcut your using to focus on the card and let the google voice talking bout the item your focusing

@Gearyco 5 ай бұрын

Cmd f5

@visuallydesigned 2 ай бұрын

Loving your videos and have been using this technique lately on most builds I do! I got a question though. Sometimes the design for a card would look like the one you have in the video - but the learn more would be a button, what I'm doing currently to avoid having multiple links in my card is to have a text element say "Learn more" and give it the class "btn--action" for example. The issue with that is the button won't trigger the hover styles as the pseudo element on the "a" tag is covering the whole parent. The only way to workaround that is to manually target the button when the card is hovered and then apply the hover styles manually. I was wondering if there is a more elegant solution that you use on your projects?

@Gearyco 2 ай бұрын

So it’s just a dummy button right? I’m not sure what’s breaking. Hover should be based on the entire card. I think you would need to show me a link.

@visuallydesigned 2 ай бұрын

@@Gearyco Thanks for the reply! Yes it's a dummy button, everything works nothing is broken. Just that hovering over this fake button doesn't display the button's hover styles due to being overlayed by the link's pseudo element (clickable parent). Is there any way to work around this other than having to do a "%root%:hover .btn--action" and then changing the colors that way?

@More_MOTZ 5 ай бұрын

Great video! There is just one thing I can not wrap my head around. I have a card fairly simple - just a div with a heading and an img. I have positioned the img absolute on the img. Because the heading is positioned "absolute" I am unable to expand the link over the whole card. What would be a way to work around this?

@More_MOTZ 5 ай бұрын

I got it! I wrapped the heading in a div which had the position:absolute and inset:0 while the heading had the position:static and align-items: center; justify-content: center;

@mcostales84 8 ай бұрын

An absolute gem. Just a side question, I know images with the alt tag gets announced, but not with this voice thing that you use here right?

@Gearyco 8 ай бұрын

When it’s in a link it gets announced. It was getting announced in the video.

@mcostales84 8 ай бұрын

@@Gearyco ok, i get it now

@nicksmith5306 8 ай бұрын

"ugly as sin" LMAO, haven't heard anyone other than me use that for years lol Another fantastic video @Gearyco thank you 👍

@AlexDelaforce 2 ай бұрын

In codepen using normal html and css and no javascript ... I have recreated the cards and the styling as per this video. When I hover, all good. When I click, the link works (opens in a new tab using 'target="_blank"). My problem is when I go back to the original (codepen) tab, the card styling is stuck on the hover state - using mouse. The other cards will change to hover under the mouse pointer, but the original card hover style is stuck on. Tabbing through the webpage works as expected (i.e tab will go to next card and the original card is released to original style. Is this a javascript task to release the style on mouse up or something similar?? I've watched this multiple times and learned each time - thanks Kevin. I know you are a busy body so I won't be offended if you don't get to this. :) - thanks again for your great resources.

@Gearyco 2 ай бұрын

Shouldn’t require anything special. Send me link to your codepen.

@DaleDonnolly 7 ай бұрын

Hi @GearyCo , My cards are within a Nestable Slider, all aspects work fine except for the entire card being clickable. The link remains on only the H3 header. I can't seem to get the entire card clickable as in your explanation. Do you perhaps have any ideas on what i should do to get it working?

@ruemorg7 7 ай бұрын

Hello @gearyco @dal,edonolly - Same questionhere about nestable Slider. Trying to get button link to link the entire slider but it doesnt work. Any help would be appreciated!

@Gearyco 6 ай бұрын

I need a link. Post it in the inner circle or ACSS community.

@maythe4thBwithU 8 ай бұрын

On the individual card you have the image at the top but in the DOM it is showing after the content ?? is this an order Class you have placed on the image element ?

@Gearyco 8 ай бұрын

Yes because the heading should come first in the DOM.

@sevenelven 8 ай бұрын

Hi Kevin, what if you only wanted to have an SVG icon inside a link div wrapper, would it be best to just use a button? Or how should it work in terms of accessibility?

@Gearyco 8 ай бұрын

You need hidden accessibility text. automaticcss.com/docs/hidden-accessible-class/

@derekshort 3 ай бұрын

Is this card section available as a frame? I can't find it.

@Gearyco 3 ай бұрын

Very standard card layout. Definitely available in frames.

@kianyipshea2766 5 ай бұрын

I noticed that the content in the structure are different from the visual. In the structure of the editor, I saw you put text first followed by images while your page displays images first before text. Is there a reason to arrange the order like this? Why not just put the image first before the text in the editor?

@Gearyco 5 ай бұрын

It’s better for assisitive technology for headings to come first.

@christianmagill3829 8 ай бұрын

Can the screen reader still read the supportive text? Sometimes that is important to understanding the choice between the options.

@Gearyco 8 ай бұрын

For sure, it just doesn’t force them to read it.

@DesignRobPearce 7 ай бұрын

Thanks Kevin. Tried to use this on a recent build for a fullscreen header menu, where I have hover-able blocks with text in, but they animate too so I've had to use multiple containers with the ACSS hidden-accessible class on the text link directly inside the relative container, like you did up there. Took a bit of working out. Is there a way following from this video that you can change the order of the links when panning through - if your layout visually has a phone number and email say, but you want the other links to be first when audio or keyboard accessible? Hope that makes sense.

@Gearyco 7 ай бұрын

It sure this would be needed in a menu. I’d need to see the design.

@DesignRobPearce 7 ай бұрын

@@Gearyco cheers Kevin got it to work actually, using a hidden aria link. I guess this is designed only when the link is the direct descender of the parent, or can it work deeper?

@winwinis3483 8 ай бұрын

Thanks Kevin - QUESTION Lets say the cards are for services that people may not be familiar with and therefore the h3 text link would not be meaningful. In this case they would need to HEAR the short description as well. How would you include the description text to be heard / picked up by the reader?

@Gearyco 8 ай бұрын

They can always choose to hear all text anywhere on the page at any time. We are just ensuring they’re not forced to hear it.

@winwinis3483 8 ай бұрын

That makes sense, thanks for the response I know you are extremely busy. @@Gearyco

@pixelnthings 4 ай бұрын

Great tutorial as always, Kevin🙌. But how do you remove that focus when you click on card? It should be only visible when you do tab. Can we do that? Kinda looks odd, when you click on blog grid, it shows that box shadow around that card.

@Gearyco 4 ай бұрын

focus-visible should do it

@pixelnthings 4 ай бұрын

@@Gearyco I tried it but it's not working, and I don't know why. ":focus-within" is working but ":focus-visible" is not. But, when I click ":focus-visible" in the DOM, it shows the box-shadow. But as soon as I close the DOM, the focus is not visible anymore. I used this (not working visually): .px-clickable-parent:focus-visible { --focus-color: var(--px-base-light); --inset-focus-color: var(--px-primary); outline: none; box-shadow: inset 0 0 0 2px var(--focus-color), 0 0 0 2px var(--inset-focus-color); border-radius: 4px; } Then I used this (working but focusing "a" in card): :focus-visible { --focus-color: var(--px-base-light); --inset-focus-color: var(--px-primary); outline: none; box-shadow: inset 0 0 0 2px var(--focus-color), 0 0 0 2px var(--inset-focus-color); border-radius: 4px; }

@Gearyco 4 ай бұрын

Depends on the structure. Hard to say without a link. Post in the inner circle and it's easy to help you there.@@pixelnthings

@pixelnthings 4 ай бұрын

@@Gearyco thanks, Kevin... I will post it there.

@vaughanprint 7 ай бұрын

Towards the end of the video I noticed, when you hovered over the Twitter elements, guides or rulers running up and across the screen. Good to show alignment of elements. What is this tool?

@Gearyco 6 ай бұрын

Do you have a timestamp? I'm not seeing it.

@vaughanprint 6 ай бұрын

@@Gearyco It's around 30 minutes in. I see that it's just you mousing over elements in the inspector. So I don't thinks it's really any tool other than that. Sorry for the bother.

@kianyipshea2766 7 ай бұрын

I'm using container in Elementor free with Hello theme. The container is not clickable after I used the CSS code you used in the video. I added an image, text, heading, and 2 texts within a container like your video. I changed the CSS selector to the class according to my class name. The link still stuck with the heading without expanding to the whole container. How should I do it?

@Gearyco 7 ай бұрын

I would need a link. This is the kind of question we can easily help you with the inner circle, but not really here on KZfaq

@kianyipshea2766 6 ай бұрын

@@Gearyco Oh, I found out the problem. The fact that I use Elementor free, I have to make the heading widget container "position: static" so that the link positions itself absolute to the entire card. Otherwise, the link will position itself absolute to the heading widget container causing the link remains in the heading.

@groundpets5101 8 ай бұрын

hey Kevin, will there be a acss unlimited to buy any time soon?

@Gearyco 8 ай бұрын

No that ship has sailed

@groundpets5101 8 ай бұрын

oh ok, i will have make this is WPcodebox then@@Gearyco

@SuperTRISTAN888 8 ай бұрын

Kevin, I apologize for my English. I would like to ask the following questions. 1. Is it necessary to apply focus to headings and subheadings if they are not links? 2. How to apply focus to lists and headings if it's regular page content, not cards, and is it necessary? 3. How to enable the accessibility checker tool in the developer panels? 4. Tell me about browser extensions you use in your work. Thank you; I will be waiting for a response.

@Gearyco 8 ай бұрын

1. No. 2. Nope. 3. It's in the chrome settings, you should be able to google it or youtube it. 4. I might do a video.

@SuperTRISTAN888 8 ай бұрын

@@Gearyco Thank you very much for the answer

@SamFrysteen 8 ай бұрын

I should just test for myself… but can you still have other links inside the card when making the card the link with clickable parent… eg: the SERVICES category link to Services Category page?

@Gearyco 8 ай бұрын

Yes for sure, but I don’t recommend it. I’ll probably do a video on why not.

@SamFrysteen 8 ай бұрын

@@Gearyco thanks mate

@MariuszNowak300 8 ай бұрын

@@Gearyco I'm curious why you don't recommend it? These links are a very common practice. Even including your website (in the section: Latest articles & insights).

@Gearyco 8 ай бұрын

yeah I'll probably be removing them from my sites. I'll do a video that explains why. It's bad for accessibility IMO.@@MariuszNowak300

@grlcanrock 3 ай бұрын

What if you have a card where you need the whole card clickable (takes you to a page about that content) but then also have an inline text link within the description? Is it possible to have the entire card be focusable and still have the inline link inside the card be focusable too?

@grlcanrock 3 ай бұрын

Should also note that the inline text link within the description is not defined - it could be any text within the description that gets linked to a URL by the client

@Gearyco 3 ай бұрын

It’s possible. I’d need to see an example. It’s not typically a good idea from a UX perspective.

@grlcanrock 3 ай бұрын

@@Gearyco Design example of what I mean as far as which elements need to be focus-able: drive.google.com/file/d/1aFSC9dXtf0BnPe8YX0qpQkxFGUDO71KI/view?usp=sharing (Agree it's not typically good UX though - this was a very a specific need and requirement from a client)

@kjellandrew 3 ай бұрын

As someone who doesn't use wordpress, thanks for posting the normie answer. Also, HTML 5 says it's ok to wrap an anchor around elements. But you're right, it's terrible for accessibility.

@dh7594 2 ай бұрын

what happens if you have a card with link tags. You cant really use the focus and clickable parent ?

@Gearyco 2 ай бұрын

If you're going to make cards clickable, I recommend no other links in them. In bricks it's easy to show tags/categories without linking them. Link to them on the page/post for that thing instead.

@AlwaysSlimShadyBro 2 ай бұрын

@Gearyco that's exactly what I did. Is it good to make a list of blogs as ordered list.

@Gearyco 2 ай бұрын

@@AlwaysSlimShadyBro unordered imo