{"id":288636,"date":"2019-06-03T14:42:14","date_gmt":"2019-06-03T21:42:14","guid":{"rendered":"http:\/\/css-tricks.com\/?p=288636"},"modified":"2019-06-03T14:42:14","modified_gmt":"2019-06-03T21:42:14","slug":"do-you-need-an-icon-only-button-without-screwing-up-the-accessibility","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/do-you-need-an-icon-only-button-without-screwing-up-the-accessibility\/","title":{"rendered":"Do you need an ICON ONLY button without screwing up the accessibility?"},"content":{"rendered":"<p>The first consideration is: <em>do you really?<\/em> If you can, having text next to your icons is proven over and over again to be the most accessible and clearest <abbr>UX<\/abbr> (see Apple&#8217;s <a href=\"https:\/\/mjtsai.com\/blog\/2019\/05\/22\/mac-toolbar-labels-and-accessibility\/\" rel=\"noopener\">latest blunder<\/a>). But if you need to (and I get it, sometimes you need to), Sara Soueidan and Scott O&#8217;Hara have a pair of articles that nicely lay out all the options and present actual research on this topic.<\/p>\n<ul>\n<li>Sara Soueidan: <a href=\"https:\/\/www.sarasoueidan.com\/blog\/accessible-icon-buttons\/\" rel=\"noopener\">Accessible Icon Buttons<\/a><\/li>\n<li>Scott O&#8217;Hara: <a href=\"https:\/\/www.scottohara.me\/blog\/2019\/05\/22\/contextual-images-svgs-and-a11y.html\" rel=\"noopener\">Contextually Marking up accessible images and SVGs<\/a><\/li>\n<\/ul>\n<p><!--more--><\/p>\n<p>If you just want to be told what to do, I&#8217;d go for the <em>just use some text in the button<\/em> approach:<\/p>\n<pre rel=\"HTML\"><code class=\"language-markup\">&lt;button aria-expanded=\"false\" id=\"menu-trigger\"&gt;\r\n   &lt;svg viewBox=\"0 0 32 32\" width=\"32px\" height=\"32px\" \r\n     aria-hidden=\"true\" focusable=\"false\"&gt;\r\n     &lt;!-- svg content --&gt;\r\n    &lt;\/svg&gt;\r\n    Menu\r\n&lt;\/button&gt;<\/code><\/pre>\n<p>Sara says <strong>There is no One Way to Rule Them All<\/strong>, but it does seem like you <em>really need to use actual text<\/em> inside that button and either hide it or override it somehow. <abbr>SVG<\/abbr> alone has no rock solid way to provide an accessible name to a button or link.<\/p>\n<p>Funny how <a href=\"https:\/\/humanwhocodes.com\/blog\/2013\/04\/01\/making-accessible-icon-buttons\/\" rel=\"noopener\">long<\/a> this has been a tricky pattern to get right.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The first consideration is: do you really? If you can, having text next to your icons is proven over and over again to be the most accessible and clearest UX (see Apple&#8217;s latest blunder). But if you need to (and I get it, sometimes you need to), Sara Soueidan and Scott O&#8217;Hara have a pair [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":288827,"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":true,"jetpack_social_options":[]},"categories":[4],"tags":[466,626,469],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/06\/buttons-labeless.png?fit=1200%2C600&ssl=1","jetpack-related-posts":[{"id":286528,"url":"https:\/\/css-tricks.com\/inclusively-hidden\/","url_meta":{"origin":288636,"position":0},"title":"Inclusively Hidden","date":"April 19, 2019","format":false,"excerpt":"Scott O'Hara recently published \"Inclusively Hidden,\" a nice walkthrough of the different ways to hide things on the web. Nothing is ever cut and dry when it comes to the web! What complicates this is that hidden begs the question: hidden for whom? Different answers to that have different solutions:\u2026","rel":"","context":"In &quot;Link&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/04\/rabbit-in-a-hat.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":331142,"url":"https:\/\/css-tricks.com\/accessible-svg-icons\/","url_meta":{"origin":288636,"position":1},"title":"Accessible SVG Icons","date":"December 28, 2020","format":false,"excerpt":"The answer to \"What is the most accessible HTML for an SVG icon?\" isn't one-size-fits all, because what an icon needs to do on a website varies. I'm partial to Heather Migliorisi's research on all this, but I can summarize. Extremely quickly: hide it if it's decorative, title it if\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/12\/accessible-icons.png?fit=1200%2C789&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":289109,"url":"https:\/\/css-tricks.com\/a11y-with-lindsey\/","url_meta":{"origin":288636,"position":2},"title":"A11Y with Lindsey","date":"June 13, 2019","format":false,"excerpt":"Lindsey Kopacz has a wonderful blog about accessibility. I've seen a number of her articles making the rounds lately and I was like, dang I better make sure I'm subscribed. For example: An Introduction to ARIA States 3 Simple Tips to Improve Keyboard Accessibility Create custom keyboard accessible checkboxes Regarding\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/07\/accessibility-logo-feature.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":175074,"url":"https:\/\/css-tricks.com\/mega-list-svg-information\/","url_meta":{"origin":288636,"position":3},"title":"A Compendium of SVG Information","date":"July 22, 2014","format":false,"excerpt":"A huge pile of information about SVG. How to Use SVG These are overview articles covering lots of stuff relating to SVG. Why to use it and the basics of how to use it. Mostly: , background-image, , , and \/. Using SVG by me SVG on the Web \u2014\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":354581,"url":"https:\/\/css-tricks.com\/some-articles-about-accessibility-ive-saved-recently-iv\/","url_meta":{"origin":288636,"position":4},"title":"Some Articles About Accessibility I\u2019ve Saved Recently IV","date":"October 29, 2021","format":false,"excerpt":"A guide to designing accessible, WCAG-compliant focus indicators \u2014 Sara Soueidan says you can make more accessible focus outlines by doing your own, rather than leaving it to the browser \u2014 as long as you do it right. Deep dive! a11y-syntax-highlighting \u2014 Eric Bailey's repo of code syntax highlighting themes\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/10\/a11y-icon-pattern.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":254942,"url":"https:\/\/css-tricks.com\/can-make-icon-system-accessible\/","url_meta":{"origin":288636,"position":5},"title":"How Can I Make My Icon System Accessible?","date":"May 31, 2017","format":false,"excerpt":"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\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"featured_media_src_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/06\/buttons-labeless.png?fit=1024%2C512&ssl=1","_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/288636"}],"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=288636"}],"version-history":[{"count":7,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/288636\/revisions"}],"predecessor-version":[{"id":288826,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/288636\/revisions\/288826"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/288827"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=288636"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=288636"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=288636"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}