improve die accessibility for screen readers

tasxatzial · Jun 17, 2024 · 7025afe · 7025afe
1 parent c136e57
commit 7025afe
Show file tree

Hide file tree

Showing 3 changed files with 4 additions and 16 deletions.
diff --git a/src/index.html b/src/index.html
@@ -11,8 +11,8 @@
 <body>
     <h1>Roll the dice</h1>
     <div class="die-container">
-        <button aria-label="die" class="die-button"></button>
-        <span class="sr-only die-result" aria-live="polite"></span>
+        <button aria-label="die" class="die-button js-die-button" aria-labelledby="die-result"></button>
+        <span hidden id="die-result" class="js-die-result"></span>
     </div>
 </body>
 </html>
diff --git a/src/index.js b/src/index.js
@@ -1,7 +1,7 @@
 'use strict';
 
-const dieButton = document.querySelector('.die-button');
-const dieResult = document.querySelector('.die-result');
+const dieButton = document.querySelector('.js-die-button');
+const dieResult = document.querySelector('.js-die-result');
 dieButton.addEventListener('click', () => render(getRandomNumber()));
 
 /* initial render */

diff --git a/src/style.css b/src/style.css
@@ -17,18 +17,6 @@ body {
     font-family: sans-serif;
 }
 
-.sr-only {
-    position: absolute; 
-    width: 1px;
-    height: 1px;
-    padding: 0;
-    margin: -1px; 
-    overflow: hidden;
-    clip: rect(0, 0, 0, 0);
-    white-space: nowrap;
-    border: 0;
-}
-
 h1 {
     font-size: 2.5rem;
     text-align: center;