"Meaningful images should not be used in element backgrounds" defeats the presentation layer principle

[ericmorand]

This rule looks very bad to me:

https://github.com/GoogleChrome/accessibility-developer-tools/wiki/Audit-Rules#ax_image_01

Icons are not content, they are pure presentation layer elements. Advising people to use <img> or <picture> tag to display icon defeat the whole purpose of the presentation layer - i.e. CSS.

Using those tags instead of pure presentation layer approach (background-image) makes the content layer responsible for the presentation. That means that there is no way to change the way a button looks like without changing the HTML markup - the content layer.

I'm aware that there may be currently no other way to have high contrast mode works with pure presentation layer approach but the problem should be solved in the system where the problem actually occurs (i.e. the OS and/or browser that should be able to display background-image in high contrast mode) instead of advising people to use workarounds that defeats the presentation layer principle.

[thejamespower]

Completely agree. If the icon is purely presentational (i.e, decorative) and the developer has provided accompanying text or at the very least some other semantic/accessible way for users to discern the control represents (aria, labels etc) then this warning is irrelevant.