[Webkit-unassigned] [Bug 168447] New: AX: when invert colors is on, double-invert certain media elements in UserAgentStyleSheet

[bugzilla-daemon at webkit.org]

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

            Bug ID: 168447
           Summary: AX: when invert colors is on, double-invert certain
                    media elements in UserAgentStyleSheet
    Classification: Unclassified
           Product: WebKit
           Version: WebKit Nightly Build
          Hardware: All
                OS: All
            Status: NEW
          Severity: Normal
          Priority: P2
         Component: Accessibility
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: jcraig at apple.com
                CC: webkit-bug-importer at group.apple.com

AX: when invert colors is on, double-invert certain media elements in UserAgentStyleSheet

Many low-vision users use the "invert colors" setting on macOS and iOS to quickly flip the foreground/background colors of content. This makes it easier for them to read (light-text-on-dark-background instead of dark-text-on-light-background) but has the unfortunate side effect of inverting photographs and videos.

The <video> case seems relatively straightforward to resolve in UASS:

@media (inverted-colors) {
  video { filter: invert(100%); }  /* Poster and playback views double-inverted. */
  video::-webkit-media-controls { filter: invert(100%); } /* Triple-inverted: don't invert the buttons. */
}

But the <img> case needs a little more thought. Here are some pros and cons of possible heuristic solutions. For brevity, I'm only using the <img> selectors, but we'd need to duplicate selectors for the <picture> element.

/* 1. Invert all images. Con: Too many false positives for non-photo images (GIFs of text, decorative images, etc.) */
@media (inverted-colors) { img { filter: invert(100%); } }

/* 2. Invert all images except GIFs. Con: Too many false negatives, but probably okay as a start, as @alt usually indicates "foreground" image. */
@media (inverted-colors) { 
  img { filter: invert(100%); }
  img:not([alt=""]) { filter: invert(0%); } /* Avoid inverting images without @alt. Con: Author override needs to be very explicit. */
}

/* 3. Invert all images except GIFs. Con: Too many false positives with PNGs of text. */
@media (inverted-colors) { 
  img { filter: invert(100%); }
  img:not([src$=".gif"]) { filter: invert(0%); } /* Avoid inverting GIFs. */
}

/* 4. Invert only JPEGs. Pro: Most safe. Con: Possibly too many false negatives since we never know with PNGs. */
@media (inverted-colors) { 
  img[src$=".jpg"], img[src$=".jpeg"] { filter: invert(100%); }
}

-- 
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <https://lists.webkit.org/pipermail/webkit-unassigned/attachments/20170216/41cca4da/attachment.html>