{"id":325332,"date":"2020-11-10T15:45:00","date_gmt":"2020-11-10T23:45:00","guid":{"rendered":"https:\/\/css-tricks.com\/?p=325332"},"modified":"2020-11-10T15:45:03","modified_gmt":"2020-11-10T23:45:03","slug":"aria-in-css","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/aria-in-css\/","title":{"rendered":"ARIA in CSS"},"content":{"rendered":"\n<p>Jeremey reacting to <a href=\"https:\/\/twitter.com\/SaraSoueidan\/status\/1319992242262757377\" rel=\"noopener\">Sara&#8217;s tweet<\/a>, about using <code>[aria-*]<\/code> selectors instead of classes when the styling you are applying is directly related to the ARIA state.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-style-large is-layout-flow wp-block-quote-is-layout-flow\"><p>&#8230; this is my preferred way of hooking up CSS and JavaScript interactions. Here\u2019s [an]&nbsp;<a href=\"https:\/\/codepen.io\/adactio\/pen\/oxLNwY\" rel=\"noopener\">old CodePen<\/a>&nbsp;where you can see it in action<\/p><\/blockquote>\n\n\n\n<p>Which is this classic matchup:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">[aria-hidden='true'] {\n  display: none;\n}<\/code><\/pre>\n\n\n\n<!--more-->\n\n\n\n<p>There are plenty of more opportunities. Take a tab design component:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_gOMPWgJ\" src=\"\/\/codepen.io\/anon\/embed\/gOMPWgJ?height=450&amp;theme-id=1&amp;slug-hash=gOMPWgJ&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed gOMPWgJ\" title=\"CodePen Embed gOMPWgJ\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>Since these tabs (using <a href=\"https:\/\/www.google.com\/search?q=reach+ui&amp;oq=reach+ui&amp;aqs=chrome..69i57j69i59j69i60l2j69i61j69i60l2j69i61.692j0j7&amp;sourceid=chrome&amp;ie=UTF-8\" rel=\"noopener\">Reach UI<\/a>) are already applying proper ARIA states for things like which tab is active, they don&#8217;t even bother with class name manipulation. To style the active state, you select the <code>&lt;button&gt;<\/code> with a data attribute and ARIA state like:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">[data-reach-tab][aria-selected=\"true\"] {\n  background: white;\n}<\/code><\/pre>\n\n\n\n<p>The panels with the content? Those have an ARIA role, so are styled that way:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">[role=\"tabpanel\"] {\n  background: white;\n}<\/code><\/pre>\n\n\n\n<p>ARIA is also matches up with variations sometimes, like&#8230;<\/p>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">[aria-orientation=\"vertical\"] {\n  flex-direction: column;\n}<\/code><\/pre>\n\n\n\n<p>If you&#8217;re like, wait, what&#8217;s ARIA? Heydon&#8217;s new show <em>Webbed Briefs<\/em> has <a href=\"https:\/\/briefs.video\/#pilot\" rel=\"noopener\">a funny introduction to ARIA<\/a> as the pilot episode.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Jeremey reacting to Sara&#8217;s tweet, about using [aria-*] selectors instead of classes when the styling you are applying is directly related to the ARIA state. &#8230; this is my preferred way of hooking up CSS and JavaScript interactions. Here\u2019s [an]&nbsp;old CodePen&nbsp;where you can see it in action Which is this classic matchup:<\/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":true,"jetpack_social_options":[]},"categories":[4],"tags":[721],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":241681,"url":"https:\/\/css-tricks.com\/use-not-use-aria-tabs\/","url_meta":{"origin":325332,"position":0},"title":"(To use or not-to-use) ARIA Tabs","date":"May 17, 2016","format":false,"excerpt":"Looks like a Papa Bear, Mama Bear, Baby Bear situation.","rel":"","context":"In &quot;Link&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":294405,"url":"https:\/\/css-tricks.com\/weekly-platform-news-html-loading-attribute-the-main-aria-specifications-and-moving-from-iframe-to-shadow-dom\/","url_meta":{"origin":325332,"position":1},"title":"Weekly Platform News: HTML Loading Attribute, the Main ARIA Specifications, and Moving from iFrame to Shadow DOM","date":"August 15, 2019","format":false,"excerpt":"In this week's roundup of platform news, Chrome introduces a new attribute for loading, accessibility specifications for web developers, and the BBC moves visualizations to the Shadow DOM. Chrome ships the loading attribute The HTML loading attribute for lazy-loading images and iframes is now supported in Chrome. You can add\u2026","rel":"","context":"In &quot;Weekly Platform News&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/08\/wpn-190814.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":20168,"url":"https:\/\/css-tricks.com\/using-wai-aria-landmarks\/","url_meta":{"origin":325332,"position":2},"title":"Using WAI-ARIA Landmarks","date":"February 18, 2013","format":false,"excerpt":"I need to do a better job at at using the role attribute. It's so easy and has so many benefits. Important note: all content should be within a landmark role. Steve Faulkner shows the way.","rel":"","context":"In &quot;Link&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":262085,"url":"https:\/\/css-tricks.com\/aria-spackle-not-rebar\/","url_meta":{"origin":325332,"position":3},"title":"ARIA is Spackle, Not Rebar","date":"November 8, 2017","format":false,"excerpt":"Much like their physical counterparts, the materials we use to build websites have purpose. To use them without understanding their strengths and limitations is irresponsible. Nobody wants to live in an poorly-built house. So why are poorly-built websites acceptable? In this post, I'm going to address WAI-ARIA, and how misusing\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":286856,"url":"https:\/\/css-tricks.com\/why-how-and-when-to-use-semantic-html-and-aria\/","url_meta":{"origin":325332,"position":4},"title":"Why, How, and When to Use Semantic HTML and ARIA","date":"May 7, 2019","format":false,"excerpt":"Semantic HTML and Accessible Rich Internet Applications (ARIA) help create interfaces that work for everyone in the most performant, robust, and simple way possible. They add essential meaning to your content, which lets web browsers, search engines, screen readers, RSS readers, and ultimately users understand it. And yet, many people\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/04\/stairs-hierarchy.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":291856,"url":"https:\/\/css-tricks.com\/weekly-platform-news-mozillas-av1-encoder-samsung-one-ui-css-dom-matches-method\/","url_meta":{"origin":325332,"position":5},"title":"Weekly Platform News: Mozilla\u2019s AV1 Encoder, Samsung One UI CSS, DOM Matches Method","date":"June 21, 2019","format":false,"excerpt":"In this week's weekly roundup, Vimeo and Mozilla partner up on a video encoding format, how to bind instructions to to form fields using aria labels, the DOM has a matching function, and Samsung is working on its own CSS library.","rel":"","context":"In &quot;Weekly Platform News&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/06\/web-platform-news-190621.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/325332"}],"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=325332"}],"version-history":[{"count":3,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/325332\/revisions"}],"predecessor-version":[{"id":325349,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/325332\/revisions\/325349"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=325332"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=325332"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=325332"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}