opacity, image size, and screen reader behavior

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