davidbgk
/
larlet-fr-david-cache


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241
							<!doctype html><!-- This is a valid HTML5 document. -->
<!-- Screen readers, SEO, extensions and so on. -->
<html lang="fr">
<!-- Has to be within the first 1024 bytes, hence before the `title` element
  See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset -->
<meta charset="utf-8">
<!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 -->
<!-- The viewport meta is quite crowded and we are responsible for that.
  See: https://codepen.io/tigt/post/meta-viewport-for-2015 -->
<meta name="viewport" content="width=device-width,initial-scale=1">
<!-- Required to make a valid HTML5 document. -->
<title>Style with Stateful, Semantic Selectors (archive) — David Larlet</title>
<meta name="description" content="Publication mise en cache pour en conserver une trace.">
<!-- That good ol' feed, subscribe :). -->
<link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/">
<!-- Generated from https://realfavicongenerator.net/ such a mess. -->
<link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png">
<link rel="manifest" href="/static/david/icons2/site.webmanifest">
<link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c">
<link rel="shortcut icon" href="/static/david/icons2/favicon.ico">
<meta name="msapplication-TileColor" content="#f7f7f7">
<meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
<meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)">
<!-- Is that even respected? Retrospectively? What a shAItshow…
  https://neil-clarke.com/block-the-bots-that-feed-ai-models-by-scraping-your-website/ -->
<meta name="robots" content="noai, noimageai">
<!-- Documented, feel free to shoot an email. -->
<link rel="stylesheet" href="/static/david/css/style_2021-01-20.css">
<!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
<link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
<script>
    function toggleTheme(themeName) {
        document.documentElement.classList.toggle(
            'forced-dark',
            themeName === 'dark'
        )
        document.documentElement.classList.toggle(
            'forced-light',
            themeName === 'light'
        )
    }
    const selectedTheme = localStorage.getItem('theme')
    if (selectedTheme !== 'undefined') {
        toggleTheme(selectedTheme)
    }
</script>

  <meta name="robots" content="noindex, nofollow">
  <meta content="origin-when-cross-origin" name="referrer">
  <!-- Canonical URL for SEO purposes -->
  <link rel="canonical" href="https://benmyers.dev/blog/semantic-selectors/">

<body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all">


<article>
  <header>
    <h1>Style with Stateful, Semantic Selectors</h1>
  </header>
  <nav>
    <p class="center">
      <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
      </svg> Accueil</a> •
      <a href="https://benmyers.dev/blog/semantic-selectors/" title="Lien vers le contenu original">Source originale</a>
      <br>
      Mis en cache le 2024-01-08
    </p>
  </nav>
  <hr>
  <hgroup class="heading-wrapper">
<h2 id="introduction" tabindex="-1">Introduction</h2>
<a href="#introduction" rel="bookmark" aria-label="Permalink to “Introduction”">#</a></hgroup>
<p>In web development, we frequently need to style elements to visually indicate some state they're in. We give form fields red outlines to indicate invalid values. We show disabled or inactive elements in gray. We use any number of colors, icons, borders, and more to indicate what kind of state an element is in. Behind the hood, those visual styles are often handled by toggling <abbr>CSS</abbr> classes.</p>
<p>And yet: screenreaders, for instance, don't expose colors or borders or underlines or most of our other visual styles. They have no idea what our <code>.is-invalid</code> or <code>.selected</code> classes mean. This can pose an accessibility gap, since we have a discrepancy between visually-conveyed information and information conveyed via assistive technologies. <strong>If a state is important enough to indicate visually, it's probably important enough to expose to assistive technologies.</strong></p>
<p>Let's take <q>current page</q> indicators for nav links, for instance. It's a common practice to style the current page's link in a navbar, maybe coloring it differently or giving it a different border. This usually accomplishes two things:</p>
<ul>
<li>It orients the user as to where they are in the site's architecture (which is especially useful if they've come directly to that page from some external source like Google)</li>
<li>It indicates that they probably don't need to click that particular link lest they reload the page.</li>
</ul>
<p>Often, you might end up with markup like this:</p>
<pre class="language-html" tabindex="0"><code class="language-html"><span class="highlight-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>nav</span><span class="token punctuation">&gt;</span></span></span><br><mark class="highlight-line highlight-line-active">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/about<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>current-page<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>About<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span></mark><br><span class="highlight-line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/talks<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Talks<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span></span><br><span class="highlight-line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/projects<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Projects<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span></span><br><span class="highlight-line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/contact<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Contact Me<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span></span><br><span class="highlight-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>nav</span><span class="token punctuation">&gt;</span></span></span></code></pre>
<p>There's a problem here: that <q>current page</q> status would be super useful to screenreader users — after all, if a screenreader user reloads the current page, they might be flooded with announcements as the screenreader begins reading the page anew — and yet, screenreaders have no clue that this extra context exists.</p>
<p>We could address this with an <a href="/blog/aria/"><abbr>ARIA</abbr> state attribute</a> — specifically, setting <a href="https://www.aditus.io/aria/aria-current/"><code>aria-current="page"</code></a> on the link. When <code>aria-current="page"</code> is provided on a link, the screenreader will announce something like <q>link, About, current page.</q> The exact announcement may differ depending on which screenreader is used. Now, our markup looks like this:</p>
<pre class="language-html" tabindex="0"><code class="language-html"><span class="highlight-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>nav</span><span class="token punctuation">&gt;</span></span></span><br><mark class="highlight-line highlight-line-active">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/about<span class="token punctuation">"</span></span> <span class="token attr-name">aria-current</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>page<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>current-page<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>About<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span></mark><br><span class="highlight-line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/talks<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Talks<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span></span><br><span class="highlight-line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/projects<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Projects<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span></span><br><span class="highlight-line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/contact<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Contact Me<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span></span><br><span class="highlight-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>nav</span><span class="token punctuation">&gt;</span></span></span></code></pre>
<p>We've introduced a new problem, though. Now we have to keep track of <em>two</em> things: the class and the <abbr>ARIA</abbr> attribute. In theory, everything should be fine, so long as we always remember to keep these two in sync. But what if they diverge, and we end up with a link that has the <code>.current-page</code> class but not <code>aria-current="page"</code>? It happens — sighted developers are much more likely to remember the visual indication and less so the semantic indication. Or, admittedly less likely, we remember to add <code>aria-current="page"</code> but we accidentally omit our <code>.current-page</code> class? <strong>We forget things. Bugs happen.</strong></p>
<p>We can reduce the duplication and the risk of bugs, <a href="https://kentcdodds.com/blog/make-impossible-states-impossible">making impossible states impossible</a>, by instead using the <abbr>ARIA</abbr> attribute as our selector:</p>
<pre class="language-css" tabindex="0"><code class="language-css"><span class="highlight-line"><span class="token selector">a[aria-current="page"]</span> <span class="token punctuation">{</span></span><br><span class="highlight-line">  <span class="token property">border-bottom</span><span class="token punctuation">:</span> 7px solid yellow<span class="token punctuation">;</span>  </span><br><span class="highlight-line"><span class="token punctuation">}</span></span></code></pre>
<p>Now, to get the desired <em>visual</em> indication, we <em>have</em> to provide the necessary semantics for assistive technology. We can't get one without the other. I call this <strong>styling with stateful, semantic selectors</strong>. In my experience, it makes my code much more robust and ensures I don't accidentally omit necessary accessible semantics.</p>
<p>There are many ways you can style with stateful, semantic selectors, but I'd like to show you a few more examples I love:</p>
<hgroup class="heading-wrapper">
<h2 id="expandcollapse-triggers" tabindex="-1">Expand/Collapse Triggers</h2>
<a href="#expandcollapse-triggers" rel="bookmark" aria-label="Permalink to “Expand/Collapse Triggers”">#</a></hgroup>
<p>In this pattern, you have a button which, when clicked, will show or hide some content. Frequently, this button will have some visual indication of whether that content is currently being shown or not — often, it'll have a caret that's in one orientation when the content is expanded, and it's rotated when the content is collapsed.</p>
<p>As before, we <em>could</em> toggle that caret state with a CSS class — let's call it <code>.is-expanded</code>.</p>
<div class="side-by-side outer"><p class="side-by-side inner"></p><div class="side-by-side inner"><pre class="language-html" tabindex="0"><code class="language-html"><span class="highlight-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>is-expanded<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span></span><br><span class="highlight-line">   Additional Details</span><br><span class="highlight-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span></span></code></pre>
<pre class="language-css" tabindex="0"><code class="language-css"><span class="highlight-line"><span class="token selector">button::before</span> <span class="token punctuation">{</span></span><br><span class="highlight-line">  </span><br><span class="highlight-line">    </span><br><span class="highlight-line">    <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">'❯'</span><span class="token punctuation">;</span></span><br><span class="highlight-line">   <span class="token property">display</span><span class="token punctuation">:</span> inline-block<span class="token punctuation">;</span></span><br><span class="highlight-line">    <span class="token property">transition</span><span class="token punctuation">:</span> transform 0.2s<span class="token punctuation">;</span></span><br><span class="highlight-line"><span class="token punctuation">}</span></span><br><span class="highlight-line"></span><br><span class="highlight-line"><span class="token selector">button.is-expanded::before</span> <span class="token punctuation">{</span></span><br><span class="highlight-line">    <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">rotate</span><span class="token punctuation">(</span>90deg<span class="token punctuation">)</span><span class="token punctuation">;</span></span><br><span class="highlight-line"><span class="token punctuation">}</span></span></code></pre>
</div></div>
<p>If you were to try to use the above button with a screenreader, you'd have an issue. When you press the button, the caret will rotate, but your screenreader will remain silent. It has no context that the button has hidden or revealed some content, so it says nothing. As a screenreader user, you're left without any feedback, and you may start to wonder whether you even clicked the button at all.</p>
<p>Fortunately, there's an <abbr>ARIA</abbr> state attribute for this exact purpose, called <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded"><code>aria-expanded</code></a>! When a screenreader navigates to a button with <code>aria-expanded="false"</code>, it'll announce the button along with something like <q>collapsed,</q> such as <q>button, Additional Details, collapsed.</q> This tells screenreader users that the button controls toggling some content, and that content is currently hidden. When the attribute is toggled to <code>aria-expanded="true"</code>, the screenreader announcement will update to include <q>expanded</q> (or something to that effect), and say something like <q>button, Additional Details, expanded.</q></p>
<p>Our code might update to something like:</p>
<div class="side-by-side outer"><p class="side-by-side inner"></p><div class="side-by-side inner"><pre class="language-html" tabindex="0"><code class="language-html"><span class="highlight-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span></span></span><br><span class="highlight-line">  <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>is-expanded<span class="token punctuation">"</span></span></span><br><span class="highlight-line"><span class="token tag"><span class="token tag"> <span class="token attr-name">aria-expanded</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>true<span class="token punctuation">"</span></span></span></span><br><span class="highlight-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&gt;</span></span></span><br><span class="highlight-line">   Additional Details</span><br><span class="highlight-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span></span></span></span></code></pre>
<pre class="language-css" tabindex="0"><code class="language-css"><span class="highlight-line"><span class="token selector">button::before</span> <span class="token punctuation">{</span></span><br><span class="highlight-line">  </span><br><span class="highlight-line">    </span><br><span class="highlight-line">    <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">'❯'</span><span class="token punctuation">;</span></span><br><span class="highlight-line">   <span class="token property">display</span><span class="token punctuation">:</span> inline-block<span class="token punctuation">;</span></span><br><span class="highlight-line">    <span class="token property">transition</span><span class="token punctuation">:</span> transform 0.2s<span class="token punctuation">;</span></span><br><span class="highlight-line"><span class="token punctuation">}</span></span><br><span class="highlight-line"></span><br><span class="highlight-line"><span class="token selector">button.is-expanded::before</span> <span class="token punctuation">{</span></span><br><span class="highlight-line">    <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">rotate</span><span class="token punctuation">(</span>90deg<span class="token punctuation">)</span><span class="token punctuation">;</span></span><br><span class="highlight-line"><span class="token punctuation">}</span></span></code></pre>
</div></div>
<p>Upon every click of the button, a script toggles the <code>.is-expanded</code> class and flips <code>aria-expanded</code> between <code>"true"</code> and <code>"false"</code>. However… we're once again doing two things where we could be doing just one thing, and we're risking impossible states if <code>aria-expanded</code> and the <code>.is-expanded</code> class fall out of sync with each other.</p>
<p>Instead, let's use <code>aria-expanded</code> as the source of truth for our styles:</p>
<div class="side-by-side outer"><p class="side-by-side inner"></p><div class="side-by-side inner"><pre class="language-html" tabindex="0"><code class="language-html"><span class="highlight-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">aria-expanded</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>false<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span></span><br><span class="highlight-line"> Additional Details</span><br><span class="highlight-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span></span></code></pre>
</div></div>
<pre class="language-css" tabindex="0"><code class="language-css"><span class="highlight-line"><span class="token selector">button::before</span> <span class="token punctuation">{</span></span><br><span class="highlight-line">  </span><br><span class="highlight-line">    </span><br><span class="highlight-line">    <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">'❯'</span><span class="token punctuation">;</span></span><br><span class="highlight-line">   <span class="token property">display</span><span class="token punctuation">:</span> inline-block<span class="token punctuation">;</span></span><br><span class="highlight-line">    <span class="token property">transition</span><span class="token punctuation">:</span> transform 0.2s<span class="token punctuation">;</span></span><br><span class="highlight-line"><span class="token punctuation">}</span></span><br><span class="highlight-line"></span><br><span class="highlight-line"><span class="token selector">button[aria-expanded="true"]::before</span> <span class="token punctuation">{</span></span><br><span class="highlight-line">  <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">rotate</span><span class="token punctuation">(</span>90deg<span class="token punctuation">)</span><span class="token punctuation">;</span></span><br><span class="highlight-line"><span class="token punctuation">}</span></span></code></pre>
<hgroup class="heading-wrapper">
<h2 id="sorted-table-columns" tabindex="-1">Sorted Table Columns</h2>
<a href="#sorted-table-columns" rel="bookmark" aria-label="Permalink to “Sorted Table Columns”">#</a></hgroup>
<p>Say you've got a sortable table, and you'd like to indicate which column the table is sorted by, and in which direction. No sweat — this time, we can use the <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-sort"><code>aria-sort</code></a> attribute.</p>
<p>The <code>aria-sort</code> attribute should be applied to at most <em>one</em> column header at a time. For most sortable tables <i>(sor-tables?)</i>, you'll want to apply <code>aria-sort="ascending"</code> to the sorted column's table header when the column is sorted in ascending order, apply <code>aria-sort="descending"</code> to the sorted column's table header when the column is sorted in descending order, and remove <code>aria-sort</code> from the table header altogether when the sort is cleared. When a screenreader user navigates to a table where a column header has <code>aria-sort="ascending"</code> or <code>aria-sort="descending"</code>, their screenreader will tell them the name of the sorted column and its direction.</p>
<p>Assuming you have buttons inside each of the table headers to let the user sort, your markup might look something like this:</p>
<pre class="language-html" tabindex="0"><code class="language-html"><span class="highlight-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>table</span><span class="token punctuation">&gt;</span></span></span><br><span class="highlight-line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>thead</span><span class="token punctuation">&gt;</span></span></span><br><span class="highlight-line">       <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>tr</span><span class="token punctuation">&gt;</span></span></span><br><span class="highlight-line">          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>th</span> <span class="token attr-name">scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>col<span class="token punctuation">"</span></span> <span class="token attr-name">aria-sort</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>ascending<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span></span><br><span class="highlight-line">                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">aria-describedby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>sort-description<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span></span><br><span class="highlight-line">                  Title</span><br><span class="highlight-line">               <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span></span><br><span class="highlight-line">         <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>th</span><span class="token punctuation">&gt;</span></span></span><br><span class="highlight-line">         <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>th</span> <span class="token attr-name">scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>col<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span></span><br><span class="highlight-line">              <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">aria-describedby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>sort-description<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span></span><br><span class="highlight-line">                  Author</span><br><span class="highlight-line">              <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span></span><br><span class="highlight-line">         <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>th</span><span class="token punctuation">&gt;</span></span></span><br><span class="highlight-line">         <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>th</span> <span class="token attr-name">scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>col<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span></span><br><span class="highlight-line">              <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">aria-describedby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>sort-description<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span></span><br><span class="highlight-line">                  ISBN-13</span><br><span class="highlight-line">             <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span></span><br><span class="highlight-line">         <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>th</span><span class="token punctuation">&gt;</span></span></span><br><span class="highlight-line">     <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>tr</span><span class="token punctuation">&gt;</span></span></span><br><span class="highlight-line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>thead</span><span class="token punctuation">&gt;</span></span></span><br><span class="highlight-line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>tbody</span><span class="token punctuation">&gt;</span></span></span><br><span class="highlight-line">       …</span><br><span class="highlight-line">   <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>tbody</span><span class="token punctuation">&gt;</span></span></span><br><span class="highlight-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>table</span><span class="token punctuation">&gt;</span></span></span><br><span class="highlight-line"></span><br><span class="highlight-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>sort-description<span class="token punctuation">"</span></span> <span class="token attr-name">hidden</span><span class="token punctuation">&gt;</span></span>Sort by column<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span></span></code></pre>
<p>If we wanted to add some arrows inside the sorted column's header's button to indicate the current sort direction, the <code>[aria-sort]</code> attribute selector will see us through:</p>
<pre class="language-css" tabindex="0"><code class="language-css"><span class="highlight-line"><span class="token selector">th[aria-sort="ascending"] button::after</span> <span class="token punctuation">{</span></span><br><span class="highlight-line"> </span><br><span class="highlight-line">    </span><br><span class="highlight-line">    <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">'↑'</span><span class="token punctuation">;</span></span><br><span class="highlight-line"><span class="token punctuation">}</span></span><br><span class="highlight-line"></span><br><span class="highlight-line"><span class="token selector">th[aria-sort="descending"] button::after</span> <span class="token punctuation">{</span></span><br><span class="highlight-line">  </span><br><span class="highlight-line">    </span><br><span class="highlight-line">    <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">'↓'</span><span class="token punctuation">;</span></span><br><span class="highlight-line"><span class="token punctuation">}</span></span></code></pre>
<p><i>(Simplified for the sake of demonstration. Check out <a href="https://adrianroselli.com/2021/04/sortable-table-columns.html">Adrian Roselli's sortable tables article</a> for a much more thorough and robust approach)</i></p>
<hgroup class="heading-wrapper">
<h2 id="and-more" tabindex="-1">And More!</h2>
<a href="#and-more" rel="bookmark" aria-label="Permalink to “And More!”">#</a></hgroup>
<p>These examples aren't the only times stateful, semantic selectors could prove helpful. Here are just a few more I didn't get into:</p>

<p>In short, <strong>building with accessible semantics from the get-go can give you expressive, meaningful style hooks for free.</strong> Leaning on those style hooks in your <abbr>CSS</abbr> selectors lets you reduce the number of moving parts in your site or application, and it can prevent accessibility bugs from creeping in down the road.</p>
<p>As with any web development recommendation, <strong>use your best judgment</strong>. If you find yourself <em>contorting</em> an element's semantics or markup to get the appearance you want, it's a sign to take a step back and revisit. Maybe classes are your friend, or maybe you need to revisit your design and determine whether it still makes sense.</p>
<hgroup class="heading-wrapper">

<a href="#related-reads" rel="bookmark" aria-label="Permalink to “Related Reads”">#</a></hgroup>
<p>I'm definitely not the first to write about this approach. Here are a few other articles on the subject I'd recommend reading:</p>
<ul>
<li><a href="https://css-tricks.com/user-facing-state/"><q>User Facing State</q> by Scott O'Hara on CSS Tricks</a></li>
<li><a href="https://adrianroselli.com/2021/06/using-css-to-enforce-accessibility.html"><q>Using CSS to Enforce Accessibility</q> by Adrian Roselli</a></li>
<li><a href="https://www.aleksandrhovhannisyan.com/blog/represent-state-with-html-attributes-not-class-names/"><q>Represent State with HTML Attributes, Not Class Names</q> by Aleksandr Hovhannisyan</a></li>
</ul>
</article>


<hr>

<footer>
  <p>
    <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
      </svg> Accueil</a> •
    <a href="/david/log/" title="Accès au flux RSS"><svg class="icon icon-rss2">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-rss2"></use>
      </svg> Suivre</a> •
    <a href="http://larlet.com" title="Go to my English profile" data-instant><svg class="icon icon-user-tie">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-user-tie"></use>
      </svg> Pro</a> •
    <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"><svg class="icon icon-mail">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-mail"></use>
      </svg> Email</a> •
    <abbr class="nowrap" title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"><svg class="icon icon-hammer2">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-hammer2"></use>
      </svg> Légal</abbr>
  </p>
  <template id="theme-selector">
      <form>
          <fieldset>
              <legend><svg class="icon icon-brightness-contrast">
                <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-brightness-contrast"></use>
              </svg> Thème</legend>
              <label>
                  <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
              </label>
              <label>
                  <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
              </label>
              <label>
                  <input type="radio" value="light" name="chosen-color-scheme"> Clair
              </label>
          </fieldset>
      </form>
  </template>
</footer>
<script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
<script>
    function loadThemeForm(templateName) {
        const themeSelectorTemplate = document.querySelector(templateName)
        const form = themeSelectorTemplate.content.firstElementChild
        themeSelectorTemplate.replaceWith(form)

        form.addEventListener('change', (e) => {
            const chosenColorScheme = e.target.value
            localStorage.setItem('theme', chosenColorScheme)
            toggleTheme(chosenColorScheme)
        })

        const selectedTheme = localStorage.getItem('theme')
        if (selectedTheme && selectedTheme !== 'undefined') {
            form.querySelector(`[value="${selectedTheme}"]`).checked = true
        }
    }

    const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
    window.addEventListener('load', () => {
        let hasDarkRules = false
        for (const styleSheet of Array.from(document.styleSheets)) {
            let mediaRules = []
            for (const cssRule of styleSheet.cssRules) {
                if (cssRule.type !== CSSRule.MEDIA_RULE) {
                    continue
                }
                // WARNING: Safari does not have/supports `conditionText`.
                if (cssRule.conditionText) {
                    if (cssRule.conditionText !== prefersColorSchemeDark) {
                        continue
                    }
                } else {
                    if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
                        continue
                    }
                }
                mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
            }

            // WARNING: do not try to insert a Rule to a styleSheet you are
            // currently iterating on, otherwise the browser will be stuck
            // in a infinite loop…
            for (const mediaRule of mediaRules) {
                styleSheet.insertRule(mediaRule.cssText)
                hasDarkRules = true
            }
        }
        if (hasDarkRules) {
            loadThemeForm('#theme-selector')
        }
    })
</script>
</body>
</html>