118096 2013-06-26 15:57:01 -0700 AX: Support reader media type for CSS-generated content overrides 2016-02-23 19:53:02 -0800 1 1 1 Unclassified WebKit Accessibility 528+ (Nightly build) Unspecified Unspecified RESOLVED WONTFIX InRadar P2 Normal --- 0 jcraig webkit-unassigned jcraig webkit-bug-importer oldest_to_newest 903951 0 205532 jcraig 2013-06-26 15:57:01 -0700 Created attachment 205532 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 */ } } 903953 1 jcraig 2013-06-26 15:57:40 -0700 <rdar://problem/12693314> 1167647 2 jcraig 2016-02-23 19:53:02 -0800 Supplanted by CSS alt, etc. Closing. 205532 2013-06-26 15:57:01 -0700 2013-06-26 15:57:01 -0700 test case 12693314.html text/html 342 jcraig PHN0eWxlIHR5cGU9InRleHQvY3NzIj4Kc3BhbiB7CglkaXNwbGF5OmlubGluZS1ibG9jazsKfQpz ZWxlY3QgewoJLXdlYmtpdC1hcHBlYXJhbmNlOiBub25lOwoJYm9yZGVyOm5vbmU7CglkaXNwbGF5 OmlubGluZTsKfQpzcGFuOmJlZm9yZSB7CglmbG9hdDpyaWdodDsKCWNvbnRlbnQ6ICJcMjVCQyI7 Cglmb250LXNpemU6IDlweDsKCW1hcmdpbjogNHB4IDAgMCA0cHg7Cgljb2xvcjogIzg3ODc4NzsK fQpAbWVkaWEgcmVhZGVyIHsKCXNwYW46YmVmb3JlIHsKCQljb250ZW50OiAiIjsKCX0KfQo8L3N0 eWxlPgo8c3Bhbj48c2VsZWN0PjxvcHRpb24+VGVzdDwvb3B0aW9uPjwvc2VsZWN0Pjwvc3Bhbj4K