make links light up on tab too

index.html

@@ -67,7 +67,7 @@
     <dl>
       <dt> how to say
       <dd>
-        <a id=soundlink href=#>
+        <a id=soundlink>
           <span class=ipa>nɪs</span>, <span class=ipa>nɪsə</span>
         </a>
         <audio id=miku>
@@ -75,6 +75,9 @@
           <source src=media/niss-nisse.ogg type=audio/ogg>
           (<a href=media/niss-nisse.mp3>listen</a>)
         </audio>
+        <noscript>
+          (<a href=media/niss-nisse.mp3>listen</a>)
+        </noscript>
 
       <dt> prons       <dd title='she for niss, he for nisse'> it or they
       <dt> quantity    <dd> 2
@@ -90,7 +93,13 @@ window.addEventListener('DOMContentLoaded', () => {
   let link = document.getElementById('soundlink');
   let miku = document.getElementById('miku');
   if (typeof miku.play == 'function') {
-    link.addEventListener('click', e => { miku.play(); e.preventDefault(); });
+    function playMiku(e) {
+      miku.play();
+      e.preventDefault();
+    }
+
+    link.href = '#';
+    link.addEventListener('click', playMiku);
   }
 });
 </script>

style.css

@@ -140,13 +140,13 @@ dd {
   }
 }
 
-a {
+a[href] {
   color: hsl(196deg, 100%, 85%);
   font-weight: 800;
   text-decoration: none;
   transition: color 0.2s ease-in-out;
 }
-a:hover {
+a[href]:where(:hover,:focus) {
   color: hsl(50deg, 100%, 82%);
 }