< Back to Demos | Learn more at PaulJAdam.com >

SVG Accessible Logo Images, Links, and Buttons Examples

VoiceOver bugs: VoiceOver Safari macOS & iOS will not focus or read a static IMG element with a SVG src unless role=img is added. VoiceOver Safari macOS & iOS will read the alt text of a linked image but it will not see it as an image only a link unless role=img is added.

Linked SVG Images

W3C® MEMBER Twitter

Static SVG Images

W3C® MEMBER W3C® MEMBER Twitter Twitter

SVG Buttons

SVG HTML5 Logo

No ARIA

HTML5 Logo The text HTML is in all caps on top of a large orange badge with the number 5. HTML 5 Sorry, your browser does not support inline SVG.

Add ARIA

HTML5 Logo The text HTML is in all caps on top of a large orange badge with the number 5. HTML 5 Sorry, your browser does not support inline SVG.

aria-label and role=img only

HTML 5 Sorry, your browser does not support inline SVG.