From 93407ade032aa91a49c5c8fd76b881572a42af1b Mon Sep 17 00:00:00 2001
From: Ginger <ginger@gingershaped.computer>
Date: Tue, 9 Jun 2026 10:05:44 -0400
Subject: [PATCH] fix: Accessibility improvements

---
 src/web/pages/resources/common.css               |  7 ++++++-
 .../pages/templates/_components/avatar.html.j2   |  4 ++--
 src/web/pages/templates/_layout.html.j2          |  2 +-
 src/web/pages/templates/error.html.j2            |  2 +-
 src/web/pages/templates/grant.html.j2            |  2 +-
 src/web/pages/templates/login.html.j2            |  6 +++---
 src/web/pages/templates/register.html.j2         | 16 ++++++++--------
 7 files changed, 22 insertions(+), 17 deletions(-)

diff --git a/src/web/pages/resources/common.css b/src/web/pages/resources/common.css
index f4b6d9cbf..f3307c72d 100644
--- a/src/web/pages/resources/common.css
+++ b/src/web/pages/resources/common.css
@@ -4,7 +4,7 @@
 
     --background-color: #fff;
     --text-color: #000;
-    --secondary: #666;
+    --secondary: #555;
     --bg: oklch(0.76 0.0854 317.27);
     --panel-bg: oklch(0.91 0.042 317.27);
     --c1: oklch(0.44 0.177 353.06);
@@ -84,6 +84,10 @@ footer {
         width: 100%;
         height: 64px;
     }
+
+    @media (prefers-color-scheme: light) {
+        --name-lightness: 0.35;
+    }
 }
 
 p {
@@ -312,6 +316,7 @@ ul.bullet-separated {
     position: relative;
     float: right;
     cursor: default;
+    font-size: small;
 
     span {
         display: inline-block;
diff --git a/src/web/pages/templates/_components/avatar.html.j2 b/src/web/pages/templates/_components/avatar.html.j2
index 4ed170897..a15075ab0 100644
--- a/src/web/pages/templates/_components/avatar.html.j2
+++ b/src/web/pages/templates/_components/avatar.html.j2
@@ -1,6 +1,6 @@
 {% match avatar_type %}
     {% when AvatarType::Initial with (initial) %}
-    <span class="avatar" role="img">{{ initial }}</span>
+    <span class="avatar" role="img" aria-hidden="true">{{ initial }}</span>
     {% when AvatarType::Image with (src) %}
-    <img class="avatar" src="{{ src }}">
+    <img class="avatar" src="{{ src }}" aria-hidden="true">
 {% endmatch %}
diff --git a/src/web/pages/templates/_layout.html.j2 b/src/web/pages/templates/_layout.html.j2
index 77f2ca4fa..ac884becb 100644
--- a/src/web/pages/templates/_layout.html.j2
+++ b/src/web/pages/templates/_layout.html.j2
@@ -19,7 +19,7 @@
     {%~ block content %}{% endblock ~%}
     {%~ block footer ~%}
         <footer>
-            <a href="{{ crate::ROUTE_PREFIX }}/"><img class="logo" src="{{ crate::ROUTE_PREFIX }}/resources/logo.svg"></a>
+            <a href="{{ crate::ROUTE_PREFIX }}/"><img class="logo" alt="Continuwuity logo" src="{{ crate::ROUTE_PREFIX }}/resources/logo.svg"></a>
             <p>Powered by <a href="https://continuwuity.org">Continuwuity</a> {{ env!("CARGO_PKG_VERSION") }} &bullet; <a href="{{ crate::ROUTE_PREFIX }}/about">About</a></p>
         </footer>
     {%~ endblock ~%}
diff --git a/src/web/pages/templates/error.html.j2 b/src/web/pages/templates/error.html.j2
index 92f68f9c2..4f38adc72 100644
--- a/src/web/pages/templates/error.html.j2
+++ b/src/web/pages/templates/error.html.j2
@@ -10,7 +10,7 @@
 
 {%- block content -%}
 <div class="error-body">
-    <pre class="k10y" aria-hidden>
+    <pre class="k10y" aria-hidden="true">
     　　　 　  ／＞　　 フ
     　　　 　  | 　_　 _|
     　 　　  ／` ミ＿xノ
diff --git a/src/web/pages/templates/grant.html.j2 b/src/web/pages/templates/grant.html.j2
index e994596e8..ccb9826f7 100644
--- a/src/web/pages/templates/grant.html.j2
+++ b/src/web/pages/templates/grant.html.j2
@@ -15,7 +15,7 @@ Authorize client
         <div class="red-avatar">
             {{ user_avatar }}
         </div>
-        <div class="separator" aria-hidden>
+        <div class="separator" aria-hidden="true">
             ⇄
         </div>
         {{ client_avatar }}
diff --git a/src/web/pages/templates/login.html.j2 b/src/web/pages/templates/login.html.j2
index dc2674926..a2ade2e04 100644
--- a/src/web/pages/templates/login.html.j2
+++ b/src/web/pages/templates/login.html.j2
@@ -29,11 +29,11 @@ Log in
             <form method="post">
                 <p>
                     <label for="identifier">Username or email address</label>
-                    <input type="text" name="identifier" autocomplete="username">
+                    <input type="text" id="identifier" name="identifier" autocomplete="username">
                 </p>
                 <p>
                     <label for="password">Password</label>
-                    <input type="password" name="password" autocomplete="current-password">
+                    <input type="password" id="password" name="password" autocomplete="current-password">
                 </p>
                 <button type="submit">Log in</button>
             </form>
@@ -51,7 +51,7 @@ Log in
             <form method="post">
                 <p>
                     <label for="password">Password</label>
-                    <input type="password" name="password" autocomplete="current-password">
+                    <input type="password" id="password" name="password" autocomplete="current-password">
                 </p>
                 <button type="submit">Continue</button>
             </form>
diff --git a/src/web/pages/templates/register.html.j2 b/src/web/pages/templates/register.html.j2
index ebec39cf7..13516f5de 100644
--- a/src/web/pages/templates/register.html.j2
+++ b/src/web/pages/templates/register.html.j2
@@ -55,7 +55,7 @@ Sign up
                     <label for="username">Username</label>
                     <span class="username-input">
                         <span>@</span>
-                        <input type="text" name="username" autocomplete="username" required>
+                        <input type="text" id="username" name="username" autocomplete="username" required>
                         <span>:{{ server_name }}</span>
                     </span>
                     {% if let Some(username_error) = username_error %}
@@ -98,9 +98,9 @@ Sign up
                     <span class="username-input">
                         <span>@</span>
                         {% if let Some(username) = username %}
-                            <input type="text" name="username" value="{{ username }}" autocomplete="username" required>
+                            <input type="text" id="username" name="username" value="{{ username }}" autocomplete="username" required>
                         {% else %}
-                            <input type="text" name="username" autocomplete="username" required>
+                            <input type="text" id="username" name="username" autocomplete="username" required>
                         {% endif %}
                         <span>:{{ server_name }}</span>
                     </span>
@@ -114,18 +114,18 @@ Sign up
                 {% endif %}
                 <p>
                     <label for="password">Password</label>
-                    <input type="password" name="password" autocomplete="new-password" required>
+                    <input type="password" id="password" name="password" autocomplete="new-password" required>
                     {{ form::errors(field_errors, std::borrow::Cow::Borrowed("password")) }}
                 </p>
                 <p>
                     <label for="confirm_password">Confirm password</label>
-                    <input type="password" name="confirm_password" autocomplete="new-password" required>
+                    <input type="password" id="confirm_password" name="confirm_password" autocomplete="new-password" required>
                     {{ form::errors(field_errors, std::borrow::Cow::Borrowed("confirm_password")) }}
                 </p>
                 {% if require_email %}
                     <p>
                         <label for="email">Email address</label>
-                        <input type="email" name="email" required>
+                        <input type="email" id="email" name="email" required>
                         {{ form::errors(field_errors, std::borrow::Cow::Borrowed("email")) }}
                     </p>
                 {% endif %}
@@ -153,8 +153,8 @@ Sign up
                             </div>
                         {% else %}
                             <p>
-                                <label for="username">Registration token</label>
-                                <input type="text" name="registration_token" autocomplete="none" required>
+                                <label for="registration_token">Registration token</label>
+                                <input type="text" id="registration_token" name="registration_token" autocomplete="none" required>
                                 {% if is_first_run %}
                                     <small>Check the server console to find the registration token.</small>
                                 {% endif %}