SC 2.4.11: Make clearer the method of calculating the minimum area

[momdo]

https://www.w3.org/WAI/WCAG22/Understanding/focus-appearance-minimum

In the Understanding, the following text:

For example, if a control is a rectangle of 90px wide and 30px tall, the size of the outer border is 90 + 90 + 30 + 30 = 240 CSS pixels. You then must subtract the 4 corner pixels (which are counted twice, both horizontally and vertically), for a total minimum area of 236 CSS pixels.

is accompanied by Figure 2 to explain the calculation method, but there are aspects that are unclear.

Defining CSS2 and Using CSS Box Model [1] terminology that replaces CSS Box Model Level 3 would improve clarity. It should be made clearer and explained which part using the CSS Box Model is used to calculate minimum area in the diagram and equation. When reading the current explanation in the Understanding with the Success Criterion makes it difficult to determine whether the success criterion is satisfied.

In addition, for applicable user interface components, for (normal) rectangles that can be implemented using CSS, it would be clearer if they were divided, such as by those that have Rounded Corners [2] as defined in the CSS Backgrounds and Borders Module and those that can be implemented using CSS Shapes [3]. (It is already done somewhat for the Unusual shapes and gradients section)

Also, it would be helpful in understanding this success criterion if examples of the criterion being satisfied and the criterion not being met are provided.

[1] https://www.w3.org/TR/css-box-3/#box-model
[2] https://www.w3.org/TR/css-backgrounds-3/#corners
[3] https://drafts.csswg.org/css-shapes-1/

[alastc]

Some initial comments & questions on this issue.

I'm not sure what you mean by this:

Defining CSS2 and Using CSS Box Model [1] terminology that replaces CSS Box Model Level 3 would improve clarity.

We are not using CSS terminology directly, unless called-out and linked (e.g. the CSS pixel).

The line from above your quoted section is: "the minimum area of the focus indicator must be at least as large as the area of a 1 CSS pixel thick perimeter (border) of the control in its unfocussed state".

That appears to explain the calculation, to me at least.

It should be made clearer and explained which part using the CSS Box Model is used to calculate minimum area in the diagram and equation.

We are intentionally not using the box-model directly, as the criteria should be technology-agnostic. We don't want to clash with CSS terms, but it is not based on the box-model as we need to be able to apply this criteria to non-CSS based shapes, e.g. in canvas, PDF etc.

it would be helpful in understanding this success criterion if examples of the criterion being satisfied and the criterion not being met are provided.

There are 18 figures, most of which indicate a passing/failing state for the example. Are there particular examples it would help to add?

[momdo]

Thanks for reply.

We are intentionally not using the box-model directly, as the criteria should be technology-agnostic. We don't want to clash with CSS terms, but it is not based on the box-model as we need to be able to apply this criteria to non-CSS based shapes, e.g. in canvas, PDF etc.

I understand that it needs to be technically neutral, but I feel that the explanation method like the CSS Box Mode will be helpful in expressing precision.

There are 18 figures, most of which indicate a passing/failing state for the example. Are there particular examples it would help to add?

I think that it is necessary to show the numerical (pixel) values in the figure, as in the examples on Understanding Success Criterion 2.5.8.

[alastc]

I had another look at referencing and using the box-model, but I think it would make the situation worse.

The reason is that the indicator could be around the content, content+padding, or content+padding+border. If it doesn't have a visible padding and/or border, it doesn't help you define it.

That's why the definition we use of perimeter is based on the visuals, i.e. the pixels included in the element.

That might align with the border, but it might not.

The figures within the sizing section of the Understanding document now have pixel values.

[alastc]

Agreed response:

---

The AG WG discussed, and we do not think it would be helpful to relate the calculations to the CSS box model. The visible boundary of the element (if there is one) is more important than whether the boundary is at the edge of the content, padding, or border.

The figures in the sizing area now have pixel values, and those talking about contrast have hex values.

[alastc]

Closing (late, sorry)