Get WordPress button not in compliance with WCAG 2.2

[estelaris]

Based on the new WCAG 2.2 success criteria, the "Get WordPress" button on the homepage doesn't pass 2.4.13 Focus Appearance (AAA) that indicates the :focus selector is set to outline: 2 px solid;

There is a similar problem with the button in the Header on other pages, where the outline: none but has a box-shadow: 0 0 0 1.5 px in a light blue. The light blue color (#7b90ff) has good contrast with the black background but not with the blue of the button, which is only a 1.94:1 color contrast ratio.

[ryelle]

The WordPress.org site aims to meet WCAG AA, not AAA. Level AAA guidelines are stricter, AA does not have a focus appearance requirement.

The guidelines for accessible focus appearance were considered when the focus states were designed, but ultimately it was decided to use this and not meet the higher AAA requirement.

[jasmussen]

Just following up here, we discussed this in the core #design slack channel as well, and my impression was that this wasn't to do with AAA but rather WCAG 2.2 AA adjustments.

That said, I don't fully understand the "Get WordPress" button in the canvas, I'd appreciate elaboration on what the problem with that focus style is.

For the header though, the light blue might need to be a halo outside of the button instead, like so:

[ryelle]

Right, there are new rules in WCAG 2.2, across all levels. This one is a new AAA rule. The article that prompted this is clear, the button fails "2.4.13 Focus Appearance (AAA)".

I don't fully understand the "Get WordPress" button in the canvas, I'd appreciate elaboration on what the problem with that focus style is.

If we wanted to meet WCAG AAA, the focus state needs to have a change of surface area equivalent to at least 2px outer border, with contrast of at least 4.5:1 against the changed pixels. Some examples that would meet this: a full background change, or a 2px outer border that contrasts against the background color, or a 4px inner border that contrasts against the button color.

The Download button in the content does not pass because the changed pixels on focus don't add up to enough. If we made that white inset 2.5px wide instead, that would gain enough area to pass AAA.

The Download button in the header does not pass because it's only 1.5px. If we made that border 2px, it would pass this rule. But if we just added that gap, it would not increase the changed surface area enough to pass AAA.

This article is what I used to understand this, it also has some good illustrations to clarify the "surface area" requirement.

For the header though, the light blue might need to be a halo outside of the button instead, like so:

According to 1.4.11 Non-text Contrast (AA), that outline should have a contrast of at least 3:1 against the background & button both (adjacent colors), so it does fail AA here. Adding this gap would fix that. 👍🏻

If this is the solution you want, can you add that on to this issue?

[jasmussen]

Appreciate that clarification. Yep, we keep AA, for AAA we can always explore a mode in the future if need be. I guess there is no action after all, apologies!