made menu more accessible

Kiefersv · Nov 19, 2023 · 33c44d0 · 33c44d0
1 parent 9a5db2a
commit 33c44d0
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 8 deletions.
diff --git a/assets/css/main.css b/assets/css/main.css
@@ -8,8 +8,8 @@ Adapted by xebobytes
 
  * @Date:   Thursday, April 28th 2022, 4:26:16 pm
  * @Filename: main.css
- * @Last modified by:
- * @Last modified time: Saturday, November 18th 2023, 8:41:48 pm
+ * @Last modified by:   
+ * @Last modified time: Sunday, November 19th 2023, 6:58:26 pm
  */
 
 
@@ -1204,13 +1204,18 @@ input[type="radio"] {
 
   /* Navigation: btn & checkbox (before) not showing */
   input[type="checkbox"] + label.checkbtn{
-      display: none;
+        display: none;
+      /*position: absolute;
+      left: -999px;*/
+
       font-size: 2em;
       line-height: 1em;
       padding-right: 0;
   }
   input[type="checkbox"] + label.checkbtn::before{
-      display: none;
+      /* display: none;*/
+      position: absolute;
+      left: -999px;
   }
 
 input[type="checkbox"] + label:before {
@@ -1272,7 +1277,9 @@ input[type="radio"] + label:before {
     font-family: 'Font Awesome 5 Free';
     font-weight: 400; }
   .icon > .label {
-    display: none;}
+  /*display: none;*/
+      position: absolute;
+      left: -999px;}
   .icon:before {
     line-height: inherit; }
   .icon.solid:before {
@@ -2164,7 +2171,9 @@ nav {
         z-index:999;
     }
     #nav-check {
-        display: none;
+        /*display: none;*/
+        position: absolute;
+        left: -999px;
     }
     .closing {
         transform: scale(0);

diff --git a/index.html b/index.html
@@ -50,14 +50,15 @@
                         </ul>
 
                         <!-- Navigation -->
-                        <nav id=nav>
+                        <nav id=nav aria-labelledby="mainmenulabel">
                             <input type="checkbox" id="nav-check">
                             <label for="nav-check" class="checkbtn">
                                 <i class="fas fa-plus closing"></i>
 								<i class="fas fa-bars opening"></i>
                             </label>
+							<span id="mainmenulabel" class="hidden">Main Menu</span>
                             <ul>
-                                <li><a class="active" href="index.html">Home</a></li>
+                                <li><a class="active" href="index.html" aria-current="page">Home</a></li>
                                 <li><a href="curriculum-vitae.html">Curriculum Vitae</a></li>
                                 <li><a href="research.html">Research</a></li>
                                 <li><a href="outreach-teaching.html">Teaching&nbsp;&amp; Outreach</a></li>