From 712e9323e74fe35ed7bbf3f6586375250f5985d1 Mon Sep 17 00:00:00 2001
From: peregrineshahin <41402573+peregrineshahin@users.noreply.github.com>
Date: Tue, 6 Aug 2024 15:50:49 +0300
Subject: [PATCH] Improve eAccessibility

---
 server/fishtest/static/js/application.js      |   6 +
 server/fishtest/static/js/live_elo.js         |   8 +-
 server/fishtest/static/js/spsa.js             |  27 +-
 server/fishtest/templates/actions.mak         |  26 +-
 server/fishtest/templates/base.mak            |  50 ++--
 server/fishtest/templates/contributors.mak    |  30 ++-
 server/fishtest/templates/elo_results.mak     |   7 +-
 server/fishtest/templates/machines.mak        |  32 +--
 server/fishtest/templates/nn_upload.mak       |  29 ++-
 server/fishtest/templates/nns.mak             |  49 ++--
 server/fishtest/templates/notfound.mak        |  16 +-
 server/fishtest/templates/pagination.mak      |   8 +-
 server/fishtest/templates/run_table.mak       |  78 +++++-
 server/fishtest/templates/signup.mak          |  58 +++--
 server/fishtest/templates/sprt_calc.mak       |  68 ++++-
 server/fishtest/templates/tasks.mak           |   8 +-
 server/fishtest/templates/tests.mak           |  48 +++-
 server/fishtest/templates/tests_live_elo.mak  |  44 ++--
 server/fishtest/templates/tests_run.mak       | 243 +++++++++++++++---
 server/fishtest/templates/tests_view.mak      | 144 +++++++----
 server/fishtest/templates/user.mak            |  48 +++-
 server/fishtest/templates/user_management.mak | 140 +++++-----
 server/fishtest/templates/workers.mak         |  10 +-
 23 files changed, 824 insertions(+), 353 deletions(-)

diff --git a/server/fishtest/static/js/application.js b/server/fishtest/static/js/application.js
index d1fa8e0f3..f8312c036 100644
--- a/server/fishtest/static/js/application.js
+++ b/server/fishtest/static/js/application.js
@@ -308,6 +308,7 @@ function handleSortingTables() {
       const th = target;
       const table = th.closest("table");
       const body = table.querySelector("tbody");
+      const headers = table.querySelectorAll("th");
       Array.from(body.querySelectorAll("tr"))
         .sort(
           comparer(
@@ -322,6 +323,11 @@ function handleSortingTables() {
           }
           body.append(tr);
         });
+
+      headers.forEach((header) => {
+        header.removeAttribute("aria-sort");
+      });
+      th.setAttribute("aria-sort", this.asc ? "ascending" : "descending");
     }
   });
 }
diff --git a/server/fishtest/static/js/live_elo.js b/server/fishtest/static/js/live_elo.js
index 0e08590b8..e56ea49d7 100644
--- a/server/fishtest/static/js/live_elo.js
+++ b/server/fishtest/static/js/live_elo.js
@@ -197,7 +197,9 @@ async function followLive(testId) {
 
   async function mainWorker() {
     while (true) {
-      if (isTabFocused) {
+      const switchElement = document.getElementById("auto-refresh-switch");
+      const autoRefresh = switchElement.checked;
+      if (autoRefresh && isTabFocused) {
         update();
       }
       await asyncSleep(20000);
@@ -210,7 +212,9 @@ async function followLive(testId) {
     try {
       const m = await fetchJson("/api/get_elo/" + testId + "?" + timestamp);
       displayData(m);
-      if (m.args.sprt.state) return;
+      if (m.args.sprt.state) {
+        return;
+      }
     } catch (e) {
       console.log("Network error: " + e);
     }
diff --git a/server/fishtest/static/js/spsa.js b/server/fishtest/static/js/spsa.js
index 575f6a602..dc5d1be97 100644
--- a/server/fishtest/static/js/spsa.js
+++ b/server/fishtest/static/js/spsa.js
@@ -254,24 +254,25 @@ async function handleSPSA() {
   }
 
   for (let j = 0; j < spsaParams.length; j++) {
-    const dropdownItem = document.createElement("li");
-    const anchorItem = document.createElement("a");
-    anchorItem.className = "dropdown-item";
-    anchorItem.href = "javascript:";
-    anchorItem.param_id = j + 1;
-    anchorItem.append(spsaParams[j].name);
-    dropdownItem.append(anchorItem);
-    document.getElementById("dropdown_individual").append(dropdownItem);
+    const li = document.createElement("li");
+    const button = document.createElement("button");
+    button.className = "dropdown-item";
+    button.dataset.paramId = j + 1;
+    button.append(spsaParams[j].name);
+    li.append(button);
+    document.getElementById("dropdown_individual").append(li);
   }
 
   document
     .getElementById("dropdown_individual")
     .addEventListener("click", (e) => {
-      if (!e.target.matches("a")) return;
       const { target } = e;
-      const param_id = target.param_id;
+      if (!target.classList.includes("dropdown-item")) {
+        return;
+      }
+      const paramId = target.dataset.paramId;
       for (let i = 1; i < chart_data.getNumberOfColumns(); i++) {
-        updateColumnVisibility(i, i == param_id);
+        updateColumnVisibility(i, i == paramId);
       }
 
       viewAll = false;
@@ -304,7 +305,9 @@ async function handleSPSA() {
   });
 
   document.getElementById("btn_view_all").addEventListener("click", () => {
-    if (viewAll) return;
+    if (viewAll) {
+      return;
+    }
     viewAll = true;
     for (let i = 0; i < chart_data.getNumberOfColumns(); i++) {
       updateColumnVisibility(i, true);
diff --git a/server/fishtest/templates/actions.mak b/server/fishtest/templates/actions.mak
index fb08c179b..c5bbd5160 100644
--- a/server/fishtest/templates/actions.mak
+++ b/server/fishtest/templates/actions.mak
@@ -4,16 +4,16 @@
   import datetime
 %>
 
-<h2>Events Log</h2>
+<h2 id="events-log-heading">Events Log</h2>
 
 <script>
   document.title = "Events Log | Stockfish Testing";
 </script>
 
-<form class="row mb-3">
+<form class="row mb-3" aria-labelledby="events-log-heading" id="filter-form">
   <div class="col-12 col-md-auto mb-3">
     <label for="restrict" class="form-label">Show only</label>
-    <select id="restrict" class="form-select" name="action">
+    <select id="restrict" class="form-select" name="action" aria-controls="events-table">
       <option value="">All</option>
       <option value="new_run">New Run</option>
       <option value="approve_run">Approve Run</option>
@@ -45,6 +45,7 @@
       name="user"
       list="users-list"
       value="${username_param}"
+      aria-controls="events-table"
     >
     <datalist id="users-list">
       % for user in request.userdb.get_users():
@@ -60,17 +61,20 @@
       role="button"
       data-bs-toggle="modal"
       data-bs-target="#autoselect-modal"
+      aria-haspopup="dialog"
+      aria-label="Free text search information"
     ></i>
     <div
       class="modal fade"
       id="autoselect-modal"
       tabindex="-1"
-      aria-hidden="true"
+      aria-labelledby="autoselect-modal-label"
+      role="dialog"
     >
       <div class="modal-dialog modal-dialog-scrollable">
         <div class="modal-content">
           <div class="modal-header">
-            <h5 class="modal-title">Free text search information</h5>
+            <h5 class="modal-title" id="autoselect-modal-label">Free text search information</h5>
             <button
               type="button"
               class="btn-close"
@@ -105,18 +109,19 @@
       type="text"
       name="text"
       value="${text_param}"
+      aria-controls="events-table"
     >
   </div>
 
   <div class="col-12 col-md-auto mb-3 d-flex align-items-end">
-    <button type="submit" class="btn btn-success w-100">Search</button>
+    <button type="submit" class="btn btn-success w-100" aria-label="Search">Search</button>
   </div>
 </form>
 
 <%include file="pagination.mak" args="pages=pages"/>
 
 <div class="table-responsive-lg">
-  <table class="table table-striped table-sm">
+  <table class="table table-striped table-sm" id="events-table" aria-label="Events Log Table">
     <thead class="sticky-top">
       <tr>
         <th>Time</th>
@@ -133,8 +138,11 @@
           <td>
             <a
               href="/actions?max_actions=1&amp;action=${action_param}&amp;user=${username_param|u,n}&amp;text=${text_param|u,n}&amp;before=${action['time']}&amp;run_id=${run_id_param}"
+              aria-label="Action performed at ${datetime.datetime.utcfromtimestamp(action['time']).strftime('%Y-%m-%d %H:%M:%S')}"
             >
-                 ${datetime.datetime.utcfromtimestamp(action['time']).strftime(r"%y&#8209;%m&#8209;%d %H:%M:%S")|n}
+              <time datetime="${datetime.datetime.utcfromtimestamp(action['time']).strftime('%Y-%m-%dT%H:%M:%SZ')}">
+                ${datetime.datetime.utcfromtimestamp(action['time']).strftime(r"%y&#8209;%m&#8209;%d %H:%M:%S")|n}
+              </time>
             </a>
           </td>
           <td>${action['action']}</td>
@@ -168,7 +176,7 @@
       % endfor
       % if "idx" not in locals():
         <tr>
-          <td colspan=20>No actions available</td>
+          <td colspan="8">No actions available</td>
         </tr>
       % endif
     </tbody>
diff --git a/server/fishtest/templates/base.mak b/server/fishtest/templates/base.mak
index 1388ab873..1e741e641 100644
--- a/server/fishtest/templates/base.mak
+++ b/server/fishtest/templates/base.mak
@@ -22,7 +22,6 @@
       href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.1/css/bootstrap.min.css"
       integrity="sha512-Z/def5z5u2aR89OuzYcxmDJ0Bnd5V1cKqBEbvLOiUNWdg9PQeXVvXLI90SE4QOHGlfLqUnDNVAYyZi8UwUTmWQ=="
       crossorigin="anonymous"
-      crossorigin="anonymous"
       referrerpolicy="no-referrer"
     >
 
@@ -53,7 +52,6 @@
       src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.1/js/bootstrap.bundle.min.js"
       integrity="sha512-ToL6UYWePxjhDQKNioSi4AyJ5KkRxY+F1+Fi7Jgh0Hp5Kk2/s8FD7zusJDdonfe5B00Qw+B8taXxF6CFLnqNCw=="
       crossorigin="anonymous"
-      crossorigin="anonymous"
       referrerpolicy="no-referrer"
     ></script>
 
@@ -93,10 +91,9 @@
         <a
           class="navbar-brand p-0 me-0 me-lg-2 d-flex align-items-center"
           href="/"
-          aria-label="Bootstrap"
         >
-          <div class="brand-logo d-inline me-lg-2"></div>
-          <p class="d-none d-lg-inline h-5 mb-0">Stockfish Testing Framework</p>
+          <div class="brand-logo d-inline me-lg-2" aria-label="Logo that links to home page"></div>
+          <p class="d-none d-lg-inline h-5 mb-0" aria-hidden="true">Stockfish Testing Framework</p>
         </a>
 
         <button
@@ -116,6 +113,7 @@
           id="rightsidebar"
           aria-labelledby="rightsidebarOffcanvasLabel"
           data-bs-scroll="true"
+          role="dialog"
         >
           <div class="offcanvas-header px-4 pb-0">
             <h5 class="offcanvas-title" id="rightsidebarOffcanvasLabel">
@@ -135,11 +133,12 @@
 
             <ul class="navbar-nav flex-row flex-wrap ms-md-auto">
               % if request.authenticated_userid:
-                <li class="nav-item col-6 col-lg-auto order-lg-2">
+                <li class="nav-item col-6 col-lg-auto order-lg-2" role="menuitem">
                   <a
                     class="nav-link py-2 px-0 px-lg-2"
                     href="/tests/user/${request.authenticated_userid}"
                     title="My Tests"
+                    aria-label="My Tests"
                   >
                     <i class="fa-solid fa-flask d-inline me-2 mx-lg-1"></i>
                     <span class="d-inline d-lg-none">My Tests</span>
@@ -150,6 +149,7 @@
                     class="nav-link py-2 px-0 px-lg-2"
                     href="/tests/run"
                     title="New Test"
+                    aria-label="New Test"
                   >
                     <i class="fa-solid fa-plus d-inline me-2 mx-lg-1"></i>
                     <span class="d-inline d-lg-none">New Test</span>
@@ -160,6 +160,7 @@
                     class="nav-link py-2 px-0 px-lg-2"
                     href="/upload"
                     title="Upload Neural Network"
+                    aria-label="Upload Neural Network"
                   >
                     <i
                       class="fa-solid fa-cloud-arrow-up d-inline me-2 mx-lg-1"
@@ -168,41 +169,37 @@
                   </a>
                 </li>
                 <li class="nav-item py-1 col-12 col-lg-auto order-lg-2">
-                  <div class="vr d-none d-lg-flex h-100 mx-lg-2"></div>
+                  <div class="vr d-none d-lg-flex h-100 mx-lg-2" aria-hidden="true"></div>
                   <hr class="d-lg-none">
                 </li>
                 <li class="nav-item col-6 col-lg-auto order-lg-2">
                   <a class="nav-link py-2 px-0 px-lg-2" href="/user"
-                    ><i class="fa-solid fa-user d-inline d-lg-none me-2"></i
-                    >Profile
+                    aria-label="Profile"><i class="fa-solid fa-user d-inline d-lg-none me-2"></i>Profile
                   </a>
                 </li>
                 <li class="nav-item col-6 col-lg-auto order-lg-2">
-                  <a class="nav-link py-2 px-0 px-lg-2" href="/logout" id="logout"
+                  <a class="nav-link py-2 px-0 px-lg-2" href="/logout" id="logout" aria-label="Logout"
                     ><i
                       class="fa-solid fa-arrow-right-from-bracket d-inline d-lg-none me-2"
-                    ></i
-                    >Logout
+                    ></i>Logout
                   </a>
                 </li>
               % else:
                 <li class="nav-item col-6 col-lg-auto order-lg-2">
-                  <a class="nav-link py-2 px-0 px-lg-2" href="/login"
+                  <a class="nav-link py-2 px-0 px-lg-2" href="/login" aria-label="Login"
                     ><i
                       class="fa-solid fa-arrow-right-to-bracket d-inline d-lg-none me-2"
-                    ></i
-                    >Login</a
+                    ></i>Login</a
                   >
                 </li>
                 <li class="nav-item col-6 col-lg-auto order-lg-2">
-                  <a class="nav-link py-2 px-0 px-lg-2" href="/signup"
-                    ><i class="fa-solid fa-user-plus d-inline d-lg-none me-2"></i
-                    >Register</a
+                  <a class="nav-link py-2 px-0 px-lg-2" href="/signup" aria-label="Register"
+                    ><i class="fa-solid fa-user-plus d-inline d-lg-none me-2"></i>Register</a
                   >
                 </li>
               % endif
               <li class="nav-item py-1 col-12 col-lg-auto order-lg-2">
-                <div class="vr d-none d-lg-flex h-100 mx-lg-2"></div>
+                <div class="vr d-none d-lg-flex h-100 mx-lg-2" aria-hidden="true"></div>
                 <hr class="d-lg-none">
               </li>
               <li
@@ -214,6 +211,7 @@
                   style="display: ${'none;' if request.cookies.get('theme') != 'dark' else 'inline-block;'}"
                   class="nav-link py-2 px-0 px-lg-2"
                   title="Light Theme"
+                  aria-label="A toggle to light theme"
                 >
                   <i class="fa fa-sun"></i
                   ><span class="d-inline d-lg-none ms-2">Light Theme</span>
@@ -223,6 +221,7 @@
                   style="display: ${'none;' if request.cookies.get('theme') == 'dark' else 'inline-block;'}"
                   class="nav-link py-2 px-0 px-lg-2"
                   title="Dark Theme"
+                  aria-label="A toggle to light theme"
                 >
                   <i class="fa fa-moon"></i>
                   <span class="d-inline d-lg-none ms-2">Dark Theme</span>
@@ -240,6 +239,7 @@
           class="offcanvas-lg offcanvas-start"
           id="leftsidebar"
           aria-labelledby="leftsidebarOffcanvasLabel"
+          role="dialog"
         >
           <div class="offcanvas-header border-bottom">
             <h5 class="offcanvas-title" id="leftsidebarOffcanvasLabel">
@@ -254,7 +254,7 @@
             ></button>
           </div>
           <div class="offcanvas-body pt-lg-2">
-            <nav class="links w-100">
+            <nav class="links w-100" aria-label="Sidebar navigation">
               <ul class="links-nav list-unstyled mb-0 pb-3 pb-md-2 pe-lg-1">
                 <li class="links-group">
                   <strong
@@ -493,6 +493,9 @@
                 id="fallback_div"
                 class="alert alert-success alert-dismissible alert-success-non-transparent fixed-top"
                 style="display: none"
+                role="alert"
+                aria-live="assertive"
+                aria-atomic="true"
               >
                 <span id="fallback">Notification!</span>
                 <button
@@ -513,6 +516,9 @@
                 id="error_div"
                 class="alert alert-danger alert-dismissible alert-danger-non-transparent fixed-top"
                 style="display: none"
+                role="alert"
+                aria-live="assertive"
+                aria-atomic="true"
               >
                 <span id="error"></span>
                 <button
@@ -532,7 +538,7 @@
               % if request.session.peek_flash('error'):
                 <% flash = request.session.pop_flash('error') %>
                 % for message in flash:
-                <div class="alert alert-danger alert-dismissible">
+                <div class="alert alert-danger alert-dismissible" role="alert" aria-live="assertive" aria-atomic="true">
                   ${message}
                   <button
                     type="button"
@@ -546,7 +552,7 @@
               % if request.session.peek_flash():
                 <% flash = request.session.pop_flash() %>
                 % for message in flash:
-                  <div class="alert alert-success alert-dismissible">
+                  <div class="alert alert-success alert-dismissible" role="alert" aria-live="assertive" aria-atomic="true">
                     ${message}
                     <button
                       type="button"
diff --git a/server/fishtest/templates/contributors.mak b/server/fishtest/templates/contributors.mak
index b619c2413..5e2b58983 100644
--- a/server/fishtest/templates/contributors.mak
+++ b/server/fishtest/templates/contributors.mak
@@ -34,7 +34,7 @@
   })();
 </script>
 
-<h2>
+<h2 id="contributors-heading">
   Contributors
   % if 'monthly' in request.url:
     - Top Month
@@ -111,34 +111,38 @@
 
 <div class="row g-3 mb-1">
   <div class="col-12 col-md-auto">
-    <label class="form-label">Search</label>
+    <label class="form-label" for="search_contributors">Search</label>
     <input
       id="search_contributors"
       class="form-control"
       placeholder="Search some text"
       type="text"
+      aria-describedby="search-help"
     >
+    <div id="search-help" class="form-text">
+      Type to search in the contributors table.
+    </div>
   </div>
 </div>
 
 <div class="table-responsive-lg">
-  <table id="contributors_table" class="table table-striped table-sm">
+  <table id="contributors_table" class="table table-striped table-sm" aria-describedby="contributors-heading">
     <thead class="sticky-top">
       <tr>
-        <th></th>
-        <th>Username</th>
-        <th class="text-end">Last active</th>
-        <th class="text-end">Games/Hour</th>
-        <th class="text-end">CPU Hours</th>
-        <th class="text-end">Games played</th>
-        <th class="text-end">Tests submitted</th>
-        <th>Tests repository</th>
+        <th aria-sort="ascending">Rank</th>
+        <th aria-sort="none">Username</th>
+        <th aria-sort="none" class="text-end">Last active</th>
+        <th aria-sort="none" class="text-end">Games/Hour</th>
+        <th aria-sort="none" class="text-end">CPU Hours</th>
+        <th aria-sort="none" class="text-end">Games played</th>
+        <th aria-sort="none" class="text-end">Tests submitted</th>
+        <th aria-sort="none">Tests repository</th>
       </tr>
     </thead>
     <tbody>
       % for index, user in enumerate(users):
         <tr>
-          <td class="rank">${index + 1}</td>
+          <td class="rank text-center">${index + 1}</td>
           <td>
           % if approver:
             <a href="/user/${user['username']}">
@@ -163,7 +167,7 @@
     
       % if len(users) == 0:
         <tr>
-          <td colspan=20>No users exist</td>
+          <td colspan="8">No users exist</td>
         </tr>
       % endif
     </tbody>
diff --git a/server/fishtest/templates/elo_results.mak b/server/fishtest/templates/elo_results.mak
index 69155109d..13637f4f2 100644
--- a/server/fishtest/templates/elo_results.mak
+++ b/server/fishtest/templates/elo_results.mak
@@ -71,7 +71,12 @@
 </%def>
 
 % if 'sprt' in run['args'] and 'Pending' not in results_info['info'][0]:
-  <a href="/tests/live_elo/${str(run['_id'])}" style="color: inherit;">
+  <a
+    href="/tests/live_elo/${str(run['_id'])}"
+    title="View live Elo for ${run['args']['new_tag']}"
+    aria-label="View live Elo for ${run['args']['new_tag']}"
+    style="color: inherit;"
+  >
 % endif
 % if show_gauge:
   <div id="chart_div_${str(run['_id'])}" style="width:90px;float:left;"></div>
diff --git a/server/fishtest/templates/machines.mak b/server/fishtest/templates/machines.mak
index 7f8f37c72..e8e0ba94e 100644
--- a/server/fishtest/templates/machines.mak
+++ b/server/fishtest/templates/machines.mak
@@ -10,20 +10,20 @@
           return text
 %>
 
-<table class="table table-striped table-sm">
+<table class="table table-striped table-sm" aria-labelledby="machines-heading">
   <thead class="sticky-top">
     <tr>
-      <th>Machine</th>
-      <th>Cores</th>
-      <th>UUID</th>
-      <th>MNps</th>
-      <th>RAM</th>
-      <th>System</th>
-      <th>Compiler</th>
-      <th>Python</th>
-      <th>Worker</th>
-      <th>Running on</th>
-      <th>Last updated</th>
+      <th aria-sort="none">Machine</th>
+      <th aria-sort="none">Cores</th>
+      <th aria-sort="none">UUID</th>
+      <th aria-sort="none">MNps</th>
+      <th aria-sort="none">RAM</th>
+      <th aria-sort="none">System</th>
+      <th aria-sort="none">Compiler</th>
+      <th aria-sort="none">Python</th>
+      <th aria-sort="none">Worker</th>
+      <th aria-sort="none">Running on</th>
+      <th aria-sort="none">Last updated</th>
     </tr>
   </thead>
   <tbody>
@@ -45,11 +45,11 @@
         <td>
           % if 'country_code' in machine:
             <div class="flag flag-${machine['country_code'].lower()}"
-                 style="display: inline-block"></div>
+                 style="display: inline-block" aria-label="${machine['country_code']} flag"></div>
           % endif
           ${machine['concurrency']}
         </td>
-        <td><a href="/workers/${worker_name_}">${machine['unique_key'].split('-')[0]}</a></td>
+        <td><a href="/workers/${worker_name_}" aria-label="Worker ${machine['unique_key'].split('-')[0]}">${machine['unique_key'].split('-')[0]}</a></td>
         <td>${f"{machine['nps'] / 1000000:.2f}"}</td>
         <td>${machine['max_memory']}</td>
         <td>${machine['uname']}</td>
@@ -57,14 +57,14 @@
         <td>${python_version}</td>
         <td>${version}</td>
         <td>
-          <a href="/tests/view/${run_id + '?show_task=' + task_id}" title="${branch + "/" + task_id}">${clip_long(branch) + "/" + task_id}</a>
+          <a href="/tests/view/${run_id + '?show_task=' + task_id}" title="${branch + "/" + task_id}" aria-label="Running on ${clip_long(branch)}/${task_id}">${clip_long(branch) + "/" + task_id}</a>
         </td>
         <td>${delta_time}</td>
       </tr>
     % endfor
     % if "version" not in locals():
       <tr id="no-machines">
-        <td colspan=20>No machines running</td>
+        <td colspan="8">No machines running</td>
       </tr>
     % endif
   </tbody>
diff --git a/server/fishtest/templates/nn_upload.mak b/server/fishtest/templates/nn_upload.mak
index fe6765fd2..cc55caacb 100644
--- a/server/fishtest/templates/nn_upload.mak
+++ b/server/fishtest/templates/nn_upload.mak
@@ -6,8 +6,8 @@
 
 <div class="col-limited-size">
   <header class="text-md-center py-2">
-    <h2>Neural Network Upload</h2>
-    <div class="alert alert-info">
+    <h2 id="upload-heading">Neural Network Upload</h2>
+    <div class="alert alert-info" role="alert">
       <p class="mb-0">
         Please read the
         <a
@@ -38,6 +38,7 @@
     action="${request.url}"
     method="POST"
     enctype="multipart/form-data"
+    aria-labelledby="upload-heading"
   >
     <div class="mb-3">
       <label for="network" class="form-label">
@@ -49,20 +50,28 @@
         name="network"
         type="file"
         accept=".nnue"
+        aria-describedby="network-help"
       >
+      <div id="network-help" class="form-text">
+        Only files with a .nnue extension are accepted.
+      </div>
     </div>
 
     <div class="mb-3 form-check">
-      <label class="form-check-label" for="terms-checkbox">
-        You are the author of this network or have obtained the network with a
-        CC0 license.
-      </label>
       <input
         type="checkbox"
         class="form-check-input"
         id="terms-checkbox"
         onclick="doLicense()"
+        aria-describedby="terms-help"
       >
+      <label class="form-check-label" for="terms-checkbox">
+        You are the author of this network or have obtained the network with a
+        CC0 license.
+      </label>
+      <div id="terms-help" class="form-text">
+        By checking this box, you confirm that you have the rights to upload this network.
+      </div>
     </div>
 
     <button
@@ -70,6 +79,7 @@
       type="submit"
       class="btn btn-primary w-100"
       disabled
+      aria-disabled="true"
     >
       Upload
     </button>
@@ -78,10 +88,13 @@
 
 <script>
   function doLicense() {
+    const uploadButton = document.getElementById("upload-button");
     if (document.getElementById("terms-checkbox").checked) {
-      document.getElementById("upload-button").removeAttribute("disabled");
+      uploadButton.removeAttribute("disabled");
+      uploadButton.setAttribute("aria-disabled", "false");
     } else {
-      document.getElementById("upload-button").setAttribute("disabled", "");
+      uploadButton.setAttribute("disabled", "");
+      uploadButton.setAttribute("aria-disabled", "true");
     }
   }
 </script>
diff --git a/server/fishtest/templates/nns.mak b/server/fishtest/templates/nns.mak
index 163cb49ff..9c0f63995 100644
--- a/server/fishtest/templates/nns.mak
+++ b/server/fishtest/templates/nns.mak
@@ -4,7 +4,7 @@
   document.title = "Neural Network Repository | Stockfish Testing";
 </script>
 
-<h2>Neural Network Repository</h2>
+<h2 id="nn-repository-heading">Neural Network Repository</h2>
 
 <p>
   These networks are freely available for download and sharing under a
@@ -14,7 +14,7 @@
   The recommended net for a given Stockfish executable can be found as the default value of the EvalFile UCI option.
 </p>
 
-<form class="row mb-3" id="search_nn">
+<form class="row mb-3" id="search_nn" aria-labelledby="nn-repository-heading">
   <div class="col-12 col-md-auto mb-3">
     <label for="network_name" class="form-label">Network</label>
     <input
@@ -29,25 +29,26 @@
 
   <div class="col-12 col-md-auto mb-3">
     <label for="user" class="form-label">Uploaded by</label>
-  <input
-    id="user"
-    type="text"
-    name="user"
-    class="form-control"
-    placeholder="Username"
-    value="${request.GET.get('user', '')}"
-  >
+    <input
+      id="user"
+      type="text"
+      name="user"
+      class="form-control"
+      placeholder="Username"
+      value="${request.GET.get('user', '')}"
+    >
   </div>
 
   <div class="col-12 mb-3 d-flex align-items-end">
     <div class="form-check form-check-inline">
-      <label class="form-check-label" for="master_only">Only master</label>
       <input
         type="checkbox"
         class="form-check-input"
         id="master_only"
-        name="master_only" ${'checked' if master_only else ''}
+        name="master_only" 
+        ${'checked' if master_only else ''}
       >
+      <label class="form-check-label" for="master_only">Only master</label>
     </div>
   </div>
 
@@ -59,37 +60,37 @@
 <%include file="pagination.mak" args="pages=pages"/>
 
 <div class="table-responsive-lg">
-  <table class="table table-striped table-sm">
+  <table class="table table-striped table-sm" aria-labelledby="nn-repository-heading">
     <thead class="sticky-top">
       <tr>
-        <th>Time</th>
-        <th>Network</th>
-        <th>Username</th>
-        <th>First test</th>
-        <th>Last test</th>
-        <th style="text-align:right">Downloads</th>
+        <th aria-sorted="descending">Time</th>
+        <th aria-sorted="none">Network</th>
+        <th aria-sorted="none">Username</th>
+        <th aria-sorted="none">First test</th>
+        <th aria-sorted="none">Last test</th>
+        <th aria-sorted="none" style="text-align:right">Downloads</th>
       </tr>
     </thead>
     <tbody>
       % for idx, nn in enumerate(nns):
         % if not master_only or 'is_master' in nn:
           <tr>
-            <td>${nn['time'].strftime("%y-%m-%d %H:%M:%S")}</td>
+            <td><time datetime="${nn['time'].strftime('%Y-%m-%dT%H:%M:%SZ')}">${nn['time'].strftime('%y-%m-%d %H:%M:%S')}</time></td>
             % if 'is_master' in nn:
               <td class="default-net">
             % else:
               <td>
             % endif
-            <a href="api/nn/${nn['name']}" style="font-family:monospace">${nn['name']}</a></td>
+            <a href="api/nn/${nn['name']}" style="font-family:monospace" aria-label="Download neural network ${nn['name']}">${nn['name']}</a></td>
             <td>${nn['user']}</td>
             <td>
               % if 'first_test' in nn:
-                <a href="tests/view/${nn['first_test']['id']}">${str(nn['first_test']['date']).split('.')[0]}</a>
+                <a href="tests/view/${nn['first_test']['id']}" aria-label="View first test ${str(nn['first_test']['date']).split('.')[0]}"><time datetime="${nn['first_test']['date'].isoformat()}">${str(nn['first_test']['date']).split('.')[0]}</time></a>
               % endif
             </td>
             <td>
               % if 'last_test' in nn:
-                <a href="tests/view/${nn['last_test']['id']}">${str(nn['last_test']['date']).split('.')[0]}</a>
+                <a href="tests/view/${nn['last_test']['id']}" aria-label="View last test ${str(nn['last_test']['date']).split('.')[0]}"><time datetime="${nn['last_test']['date'].isoformat()}">${str(nn['last_test']['date']).split('.')[0]}</time></a>
               % endif
             </td>
             <td style="text-align:right">${nn.get('downloads', 0)}</td>
@@ -98,7 +99,7 @@
       % endfor
       % if "idx" not in locals():
         <tr>
-          <td colspan=20>No nets available</td>
+          <td colspan="6">No nets available</td>
         </tr>
       % endif
     </tbody>
diff --git a/server/fishtest/templates/notfound.mak b/server/fishtest/templates/notfound.mak
index c632e7517..0d8efc7b4 100644
--- a/server/fishtest/templates/notfound.mak
+++ b/server/fishtest/templates/notfound.mak
@@ -28,7 +28,7 @@
     display: inline-block;
     padding: 0.75rem 1.5rem;
     background-color: #77828f;
-    color: #fff;
+    color: #fff !important;
     text-decoration: none;
     border-radius: 5px;
     transition: background-color 0.3s;
@@ -41,11 +41,19 @@
   }
 </style>
 
-<div class="error-container">
-  <div class="error-content">
+<div class="error-container" tabindex="-1">
+  <div class="error-content" role="alert">
     <h1 class="error-heading">404</h1>
     <h2 class="error-message">Oops! Page not found.</h2>
     <p class="lead">The page you are looking for might have been removed, had its name changed, or is temporarily unavailable.</p>
-    <a href="/" class="error-button">Go to Home</a>
+    <a href="/" id="error-button" class="btn btn-lg btn-light border" role="button">Go to Home</a>
   </div>
 </div>
+
+<script>
+  document.addEventListener("DOMContentLoaded", (e) => {
+    setTimeout(() => {
+      document.getElementById("error-button").focus();
+    }, 600);
+  });
+</script>
diff --git a/server/fishtest/templates/pagination.mak b/server/fishtest/templates/pagination.mak
index 9872b9286..720648a35 100644
--- a/server/fishtest/templates/pagination.mak
+++ b/server/fishtest/templates/pagination.mak
@@ -1,14 +1,16 @@
 <%page args="pages=None"/>
 
 % if pages and len(pages) > 3:
-  <nav>
+  <nav aria-label="Pagination">
   <ul class="pagination pagination-sm">
   % for page in pages:
     <li class="page-item ${page['state']}">
       % if page['state'] not in ['disabled', 'active']:
-        <a class="page-link" href="${page['url']}">${page['idx']}</a>
+        <a class="page-link" href="${page['url']}" aria-label="Page ${page['idx']}">${page['idx']}</a>
+      % elif page['state'] == 'active':
+        <a class="page-link" aria-current="page">${page['idx']}</a>
       % else:
-        <a class="page-link">${page['idx']}</a>
+        <a class="page-link" aria-disabled="true">${page['idx']}</a>
       % endif
     </li>
   % endfor
diff --git a/server/fishtest/templates/run_table.mak b/server/fishtest/templates/run_table.mak
index fd6757d32..d5861140d 100644
--- a/server/fishtest/templates/run_table.mak
+++ b/server/fishtest/templates/run_table.mak
@@ -32,7 +32,10 @@
 <h4>
 % if toggle:
   <a id="${toggle}-button" class="btn btn-sm btn-light border"
-     data-bs-toggle="collapse" href="#${toggle}" role="button" aria-expanded="false"
+     data-bs-toggle="collapse"
+     href="#${toggle}"
+     role="button"
+     aria-expanded=${'true' if get_cookie(request, cookie_name)=='Hide' else 'false'}
      aria-controls="${toggle}" onclick="toggle${toggle.capitalize()}()">
   ${'Hide' if get_cookie(request, cookie_name)=='Hide' else 'Show'}
   </a>
@@ -56,7 +59,7 @@
   <%include file="pagination.mak" args="pages=pages"/>
 
   <div class="table-responsive-lg">
-    <table class="table table-striped table-sm run-table">
+    <table class="table table-striped table-sm run-table" aria-labelledby="run-table-heading" role="presentation">
       <thead></thead>
       <tbody>
         % for run in runs:
@@ -64,8 +67,8 @@
             % if show_delete:
               <td style="width: 1%;" class="run-button run-deny">
                 <div class="dropdown">
-                  <button type="submit" class="btn btn-danger btn-sm" data-bs-toggle="dropdown">
-                    <i class="fas fa-trash-alt"></i>
+                  <button type="button" class="btn btn-danger btn-sm" data-bs-toggle="dropdown">
+                    <i class="fas fa-trash-alt" title="Delete run" aria-label="Delete run"></i>
                   </button>
                   <div class="dropdown-menu" role="menu">
                     <form
@@ -84,18 +87,33 @@
             % endif
 
             <td style="width: 6%;" class="run-date">
-              ${run['start_time'].strftime("%y-%m-%d")}
+              <time
+                datetime="${run['start_time'].strftime('%Y-%m-%dT%H:%M:%SZ')}"
+                title="The starting date of the run" aria-label="The starting date of the run"
+              >
+                ${run['start_time'].strftime('%y-%m-%d')}
+              </time>
             </td>
 
             <td style="width: 2%;" class="run-user">
               <a href="/tests/user/${run['args'].get('username', '')}"
-                 title="${run['args'].get('username', '')}">
+                 title="View tests of user ${run['args'].get('username', '')}"
+                 aria-label="View tests of user ${run['args'].get('username', '')}"
+              >
                 ${run['args'].get('username', '')[:3]}
               </a>
             </td>
             % if not run["finished"]:
               <td class="run-notification" style="width:3em;text-align:center;">
-                <div id=notification_${run['_id']} class='notifications' onclick='handleNotification(this)' style='display:inline-block;cursor:pointer;'>
+                <div
+                  id="notification_${run['_id']}"
+                  class="notifications"
+                  onclick="handleNotification(this)"
+                  style="display:inline-block;cursor:pointer;"
+                  role="button"
+                  title="Notification for ${run['_id']}"
+                  aria-label="Notification for ${run['_id']}"
+                >
                 </div>
                 <script>
                   setNotificationStatus_("${run['_id']}");   // no broadcast since this is at initialization
@@ -103,11 +121,21 @@
               </td>
             % endif
             <td style="width: 16%;" class="run-view">
-              <a href="/tests/view/${run['_id']}">${run['args']['new_tag'][:23]}</a>
+              <a
+                href="/tests/view/${run['_id']}"
+                aria-label="View test for ${run['args']['new_tag']}"
+                title="View test for ${run['args']['new_tag']}"
+              >${run['args']['new_tag'][:23]}</a>
             </td>
 
             <td style="width: 2%;" class="run-diff">
-              <a href="${h.diff_url(run)}" target="_blank" rel="noopener">diff</a>
+              <a
+                href="${h.diff_url(run)}"
+                target="_blank"
+                rel="noopener"
+                title="View diff for ${run['args']['new_tag']} on GitHub"
+                aria-label="View diff for ${run['args']['new_tag']} on GitHub"
+              >diff</a>
             </td>
 
             <td style="width: 1%;" class="run-elo">
@@ -117,15 +145,37 @@
             <td style="width: 13%;" class="run-live">
               <span class="${'rounded ltc-highlight me-1' if is_active_sprt_ltc(run) else 'me-1'}">
               % if 'sprt' in run['args']:
-                <a href="/tests/live_elo/${str(run['_id'])}" target="_blank">sprt</a>
+                <a
+                  href="/tests/live_elo/${str(run['_id'])}"
+                  target="_blank"
+                  title="View live Elo for ${run['args']['new_tag']}"
+                  aria-label="View live Elo for ${run['args']['new_tag']}"
+                >sprt</a>
               % else:
-                ${run['args']['num_games']}
+                <span
+                  title="Number of games"
+                  aria-label="Number of games"
+                >${run['args']['num_games']}</span>
               % endif
-              @ ${run['args']['tc']} th ${str(run['args'].get('threads',1))}
+              <span
+                title="Time Control"
+                aria-label="Time Control"
+              >@ ${run['args']['tc']}&nbsp;</span>
+              <span
+                title="Threads for a side per game"
+                aria-label="Threads for a side per game"
+              >th&nbsp;${str(run['args'].get('threads',1))}</span>
               </span>
               % if not run['finished']:
                 <div>
-                  ${f"cores: {run.get('cores', '')} ({run.get('workers', '')})"}
+                  <span
+                  title="Cores running test"
+                  aria-label="Cores running test"
+                  >cores:&nbsp;${run.get('cores', '')}&nbsp;</span>
+                  <span
+                    title="Workers running test"
+                    aria-label="Workers running test"
+                  >(${run.get('workers', '')})</span>
                 </div>
               % endif
             </td>
@@ -137,7 +187,7 @@
         % endfor
         % if alt and count == 0:
           <tr>
-            <td> ${alt} </td>
+            <td colspan="8">${alt}</td>
           </tr>
         % endif
       </tbody>
diff --git a/server/fishtest/templates/signup.mak b/server/fishtest/templates/signup.mak
index ac5d68e8d..deb73325a 100644
--- a/server/fishtest/templates/signup.mak
+++ b/server/fishtest/templates/signup.mak
@@ -10,8 +10,8 @@
 
 <div class="col-limited-size">
   <header class="text-md-center py-2">
-    <h2>Register</h2>
-    <div class="alert alert-info">
+    <h2 id="register-heading">Register</h2>
+    <div class="alert alert-info" role="alert">
       <h4 class="alert-heading">Manual Approvals</h4>
       <p class="mb-0">To avoid spam, a person will manually approve your account.</p>
       <p class="mb-0">This is usually quick but <strong>sometimes takes a few hours</strong>.</p>
@@ -20,25 +20,27 @@
     </div>
   </header>
 
-  <form method="POST">
+  <form method="POST" aria-labelledby="register-heading">
     <input type="hidden" name="csrf_token" value="${request.session.get_csrf_token()}">
 
     <div class="form-floating mb-3">
       <input
         type="text"
-        class="form-control mb-3"
+        class="form-control"
         id="username"
         name="username"
         placeholder="Username"
         pattern="[A-Za-z0-9]{2,}"
-        title="Only letters and digits and at least 2 long"
+        title="Only letters and digits and at least 2 characters long"
         required
+        aria-describedby="username-help"
         autofocus
       >
-      <label for="username" class="d-flex align-items-end">Username</label>
+      <label for="username">Username</label>
+      <div id="username-help" class="form-text">Only letters and digits and at least 2 characters long.</div>
     </div>
 
-    <div class="input-group mb-3">
+    <div class="input-group">
       <div class="form-floating">
         <input
           type="password"
@@ -49,15 +51,17 @@
           pattern=".{8,}"
           title="Eight or more characters: a password too simple or trivial to guess will be rejected"
           required
+          aria-describedby="password-help"
         >
-        <label for="password" class="d-flex align-items-end">Password</label>
+        <label for="password">Password</label>
       </div>
-      <span class="input-group-text toggle-password-visibility" role="button">
+      <span class="input-group-text toggle-password-visibility" role="button" aria-label="Toggle password visibility">
         <i class="fa-solid fa-lg fa-eye pe-none" style="width: 30px"></i>
       </span>
     </div>
+    <div id="password-help" class="form-text mb-3">Eight or more characters: a password too simple or trivial to guess will be rejected.</div>
 
-    <div class="input-group mb-3">
+    <div class="input-group">
       <div class="form-floating">
         <input
           type="password"
@@ -65,25 +69,30 @@
           id="password2"
           name="password2"
           placeholder="Repeat Password"
+          pattern=".{8,}"
           required
+          aria-describedby="password2-help"
         >
-        <label for="password2" class="d-flex align-items-end">Repeat Password</label>
+        <label for="password2">Repeat Password</label>
       </div>
-      <span class="input-group-text toggle-password-visibility" role="button">
+      <span class="input-group-text toggle-password-visibility" role="button" aria-label="Toggle password visibility">
         <i class="fa-solid fa-lg fa-eye pe-none" style="width: 30px"></i>
       </span>
     </div>
+    <div id="password2-help" class="form-text mb-3">Please repeat your password.</div>
 
     <div class="form-floating mb-3">
       <input
         type="email"
-        class="form-control mb-3"
+        class="form-control"
         id="email"
         name="email"
         placeholder="Email"
         required
+        aria-describedby="email-help"
       >
-      <label for="email" class="d-flex align-items-end">Email</label>
+      <label for="email">Email</label>
+      <div id="email-help" class="form-text">Enter a valid email address.</div>
     </div>
 
     <div class="input-group mb-3">
@@ -93,28 +102,35 @@
           id="tests_repo"
           name="tests_repo"
           placeholder="GitHub Stockfish fork URL"
+          aria-describedby="tests_repo_help"
         >
-        <label for="tests_repo" class="d-flex align-items-end">Tests Repository</label>
+        <label for="tests_repo">Tests Repository</label>
       </div>
-      <span class="input-group-text" role="button" data-bs-toggle="modal" data-bs-target="#tests_repo_info_modal">
+      <span
+        class="input-group-text"
+        role="button"
+        data-bs-toggle="modal"
+        data-bs-target="#tests_repo_info_modal"
+        aria-label="More information about Tests Repository"
+        aria-haspopup="dialog"
+      >
         <i class="fas fa-question-circle fa-lg pe-none" style="width: 30px"></i>
       </span>
     </div>
 
-    <div id="tests_repo_info_modal" class="modal fade" tabindex="-1" aria-labelledby="tests_repo_info_modal_label" aria-hidden="true">
+    <div id="tests_repo_info_modal" class="modal fade" tabindex="-1" aria-labelledby="tests_repo_info_modal_label" role="dialog">
       <div class="modal-dialog modal-dialog-centered">
         <div class="modal-content">
           <div class="modal-body">
           This Github fork URL will be the default fork URL for users who want to contribute code when creating runs,
-           it is not needed for resources contribution.
+          it is not needed for resources contribution, e.g. https://github.com/user1/Stockfish .
           </div>
         </div>
       </div>
     </div>
 
-    <div class="g-recaptcha mb-3"
-         data-sitekey="6LePs8YUAAAAABMmqHZVyVjxat95Z1c_uHrkugZM"></div>
-
+    <div class="g-recaptcha" data-sitekey="6LePs8YUAAAAABMmqHZVyVjxat95Z1c_uHrkugZM"></div>
+    <div id="recaptcha-help" class="form-text mb-3">This site is protected by reCAPTCHA to ensure you're not a robot. Simply click the checkbox to proceed.</div>
     <button type="submit" class="btn btn-primary w-100">Register</button>
   </form>
 </div>
diff --git a/server/fishtest/templates/sprt_calc.mak b/server/fishtest/templates/sprt_calc.mak
index 5066092f2..b1bcf4320 100644
--- a/server/fishtest/templates/sprt_calc.mak
+++ b/server/fishtest/templates/sprt_calc.mak
@@ -4,18 +4,36 @@
   document.title = "Chess SPRT Calculator | Stockfish Testing";
 </script>
 
-<h2>Chess SPRT Calculator</h2>
+<h2 id="page-heading">Chess SPRT Calculator</h2>
 
-<form id="parameters" class="row">
+<form id="parameters" class="row" aria-labelledby="page-heading">
   <div class="col-12 col-md-auto mb-3">
-    <label for="elo-model" class="form-label">Elo model</label>
+    <label for="elo-model" class="form-label">
+      Elo model
+      <span
+        class="help-tooltip"
+        tabindex="0"
+        title="Select the Elo model type."
+      >
+        <i class="fas fa-info-circle"></i>
+      </span>
+    </label>
     <select id="elo-model" class="form-select">
       <option>Normalized</option>
       <option>Logistic</option>
     </select>
   </div>
   <div class="col-6 col-md-auto mb-3">
-    <label for="elo-0" class="form-label">Elo0</label>
+    <label for="elo-0" class="form-label">
+      Elo0
+      <span
+        class="help-tooltip"
+        tabindex="0"
+        title="Lower bound for the Elo range."
+      >
+        <i class="fas fa-info-circle"></i>
+      </span>
+    </label>
     <input
       id="elo-0"
       class="form-control number no-arrows"
@@ -26,7 +44,16 @@
     >
   </div>
   <div class="col-6 col-md-auto mb-3">
-    <label for="elo-1" class="form-label">Elo1</label>
+    <label for="elo-1" class="form-label">
+      Elo1
+      <span
+        class="help-tooltip"
+        tabindex="0"
+        title="Upper bound for the Elo range."
+      >
+        <i class="fas fa-info-circle"></i>
+      </span>
+    </label>
     <input
       id="elo-1"
       class="form-control number no-arrows"
@@ -37,7 +64,16 @@
     >
   </div>
   <div class="col-6 col-md-auto mb-3">
-    <label for="draw-ratio" class="form-label">Draw ratio</label>
+    <label for="draw-ratio" class="form-label">
+      Draw ratio
+      <span
+        class="help-tooltip"
+        tabindex="0"
+        title="Expected draw ratio between 0 and 1."
+      >
+        <i class="fas fa-info-circle"></i>
+      </span>
+    </label>
     <input
       id="draw-ratio"
       class="form-control number no-arrows"
@@ -48,7 +84,16 @@
     >
   </div>
   <div class="col-6 col-md-auto mb-3">
-    <label for="rms-bias" class="form-label">RMS bias</label>
+    <label for="rms-bias" class="form-label">
+      RMS bias
+      <span
+        class="help-tooltip"
+        tabindex="0"
+        title="Root Mean Square bias of the openings."
+      >
+        <i class="fas fa-info-circle"></i>
+      </span>
+    </label>
     <input
       id="rms-bias"
       class="form-control number no-arrows"
@@ -62,6 +107,7 @@
       type="button"
       value="Calculate"
       onclick="drawCharts()"
+      aria-label="Calculate SPRT results"
     >
   </div>
 </form>
@@ -69,10 +115,10 @@
   <hr>
 </div>
 <div id="mouse_screen" class="row g-0">
-  <div id="pass_prob_chart_div" class="sprt-calc-chart col-12 col-md-6"></div>
-  <div id="expected_chart_div" class="sprt-calc-chart col-12 col-md-6"></div>
+  <div id="pass_prob_chart_div" class="sprt-calc-chart col-12 col-md-6" aria-label="Pass Probability Chart"></div>
+  <div id="expected_chart_div" class="sprt-calc-chart col-12 col-md-6" aria-label="Expected Duration Chart"></div>
 </div>
-<div id="sprt-calc-description">
+<div id="sprt-calc-description" aria-labelledby="page-heading">
   <ul>
     <li>
       The fields <b>Elo0</b> and <b>Elo1</b> represent the bounds for an
@@ -140,7 +186,7 @@
 <script
   src="/js/sprt.js?v=${cache_busters['js/sprt.js']}"
   integrity="sha384-${cache_busters['js/sprt.js']}"
-  rossorigin="anonymous"
+  crossorigin="anonymous"
 ></script>
 
 <script
diff --git a/server/fishtest/templates/tasks.mak b/server/fishtest/templates/tasks.mak
index 62b71d04b..ab0463f53 100644
--- a/server/fishtest/templates/tasks.mak
+++ b/server/fishtest/templates/tasks.mak
@@ -54,7 +54,11 @@
       worker: ${version};
       arch: ${ARCH}
     </td>
-    <td>${str(task.get('last_updated', '-')).split('.')[0]}</td>
+    <td>
+      <time datetime="${str(task.get('last_updated', '-')).split('.')[0]}" aria-label="Last updated">
+        ${str(task.get('last_updated', '-')).split('.')[0]}
+      </time>
+    </td>
     <td>${f"{total:03d} / {task['num_games']:03d}"}</td>
     % if 'pentanomial' not in run['results']:
       <td>${stats.get('wins', '-')}</td>
@@ -83,6 +87,6 @@
 
 % if len(run['tasks'] + run.get('bad_tasks', [])) == 0:
   <tr id="no-tasks">
-    <td colspan=20>No tasks running</td>
+    <td colspan="8">No tasks running</td>
   </tr>
 % endif
diff --git a/server/fishtest/templates/tests.mak b/server/fishtest/templates/tests.mak
index 3e486fed7..cd093e934 100644
--- a/server/fishtest/templates/tests.mak
+++ b/server/fishtest/templates/tests.mak
@@ -13,32 +13,52 @@
   <div class="mw-xxl">
     <div class="row g-3 mb-3">
       <div class="col-6 col-sm">
-        <div class="card card-lg-sm text-center">
-          <div class="card-header text-nowrap" title="Cores">Cores</div>
+        <div class="card card-lg-sm text-center" role="region">
+          <div
+            class="card-header text-nowrap"
+            id="cores-header"
+            title="Total cores connected to the framework"
+            aria-label="Total cores connected to the framework"
+          >Cores</div>
           <div class="card-body">
             <h4 class="card-title mb-0 monospace">${cores}</h4>
           </div>
         </div>
       </div>
       <div class="col-6 col-sm">
-        <div class="card card-lg-sm text-center">
-          <div class="card-header text-nowrap" title="Nodes per second">Nodes / sec</div>
+        <div class="card card-lg-sm text-center" role="region">
+          <div
+            class="card-header text-nowrap"
+            id="nps-header"
+            title="Total nodes per second running"
+            aria-label="Total nodes per second running"
+          >Nodes / sec</div>
           <div class="card-body">
             <h4 class="card-title mb-0 monospace">${f"{nps / (1000000 + 1):.0f}"}M</h4>
           </div>
         </div>
       </div>
       <div class="col-6 col-sm">
-        <div class="card card-lg-sm text-center">
-          <div class="card-header text-nowrap" title="Games per minute">Games / min</div>
+        <div class="card card-lg-sm text-center" role="region">
+          <div
+            class="card-header text-nowrap"
+            id="games-header"
+            title="Games per minute"
+            aria-label="Games per minute"
+          >Games / min</div>
           <div class="card-body">
             <h4 class="card-title mb-0 monospace">${games_per_minute}</h4>
           </div>
         </div>
       </div>
       <div class="col-6 col-sm">
-        <div class="card card-lg-sm text-center">
-          <div class="card-header text-nowrap" title="Time remaining">Time remaining</div>
+        <div class="card card-lg-sm text-center" role="region">
+          <div
+            class="card-header text-nowrap"
+            id="time-header"
+            title="Time remaining to finish the runs"
+            aria-label="Time remaining to finish the runs"
+          >Time remaining</div>
           <div class="card-body">
             <h4 class="card-title mb-0 monospace">${pending_hours}h</h4>
           </div>
@@ -115,7 +135,10 @@
 
   <h4>
     <a id="machines-button" class="btn btn-sm btn-light border"
-      data-bs-toggle="collapse" href="#machines" role="button" aria-expanded="false"
+      data-bs-toggle="collapse"
+      href="#machines"
+      role="button"
+      aria-expanded=${'true' if machines_shown else 'false'}
       aria-controls="machines">
       ${'Hide' if machines_shown else 'Show'}
     </a>
@@ -129,15 +152,16 @@
     max_height = str(34.7) + "vh"
   %>
   <section id="machines"
-      class="overflow-auto ${'collapse show' if machines_shown else 'collapse'}">
+      class="overflow-auto ${'collapse show' if machines_shown else 'collapse'}"
+      aria-labelledby="machines-button" aria-live="polite">
       <div class="ssc-card ssc-wrapper">
         <div class="ssc-head-line"></div>
         <div
           class="ssc-square"
           style="height: clamp(${min_height}, ${height}, ${max_height});">
-          </div>
+        </div>
       </div>
-  </div>
+  </section>
 % endif
 
 <%include file="run_tables.mak"/>
diff --git a/server/fishtest/templates/tests_live_elo.mak b/server/fishtest/templates/tests_live_elo.mak
index 85a22eb7c..1b57dac1c 100644
--- a/server/fishtest/templates/tests_live_elo.mak
+++ b/server/fishtest/templates/tests_live_elo.mak
@@ -13,66 +13,76 @@
   followLive(testId);
 </script>
 
-<h2>Live Elo for SPRT test <a href="/tests/view/${str(run['_id'])}">${str(run['_id'])}</a></h2>
+<h2>Live Elo for SPRT test <a href="/tests/view/${str(run['_id'])}" aria-label="View test ${str(run['_id'])}">${str(run['_id'])}</a></h2>
+
+<div class="form-check form-switch mb-3">
+  <input class="form-check-input" type="checkbox" id="auto-refresh-switch" checked>
+  <label class="form-check-label" for="auto-refresh-switch">Enable auto-refresh (updates every 20 seconds)</label>
+  <div class="form-text">Note: only visible tabs gets updated.</div>
+</div>
 
 <div class="row">
-  <div class="col-12 d-flex justify-content-center align-items-center flex-column flex-sm-row" >
-    <div id="LLR_chart_div"></div>
+  <div class="col-12 d-flex justify-content-center align-items-center flex-column flex-sm-row">
+    <div id="LLR_chart_div" aria-label="LLR Chart" role="img"></div>
     <div style="width: 1em"></div>
-    <div id="LOS_chart_div"></div>
+    <div id="LOS_chart_div" aria-label="LOS Chart" role="img"></div>
     <div style="width: 1em"></div>
-    <div id="ELO_chart_div"></div>
+    <div id="ELO_chart_div" aria-label="Elo Chart" role="img"></div>
   </div>
-  <h4>Details</h4>
+  <h4 id="live_details">Details</h4>
   <div class="col-12 table-responsive-lg">
     <table
       id="data"
       class="details-table table table-striped table-sm"
-      style="visibility: hidden">
+      style="visibility: hidden"
+      aria-labelledby="live_details"
+      aria-live="polite"
+      role="presentation"
+    >
       <thead></thead>
       <tbody>
         <tr>
-          <td>Commit</td>
+          <td aria-label="Commit link">Commit</td>
           <td>
             <a href="#" id="commit" target="_blank" rel="noopener noreferrer"></a>
           </td>
         </tr>
         <tr>
-          <td>Info</td>
+          <td aria-label="Information">Info</td>
           <td id="info"></td>
         </tr>
         <tr>
-          <td>Submitter</td>
+          <td aria-label="Submitter username">Submitter</td>
           <td>
             <a href="#" id="username"></a>
           </td>
         </tr>
         <tr>
-          <td>TC</td>
+          <td aria-label="Time Control">TC</td>
           <td id="tc"></td>
         </tr>
         <tr>
           <td>SPRT</td>
-          <td id="sprt"></td>
+          <td id="sprt" aria-label="SPRT details"></td>
         </tr>
         <tr>
-          <td>LLR</td>
+          <td aria-label="LLR details">LLR</td>
           <td id="LLR"></td>
         </tr>
         <tr>
-          <td>Elo</td>
+          <td aria-label="Elo details">Elo</td>
           <td id="elo"></td>
         </tr>
         <tr>
-          <td>LOS</td>
+          <td aria-label="LOS details">LOS</td>
           <td id="LOS"></td>
         </tr>
         <tr>
-          <td>Games</td>
+          <td aria-label="Games details">Games</td>
           <td id="games"></td>
         </tr>
         <tr>
-          <td>Pentanomial</td>
+          <td aria-label="Pentanomial details">Pentanomial</td>
           <td id="pentanomial"></td>
         </tr>
       </tbody>
diff --git a/server/fishtest/templates/tests_run.mak b/server/fishtest/templates/tests_run.mak
index 744ecb782..4ddb6e19d 100644
--- a/server/fishtest/templates/tests_run.mak
+++ b/server/fishtest/templates/tests_run.mak
@@ -143,7 +143,12 @@
                         "stop_rule": "stop-rule-sprt",
                         "bounds": "standard STC"
                       }'>
-                    <label class="list-group-item rounded-3" for="vltc_test" title="Very long time control | Single-threaded">
+                    <label
+                      class="list-group-item rounded-3"
+                      for="vltc_test"
+                      title="Very long time control | Single-threaded"
+                      aria-label="Very long time control | Single-threaded"
+                    >
                       VLTC
                     </label>
                   </div>
@@ -161,7 +166,12 @@
                         "stop_rule": "stop-rule-sprt",
                         "bounds": "standard LTC"
                       }'>
-                    <label class="list-group-item rounded-3" for="vltc_smp_test" title="Very long time control | Multi-threaded">
+                    <label
+                      class="list-group-item rounded-3"
+                      for="vltc_smp_test"
+                      title="Very long time control | Multi-threaded"
+                      aria-label="Very long time control | Multi-threaded"
+                    >
                       VLTC SMP
                     </label>
                   </div>
@@ -183,7 +193,12 @@
                         "test_signature": ${latest_bench},
                         "base_signature": ${pt_signature}
                       }'>
-                    <label class="list-group-item rounded-3" for="pt_test" title="Progression test | Single-threaded">
+                    <label
+                      class="list-group-item rounded-3"
+                      for="pt_test"
+                      title="Progression test | Single-threaded"
+                      aria-label="Progression test | Single-threaded"
+                    >
                       PT
                     </label>
                   </div>
@@ -205,7 +220,12 @@
                         "test_signature": ${latest_bench},
                         "base_signature": ${pt_signature}
                       }'>
-                    <label class="list-group-item rounded-3" for="pt_smp_test" title="Progression test | Multi-threaded">
+                    <label
+                      class="list-group-item rounded-3"
+                      for="pt_smp_test"
+                      title="Progression test | Multi-threaded"
+                      aria-label="Progression test | Multi-threaded"
+                    >
                       PT SMP
                     </label>
                   </div>
@@ -213,7 +233,12 @@
               </div>
 
               <div class="mb-2">
-                <label for="tests-repo" class="form-label">Test repository</label>
+                <label
+                  for="tests-repo"
+                  class="form-label"
+                  title="Provide the URL of the test repository."
+                  aria-label="Provide the URL of the test repository."
+                >Test repository</label>
                 <input
                   type="url"
                   name="tests-repo"
@@ -225,7 +250,12 @@
               </div>
 
               <div class="mb-2 col-6">
-                <label for="test-branch" class="form-label">Test Branch</label>
+                <label
+                  for="test-branch"
+                  class="form-label"
+                  title="Specify the branch of the repository you want to test."
+                  aria-label="Specify the branch of the repository you want to test."
+                >Test Branch</label>
                 <input
                   type="text"
                   name="test-branch"
@@ -237,7 +267,12 @@
               </div>
 
               <div class="mb-2 col-6">
-                <label for="base-branch" class="form-label">Base Branch</label>
+                <label
+                  for="base-branch"
+                  class="form-label"
+                  title="Specify the base branch to test against."
+                  aria-label="Specify the base branch to test against."
+                >Base Branch</label>
                 <input
                   type="text"
                   name="base-branch"
@@ -248,7 +283,12 @@
               </div>
 
               <div class="mb-2 col-6">
-                <label for="test-signature" class="form-label">Test Signature</label>
+                <label
+                  for="test-signature"
+                  class="form-label"
+                  title="Provide a signature for the test."
+                  aria-label="Provide a signature for the test."
+                >Test Signature</label>
                 <input
                   type="number"
                   name="test-signature"
@@ -262,7 +302,12 @@
               </div>
 
               <div class="mb-2 col-6">
-                <label for="base-signature" class="form-label">Base Signature</label>
+                <label
+                  for="base-signature"
+                  class="form-label"
+                  title="Provide the signature of the base branch for comparison."
+                  aria-label="Provide the signature of the base branch for comparison."
+                >Base Signature</label>
                 <input
                   type="number"
                   name="base-signature"
@@ -275,7 +320,12 @@
               </div>
 
               <div class="mb-2 col-6">
-                <label for="new-options" class="form-label">Test Options</label>
+                <label
+                  for="new-options"
+                  class="form-label"
+                  title="Provide the UCI options of the new engine."
+                  aria-label="Provide the UCI options of the new engine."
+                >Test Options</label>
                 <input
                   type="text"
                   name="new-options"
@@ -286,7 +336,12 @@
               </div>
 
               <div class="mb-2 col-6">
-                <label for="base-options" class="form-label">Base Options</label>
+                <label
+                  for="base-options"
+                  class="form-label"
+                  title="Provide the UCI options of the old engine."
+                  aria-label="Provide the UCI options of the old engine."
+                >Base Options</label>
                 <input
                   type="text"
                   name="base-options"
@@ -297,7 +352,12 @@
               </div>
 
               <div>
-                <label for="run-info" class="form-label">Info</label>
+                <label
+                  for="run-info"
+                  class="form-label"
+                  title="Provide any additional information for the test, or explain the purpose of the test."
+                  aria-label="Provide any additional information for the test, or explain the purpose of the test."
+                >Info</label>
                 <textarea
                   name="run-info"
                   placeholder="Defaults to commit message"
@@ -314,12 +374,22 @@
           <div class="col-12 col-md-6 mb-2">
             <div class="mb-2">
               <input type="hidden" name="stop_rule" id="stop_rule_field" value="sprt">
-              <label class="form-label">Stop rule</label>
+              <label
+                class="form-label"
+                for="stop-rule"
+                title="Select the stopping rule for the test."
+                aria-label="Select the stopping rule for the test."
+              >Stop rule</label>
               <div class="list-group list-group-checkable flex-row row row-cols-3 g-1 text-center">
                 <div class="col">
                   <input class="list-group-item-check pe-none" type="radio" name="stop-rule" id="stop-rule-sprt"
                     value="stop-rule-sprt" checked>
-                  <label class="list-group-item rounded-3" for="stop-rule-sprt" title="Sequential probability ratio test">
+                  <label
+                    class="list-group-item rounded-3"
+                    for="stop-rule-sprt"
+                    title="Sequential probability ratio test"
+                    aria-label="Sequential probability ratio test"
+                  >
                     SPRT
                   </label>
                 </div>
@@ -327,7 +397,12 @@
                 <div class="col">
                   <input class="list-group-item-check pe-none" type="radio" name="stop-rule" id="stop-rule-games"
                     value="stop-rule-games">
-                  <label class="list-group-item rounded-3" for="stop-rule-games" title="Fixed amount of games">
+                  <label
+                    class="list-group-item rounded-3"
+                    for="stop-rule-games"
+                    title="Fixed amount of games"
+                    aria-label="Fixed amount of games"
+                  >
                     Games
                   </label>
                 </div>
@@ -340,7 +415,12 @@
                     id="stop-rule-spsa"
                     value="stop-rule-spsa"
                   >
-                  <label class="list-group-item rounded-3" for="stop-rule-spsa" title="Simultaneous perturbation stochastic approximation">
+                  <label
+                    class="list-group-item rounded-3"
+                    for="stop-rule-spsa"
+                    title="Simultaneous perturbation stochastic approximation"
+                    aria-label="Simultaneous perturbation stochastic approximation"
+                  >
                     SPSA
                   </label>
                 </div>
@@ -349,7 +429,12 @@
 
             ## This only appears when games or spsa is selected
             <div class="mb-2 stop-rule stop-rule-games stop-rule-spsa" style="${'display: none' if (args.get('sprt') or not is_rerun) else ''}">
-              <label for="num-games" class="form-label">Amount of games</label>
+              <label
+                for="num-games"
+                class="form-label"
+                title="Specify the number of games to be played."
+                aria-label="Specify the number of games to be played."
+              >Amount of games</label>
               <input
                 type="number"
                 name="num-games"
@@ -366,7 +451,12 @@
               <input type="hidden" name="elo_model" id="elo_model_field" value=${elo_model}>
               <div class="row gx-1">
                 <div class="col-12 col-md">
-                  <label for="bounds" class="form-label">SPRT Bounds</label>
+                  <label
+                    for="bounds"
+                    class="form-label"
+                    title="Select the SPRT bounds."
+                    aria-label="Select the SPRT bounds."
+                  >SPRT Bounds</label>
                   <select class="form-select" id="bounds" name="bounds">
                     <option value="standard STC">Standard STC ${fb(0.0, 2.0)}</option>
                     <option value="standard LTC">Standard LTC ${fb(0.5, 2.5)}</option>
@@ -380,7 +470,12 @@
                   class="col-6 col-md-4 col-lg-3 mt-2 mt-md-0 custom-bounds"
                   style="${args.get('sprt') or 'display: none'}"
                 >
-                  <label for="sprt_elo0" class="form-label">SPRT Elo0</label>
+                  <label
+                    for="sprt_elo0"
+                    class="form-label"
+                    title="Provide the lower bound for SPRT Elo."
+                    aria-label="Provide the lower bound for SPRT Elo."
+                  >SPRT Elo0</label>
                   <input
                     type="number"
                     step="0.05"
@@ -394,7 +489,12 @@
                   class="col-6 col-md-4 col-lg-3 mt-2 mt-md-0 custom-bounds"
                   style="${args.get('sprt') or 'display: none'}"
                 >
-                  <label for="sprt_elo1" class="form-label">SPRT Elo1</label>
+                  <label
+                    for="sprt_elo1"
+                    class="form-label"
+                    title="Provide the upper bound for SPRT Elo."
+                    aria-label="Provide the upper bound for SPRT Elo."
+                  >SPRT Elo1</label>
                   <input
                     type="number"
                     step="0.05"
@@ -415,7 +515,12 @@
               <div class="row gx-1">
                 <div class="col-4">
                   <div class="mb-2">
-                    <label for="spsa_A" class="form-label">SPSA A ratio</label>
+                    <label
+                      for="spsa_A"
+                      class="form-label"
+                      title="Provide the SPSA A ratio."
+                      aria-label="Provide the SPSA A ratio."
+                    >SPSA A ratio</label>
                     <input
                       type="number"
                       min="0"
@@ -430,7 +535,12 @@
                 </div>
                 <div class="col-4">
                   <div class="mb-2">
-                    <label for="spsa_alpha" class="form-label">SPSA Alpha</label>
+                    <label
+                      for="spsa_alpha"
+                      class="form-label"
+                      title="Provide the SPSA Alpha value."
+                      aria-label="Provide the SPSA Alpha value."
+                    >SPSA Alpha</label>
                     <input
                       type="number"
                       min="0"
@@ -444,7 +554,12 @@
                 </div>
                 <div class="col-4">
                   <div class="mb-2">
-                    <label for="spsa_gamma" class="form-label">SPSA Gamma</label>
+                    <label
+                      for="spsa_gamma"
+                      class="form-label"
+                      title="Provide the SPSA Gamma value."
+                      aria-label="Provide the SPSA Gamma value."
+                    >SPSA Gamma</label>
                     <input
                       type="number"
                       min="0"
@@ -459,7 +574,12 @@
               </div>
 
               <div class="mb-2">
-                <label for="spsa_raw_params" class="form-label">SPSA parameters</label>
+                <label
+                  for="spsa_raw_params"
+                  class="form-label"
+                  title="Paste the SPSA parameters here."
+                  aria-label="Paste the SPSA parameters here."
+                >SPSA parameters</label>
                 <textarea
                   name="spsa_raw_params"
                   id="spsa_raw_params"
@@ -481,8 +601,9 @@
                   role="button"
                   data-bs-toggle="modal"
                   data-bs-target="#autoselect-modal"
+                  aria-haspopup="dialog"
                 ></i>
-                <div class="modal fade" id="autoselect-modal" tabindex="-1" aria-hidden="true">
+                <div class="modal fade" id="autoselect-modal" tabindex="-1" role="dialog">
                   <div class="modal-dialog modal-dialog-scrollable">
                     <div class="modal-content">
                       <div class="modal-header">
@@ -526,7 +647,12 @@
             <div>
               <div class="row gx-1">
                 <div class="col mb-2">
-                  <label for="threads" class="form-label">Threads</label>
+                  <label
+                    for="threads"
+                    class="form-label"
+                    title="Specify the number of threads."
+                    aria-label="Specify the number of threads."
+                  >Threads</label>
                   <input
                     type="number"
                     min="1"
@@ -537,7 +663,12 @@
                   >
                 </div>
                 <div class="col mb-2">
-                  <label for="tc" class="form-label" title="Time control">TC</label>
+                  <label
+                    for="tc"
+                    class="form-label"
+                    title="Specify the time control."
+                    aria-label="Specify the time control."
+                  >TC</label>
                   <input
                     type="text"
                     name="tc"
@@ -547,7 +678,12 @@
                   >
                 </div>
                 <div class="col mb-2 new_tc" style="display: none;">
-                  <label for="new_tc" class="form-label">Test TC</label>
+                  <label
+                    for="new_tc"
+                    class="form-label"
+                    title="Specify the time control for the new engine."
+                    aria-label="Specify the time control for the new engine."
+                  >Test TC</label>
                   <input
                     type="text"
                     name="new_tc"
@@ -557,7 +693,12 @@
                   >
                 </div>
                 <div class="col mb-2">
-                  <label for="priority" class="form-label">Priority</label>
+                  <label
+                    for="priority"
+                    class="form-label"
+                    title="The priority of the test run. Higher values indicate more urgency."
+                    aria-label="The priority of the test run. Higher values indicate more urgency."
+                  >Priority</label>
                   <input
                     type="number"
                     name="priority"
@@ -567,7 +708,12 @@
                   >
                 </div>
                 <div class="col mb-2">
-                  <label for="throughput" class="form-label">Throughput</label>
+                  <label
+                    for="throughput"
+                    class="form-label"
+                    title="Specify the external throughput as a percentage."
+                    aria-label="Specify the external throughput as a percentage."
+                  >Throughput</label>
                   <select class="form-select" id="throughput" name="throughput">
                     <option value="10">10%</option>
                     <option value="25">25%</option>
@@ -582,7 +728,7 @@
             <div id="test-book" class="mb-2" style="display: none;">
               <div class="row gx-1">
                 <div class="col">
-                  <label for="book" class="form-label">Book</label>
+                  <label for="book" class="form-label" title="Select the book to use for the test.">Book</label>
                   <select name="book" id="book" class="form-select">
                     % for book in valid_books:
                       <option value="${book}" ${"selected" if default_book == book else ""}>${book}</option>
@@ -590,7 +736,12 @@
                   </select>
                 </div>
                 <div class="col-12 col-md-4 mt-2 mt-md-0 book-depth">
-                  <label for="book-depth" class="form-label">Book depth</label>
+                  <label
+                    for="book-depth"
+                    class="form-label"
+                    title="Specify the book depth."
+                    aria-label="Specify the book depth."
+                  >Book depth</label>
                   <input
                     type="number"
                     min="1"
@@ -609,18 +760,22 @@
               <div class="row">
                 <div class="col text-nowrap">
                   <div class="mb-2 form-check">
-                    <label class="form-check-label" for="checkbox-auto-purge">Auto-purge</label>
                     <input
                       type="checkbox"
                       class="form-check-input"
                       id="checkbox-auto-purge"
                       name="auto-purge"
                     >
+                    <label
+                      class="form-check-label"
+                      for="checkbox-auto-purge"
+                      title="Auto-purge the results of bad-workers after the run finishes."
+                      aria-label="Auto-purge the results of bad-workers after the run finishes."
+                    >Auto-purge</label>
                   </div>
                 </div>
                 <div class="col text-nowrap">
                   <div class="mb-2 form-check">
-                    <label class="form-check-label" for="checkbox-time-odds">Time odds</label>
                     <input
                       type="checkbox"
                       class="form-check-input"
@@ -628,22 +783,32 @@
                       name="odds"
                       ${'checked' if is_odds else ''}
                     >
+                    <label
+                      class="form-check-label"
+                      for="checkbox-time-odds"
+                      title="Enable time odds for the test."
+                      aria-label="Enable time odds for the test."
+                    >Time odds</label>
                   </div>
                 </div>
                 <div class="col text-nowrap">
                   <div class="mb-2 form-check">
-                    <label class="form-check-label" for="checkbox-book-visibility">Custom book</label>
                     <input
                       type="checkbox"
                       class="form-check-input"
                       id="checkbox-book-visibility"
                       ${'checked' if default_book != test_book else ''}
                     >
+                    <label
+                      class="form-check-label"
+                      for="checkbox-book-visibility"
+                      title="Enable custom book for the test."
+                      aria-label="Enable custom book for the test."
+                    >Custom book</label>
                   </div>
                 </div>
                 <div class="col text-nowrap">
                   <div class="mb-2 form-check">
-                    <label class="form-check-label" for="checkbox-adjudication">Disable adjudication</label>
                     <input
                       type="checkbox"
                       class="form-check-input"
@@ -651,6 +816,12 @@
                       name="adjudication"
                       ${'checked' if not args.get("adjudication", True) else ''}
                     >
+                    <label
+                      class="form-check-label"
+                      for="checkbox-adjudication"
+                      title="Play games until a checkmate or a draw."
+                      aria-label="Play games until a checkmate or a draw."
+                    >Disable adjudication</label>
                   </div>
                 </div>
               </div>
diff --git a/server/fishtest/templates/tests_view.mak b/server/fishtest/templates/tests_view.mak
index 8ecd01730..df18f6b7d 100644
--- a/server/fishtest/templates/tests_view.mak
+++ b/server/fishtest/templates/tests_view.mak
@@ -68,7 +68,7 @@
 
   <h2>
     <span>${page_title}</span>
-    <a href="${h.diff_url(run)}" target="_blank" rel="noopener">diff</a>
+    <a href="${h.diff_url(run)}" target="_blank" rel="noopener" aria-label="View diff on GitHub" title="View diff on GitHub">diff</a>
   </h2>
 
   <div class="elo-results-top">
@@ -79,43 +79,52 @@
     <div class="col-12 col-lg-9">
       <div id="diff-section">
         <h4>
-          <button id="diff-toggle" class="btn btn-sm btn-light border mb-2">Show</button>
+          <button
+            id="diff-toggle"
+            class="btn btn-sm btn-light border mb-2"
+            aria-expanded="true"
+            aria-controls="diff-contents"
+          >Show</button>
           Diff
-          <span id="diff-num-comments">(0 comments)</span>
+          <span id="diff-num-comments" aria-live="polite">(0 comments)</span>
           <a
             href="${h.diff_url(run)}"
             class="btn btn-primary bg-light-primary border-0 mb-2"
             target="_blank" rel="noopener"
+            aria-label="View diff on GitHub"
+            title="View diff on GitHub"
           >
             View on GitHub
           </a>
 
-          <a
-            href="javascript:"
+          <button
             id="copy-diff"
             class="btn btn-secondary bg-light-secondary border-0 mb-2"
             style="display: none"
+            aria-label="Copy apply-diff command"
+            title="Copy apply-diff command"
           >
             Copy apply-diff command
-          </a>
+          </button>
 
-          <a
-            href="javascript:" 
-            id="master_vs_official_master" class="btn btn-danger  border-0 mb-2"
+          <button
+            id="master_vs_official_master"
+            class="btn btn-danger border-0 mb-2"
             title="Compares master to official-master at the time of submission"
-            style="display: none">
+            style="display: none"
+          >
             <i class="fa-solid fa-triangle-exclamation"></i>
-              <span> master vs official</span>
-            </a>
+            <span>master vs official</span>
+          </button>
 
-          <span class="text-success copied text-nowrap" style="display: none">Copied!</span>
+          <span class="text-success copied text-nowrap" style="display: none" aria-live="assertive">Copied!</span>
         </h4>
         <pre id="diff-contents" style="display: none;"><code class="diff"></code></pre>
       </div>
       <div>
         <h4 style="margin-top: 9px;">Details</h4>
         <div class="table-responsive">
-          <table class="table table-striped table-sm">
+          <table class="table table-striped table-sm" aria-labelledby="details-heading">
             <thead></thead>
             <tbody>
               % for arg in run_args:
@@ -124,9 +133,9 @@
                     <td>${arg[0]}</td>
                     % if arg[0] == 'username':
                       <td>
-                        <a href="/tests/user/${arg[1]}">${arg[1]}</a>
+                        <a href="/tests/user/${arg[1]}" aria-label="View user ${arg[1]}" title="View user ${arg[1]}">${arg[1]}</a>
                         % if approver:
-                          (<a href="/user/${arg[1]}">info</a>)
+                          (<a href="/user/${arg[1]}" aria-label="View user info for ${arg[1]}" title="View user info for ${arg[1]}">info</a>)
                         % endif
                       </td>
                     % elif arg[0] == 'spsa':
@@ -160,7 +169,7 @@
                     % elif arg[0] in ['resolved_new', 'resolved_base']:
                       <td>${arg[1][:10]}</td>
                     % elif arg[0] == 'rescheduled_from':
-                      <td><a href="/tests/view/${arg[1]}">${arg[1]}</a></td>
+                      <td><a href="/tests/view/${arg[1]}" aria-label="View rescheduled test ${arg[1]}" title="View rescheduled test ${arg[1]}">${arg[1]}</a></td>
                     % elif arg[0] == 'itp':
                       <td>${f"{float(arg[1]):.2f}"}</td>
                     % else:
@@ -173,21 +182,19 @@
                   <tr>
                     <td>${arg[0]}</td>
                     <td>
-                      <a href="${arg[2]}" target="_blank" rel="noopener">
-                        ${arg[1]|n}
-                      </a>
+                      <a href="${arg[2]}" target="_blank" rel="noopener" aria-label="Open ${arg[1]}" title="Open ${arg[1]}">${arg[1]|n}</a>
                     </td>
                   </tr>
                 % endif
               % endfor
               <tr>
                 <td>events</td>
-                <td><a href="/actions?run_id=${str(run['_id'])}">/actions?run_id=${run['_id']}</a></td>
+                <td><a href="/actions?run_id=${str(run['_id'])}" aria-label="View events for related to run" title="View events for related to run">/actions?run_id=${run['_id']}</a></td>
               </tr>
               % if 'spsa' not in run['args']:
                 <tr>
                   <td>raw statistics</td>
-                  <td><a href="/tests/stats/${str(run['_id'])}">/tests/stats/${run['_id']}</a></td>
+                  <td><a href="/tests/stats/${str(run['_id'])}" aria-label="View raw statistics for run" title="View raw statistics for run">/tests/stats/${run['_id']}</a></td>
                 </tr>
               % endif
             </tbody>
@@ -208,7 +215,7 @@
                 onsubmit="handleStopDeleteButton('${run['_id']}'); return true;"
               >
                 <input type="hidden" name="run-id" value="${run['_id']}">
-                <button type="submit" class="btn btn-danger w-100">
+                <button type="submit" class="btn btn-danger w-100" aria-label="Stop run" title="Stop run">
                   Stop
                 </button>
               </form>
@@ -219,7 +226,9 @@
                 <form action="/tests/approve" method="POST">
                   <input type="hidden" name="run-id" value="${run['_id']}">
                   <button type="submit" id="approve-btn"
-                          class="btn ${'btn-success' if run['base_same_as_master'] or 'spsa' in run['args'] else 'btn-warning'} w-100">
+                          class="btn ${'btn-success' if run['base_same_as_master'] or 'spsa' in run['args'] else 'btn-warning'} w-100"
+                          aria-label="Approve run"
+                          title="Approve run">
                     Approve
                   </button>
                 </form>
@@ -229,7 +238,12 @@
             <div class="col-12 col-sm">
               <form action="/tests/purge" method="POST">
                 <input type="hidden" name="run-id" value="${run['_id']}">
-                <button type="submit" class="btn btn-danger w-100">Purge</button>
+                <button
+                  type="submit"
+                  class="btn btn-danger w-100"
+                  aria-label="Manually purges the current bad results of the run"
+                  title="Manually purges the current bad results of the run"
+                >Purge</button>
               </form>
             </div>
           % endif
@@ -240,12 +254,18 @@
             <button 
               id="download_games"
               class="btn btn-primary text-nowrap w-100"
+              aria-label="Downloads all the PGNs available for this run"
+              title="Downloads all the PGNs available for this run"
             >Download games</button>
           </div>
         % endif
 
         <div class="col-12 col-sm">
-          <a class="btn btn-light border w-100" href="/tests/run?id=${run['_id']}">Reschedule</a>
+          <a class="btn btn-light border w-100"
+              href="/tests/run?id=${run['_id']}"
+              aria-label="Reschedule a new run for the opponents"
+              title="Reschedule a new run for the same opponents"
+          >Reschedule</a>
         </div>
       </div>
 
@@ -303,7 +323,7 @@
       % if can_modify_run:
         <form class="form" action="/tests/modify" method="POST">
           <div class="mb-3">
-            <label class="form-label" for="modify-num-games">Number of games</label>
+            <label class="form-label" for="modify-num-games" title="The number of games to be played.">Number of games</label>
             <input
               type="number"
               class="form-control"
@@ -312,21 +332,23 @@
               min="0"
               step="1000"
               value="${run['args']['num_games']}"
+              aria-describedby="num-games-help"
             >
           </div>
 
           <div class="mb-3">
-            <label class="form-label" for="modify-priority">Priority (higher is more urgent)</label>
+            <label class="form-label" for="modify-priority" title="The priority of the test run. Higher values indicate more urgency.">Priority (higher is more urgent)</label>
             <input
               type="number"
               class="form-control"
               name="priority"
               id="modify-priority"
               value="${run['args']['priority']}"
+              aria-describedby="priority-help"
             >
           </div>
 
-          <label class="form-label" for="modify-throughput">Throughput</label>
+          <label class="form-label" for="modify-throughput" title="The external throughput as a percentage.">Throughput</label>
           <div class="mb-3 input-group">
             <input
               type="number"
@@ -351,6 +373,8 @@
                 class="form-control"
                 rows="4"
                 style="height: 149px;"
+                aria-label="Modify information about this run."
+                title="Modify information about this run."
               ></textarea>
             </div>
           % endif
@@ -362,7 +386,7 @@
               id="auto-purge"
               name="auto_purge" ${'checked' if run['args'].get('auto_purge') else ''}
             >
-            <label class="form-check-label" for="auto-purge">Auto-purge</label>
+            <label class="form-check-label" for="auto-purge" title="Auto-purge the results of bad-workers after the run finishes.">Auto-purge</label>
           </div>
 
           <input type="hidden" name="run" value="${run['_id']}">
@@ -373,8 +397,8 @@
       % if 'spsa' not in run['args']:
         <hr>
 
-        <h4>Stats</h4>
-        <table class="table table-striped table-sm">
+        <h4>Stats of workers</h4>
+        <table class="table table-striped table-sm" aria-labelledby="stats-heading">
           <thead></thead>
           <tbody>
             <tr><td>chi^2</td><td>${f"{chi2['chi2']:.2f}"}</td></tr>
@@ -387,11 +411,25 @@
       <hr>
 
       <h4>Time</h4>
-      <table class="table table-striped table-sm">
+      <table class="table table-striped table-sm" aria-labelledby="time-heading">
         <thead></thead>
         <tbody>
-          <tr><td>start time</td><td>${run['start_time'].strftime("%Y-%m-%d %H:%M:%S")}</td></tr>
-          <tr><td>last updated</td><td>${run['last_updated'].strftime("%Y-%m-%d %H:%M:%S")}</td></tr>
+          <tr>
+            <td>start time</td>
+            <td>
+              <time
+                datatime="${run['start_time'].strftime("%Y-%m-%d %H:%M:%S")}"
+              >${run['start_time'].strftime("%Y-%m-%d %H:%M:%S")}</time>
+            </td>
+          </tr>
+          <tr>
+            <td>last updated</td>
+            <td>
+              <time
+                datatime="${run['last_updated'].strftime("%Y-%m-%d %H:%M:%S")}"
+              >${run['last_updated'].strftime("%Y-%m-%d %H:%M:%S")}</time>
+            </td>
+          </tr>
         </tbody>
       </table>
 
@@ -402,7 +440,10 @@
           id="follow_button_${run['_id']}"
           class="btn btn-primary col-12 col-md-auto"
           onclick="handleFollowButton(this)"
-          style="display:none; margin-top:0.2em;"></button>
+          style="display:none; margin-top:0.2em;"
+          aria-label="Follow test"
+          title="Follow test"
+        ></button>
         <hr style="visibility:hidden;">
       % endif
     </div>
@@ -410,7 +451,7 @@
 
   % if 'spsa' in run['args']:
     <div id="spsa_preload" class="col-lg-3">
-      <div class="pt-1 text-center">
+      <div class="pt-1 text-center" aria-live="polite">
         Loading graph...
       </div>
     </div>
@@ -418,32 +459,37 @@
     <div id="chart_toolbar" style="display: none">
       Gaussian Kernel Smoother&nbsp;&nbsp;
       <div class="btn-group">
-        <button id="btn_smooth_plus" class="btn">&nbsp;&nbsp;&nbsp;+&nbsp;&nbsp;&nbsp;</button>
-        <button id="btn_smooth_minus" class="btn">&nbsp;&nbsp;&nbsp;−&nbsp;&nbsp;&nbsp;</button>
+        <button id="btn_smooth_plus" class="btn" aria-label="Increase smoothing" title="Increase smoothing">&nbsp;&nbsp;&nbsp;+&nbsp;&nbsp;&nbsp;</button>
+        <button id="btn_smooth_minus" class="btn" aria-label="Decrease smoothing" title="Decrease smoothing">>&nbsp;&nbsp;&nbsp;−&nbsp;&nbsp;&nbsp;</button>
       </div>
 
       <div class="btn-group">
         <button
           id="btn_view_individual"
           type="button"
-          class="btn btn-default dropdown-toggle" data-bs-toggle="dropdown"
+          class="btn btn-default dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="menu" aria-expanded="false"
+          aria-label="View individual parameter"
+          title="View individual parameter"
         >
           View Individual Parameter<span class="caret"></span>
         </button>
         <ul class="dropdown-menu" role="menu" id="dropdown_individual"></ul>
       </div>
 
-      <button id="btn_view_all" class="btn">View All</button>
+      <button id="btn_view_all" class="btn" aria-label="View all parameters">View All</button>
     </div>
     <div class="overflow-auto">
-      <div id="spsa_history_plot"></div>
+      <div id="spsa_history_plot" role="img" aria-label="SPSA history plot"></div>
     </div>
   % endif
 
   <h4>
       <a
         id="tasks-button" class="btn btn-sm btn-light border"
-        data-bs-toggle="collapse" href="#tasks" role="button" aria-expanded="false"
+        data-bs-toggle="collapse"
+        href="#tasks"
+        role="button"
+        aria-expanded="${'true' if tasks_shown else 'false'}"
         aria-controls="tasks"
       >
         ${'Hide' if tasks_shown else 'Show'}
@@ -451,8 +497,8 @@
     Tasks ${totals}
   </h4>
   <section id="tasks"
-       class="overflow-auto ${'collapse show' if tasks_shown else 'collapse'}">
-    <table class='table table-striped table-sm'>
+       class="overflow-auto ${'collapse show' if tasks_shown else 'collapse'}" aria-labelledby="tasks-button">
+    <table class='table table-striped table-sm' aria-labelledby="tasks-heading">
       <thead id="tasks-head" class="sticky-top">
         <tr>
           <th>Idx</th>
@@ -922,8 +968,12 @@
         if (copyDiffBtn)
           copyDiffBtn.style.display =
             copyDiffBtn.style.display === "none" ? "" : "none";
-        if (toggleBtn.textContent === "Hide") toggleBtn.textContent = "Show";
-        else toggleBtn.textContent = "Hide";
+        if (toggleBtn.textContent === "Hide") {
+          toggleBtn.textContent = "Show";
+        }
+        else {
+          toggleBtn.textContent = "Hide";
+        }
       });
     document.getElementById("diff-section").style.display = "";
 
diff --git a/server/fishtest/templates/user.mak b/server/fishtest/templates/user.mak
index 1172e4a0e..1580669b1 100644
--- a/server/fishtest/templates/user.mak
+++ b/server/fishtest/templates/user.mak
@@ -143,17 +143,29 @@
           >
           <label for="tests_repo" class="d-flex align-items-end">Tests Repository</label>
         </div>
-        <span class="input-group-text" role="button" data-bs-toggle="modal" data-bs-target="#tests_repo_info_modal">
+        <span
+          class="input-group-text"
+          role="button"
+          data-bs-toggle="modal"
+          data-bs-target="#tests_repo_info_modal"
+          aria-haspopup="dialog"
+        >
           <i class="fas fa-question-circle fa-lg pe-none" style="width: 30px"></i>
         </span>
       </div>
 
-      <div id="tests_repo_info_modal" class="modal fade" tabindex="-1" aria-labelledby="tests_repo_info_modal_label" aria-hidden="true">
+      <div
+        id="tests_repo_info_modal"
+        class="modal fade"
+        tabindex="-1"
+        aria-labelledby="tests_repo_info_modal_label"
+        role="dialog"
+      >
         <div class="modal-dialog modal-dialog-centered">
           <div class="modal-content">
             <div class="modal-body">
             This Github fork URL will be the default fork URL for users who want to contribute code when creating runs,
-            it is not needed for resources contribution.
+            it is not needed for resources contribution, e.g. https://github.com/user1/Stockfish .
             </div>
           </div>
         </div>
@@ -170,12 +182,24 @@
           />
         <label for="github_token" class="d-flex align-items-end">GitHub's fine-grained personal access token</label>
         </div>
-        <span class="input-group-text" role="button" data-bs-toggle="modal" data-bs-target="#github_token_info_modal">
+        <span
+          class="input-group-text"
+          role="button"
+          data-bs-toggle="modal"
+          data-bs-target="#github_token_info_modal"
+          aria-haspopup="dialog"
+        >
           <i class="fas fa-question-circle fa-lg pe-none" style="width: 30px"></i>
         </span>
       </div>
 
-      <div id="github_token_info_modal" class="modal fade" tabindex="-1" aria-labelledby="github_token_info_modal_label" aria-hidden="true">
+      <div
+        id="github_token_info_modal"
+        class="modal fade"
+        tabindex="-1"
+        aria-labelledby="github_token_info_modal_label"
+        role="dialog"
+      >
         <div class="modal-dialog modal-dialog-centered">
           <div class="modal-content">
             <div class="modal-body">
@@ -220,7 +244,9 @@
             id="reject_user"
             type="button"
             class="btn btn-danger"
-            data-bs-toggle="modal" data-bs-target="#reject_modal"
+            data-bs-toggle="modal"
+            data-bs-target="#reject_modal"
+            aria-haspopup="dialog"
             style="width: 48%;"
           >Reject</button>
 
@@ -233,8 +259,14 @@
             style="width: 48%;"
           >Accept</button>
 
-          <div id="reject_modal" class="modal fade" tabindex="-1" aria-labelledby="reject_modal" aria-hidden="true">
-            <div class="modal-dialog modal-dialog-centered">
+          <div
+            id="reject_modal"
+            class="modal fade"
+            tabindex="-1"
+            aria-labelledby="reject_modal"
+            aria-haspopup="dialog"
+          >
+            <div class="modal-dialog modal-dialog-centered" role="dialog">
               <div class="modal-content">
                 <div class="modal-header">
                   <h5 class="modal-title">Confirmation Required</h5>
diff --git a/server/fishtest/templates/user_management.mak b/server/fishtest/templates/user_management.mak
index 095c939f9..da4bd5914 100644
--- a/server/fishtest/templates/user_management.mak
+++ b/server/fishtest/templates/user_management.mak
@@ -9,21 +9,24 @@
   async function handleToggleUsers() {
     await DOMContentLoaded();
     const tableHandlers =
-      [...document.getElementById("users-table-handler").querySelectorAll(".dropdown-item")];
+      Array.from(document.getElementById("users-table-handler").querySelectorAll(".dropdown-item"));
     tableHandlers.forEach((tableHandler) => {
       tableHandler.addEventListener("click", (e) => {
         const tableBodies =
-          [...document.getElementById("users-table").querySelectorAll("tbody")];
+          Array.from(document.getElementById("users-table").querySelectorAll("tbody"));
 
         tableBodies.forEach((tableBody) => {
           tableBody.classList.add("d-none");
-        })
+          tableBody.setAttribute("aria-hidden", "true");
+        });
 
         const selectedTbodyId = e.target.dataset.handleTargetCustom;
-        document.getElementById(selectedTbodyId).classList.remove("d-none");
+        const selectedTbody = document.getElementById(selectedTbodyId);
+        selectedTbody.classList.remove("d-none");
+        selectedTbody.removeAttribute("aria-hidden");
         document.getElementById("users-table-toggle").textContent = e.target.textContent;
-      })
-    })
+      });
+    });
   }
 
   handleToggleUsers();
@@ -35,63 +38,63 @@
 <div class="mw-xxl">
   <div class="row g-3 mb-3">
     <div class="col-6 col-sm">
-      <div class="card card-lg-sm text-center">
-        <div class="card-header text-nowrap" title="All Users">All</div>
+      <div class="card card-lg-sm text-center" role="region" aria-labelledby="all-users-header">
+        <div class="card-header text-nowrap" id="all-users-header" title="All Users">All</div>
         <div class="card-body">
-          <h4 class="card-title mb-0 monospace">${len(all_users)}</h4>
+          <h4 class="card-title mb-0 monospace" aria-live="polite">${len(all_users)}</h4>
         </div>
       </div>
     </div>
     <div class="col-6 col-sm">
-      <div class="card card-lg-sm text-center">
-        <div class="card-header text-nowrap" title="Pending Users">Pending</div>
+      <div class="card card-lg-sm text-center" role="region" aria-labelledby="pending-users-header">
+        <div class="card-header text-nowrap" id="pending-users-header" title="Pending Users">Pending</div>
         <div class="card-body">
-          <h4 class="card-title mb-0 monospace">${len(pending_users)}</h4>
+          <h4 class="card-title mb-0 monospace" aria-live="polite">${len(pending_users)}</h4>
         </div>
       </div>
     </div>
     <div class="col-6 col-sm">
-      <div class="card card-lg-sm text-center">
-        <div class="card-header text-nowrap" title="Blocked users">Blocked</div>
+      <div class="card card-lg-sm text-center" role="region" aria-labelledby="blocked-users-header">
+        <div class="card-header text-nowrap" id="blocked-users-header" title="Blocked Users">Blocked</div>
         <div class="card-body">
-          <h4 class="card-title mb-0 monospace">${len(blocked_users)}</h4>
+          <h4 class="card-title mb-0 monospace" aria-live="polite">${len(blocked_users)}</h4>
         </div>
       </div>
     </div>
     <div class="col-6 col-sm">
-      <div class="card card-lg-sm text-center">
-        <div class="card-header text-nowrap" title="Idle Users">Idle</div>
+      <div class="card card-lg-sm text-center" role="region" aria-labelledby="idle-users-header">
+        <div class="card-header text-nowrap" id="idle-users-header" title="Idle Users">Idle</div>
         <div class="card-body">
-          <h4 class="card-title mb-0 monospace">${len(idle_users)}</h4>
+          <h4 class="card-title mb-0 monospace" aria-live="polite">${len(idle_users)}</h4>
         </div>
       </div>
     </div>
     <div class="col-6 col-sm">
-      <div class="card card-lg-sm text-center">
-        <div class="card-header text-nowrap" title="Approver Users">Approvers</div>
+      <div class="card card-lg-sm text-center" role="region" aria-labelledby="approvers-users-header">
+        <div class="card-header text-nowrap" id="approvers-users-header" title="Approver Users">Approvers</div>
         <div class="card-body">
-          <h4 class="card-title mb-0 monospace">${len(approvers_users)}</h4>
+          <h4 class="card-title mb-0 monospace" aria-live="polite">${len(approvers_users)}</h4>
         </div>
       </div>
     </div>
   </div>
 </div>
 
-<div id="users-table-handler" class="dropdown">
+<div id="users-table-handler" class="dropdown" role="navigation" aria-label="User table category selection">
   <button
     id="users-table-toggle"
     class="btn btn-secondary dropdown-toggle"
     type="button"
     data-bs-toggle="dropdown"
-    aria-expanded="false"
+    aria-haspopup="menu"
   >Pending</button>
 
-  <ul class="dropdown-menu">
-    <li><span class="dropdown-item" data-handle-target-custom="all-users">All</span></li>
-    <li><span class="dropdown-item" data-handle-target-custom="pending-users">Pending</span></li>
-    <li><span class="dropdown-item" data-handle-target-custom="blocked-users">Blocked</span></li>
-    <li><span class="dropdown-item" data-handle-target-custom="idle-users">Idle</span></li>
-    <li><span class="dropdown-item" data-handle-target-custom="approvers-users">Approvers</span></li>
+  <ul class="dropdown-menu" aria-labelledby="users-table-toggle" role="menu">
+    <li role="menuitem"><span class="dropdown-item" data-handle-target-custom="all-users" tabindex="0">All</span></li>
+    <li role="menuitem"><span class="dropdown-item" data-handle-target-custom="pending-users" tabindex="0">Pending</span></li>
+    <li role="menuitem"><span class="dropdown-item" data-handle-target-custom="blocked-users" tabindex="0">Blocked</span></li>
+    <li role="menuitem"><span class="dropdown-item" data-handle-target-custom="idle-users" tabindex="0">Idle</span></li>
+    <li role="menuitem"><span class="dropdown-item" data-handle-target-custom="approvers-users" tabindex="0">Approvers</span></li>
   </ul>
 </div>
 
@@ -105,39 +108,39 @@
     </tr>
   </thead>
 
-  <tbody id="all-users" class="d-none">
-      % for user in all_users:
-        <tr>
-          <td style="width:20%"><a href="/user/${user['username']}">${user['username']}</a></td>
-          <td style="width:20%">${user['registration_time'].strftime("%y-%m-%d %H:%M:%S") if 'registration_time' in user else 'Unknown'}</td>
-          <td style="width:20%">${format_group(user['groups'])}</td>
-          <td style="width:40%">${user['email']}</td>
-        </tr>
-      % endfor
-      % if len(all_users) == 0:
-        <tr>
-          <td colspan=20>No users found</td>
-        </tr>
-      % endif
+  <tbody id="all-users" class="d-none" aria-hidden="true">
+    % for user in all_users:
+      <tr>
+        <td style="width:20%"><a href="/user/${user['username']}">${user['username']}</a></td>
+        <td style="width:20%">${user['registration_time'].strftime("%y-%m-%d %H:%M:%S") if 'registration_time' in user else 'Unknown'}</td>
+        <td style="width:20%">${format_group(user['groups'])}</td>
+        <td style="width:40%">${user['email']}</td>
+      </tr>
+    % endfor
+    % if len(all_users) == 0:
+      <tr>
+        <td colspan="4">No users found</td>
+      </tr>
+    % endif
   </tbody>
 
-  <tbody id="pending-users">
-      % for user in pending_users:
-        <tr>
-          <td style="width:20%"><a href="/user/${user['username']}">${user['username']}</a></td>
-          <td style="width:20%">${user['registration_time'].strftime("%y-%m-%d %H:%M:%S") if 'registration_time' in user else 'Unknown'}</td>
-          <td style="width:20%">${format_group(user['groups'])}</td>
-          <td style="width:40%">${user['email']}</td>
-        </tr>
-      % endfor
-      % if len(pending_users) == 0:
-        <tr>
-          <td colspan=20>No pending users</td>
-        </tr>
-      % endif
+  <tbody id="pending-users" aria-hidden="false">
+    % for user in pending_users:
+      <tr>
+        <td style="width:20%"><a href="/user/${user['username']}">${user['username']}</a></td>
+        <td style="width:20%">${user['registration_time'].strftime("%y-%m-%d %H:%M:%S") if 'registration_time' in user else 'Unknown'}</td>
+        <td style="width:20%">${format_group(user['groups'])}</td>
+        <td style="width:40%">${user['email']}</td>
+      </tr>
+    % endfor
+    % if len(pending_users) == 0:
+      <tr>
+        <td colspan="4">No pending users</td>
+      </tr>
+    % endif
   </tbody>
 
-  <tbody id="blocked-users" class="d-none">
+  <tbody id="blocked-users" class="d-none" aria-hidden="true">
     % for user in blocked_users:
       <tr>
         <td style="width:20%"><a href="/user/${user['username']}">${user['username']}</a></td>
@@ -148,12 +151,12 @@
     % endfor
     % if len(blocked_users) == 0:
       <tr>
-        <td colspan=20>No blocked users</td>
+        <td colspan="4">No blocked users</td>
       </tr>
     % endif
   </tbody>
 
-  <tbody id="idle-users" class="d-none">
+  <tbody id="idle-users" class="d-none" aria-hidden="true">
     % for user in idle_users:
       <tr>
         <td style="width:20%"><a href="/user/${user['username']}">${user['username']}</a></td>
@@ -164,25 +167,24 @@
     % endfor
     % if len(idle_users) == 0:
       <tr>
-        <td colspan=20>No idle users</td>
+        <td colspan="4">No idle users</td>
       </tr>
     % endif
   </tbody>
 
-
-  <tbody id="approvers-users" class="d-none">
+  <tbody id="approvers-users" class="d-none" aria-hidden="true">
     % for user in approvers_users:
       <tr>
-          <td style="width:20%"><a href="/user/${user['username']}">${user['username']}</a></td>
-          <td style="width:20%">${user['registration_time'].strftime("%y-%m-%d %H:%M:%S") if 'registration_time' in user else 'Unknown'}</td>
-          <td style="width:20%">${format_group(user['groups'])}</td>
-          <td style="width:40%">${user['email']}</td>
+        <td style="width:20%"><a href="/user/${user['username']}">${user['username']}</a></td>
+        <td style="width:20%">${user['registration_time'].strftime("%y-%m-%d %H:%M:%S") if 'registration_time' in user else 'Unknown'}</td>
+        <td style="width:20%">${format_group(user['groups'])}</td>
+        <td style="width:40%">${user['email']}</td>
       </tr>
     % endfor
     % if len(approvers_users) == 0:
       <tr>
-          <td colspan=20>No approver users</td>
+        <td colspan="4">No approver users</td>
       </tr>
     % endif
-  </tbody> 
+  </tbody>
 </table>
diff --git a/server/fishtest/templates/workers.mak b/server/fishtest/templates/workers.mak
index 2e56cc0ae..fcb6f3e68 100644
--- a/server/fishtest/templates/workers.mak
+++ b/server/fishtest/templates/workers.mak
@@ -37,9 +37,11 @@
     filterTable("dummy", "workers-table", originalRows, notOlderThan5Days);
     document
       .getElementById("workers-table").classList.remove("d-none");
+    document
+      .getElementById("workers-table").removeAttribute("aria-hidden");
 
     const tableHandlers =
-      [...document.getElementById("workers-table-handler").querySelectorAll(".dropdown-item")];
+      Array.from(document.getElementById("workers-table-handler").querySelectorAll(".dropdown-item"));
     tableHandlers.forEach((tableHandler) => {
       tableHandler.addEventListener("click", (e) => {
         const selected = e.target.dataset.handleTargetCustom;
@@ -111,7 +113,11 @@
   </ul>
 </div>
 
-<table id="workers-table" class="table table-striped table-sm d-none">
+<table
+  id="workers-table"
+  class="table table-striped table-sm d-none"
+  aria-hidden="true"
+>
   <thead>
     <tr>
       <th>Worker</th>