Re: WCAG 2.2 status - Visual indicators

Hi everyone,

Just to follow-up with an observation about the alternative wording version. (The one which requires it doesn’t break when you apply certain styling to highlight controls).

The CSS David suggested works fairly well on most sites, I’ve added a couple of things [1] to capture more controls, but generally it works.

Not working instance:
Where someone who knows quite a lot about accessibility has hidden the actual control (e.g. a button) behind a styled control, the CSS won’t have any effect.

For example, you have a fancy toggle button (including focus indicator), but the actual button is hidden behind that display. In that case the CSS won’t show anything because it is acting on the hidden control, not the visible one.

This approach would not fail the wording of the SC as it is a ‘does not break things’ approach, but from a user point of view you’d have odd gaps.

A quick visual example: https://alastairc.uk/tmp/buttons-hidden.mp4  (tabbing through the interface, and then turning on the visual indicators CSS).

Where affordances matter:
Browsing with the CSS on, there are some interfaces where it is completely overwhelming. IRC Cloud is an example, around 50% of the interface is a link or control.

It occurs to me there is assumption that we need to understand and include somehow:

  *   Finding a control is based on the desire to achieve something, not the recognition of what is interactive.

For example, in the IRC cloud client everyone’s name is a button. That button is integrated into the content. Does it matter that you can’t tell it is interactive? If you want to message someone, click on their name. the design to do something comes first, then the interface allows it in every way possible.

The process is:

  *   I want to do something (e.g. message someone in IRC, rate a product etc.)
  *   I scan the interface for that thing.
  *   I click/select the first thing that might achieve that.

I’m not saying it is a good or bad thing, but it is a very different assumption about how interfaces should work.

Cheers,

-Alastair

1] My current CSS for Stylus:
button, [role="button"], input[type=submit], [role="listbox"], [role="tab"] {
    box-shadow: inset 0 0 0 2px #036, 0 0 3px 1px yellow !important;
    outline: white !important;
}
a:link, [role="link"] {
    text-decoration: underline;
}