<span class=\"icon-fallback-glyph\">\r\n <span class=\"icon icon-hamburger\" aria-hidden=\"true\"><\/span>\r\n <span class=\"text\">Menu<\/span>\r\n<\/span><\/code><\/pre>\nNow the icon itself is hidden (because it uses a weird meaningless font), but there is real text there that can be read as expected by AT. You can hide the text visually as well. Assuming you have some feature testing in place here’s the CSS that hides\/shows as needed:<\/p>\n
.icon-fallback-text .icon {\r\n display: none;\r\n}\r\nsupports-fontface.supports-generatedcontent.icomoon .icon-fallback-text .icon {\r\n display: inline-block;\r\n}\r\n.supports-fontface.supports-generatedcontent.icomoon .icon-fallback-text .text {\r\n clip: rect(0 0 0 0);\r\n overflow: hidden;\r\n position: absolute;\r\n height: 1px;\r\n width: 1px;\r\n}<\/code><\/pre>\nRemember linked icons too!<\/h3>\n
If an icon (any of these ways) is a link, make sure there is either regular HTML text in there that clearly announces what it does, or, you provide an aria-label that does:<\/p>\n
<a href=\"link\" aria-label=\"See Picked Pens\">\r\n <svg> \r\n <use xlink:href=\"#icon-codepen\"><\/use>\r\n <\/svg>\r\n<\/a><\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"Here’s a question I got the other day? Would you suggest icon fonts or inline SVGs for a complex single page application? And are there specific accessibility concerns for either? Accessibility is especially important for us because schools use our products. I ask because we are currently in the process of unifying and setting up […]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":[]},"categories":[4],"tags":[466,626],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"","jetpack-related-posts":[],"featured_media_src_url":null,"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/254942"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=254942"}],"version-history":[{"count":5,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/254942\/revisions"}],"predecessor-version":[{"id":255443,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/254942\/revisions\/255443"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=254942"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=254942"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=254942"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}