Stop Making This BIG Mistake With Clickable Cards (Use "Clickable Parent" & "Focus Parent" Instead)
HTML-код
- Опубликовано: 20 май 2024
- 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
Sorry, my kids were bouncing, bumping, and banging upstairs at the start of the video. Treacherous conditions to work in!
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 😂
Thanks again!
I will never tell this to my fellow developers or they will be greater than me 😂
Thank you for the dedicated video on these two topics, Kevin. Great content as usual.
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.
Clear, well explained and easy to understand how to use it. Thanks Kevin.
Thank you Kevin. This is very generous of you and very useful.
Awesome vid. I'm a designer turned front-end dev and your tuts are making me level up so hard!
Amazing. Thanks for a great tutorial as always. ❤
Great video and Thankyou for the utility classes they are a great help. Acss is so awesome 😍 keep it up :)😊
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
Thank you so much ! Very easy to understand, the video is great, I understood everything, and I learned a lot. 🤩
Many tnx for your support! 👍
Superb content as always Kevin! Learning so much.
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.
💪🏻
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.
Fantastic!
Kevin, your tutorial is absolutely fantastic. It's evident you've mastered every aspect. Your time and effort are highly appreciated.
🙏
Kevin, hats off for what you doing. Packed with usefull inofmations as always. Thank you!
Glad you like them!
Learned how ot make far better cards today with one simple video! Thanks as always Kevin!
This video is so helpful. I keep coming back to it!
I love how with every video I learn more CSS selectors! Thanks!
More to come!
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!
Thank you 🙏
Thanks for the tutorial Kevin.
Excellent tutorial - thanks for :focusing on accessibility! Gaining attention but still very neglected by developers.
Every tutorial is a diamond 💎
Hi Kevin, this is another excellent video! Thanks a lot!
Great tutorial and explanation Kevin 👍👍👍
Thanks Kevin! Great lesson!
This is amazing, thank you very much!
Please more Video like this
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.
Great to hear!
Nice lesson! Thanks again!
Fantastic! Thank you so much for your insight and for showing us exactly how to do it.
Just shared this video with a group of my friends in a WordPress meetup.
amazing as always! (it solved my problem with linking slider slides to the posts as well! )
Great video. Thanks man. 👌🏻👏🏻
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.
Another great lesson!
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.
Just depends on order of CSS. But you can use a lot of different focus styles doesn’t have to be box shadow.
Super video Kevin!
Great stuff thanks!
Great content! A mandatory tutorial. Thanks aggain, Kevin!
You're very welcome!
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!
#WhoIsGary
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
Cmd f5
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?
More or less yeah.
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?
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.
@@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?
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?
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;
Excellent tutorial. Thank you. Shouldn't the description be included as an accessibility item?
No need, the text is always readable. We are just ensuring they’re not forced to read it.
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.
It sure this would be needed in a menu. I’d need to see the design.
@@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?
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.
focus-visible should do it
@@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;
}
Depends on the structure. Hard to say without a link. Post in the inner circle and it's easy to help you there.@@pixelnthings
@@Gearyco thanks, Kevin... I will post it there.
This is gold
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?
You need hidden accessibility text. automaticcss.com/docs/hidden-accessible-class/
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?
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!
I need a link. Post it in the inner circle or ACSS community.
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?
When it’s in a link it gets announced. It was getting announced in the video.
@@Gearyco ok, i get it now
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?
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.
That makes sense, thanks for the response I know you are extremely busy. @@Gearyco
😱 enlightenment!
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?
It’s better for assisitive technology for headings to come first.
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 ?
Yes because the heading should come first in the DOM.
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.
Shouldn’t require anything special. Send me link to your codepen.
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?
Do you have a timestamp? I'm not seeing it.
@@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.
hey Kevin, will there be a acss unlimited to buy any time soon?
No that ship has sailed
oh ok, i will have make this is WPcodebox then@@Gearyco
"ugly as sin" LMAO, haven't heard anyone other than me use that for years lol Another fantastic video @Gearyco thank you 👍
Is this card section available as a frame? I can't find it.
Very standard card layout. Definitely available in frames.
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?
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 RUclips
@@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.
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?
Yes for sure, but I don’t recommend it. I’ll probably do a video on why not.
@@Gearyco thanks mate
@@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).
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
Can the screen reader still read the supportive text? Sometimes that is important to understanding the choice between the options.
For sure, it just doesn’t force them to read it.
Mentioning ACSS several times is an ad. 😂 This was a helpful video none the less.
Ads are turned off on almost all my videos. It’s a good trade off, yeah?
Like they say "another one" :) Thänks!
Great video :)
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?
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
It’s possible. I’d need to see an example. It’s not typically a good idea from a UX perspective.
@@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)
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.
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.
@@Gearyco Thank you very much for the answer
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.
what happens if you have a card with link tags. You cant really use the focus and clickable parent ?
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.
@Gearyco that's exactly what I did. Is it good to make a list of blogs as ordered list.
@@AlwaysSlimShadyBro unordered imo
A teacher.
Still sad that we lose the ability to select and copy text on cards though
Same outcome if you link the entire card. Real users don’t need to copy card text. Things can’t be both clickable and non clickable at the same time…
I think that's what your kids should call you...the "clickable-parent"! :)
Kevin is a professor
The content is interesting but the tone and the "don't do this, don't do that" is annoying.
Don’t watch. Pretty simple.