Add some screen reader tags to buttons and make them larger

macrovision.css

@@ -306,6 +306,7 @@ body.toggle-bottom-name .bottom-name {
 #spawners > select {
     display: none;
     font-size: 24pt;
+    max-width: 120pt;
 }
 
 #spawners > select#category-picker {
@@ -318,8 +319,7 @@ body.toggle-bottom-name .bottom-name {
 }
 
 #menubar button {
-    font-size: 28pt;
-    height: 36pt;
+    font-size: 48pt;
 }
 
 #help {
@@ -488,4 +488,15 @@ body.toggle-height-bars .height-bar,
     left: calc(var(--xpos) - 24px);
     transition: 0s all;
     content: "";
-}
+}
+
+.sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0,0,0,0);
+    border: 0;
+  }

macrovision.html

@@ -59,32 +59,59 @@
   </div>
   <div id="menubar">
     <span class="menubar-group">
-      <button id="menu-fullscreen"><i class="fas fa-compress"></i></button>
+      <button id="menu-fullscreen">
+        <i class="fas fa-compress" ></i>
+        <span class="sr-only">Fullscreen</span>
+      </button>
     </span>
     <span class="menubar-group">
-      <button id="menu-clear"><i class="fas fa-trash-alt"></i></button>
+      <button id="menu-clear">
+        <i class="fas fa-trash-alt"></i>
+        <span class="sr-only">Clear</span>
+      </button>
     </span>
     <span class="menubar-group">
-      <button id="menu-order-height"><i class="fas fa-sort-numeric-up"></i></button>
+      <button id="menu-order-height">
+        <i class="fas fa-sort-numeric-up"></i>
+        <span class="sr-only">Sort</span>
+      </button>
     </span>
     <span class="menubar-group">
-      <button id="menu-permalink"><i class="fas fa-link"></i></button>
-      <button id="menu-export"><i class="fas fa-share"></i></button>
-      <button id="menu-save"><i class="fas fa-download"></i></button>
-      <button id="menu-load"><i class="fas fa-upload"></i></button>
+      <button id="menu-permalink">
+        <i class="fas fa-link"></i>
+        <span class="sr-only">Permalink</span>
+      </button>
+      <button id="menu-export">
+        <i class="fas fa-share"></i>
+        <span class="sr-only">Export</span>
+      </button>
+      <button id="menu-save">
+        <i class="fas fa-download"></i>
+        <span class="sr-only">Save</span>
+      </button>
+      <button id="menu-load">
+        <i class="fas fa-upload"></i>
+        <span class="sr-only">Load</span>
+      </button>
     </span>
     <span class="menubar-group" id="spawners">
 
     </span>
   </span>
   <span class="menubar-group" id="scenes">
-    <button id="load-scene"><i class="fas fa-cloud-upload-alt"></i></button>
+    <button id="load-scene">
+      <i class="fas fa-cloud-upload-alt"></i>
+        <span class="sr-only">Load Scene</span>
+    </button>
     <select id="scene-choices">
 
     </select>
   </span>
     <span class="menubar-group">
-      <button id="open-help"><i class="far fa-question-circle"></i></button>
+      <button id="open-help">
+        <i class="far fa-question-circle"></i>
+        <span class="sr-only">Help</span>
+      </button>
     </span>
   </div>
   <div id="main-area">