accessible ux

Author: Adam Argyle

app/css/index.css

@@ -102,7 +102,7 @@ dl {
   margin: 0;
   padding: 0;
   display: grid;
-  gap: 1ch;
+  gap: 1ex;
 
   & > dt {
     color: deeppink;
@@ -121,16 +121,24 @@ dl {
     font-weight: 300;
     white-space: nowrap;
 
-    &:hover {
+    & > a {
+      padding-block: .5ex;
+    }
+
+    & > a:hover {
       color: var(--brand);
+    }
+
+    & > a:focus {
+      outline: 1px dotted deeppink;
+    }
 
-      &:after {
-        content: url("data:image/svg+xml;charset=UTF-8,<svg xmlns='http://www.w3.org/2000/svg' fill='deeppink' viewBox='0 0 24 24'><path d='M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z'/></svg>");
-        position: absolute;
-        inset: 1px 0 0 calc(100% + .5em);
-        block-size: .75em;
-        inline-size: .75em;
-      }
+    &:matches(:hover,:focus-within)::after {
+      content: url("data:image/svg+xml;charset=UTF-8,<svg xmlns='http://www.w3.org/2000/svg' fill='deeppink' viewBox='0 0 24 24'><path d='M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z'/></svg>");
+      position: absolute;
+      inset: 1px 0 0 calc(100% + .5em);
+      block-size: .75em;
+      inline-size: .75em;
     }
   }
 }

app/index.html

@@ -82,57 +82,57 @@ <h1>
       <h3>Circles</h3>
       <dl>
         <dt>Entrances</dt>
-        <dd>in:circle:top-right</dd>
-        <dd>in:circle:top-left</dd>
-        <dd>in:circle:bottom-right</dd>
-        <dd>in:circle:bottom-left</dd>
+        <dd><a href="#">in:circle:top-right</a></dd>
+        <dd><a href="#" autofocus>in:circle:top-left</a></dd>
+        <dd><a href="#">in:circle:bottom-right</a></dd>
+        <dd><a href="#">in:circle:bottom-left</a></dd>
 
         <dt>Exits</dt>
-        <dd>out:circle:top-right</dd>
-        <dd>out:circle:top-left</dd>
-        <dd>out:circle:bottom-right</dd>
-        <dd>out:circle:bottom-left</dd>
+        <dd><a href="#">out:circle:top-right</a></dd>
+        <dd><a href="#">out:circle:top-left</a></dd>
+        <dd><a href="#">out:circle:bottom-right</a></dd>
+        <dd><a href="#">out:circle:bottom-left</a></dd>
       </dl>
 
       <h3>Squares</h3>
       <dl>
         <dt>Entrances</dt>
-        <dd>in:square:center</dd>
-        <dd>in:square:top-right</dd>
-        <dd>in:square:top-left</dd>
-        <dd>in:square:bottom-right</dd>
-        <dd>in:square:bottom-left</dd>
+        <dd><a href="#">in:square:center</a></dd>
+        <dd><a href="#">in:square:top-right</a></dd>
+        <dd><a href="#">in:square:top-left</a></dd>
+        <dd><a href="#">in:square:bottom-right</a></dd>
+        <dd><a href="#">in:square:bottom-left</a></dd>
 
         <dt>Exits</dt>
-        <dd>out:square:center</dd>
-        <dd>out:square:top-right</dd>
-        <dd>out:square:top-left</dd>
-        <dd>out:square:bottom-right</dd>
-        <dd>out:square:bottom-left</dd>
+        <dd><a href="#">out:square:center</a></dd>
+        <dd><a href="#">out:square:top-right</a></dd>
+        <dd><a href="#">out:square:top-left</a></dd>
+        <dd><a href="#">out:square:bottom-right</a></dd>
+        <dd><a href="#">out:square:bottom-left</a></dd>
       </dl>
 
       <h3>Wipes</h3>
       <dl>
         <dt>Entrances</dt>
-        <dd>in:wipe:right</dd>
-        <dd>in:wipe:left</dd>
-        <dd>in:wipe:up</dd>
-        <dd>in:wipe:down</dd>
+        <dd><a href="#">in:wipe:right</a></dd>
+        <dd><a href="#">in:wipe:left</a></dd>
+        <dd><a href="#">in:wipe:up</a></dd>
+        <dd><a href="#">in:wipe:down</a></dd>
 
         <dt>Exits</dt>
-        <dd>out:wipe:right</dd>
-        <dd>out:wipe:left</dd>
-        <dd>out:wipe:up</dd>
-        <dd>out:wipe:down</dd>
+        <dd><a href="#">out:wipe:right</a></dd>
+        <dd><a href="#">out:wipe:left</a></dd>
+        <dd><a href="#">out:wipe:up</a></dd>
+        <dd><a href="#">out:wipe:down</a></dd>
       </dl>
 
       <h3>Diamonds</h3>
       <dl>
         <dt>Entrances</dt>
-        <dd>in:diamond:center</dd>
+        <dd><a href="#">in:diamond:center</a></dd>
 
         <dt>Exits</dt>
-        <dd>out:diamond:center</dd>
+        <dd><a href="#">out:diamond:center</a></dd>
       </dl>
 
       <hr>