Minimum bounding box and line wrapping - unclear definition

[dd8]

It's unclear what the following sentence means for line wrapped text:

For components which wrap onto multiple lines as part of a sentence or block of text (such as hypertext links), the bounding box is based on how the component would appear on a single line.

https://www.w3.org/TR/WCAG22/#dfn-bounding-boxes

Does this mean:

a) It's calculated as if the text is truncated at the line wrap - the red box below:

b) It's calculated as if white-space: nowrap is specified and the text overflows into the wider red box:

I couldn't see anything in the understanding document about wrapping and bounding boxes.

[alastc]

Discussion from the WCAG 2.x backlog meeting:

• This shouldn't come up often due to the Inline exception.
• Our interpretation is (b) from the original post.
• It would be useful to add something to the understanding doc for this.

[dd8]

If the interpretation is b) doesn't that mean the center of the bounding box could be off the edge of the device? (i.e. if the wrap was caused by hitting the edge of the viewport).

Maybe I''m missing something, but seems more likely folks would try and hit the center of the box [3] in interpretation a) since they would have no idea where the box center is in interpretation b)

[mbgower]

Draft Working Group Response

The bounding box definition reads as follow:

the smallest enclosing rectangle aligned to the horizontal axis within which all the points of a shape lie. For components which wrap onto multiple lines as part of a sentence or block of text (such as hypertext links), the bounding box is based on how the component would appear on a single line.

The definition is referenced within the context of two SCs, Target Size (Minimum) and Focus Appearance.

Target size usage

Target size contains two exceptions relevant to this discussion, Inline and Spacing.

As Alastair states above, the inline exception means links inside a sentence or block of text do not need to be assessed for target size.

Inline
The target is in a sentence or its size is otherwise constrained by the line-height of non-target text;

Your drawing is fairly abstract, but it appears it is intended to show three links in a block of text, as shown with a bit less abstraction below.

If that is the case, as per the Inline exception, you do not need to assess for the size of inline links. A bounding box would not be used. So both your a and b options are not relevant.

If these were not intended to be links in a sentence, the bounding box definition is clear. You'd assess the size of the target by treating the target as if it was on one line, loosely like so:

The second Target size exception relevant to this discussion is:

Spacing
Undersized targets (those less than 24 by 24 CSS pixels) are positioned so that if a 24 CSS pixel diameter circle is centered on the bounding box of each, the circles do not intersect another target or the circle for another undersized target;

Although you do not assess inline links for size, you are going to calculate the distance between the center of any non excepted under-sized target and the edge of any other target, includuing any part of an inline link to ensure those non-inline targets have sufficient spacing from other targets. In the following illustration, I've added two squares representing targets in close proximity to the block of text. This is not drawn to scale, but for our purposes, we are assuming they are less than 24x24

You must then put a 24px diametre circle centered on each non-inline target (again, not to scale), and see if it overlaps with all other targets. In this situation, the second of the targets' circles overlaps with part of the "3 of 3" target. That square target would fail Target Size due to insufficient spacing.

Focus Appearance usage

Although you didn't mention it, bounding box is also pertinent to the Focus Appearance SC (where it is referenced via the perimeter definition).
In the context of Focus Appearance, bounding box is one of the ways in which a perimeter of a target can be assessed. In that context, you'd calculate the area of the bounding box needed as if the link was on one line, and ensure that the amount of focus indicator shown when the link crosses multiple lines is at least as great an area.

[bruce-usab]

Discussed on WCAG2 Issues call 7/18. Of those present, no one thought "a" (of OP) was the but "b" is not correct without teasing out some assumptions. While we may close this issues as response-only, the question highlights the need for at least one more illustrated example in Understanding.

[mbgower]

Based on discussions with @dbjorge, I think the working group needs to discuss whether an additional step is required to establish the size of the inline target (essentially measuring the spacing from an inline link to the non-inline target).
I believe this needs a discussion, both on how the exemption are applied together, and on what the functional outcome is for a user.

Here is Dan's description of this image pair, and what it is intended to show

A tester doesn't need to bother evaluating whether the word wrapped link meets the spacing exception (because it would be excepted under the inline exception anyway), but does need to draw a circle(s) for the word-wrapped-link in order to determine whether the square target meets the spacing exception. The square target's circle does not intersect any part of the word-wrapped-link, but if you interpret the link as 2 separate targets, the square target's circle does intersect the circle for the one of the two word-wrapped-link targets. Thus, it does not meet the spacing exception.

[mbgower]

Dan and I had a lot of useful discussion on this.

To me, the same logic that exempts inline links from target size requirements applies whether we are considering inline links relative to each other or relative to a non-inline target. That is, they do not have to be assessed for size.
This is explained in the Understanding documents under "Exceptions", in the paragraph beginning:

The success criterion does not apply to inline targets in sentences, or where the size of the target is constrained by the line-height of non-target text.

Inline links are exempt from size requirement. The Spacing exception is specifically for undersized targets; an inline link is never undersized (since it does not have a 24x24 min requirement). So we do not assess inline links for spacing; they don't get a circle centered on them.

However, the inline links are still targets, and so when we assess non-inline targets for spacing, we also ensure that the undersized non-inline targets are spaced far enough from the links (my bold emphasis).

Undersized targets (those less than 24 by 24 CSS pixels) are positioned so that if a 24 CSS pixel diameter circle is centered on the bounding box of each, the circles do not intersect another target or the circle for another undersized target

The outcome of this interpretation of the SC text also makes sense from a functional perspective. A user trying to activate a small inline link is no more constrained by the proximity of a non-inline target than they are by a nearby inline link.

In fact, since the non-inline target has to be spaced sufficiently from the edge of any part of an inline link, inline links can be in closer proximity to one another, both vertically and horizontally -- and will be much more frequently in real life than the hypothetical edge cases we are considering. It's worth remembering that in the original scenario asked about -- a wrapped link -- part of a wrapped inline link will always be spaced far away from our hypothetical undersized target.

I also believe this interpretation results in more straightforward and consistent testing outcomes.

[mbgower]

Regardless of decision, we need to ensure that future WCAG 2 and 3 requirements that contain multiple exemptions are clear in whether/how they are co-applied.

The group also discussed how the inline exemption plays out with floating content (such as Back to top buttons).

[giacomo-petri]

Partially related: #3727

[gundulaniemann]

Does the "1" belong to the very same link? If so, why does the link receive two circles?
The intention of the requirement is, that the user does not unintendedly activate a target. Not overlapping with the reacting part of the link target is sufficient for the box target in my point of view. The wrapped link should receive only one circle.
On the other hand, it is absolutely no problem when authoring to ensure a better spacing between box and text.

Consequently, the decided part of my opinion is: I fully agree with Mike (citing) "we need to ensure that future WCAG 2 and 3 requirements that contain multiple exemptions are clear in whether/how they are co-applied.".