AX: Support reader media type for CSS-generated content overrides

• Component: Accessibility
• Status: RESOLVED WONTFIX

[James Craig]

Created attachment 205532 [details]
test case

Support reader media type for CSS-generated content overrides

* STEPS TO REPRODUCE
1. Open attached text case.

* RESULTS
VoiceOver speaks "down point black pointer" (OSX) or "down pointing triangle" (iOS) depending on what system you use.

Expected VoiceOver to not speak that character.

* REGRESSION
No

* NOTES
I originally thought this would be a simple string replacement, but it turns out to be a "down pointing triangle" unicode character in the CSS-generated content of the :before pseudo-element. It's actually a text character, so it's the text-to-speech (TTS) engine on the desktop (and VO on iOS) that's replacing this character with the dictionary string, "downward pointing triangle." In most cases, this is what we'd want, so I don't consider this a "bug" in VoiceOver or the TTS components.

.foo:before {
  float: right;
  content: "\25BC"; /* aka  ▼ */
  font-size: 9px;
  margin: 4px 0 0 4px;
  color: #878787;
}

This means there is no element on which to hang an aria-label or aria-hidden attribute, so there's currently no good resolution for this problem.  With image replacement techniques, CSS allows for a text fallback.

Example:
  content: url(arrow.png), ""; /* more or less equivalent to an element with an empty alt attr */

In theory this would prevent the image from being in the AX tree, because it's decorative and the semantics are already implicit (from the role of HTMLSelectElement) or explicit (via the aria-haspopup attribute).

However, since "\25BC" is already text, there is no point to attempting text fallback for text.
  content: "\25BC", ""; /* this doesn't do anything other than display the original character */

WebKit will probably need to support the "reader" media type to remove the redundancy here, which would make the CSS look something like this:

.foo:before {
  float: right;
  content: "\25BC"; /* aka  ▼ */
  font-size: 9px;
  margin: 4px 0 0 4px;
  color: #878787;
}
@media reader {
  .foo:before {
    content: "";
  }
}

Or even:
@media reader {
  .foo:before {
    display:none; /* equivalent to adding aria-hidden="true" on the psuedo-element, if you could do that */
  }
}

[James Craig]

<rdar://problem/12693314>

[James Craig]

Supplanted by CSS alt, etc. Closing.