Image replacement using atomic "Hidden" helper class and aria-hidden #402
shwetatyagi31
started this conversation in
Ideas
Replies: 0 comments
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
There are many image replacement techniques available on google, initially, I used 2008: Phark with Inline Image Method.
HTML:
CSS:
h3.phark2 {
width: 300px;
height: 75px;
background: url(path/to/example.svg);
text-indent: -9999px
}
Most of the techniques used only background images but for a reason, I want to use inline image and in the above one there is both inline (may be used for SEO purposes) and background image but I want something that will reduce the writing of manual CSS and the code should be WCAG compliant, so I used the 'Hidden' class of atomic CSS and aria-hidden attribute.
Any suggestions or feedback if we can improve the below HTML.
Beta Was this translation helpful? Give feedback.
All reactions