More accesibility & contrast tweaks

danthedeckie · Mar 14, 2024 · 8296f29 · 8296f29
1 parent c86a0aa
commit 8296f29
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 9 deletions.
diff --git a/dist/index.html b/dist/index.html
@@ -27,15 +27,15 @@ <h1>Name finder</h1>
       </label>
     </div>
     <div class="buttons">
-      <button type="button" id="findMatchesButton">Search</button><br />
+      <button type="button" id="findMatchesButton" aria-live="polite">Search</button><br />
     </div>
     <table>
       <thead>
         <td>Original Name</td>
         <td>Possible Matches</td>
         <td>Score</td>
       </thead>
-      <tbody id="matchesOutput">
+      <tbody id="matchesOutput" aria-live="polite">
         <tr class="certain">
           <td>Example almost certain match</td>
           <td>...</td>
@@ -45,9 +45,9 @@ <h1>Name finder</h1>
           <td>Example possible match</td>
           <td>
             Possible match
-            <span class="joiner">⊕</span>
+            <span class="joiner" aria-label="or" role="separator">⊕</span>
             Similarly possible match
-            <span class="joiner">⊕</span>
+            <span class="joiner" aria-label="or" role="separator">⊕</span>
             <span class="less-likely">Less Likely match</span>
           </td>
           <td>33</td>

diff --git a/src/css/main.css b/src/css/main.css
@@ -120,12 +120,12 @@ tr:nth-child(even).possible {
 }
 
 .unlikely {
-  color: #555555;
+  color: #333333;
   font-style: italic;
 }
 
 .nothing {
-  color: #aaaaaa;
+  color: #888888;
   font-style: italic;
 }
 
@@ -161,9 +161,9 @@ span.joiner {
     opacity: 1;
   }
   .unlikely {
-    color: #222222;
+    color: #111111;
   }
   .nothing {
-    color: #555555;
+    color: #333333;
   }
 }
diff --git a/src/js/main.js b/src/js/main.js
@@ -63,7 +63,7 @@ buttonEl.addEventListener("click", () => {
         <td>${name}</td>
         <td><div class="matchoptions">${possibleMatches
           .map(makeMatchDisplay)
-          .join(' <span class="joiner">⊕</span> ')}</div></td>
+          .join(' <span class="joiner" aria-label="or" role="separator">⊕</span> ')}</div></td>
         <td class="score">${score.toFixed(2)}</td>
       </tr>`,
     );