fluentui v9 links default styling and Success Criterion 2.4.7 Focus Visible

[nikki9696]

Hi friends,

My QA tester thinks links must have a border around them (a box) to pass Success Criterion 2.4.7 Focus Visible. The fluent default for v9 Links is to have focused links have a double underline. I am debating with him that this passes the criteria and he's looking at the Examples section here https://www.w3.org/WAI/WCAG21/Understanding/focus-visible.html

Can someone clarify for me if this is a Fluent bug for accessibility? Either I or my QA person needs to have better understanding of how to read the success criterion?

Thanks!

[ValentinaKozlova]

@nikki9696, as far as I know, double-focus doesn't violates Success Criterion 2.4.7 Focus Visible.
Though, there's always a possibility to customize the focus in your components.
CC: @smhigley

[nikki9696]

Thank you!

[smhigley]

yup, there was at one point a proposal to have a WCAG criterion specifying the minimum area of a focus indicator, but it never made it into the final draft. As it is, Focus Visible requires a visible focus indicator of any sort (for which the double underline does count, since it's a visual change that happens on focus), and Non-Text Contrast combined with Focus Visible requires the focus indicator to pass 3:1 contrast (which the underline does).

That said, for better usability, I think a border/outline is better. But yeah, the double underline doesn't fail. The section you marked up that references "a visible border" is under the "Examples" heading, which provides examples of how one might meet the criterion. However, those are not themselves requirements for how to meet it.