use aria-current=page instead of .active

.zs/active

@@ -1,4 +0,0 @@
-#!/bin/sh
-
-# sets the 'active' class on an item if the url matches the directory
-if [ "$(dirname "$ZS_URL")" = $1 ]; then printf ' class=active' ''; fi

.zs/aria-current

@@ -0,0 +1,4 @@
+#!/bin/sh
+
+# sets the 'aria-current=page' on an anchor if the url matches the directory
+if [ "$(dirname "$ZS_URL")" = $1 ]; then printf ' aria-current=%s' 'page'; fi

.zs/layout.html

@@ -9,13 +9,13 @@
     <nav>
       <a href=/>jonathan.is</a>
       <menu>
-        <li id=landing {{ active . }}><a href=/>/???</a>
-        <li {{ active writing }}><a href=/writing>/writing</a>
-        <li {{ active speaking }}><a href=/speaking>/speaking</a>
-        <li {{ active coding }}><a href=/coding>/coding</a>
-        <li {{ active making }}><a href=/making>/making</a>
-        <li {{ active working }}><a href=/working>/working</a>
-        <li {{ active living }}><a href=/living>/living</a>
+        <li><a {{ aria-current . }} href=/>/???</a>
+        <li><a {{ aria-current writing }} href=/writing>/writing</a>
+        <li><a {{ aria-current speaking }} href=/speaking>/speaking</a>
+        <li><a {{ aria-current coding }} href=/coding>/coding</a>
+        <li><a {{ aria-current making }} href=/making>/making</a>
+        <li><a {{ aria-current working }} href=/working>/working</a>
+        <li><a {{ aria-current living }} href=/living>/living</a>
       </menu>
     </nav>
   </label>

style.css

@@ -45,17 +45,13 @@ main {
 
 menu { cursor: pointer }
 
-.active {
+a[aria-current=page] {
   pointer-events: none;
   text-decoration: underline;
 }
 
 #check { display: none; }
 
-#landing.active {
-  display: block;
-}
-
 @media (hover: hover) {
   menu:hover li {
     visibility: inherit;
@@ -81,7 +77,7 @@ menu { cursor: pointer }
   nav > menu > li {
     visibility: collapse;
     display: none;
-    &.active {
+    & a[aria-current=page] {
       visibility: inherit;
       display: block;
     }
@@ -123,26 +119,26 @@ ul {
 }
 
 li:nth-of-type(6n + 1):hover,
-li.active:nth-of-type(6n + 1) {
+a[aria-current=page]:nth-of-type(6n + 1) {
   color: var(--red);
 }
 li:nth-of-type(6n + 2):hover,
-li.active:nth-of-type(6n + 2) {
+a[aria-current=page]:nth-of-type(6n + 2) {
   color: var(--orange);
 }
 li:nth-of-type(6n + 3):hover,
-li.active:nth-of-type(6n + 3) {
+a[aria-current=page]:nth-of-type(6n + 3) {
   color: var(--pink);
 }
 li:nth-of-type(6n + 4):hover,
-li.active:nth-of-type(6n + 4) {
+a[aria-current=page]:nth-of-type(6n + 4) {
   color: var(--green);
 }
 li:nth-of-type(6n + 5):hover,
-li.active:nth-of-type(6n + 5) {
+a[aria-current=page]:nth-of-type(6n + 5) {
   color: var(--blue);
 }
 li:nth-of-type(6n + 6):hover,
-li.active:nth-of-type(6n + 6) {
+a[aria-current=page]:nth-of-type(6n + 6) {
   color: var(--purple);
 }