- From: Phill Jenkins <pjenkins@us.ibm.com>
- Date: Mon, 26 Jul 2021 13:48:53 -0500
- To: "WAI Interest Group" <w3c-wai-ig@w3.org>, public-act-r@w3.org
- Message-ID: <OFA0FCEE61.80F75B0C-ON0025871E.00608D3F-8625871E.00675A34@ibm.com>
opacity is an attribute that is often used to hide a UI element from sighted users. This is equivalent (or similar) to the 'height' case: an element with 0 px height is hidden, but 1 px and greater may be 'visible.' see discussion on https://stackoverflow.com/questions/9056855/how-does-css-opacity-affect-accessibility <div style='opacity:0;'><img src="about:blank" /></div> Some informal screen reader testing shows that: - VoiceOver on Mac Desktop: opacity:0 is ignored, but image 'alt' is announced if present. - VoiceOver on Mobile: opacity:0 and smaller than 5x5 are ignored, but image greater than 5x5 px 'alt' is announced if present. - JAWS & NVDA on Windows Desktop: opacity:0 is ignored, but any images greater than 10x10 px 'alt' is announced if present 1. Is there an updated/maintained reference that documents this behavior for combinations of screen readers with browsers with opacity and/or image size? 2. Is there a list of best practices that are recommended? 3. Also, the HTML spec says opacity cannot be overridden by a child element. Some accessibility checkers do not check for invalid attempt of child elements trying to override parent, should the checkers (and/or code validators) call out this invalid HTML? not sure if it is needed - your thoughts? __________ Regards, Phill Jenkins See the new IBM Equal Access toolkit and accessibility checker at www.ibm.com/able pjenkins@us.ibm.com Accessibility Executive IBM Accessibility
Received on Monday, 26 July 2021 18:49:14 UTC