Updates to Understanding 1.4.11 part 2

Hi everyone,

After the last call I went through the previous examples and discussion, trying to define a pass/fail decision tree that we could agree. That will make updating the understanding doc easier.

This captures what I took from the discussion, it would be good to see if others (especially John & Jon) agree:

NB: It is important to consider Focus Visible (2.4.7) and Text Contrast (1.4.3) during this process.
For each active UI component styled by the author (including colours behind/adjacent to the component) the following must be true:

  1.  Does it have indicator(s) of the component's existence and approximate boundary? That can be:
     *   Text or graphical content that identifies the component.
     *   A background, border or other visual indicator of the component.

  2.  Do the indicators (from 1) have sufficient contrast? (4.5:1 for text, 3:1 for graphics or large text)

  3.  Does the focus state either:
     *   Add something to the component (such as an external border/outline/graphic) that contrasts (3:1) with either the adjacent colours or with the component, or
     *   Change a colour of the component by at least a 3:1 level of contrast, and maintain the indicators contrast (from 1).

  4.  For other states where there is a visible change of the component, is the state represented by either:
     *   Text or graphical content (e.g. an icon that changes shape or direction, or a change of pointer), or
     *   A change a colour of the component by at least a 3:1 level of contrast, and maintain the indicators contrast (from 1).


Using that I went through all the previous examples Andrew collated, plus a couple more, and after 100 or so screenshots, here are the results:
https://alastairc.ac/tests/wcag21-examples/non-text-contrast.html


Sorry for the huge table and lack of alt text, but I couldn’t see another way of doing it in the time available. The red/green highlighting is used where I’m confident we’ll agree, the white ones have some nuance worth checking (in bold).

# Exception for browser-supplied styling

Two of the examples (2 & 7) highlight the issue where the site uses the browser-default focus style, but has styled the other aspects of the component and the background. BUT, the background is the same as the (usual) white browser background.

NB: The focus style in Mac Safari & Chrome is 2:1 or less on a white background.

This means that:

  *   Someone testing in Windows could pass those examples, someone testing on a Mac would fail it.

  *   We incentivise authors to override the default focus styles, which may make the focus style worse for some people who like the default, or have customised their browsers default style.

  *   Authors over-riding outline run into the ‘focus on click’ issue, where a click activates the focus style, which then leads some designers / marketing folk to insist it is removed [1].

My advice to people in training prior to 2.1 was the minimal ‘zen’ approach: Leave outline on links/buttons/inputs alone, don’t touch it. If you change the background or find in testing that it is not obvious, use another method of highlighting focus such as changing background colour on the component.

I’ll go with the group, but personally feel that the overall impact of the guideline would be better if we interpret this: “the appearance of the component is determined by the user agent and not modified by the author”, as meaning a change to the focus indicator (or any default state indicator), not the component & surroundings as a whole.

A very common bit of CSS is:
body {background-color: #fff;}

The use of that means the exception never applies, so authors are punished for poor browser defaults.

# Other assumptions

Whilst going through the examples, I found these little cases where I had to make an assumptions, do people agree with these?


  *   A menu that expands (e.g. on-hover / onclick pop-up menus) doesn't need an indicator, the appearance of the new menu is an indicator.
  *   A link in a navigation that indicates "you are on this page" is a state. (A form of "selected"?)
  *   A border getting thicker (or text becoming bold) is a change in indicator and is not relying on contrast.
  *   Just putting the carrot in a text input does not constitute a pass (which is sort-of different from hover, where change of pointer is considered enough).
  *   Separate labels (i.e. part of label-input pairs) do not count as a visual indicator of the component unless they are both wrapped in a visual indicator, e.g. a common border/background.

Cheers,

-Alastair

1] https://alastairc.ac/2016/09/fixing-outlines-on-click/


--

www.nomensa.com<http://www.nomensa.com/> / @alastc