Open noamr opened 1 month ago
Could someone explain to me what link nesting/link delegation would be used for? I'm looking currently at Reddit and I'm wondering whether the example of post applies, since they link to post and link from post's description are overlaping?
I personally understand the neatness of this behaviour from user perspective, but it's also a bit annoying for me when I'm trying to enter post and I'm redirected or just have image opened up.
EDIT: I'm your average user as far as any accesibility is concerned, but might be also biased since I'm not used to that design choice.
Could someone explain to me what link nesting/link delegation would be used for? I'm looking currently at Reddit and I'm wondering whether the example of post applies, since they link to post and link from post's description are overlaping?
I personally understand the neatness of this behaviour from user perspective, but it's also a bit annoying for me when I'm trying to enter post and I'm redirected or just have image opened up.
EDIT: I'm your average user as far as any accesibility is concerned, but might be also biased since I'm not used to that design choice.
Check for example walmart. You can click on the whole item to go into the item, or click on a particular color to go to the item with that color already selected (when color is applicable). They achieve this with an <a>
element on top of the regular content (using z-index
).
This is not an uncommon pattern on the web, and using z-index
tricks for this seems suboptimal...
@noamr beat me to it, but I think card components (wich can mean a lot of things) would generally be a use case for this. A lot of times you have markup like this:
<div class="card">
<img src="..." />
<h3>Title</h3>
<p>Description</p>
<a href="">Read more</a>
</div>
and the requirement is to make the whole card clickable. While you can wrap the <a>
tag around the whole card, or make the <a>
tag the card itself, the content of the card becomes the accessible name of the card and that's only the start of the problems with that approach. If you overlay the whole card with the <a>
tag, all other items become unselectable for pointers (download image, select text for translation or lookup, ...). With the possibility to delegate clicks on <div class="card">
to the link, it would be possible to keep the nice structure and declaratively make the whole card clickable.
@lukewarlow or @keithamus would this be something that invokers could do?
Could someone explain to me what link nesting/link delegation would be used for? I'm looking currently at Reddit and I'm wondering whether the example of post applies, since they link to post and link from post's description are overlaping? I personally understand the neatness of this behaviour from user perspective, but it's also a bit annoying for me when I'm trying to enter post and I'm redirected or just have image opened up. EDIT: I'm your average user as far as any accesibility is concerned, but might be also biased since I'm not used to that design choice.
Check for example walmart. You can click on the whole item to go into the item, or click on a particular color to go to the item with that color already selected (when color is applicable). They achieve this with an
<a>
element on top of the regular content (usingz-index
). This is not an uncommon pattern on the web, and usingz-index
tricks for this seems suboptimal...
So they achieve it similarly to how Reddit does it. I'm honestly 50/50 on it because it feels like the result could be very confusing for the end-user especially if the developer didn't take proper measures to make user know they are hovering over something that is also interactable inside card like this.
Check for example walmart. You can click on the whole item to go into the item, or click on a particular color to go to the item with that color already selected (when color is applicable). They achieve this with an
<a>
element on top of the regular content (usingz-index
). This is not an uncommon pattern on the web, and usingz-index
tricks for this seems suboptimal...So they achieve it similarly to how Reddit does it. I'm honestly 50/50 on it because it feels like the result could be very confusing for the end-user especially if the developer didn't take proper measures to make user know they are hovering over something that is also interactable inside card like this.
In the Walmart case I don't see much "harm" in it. The whole card is clickable, and clicking the color refines the link to something more specific.
At Wix we had something similar where a phone number inside a link/card would be automatically clickable as a tel:
link. This was really useful for small businesses.
Currently command invokers require a custom element or a button trigger so this sort of thing would work using that API. It also feels a specific and nuanced enough problem to warrant it's own functionality.
I'm wondering if this could be something more generic however. Labels can already extend the click target of a nested/associated form control. Are there other situations like this where expanding the click area without applying other semantics is desired?
Whether this is a good pattern I'm genuinely not sure. But I would anecdotally say it's a common one. Certainly common enough to warrant a discussion even if the outcome is 'we're aware of this pattern here's the reasons it's bad'.
Currently command invokers require a custom element or a button trigger so this sort of thing would work using that API. It also feels a specific and nuanced enough problem to warrant it's own functionality.
I'm wondering if this could be something more generic however. Labels can already extend the click target of a nested/associated form control. Are there other situations like this where expanding the click area without applying other semantics is desired?
The problem with labels specifically is that they require an additional element, which means this can't be used on <tr>
or other situations where adding an element would affect parsing. That's why the proposal is going towards an attribute-based approach, but of course everything is open.
i'm of two minds about something like this.
First, I have an initial positive reaction to this because wrapping structured content similar to the example card markup in this comment in a hyperlink (<a href>
) is a rubbish practice. and the hack of using a positioned hyperlink or hyperlink's before or after pseudo content can be problematic as well.
I also find the use case for tr
elements being able to reference a hyperlink within one of their cells as being the intended result of clicking 'anywhere' on the row as being a very common use case that would be nice to account for. It'd help drive home the idea that if one wants to make the row clickable, there MUST be a hyperlink to reference within the row so that it can be consistently accessible. (not all screen readers consistently allow for navigating tables by rows, and rows in and of themselves are not generally expected to be interactive - so the existence of the hyperlink is often essential)
The concern I have for something like this is no different than the concern i have for the current hacks people have to resort to for this 'desired' UX - in that this practice can often result in accidental activations. Speaking for myself, I have often accidentally activated many 'clickable cards' like this as i'm simply trying to swipe/scroll through a UI on my phone. I also have a tendency to accidently click on UI when using my mouse, and generally this is "fine"... except for in these cases where large sections of content that don't visually appear like they should be interactive, are.
Additionally, per the new WCAG 2.2 Target Size minimum SC, i'd be concerned with the potential for undersized targets to exist within the larger clickable target... I could see instances of what the SC currently has exceptions for, not taking something like this into account, since some of those exceptions were created under the present understanding that nested interactive elements aren't valid.
For example, a secondary link within a string of text would often fall short of meeting both the minimum 24 width AND height requirements of the SC (ltr / rtl words commonly meeting the width, but not necessarily the height requirement). Smaller target sizes in that case being more of a potential usability issue. But if the entire section of content is clickable, then the potential for accidental activation for someone trying to click the 'nested' link, but instead hitting the larger 'target' becomes far more likely.
I'm not mentioning the above in any sort of "i think this is a bad idea" sort of way... it's a very common pattern and being able to do this without hyperlink hacks or JS would be nice. But, we should also acknowledge that the 'large clickable pattern' has at least 'minor' usability issues related to accidental activation in some contexts - and absolutely has increased usability issues for those with motor disabilities when there are nested interactive elements.
i'm of two minds about something like this.
First, I have an initial positive reaction to this because wrapping structured content similar to the example card markup in this comment in a hyperlink (
<a href>
) is a rubbish practice. and the hack of using a positioned hyperlink or hyperlink's before or after pseudo content can be problematic as well.I also find the use case for
tr
elements being able to reference a hyperlink within one of their cells as being the intended result of clicking 'anywhere' on the row as being a very common use case that would be nice to account for. It'd help drive home the idea that if one wants to make the row clickable, there MUST be a hyperlink to reference within the row so that it can be consistently accessible. (not all screen readers consistently allow for navigating tables by rows, and rows in and of themselves are not generally expected to be interactive - so the existence of the hyperlink is often essential)The concern I have for something like this is no different than the concern i have for the current hacks people have to resort to for this 'desired' UX - in that this practice can often result in accidental activations. Speaking for myself, I have often accidentally activated many 'clickable cards' like this as i'm simply trying to swipe/scroll through a UI on my phone. I also have a tendency to accidently click on UI when using my mouse, and generally this is "fine"... except for in these cases where large sections of content that don't visually appear like they should be interactive, are.
Additionally, per the new WCAG 2.2 Target Size minimum SC, i'd be concerned with the potential for undersized targets to exist within the larger clickable target... I could see instances of what the SC currently has exceptions for, not taking something like this into account, since some of those exceptions were created under the present understanding that nested interactive elements aren't valid. For example, a secondary link within a string of text would often fall short of meeting both the minimum 24 width AND height requirements of the SC (ltr / rtl words commonly meeting the width, but not necessarily the height requirement). Smaller target sizes in that case being more of a potential usability issue. But if the entire section of content is clickable, then the potential for accidental activation for someone trying to click the 'nested' link, but instead hitting the larger 'target' becomes far more likely.
I'm not mentioning the above in any sort of "i think this is a bad idea" sort of way... it's a very common pattern and being able to do this without hyperlink hacks or JS would be nice. But, we should also acknowledge that the 'large clickable pattern' has at least 'minor' usability issues related to accidental activation in some contexts - and absolutely has increased usability issues for those with motor disabilities when there are nested interactive elements.
I resonate with all of your concerns, they are all valid! To respond to some of them, I tend to look at the inner click as a progressive enhancement. The whole {card|row|item} is clickable and would lead you to the right place, and the inner click is potentially a refinement of that link, like the Walmart example where the inner link already chooses a color for a shirt that the outer link would lead to.
If the inner link is a progressive enhancement, sometimes missing it and clicking on the outer link by mistake is perhaps acceptable?
i think you are thinking of this in the entirely opposite way i am. since the inner element, the actual hyperlink for the item, is the thing that would need to be actionable / keyboard accessible / identified as a hyperlink.
the outer 'card' or row, for instance, is not an interactive element. it should not generally be keyboard accessible, and in many cases wouldn't be expected to be. This is one reason why people 'hack' this now with hyperlinks that overlay the larger clickable area. because it's a hyperlink that people using keyboard or assistive technology would expect to interact with.
additionally, my comments about the potential for nested interactives extends to the fact that often these sorts of components consist of a couple if not a handful of other links / buttons that are secondary actions and not related to the outside click (some might take you to the same page... some don't - or in the case of favoriting, deleting, etc. for such items, those controls might be on the subsequently linked page, but falling back to that is not a reasonably equitable UX if someone is trying to favorite/delete a bunch of items on one page, rather than having to navigate to a page, perform action, navigate back, find new item, perform same action sequence again...). i realize you were not commenting on all of my points, but these would still be usability issues regardless.
so no. i'm afraid we're not aligned in what we'd consider acceptable here. i'm wondering now if i imposed my own assumptions on how this could be helpful and accessible onto something that hasn't actually yet accounted for the latter.
Yeah, I was also going to ask about the "nested interactive elements" aspect here, but I think @scottaohara beat me to it. I agree it's worth clarifying what your expectations for this sort of thing are regarding tab order and keyboard navigation, exposure to assistive technology (where my understanding is that nested interactive elements are often problematic), exposure to any other UA features that enumerate/navigate links, etc.
Yeah, I was also going to ask about the "nested interactive elements" aspect here, but I think @scottaohara beat me to it. I agree it's worth clarifying what your expectations for this sort of thing are regarding tab order and keyboard navigation, exposure to assistive technology (where my understanding is that nested interactive elements are often problematic), exposure to any other UA features that enumerate/navigate links, etc.
Currently the idea is that the external element would not be part of the tab order / default keyboard navigation, and would only extend the clickable area and potentially additional items in the context menu like "open in a new tab".
i think you are thinking of this in the entirely opposite way i am. since the inner element, the actual hyperlink for the item, is the thing that would need to be actionable / keyboard accessible / identified as a hyperlink.
I think I misrepresented the example. I was thinking of a situation where there is more than one link - one being the "default" link which the enclosing element delegates to, and additional ones that go "deeper", like pre-choosing a color. This would enhance the click area of the default link but won't do much for the other ones.
the outer 'card' or row, for instance, is not an interactive element. it should not generally be keyboard accessible, and in many cases wouldn't be expected to be. This is one reason why people 'hack' this now with hyperlinks that overlay the larger clickable area. because it's a hyperlink that people using keyboard or assistive technology would expect to interact with.
Yup, there are no plans to make these outer elements keyboard interactive. All they do is delegate the click area (and potentially some context menu items) to the link.
additionally, my comments about the potential for nested interactives extends to the fact that often these sorts of components consist of a couple if not a handful of other links / buttons that are secondary actions and not related to the outside click (some might take you to the same page... some don't - or in the case of favoriting, deleting, etc. for such items, those controls might be on the subsequently linked page, but falling back to that is not a reasonably equitable UX if someone is trying to favorite/delete a bunch of items on one page, rather than having to navigate to a page, perform action, navigate back, find new item, perform same action sequence again...). i realize you were not commenting on all of my points, but these would still be usability issues regardless.
Absolutely. Having nested links that act in a way that conflicts with the default link is a usability issue here we have to address. I wonder if having something like this in the web platform gives us more opportunities to address this than letting people hack around it with z-index
. If we arrive at the conclusion that it just adds more footguns, we won't do it.
I'm seeing a bunch of concerns about a11y for this pattern. I want to clear the air and explain that we at Meta (while working on facebook.com) arrived at this exact solution to solve our a11y problems.
The use-case has been described well. Imagine a card, say to a profile. This card contains a big profile photo followed by the username in large font-size which is also a link to the profile page of this user.
Further down, there are a few action buttons to say, message the user, follow them, etc.
The card, as-is, is already accessible. There are no nested interactive elements and everything has the correct labels for screenreader users. Now, if we want to make the whole card clickable and to act as a link to the user's profile what are our options?
absolute
positioning on the <a>
around the username and make it as big as the card itself and then use z-index
to ensure the other buttons in the card are on top of this link.
aria-describedby
cannot be used safely. Pointing it to the whole card creates nested links in the screenreader text.So, link delegation ends up being a great and simple solution. After going through many other solutions which were all very challenging I proposed this solution to our a11y team internally and it was our best solution to this problem.
div
.It just has a JS click handler which forwards the click to the "target link" within. That's it. It's only a mouse click (and touch) affordance. It automatically ignores any clicks nested interactive elements.
So, overall, this proposal doesn't create any new a11y issues. The links within the card should still be big enough and accessible in all the ways links and buttons should be. The card forwarding its clicks to one of them doesn't change the calculus.
Finally, the concern about large clickable targets making things harder to scroll etc, that's a design issue and not directly relevant to this proposal IMO. There are plenty of large buttons and links that are not cards and do not need nested interactive elements.
I think I misrepresented the example. I was thinking of a situation where there is more than one link - one being the "default" link which the enclosing element delegates to, and additional ones that go "deeper", like pre-choosing a color. This would enhance the click area of the default link but won't do much for the other ones.
thanks for clarifying @noamr - because yes, your prior message made it seem like someone could progressively enhance this proposal by putting an actual link into the container, but could otherwise define this without having a link in there at all. Your follow up alleviates my concern with this as that just seems a misunderstanding now. I appreciate you acknowledging the increased click area for the 'default' link, but that any other 'nested' targets would be whatever size the author made them - which is where my primary concern is, and will likely be something to address via author/design awareness.
re: @nmn's response... your comment appears to be trying to squash the concerns that came about due to noam's follow up to my original comment. as just mentioned, that seemed to be largely a misunderstanding of what he meant when he said "If the inner link is a progressive enhancement, sometimes missing it and clicking on the outer link by mistake is perhaps acceptable?"
your response seems to be very focused on screen reader accessibility. your ending paragraphs seem a bit dismissive about potential issues for target sizes though... Facebook generally does a good job with ensuring targets within larger interactive targets meet the new wcag 2.2 minimum target size. though instagram is an app i have some issues with accidental clicks (or in my case, taps). The most egregious instances though being websites that have sticky videos with dismiss/minimize buttons overlaid on top. The target of the button is often too small and it's hard to click/tap it and not the video (which may then pause the video one was trying to watch, or if the video also has JS click event / overlaid invisible hyperlink - accidental navigation to a new web page can occur).
I do agree with you though, that my concerns here are not "new" a11y issues... nor as I already mentioned were they meant as opposition to the idea (again - where concern arose was due to the now cleared-up misunderstanding). But my point in bringing up target size issues is so that they can be acknowledged. Raising the potential for someone to have an idea of how such instances could potentially be accommodated through a potential standardization of such a feature. Or at the very least, author guidance be provided to help ensure best practices for sizing of nested targets to at least meet wcag minimums. When these sorts of concerns don't get raised, then it becomes less likely they get addressed in any potential work/explainer/spec text or author guidance.
i hope this helps clarify where i'm coming from here, and that i simply want to make sure we think about more than just the screen reader experience. addressing those concerns might have zero actual impact on how this feature is developed - and may end up simply being a unified understanding a messaging on how authors can use this feature and ensure the best UX they can for any nested targets beyond the primary cta/hyperlink
I understand and appreciate your clarification @scottaohara. Sorry for any miscomprehension on my part.
Raising the potential for someone to have an idea of how such instances could potentially be accommodated through a potential standardization of such a feature.
I have an idea here, but they don't feel actually doable.
@nmn I'm struggling to understand:
- The best solution so far is to use
absolute
positioning on the<a>
around the username and make it as big as the card itself and then usez-index
to ensure the other buttons in the card are on top of this link.
…leading to:
So, link delegation ends up being a great and simple solution. After going through many other solutions which were all very challenging I proposed this solution to our a11y team internally and it was our best solution to this problem.
- The outer card container element remains a normal
div
.- It does not have any special role.
- It is not focusable
- It does not behave like a link in anyway
It just has a JS click handler which forwards the click to the "target link" within. That's it. It's only a mouse click (and touch) affordance. It automatically ignores any clicks nested interactive elements.
Is the absolute
positioning solution still the "best solution so far", or are you saying a simple JS click handler is better? If the absolute
solution is still better, why?
@jakearchibald Fair question!
The absolute
positioning solution is the commonly used best solution, and the best solution that doesn't depend on JS.
I believe link delegation is actually a better solution.
i think that's an important qualifier. absolute positioning is the current "best" solution that doesn't involve JS. I'd argue that using JS is really a better solution for tackling this now... but for the fact it necessitates JS which i know people want to avoid.
The Open UI Community Group just discussed Link delegation to descendant
, and agreed to the following:
RESOLVED: Incubate an explainer for a new solution for declarative link delegation
Explainer PR: #1109
As per spec, the
a
element cannot nest, you cannot put links inside links. This is important from an a11y perspective and for other reasons. However, many websites today (e.g. Reddit, Rotten Tomatoes) implement this kind of link "nesting" on their own with somewhat verbose javascript.Proposing to discuss finding a web platform solution for this that would take accessibility and ergonomics into account. This solution might look like link delegation
In the above example, the
link
attribute of thesection
element "delegates" the link to ana
(orarea
) descendant with the given ID. UAs should implement this by making the section's default click action delegate the click to theitem1-link
element, and they may support it in other UI such as right-clicking thesection
.