dernier edits et corrections sur le mode off

index.html

@@ -25,7 +25,7 @@
     </head>
     <body>
         <main>
-            <section id="seeYouLater" class="floating">
+            <section tabindex="-1" id="seeYouLater" class="floating">
                 <h1>
                     Merci à touxes !
                 </h1>
@@ -44,7 +44,7 @@
             </section>
 
             <div id="colorBtnContainer" aria-hidden="true">
-                <svg class="icon" viewBox="0 0 34.01 34.53">
+                <svg tabindex="-1" class="icon" viewBox="0 0 34.01 34.53">
                     <path d="M10.91,27.58c-1.85-1.07-3.31-2.52-4.37-4.36-1.07-1.84-1.6-3.89-1.6-6.16s.53-4.32,1.6-6.15c1.07-1.84,2.52-3.29,4.37-4.36,1.85-1.07,3.91-1.6,6.17-1.6s4.29.53,6.14,1.6c1.85,1.07,3.3,2.52,4.37,4.37,1.07,1.85,1.6,3.89,1.6,6.14s-.53,4.29-1.6,6.14c-1.07,1.85-2.52,3.31-4.37,4.37-1.85,1.07-3.89,1.6-6.14,1.6s-4.32-.53-6.17-1.6ZM20.51,22.94c1.03-.59,1.85-1.41,2.44-2.44s.89-2.18.89-3.43-.3-2.4-.89-3.43-1.41-1.85-2.44-2.44c-1.04-.59-2.18-.89-3.43-.89s-2.43.3-3.46.89c-1.03.59-1.85,1.41-2.44,2.44-.59,1.03-.89,2.18-.89,3.43s.3,2.4.89,3.43c.59,1.03,1.41,1.85,2.44,2.44,1.03.59,2.19.89,3.46.89s2.4-.3,3.43-.89Z"/>
                     <path d="M15.29.08l3.31-.08-.15,3.71h-2.86s-.31-3.63-.31-3.63Z"/>
                     <path d="M19.13,34.43l-3.97.1.18-4.45h3.42s.37,4.35.37,4.35Z"/>
@@ -55,11 +55,11 @@
                     <path d="M.08,18.76l-.08-3.35,3.76.15v2.89s-3.68.31-3.68.31Z"/>
                     <path d="M3.46,5.82l2.29-2.41,2.53,2.74-2.02,2.03-2.8-2.37Z"/>
                 </svg>
-                <label class="switch">
+                <label class="switch" tabindex="0">
                     <input type="checkbox">
                     <span class="slider"></span>
                 </label>
-                <svg class="icon" viewBox="0 0 31.8 30.75">
+                <svg tabindex="-1" class="icon" viewBox="0 0 31.8 30.75">
                     <path d="M4.06,8.45l-2.47,1.39-1.58-2.84,2.41-1.39-2.41-1.39L1.58,1.39l2.47,1.35V0h3.23v2.74l2.51-1.35,1.55,2.84-2.38,1.39,2.38,1.39-1.55,2.84-2.51-1.39v2.8h-3.23v-2.8Z"/>
                     <path d="M31.8,18.58c0-2.12-.52-4.11-1.57-5.97-1.03-1.8-2.48-3.26-4.36-4.39-.06-.03-.1-.07-.16-.11-1.64-.96-3.35-1.5-5.11-1.67,0,1.22-.12,2.45-.42,3.71-.13.54-.28,1.07-.45,1.6-.49,1.51-1.16,3.01-2.03,4.49-1.18,2.01-2.55,3.73-4.1,5.15-.04.04-.09.07-.13.11-1.41,1.26-2.93,2.21-4.58,2.86.11.21.22.42.34.62.88,1.38,2.03,2.54,3.43,3.5.26.18.52.37.8.53,1.96,1.14,4,1.72,6.13,1.74,2.13.01,4.13-.5,5.97-1.55,1.85-1.05,3.35-2.55,4.49-4.5s1.72-4,1.73-6.12ZM22.95,24.51c-1.04.59-2.15.88-3.34.87-.68,0-1.34-.13-1.98-.34,2-1.74,3.67-3.72,4.97-5.94.9-1.55,1.62-3.2,2.15-4.95.3.34.57.69.79,1.08.59,1.03.88,2.15.87,3.34-.01,1.19-.33,2.33-.97,3.41s-1.47,1.92-2.5,2.51Z"/>
                 </svg>
@@ -70,29 +70,33 @@
                     Nous contacter :
                 </h1>
                 <nav aria-label="informations de contact de la team drags and nerds">
-                  <a href="https://signal.me/#eu/jPBmn2MoCUWsKN0eJbWl_3w-HuPNu2SndVwaWZX3iC9HBnQEi4FPSZefIkfS86T8" class="textBtn" target="_blank">Vega</a>
+                  <a tabindex="0" href="https://signal.me/#eu/jPBmn2MoCUWsKN0eJbWl_3w-HuPNu2SndVwaWZX3iC9HBnQEi4FPSZefIkfS86T8" class="textBtn">Vega</a>
-                  <a href="mailto:urazoriapro@gmail.com" class="textBtn" target="_blank">Urazoria</a>
+                  <a tabindex="0" href="mailto:urazoriapro@gmail.com" class="textBtn">Urazoria</a>
                 </nav>
             </section>
 
             <footer id="webRing" class="solid" aria-label="les copaines du LOL">
-                <a href="https://drags-nerds.net" target="_blank" aria-label="drags and nerds, collectif d'organisation d'évènements queer et nerds inclusifs">
+                <a tabindex="0" href="https://drags-nerds.net" aria-label="drags and nerds, collectif d'organisation d'évènements queer et nerds inclusifs">
-                    <img class="needOutline" src="/assets/webRings/DNNwebring.gif" alt="les mots drags, and et nerds qui défilent dans tous les sens sur un fond rose et vert fluo qui clignote">
+                  <img id="flashDNN" src="/assets/webRings/DNNwebring.gif" alt="les mots drags, and et nerds qui défilent dans tous les sens sur un fond rose et vert fluo qui clignote">
+                  <img id="reducedDNN" src="/assets/webRings/dnn-reduced-motion.png" alt="les lettres #, D, et, N en gros pixel blanc sur fond noir avec un léger effet 3D, alternée entre vert et rose, toujours fluo ">
                 </a>
-                <a href="https://berthe.cc" target="_blank" aria-label="berthe.cc">
+                <a tabindex="0" href="https://berthe.cc" aria-label="berthe.cc">
                     <img src="/assets/webRings/berthe.cc.png" alt="une créature étrange verte et rouge avec 4 grands yeux et un inscription blanche : berthe.cc">
                 </a>
-                <a href="https://murmure.cafe" target="_blank" aria-label="murmure.café, collectif de réappropriation du web et des réseaux">
+                <a tabindex="0" href="https://murmure.cafe" aria-label="murmure.café, collectif de réappropriation du web et des réseaux">
                     <img src="/assets/webRings/murmure-cafe-webring.png" alt="une une tasse de café pixélisées en couleurs pastel avec des chevrons, quelques gouttes de café renversées et une écriture noire : murmure.café">
                 </a>
-                <a href="https://labolyon.fr" target="_blank" aria-label="laboratoire ouvert lyonnais, hackerspace ">
+                <a tabindex="0" href="https://labolyon.fr" aria-label="laboratoire ouvert lyonnais, hackerspace ">
                     <img src="/assets/webRings/labolyon.fr.png" alt="LOL en morse dans un cadre épais, en jaune sur fond noir">
                 </a>
+                <a tabindex="0" href="https://peertube.1312.media/"  aria-label="the 1312 media collective">
+                  <img src="/assets/webRings/1312.media-webring.png" alt="le logo antifasciste et un texte rouge très large, the 1312 media collective">
+                </a>
             </footer>
         </main>
-        <aside>
+        <aside tabindex="-1">
-            <img id="texture" src="assets/background-noise.png" alt="un léger grain animé qui texture le fond">
+            <img tabindex="-1" id="texture" src="assets/background-noise.png" alt="un léger grain animé qui texture le fond">
-            <video id="gradient" src="assets/background.webm" autoplay muted loop aria-label="un gradient de couleur rose, vert, noir et blanc"></video>
+            <video tabindex="-1" id="gradient" src="assets/background.webm" autoplay muted loop aria-label="un gradient de couleur rose, vert, noir et blanc"></video>
         </aside>
 
         <script type="module" src="js/main.js"></script>

style/common.css

@@ -87,7 +87,7 @@
   animation: none;
 }
 
-.textBtn:hover{
+.textBtn:hover, .textBtn:focus{
   color: var(--back-color);
   animation: blinkBack 1.61s infinite;
 }

style/default.css

@@ -42,3 +42,7 @@ ul,ol {
 dialog{
   padding: 0;
 }
+
+button:focus, a:focus, label:focus{
+  outline: none;
+}

style/main.css

@@ -91,7 +91,7 @@ main{
                     visibility: collapse;
                     position:absolute;
                     right: 13.12px;
-                    bottom: 117px;
+                    bottom: 161px;
                     height: 144px;
                     width: 44px;
                     display: flex;
@@ -171,6 +171,12 @@ main{
                             }
             }
 
+            #colorBtnContainer:has(.switch:focus){
+              background-color: var(--main-color);
+              border-color: var(--back-color);
+              color: var(--back-color);
+            }
+
             footer{
                 width: 100%;
                 min-height: 93px;
@@ -192,10 +198,13 @@ main{
 
                     a{
                         width: 100%;
-                        height: 31px;
+                        height: 100%;
+                        margin-top: 7.77px;
+                        box-sizing: border-box;
 
                             img{
                                 width: 100%;
+                                image-rendering: pixelated;
                             }
 
                             .needOutline{
@@ -203,8 +212,25 @@ main{
                                 border-style: solid;
                                 border-width: thin;
                             }
+
+                            #reducedDNN{
+                              visibility: collapse;
+                              display: none;
                             }
                     }
+
+                    a:focus, a:hover{
+                      margin-top: 0;
+                      margin-bottom: 7.77px;
+
+                          img{
+                            border-color: var(--main-color);
+                            border-style: solid;
+                            border-width: thin;
+                          }
+                    }
+
+            }
 }
 
 aside{

style/reduced.css

@@ -1,5 +1,19 @@
 @media (prefers-reduced-motion: reduce){
     aside{
         visibility: collapse;
+        display: none;
+    }
+
+    main footer a{
+      
+      #reducedDNN{
+        visibility: visible;
+        display: inline;
+      }
+
+      #flashDNN{
+        visibility: collapse;
+        display: none;
+      }
     }
 }