[Webkit-unassigned] [Bug 118096] New: Support reader media type for CSS-generated content overrides

[bugzilla-daemon at webkit.org]

https://bugs.webkit.org/show_bug.cgi?id=118096

           Summary: Support reader media type for CSS-generated content
                    overrides
           Product: WebKit
           Version: 528+ (Nightly build)
          Platform: Unspecified
        OS/Version: Unspecified
            Status: UNCONFIRMED
          Severity: Normal
          Priority: P2
         Component: Accessibility
        AssignedTo: webkit-unassigned at lists.webkit.org
        ReportedBy: james at cookiecrook.com


Created an attachment (id=205532)
 --> (https://bugs.webkit.org/attachment.cgi?id=205532&action=review)
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 */
  }
}

-- 
Configure bugmail: https://bugs.webkit.org/userprefs.cgi?tab=email
------- You are receiving this mail because: -------
You are the assignee for the bug.