nav barrierefrei

components/CallToActionBox.vue

@@ -2,7 +2,7 @@
     <div class="ctaBox">
       <h3>{{ headline }}</h3>
       <p>{{ text }}</p>
-      <button class="pinkBtn mt-1" role="button" @click.prevent="toggleContactBubble">
+      <button class="btn pinkBtn mt-1" role="button" @click.prevent="toggleContactBubble">
         {{ buttonText }}
       </button>
     </div>

components/ContactForm.vue

@@ -7,17 +7,20 @@
       aria-labelledby="controlIcon"
       role="dialog"
     >
-    <svg
+      <button
-      id="controlIcon"
+        id="controlIcon"
-      tabindex="0"
+        tabindex="0"
-      role="button"
+        role="button"
-      aria-label="Toggle contact form"
+        aria-label="Toggle contact form"
-      @click="toggleContactBubble"
+        @click="toggleContactBubble"
-      @keydown.space.prevent="toggleContactBubble"
+        @keydown.space.prevent="toggleContactBubble"
-      @keydown.enter.prevent="toggleContactBubble"
+        @keydown.enter.prevent="toggleContactBubble"
-    >
+      >
-        <use :xlink:href="`/assets/icons/collection.svg#${isContactBubbleOpen ? 'times' : 'talk'}`" />
+        <svg>
-      </svg>
+          <use :xlink:href="`/assets/icons/collection.svg#${isContactBubbleOpen ? 'times' : 'talk'}`" />
+        </svg>
+      </button>
+
   
       <div
         v-show="isContactBubbleOpen"
@@ -168,7 +171,7 @@
   
                 <button
                   type="submit"
-                  class="pinkBtn"
+                  class="btn pinkBtn"
                   :aria-label="$t('contactForm.sendMessage')"
                 >
                   {{ $t('contactForm.sendMessage') }}
@@ -406,6 +409,11 @@ watch(isContactBubbleOpen, async (newVal) => {
         a
             color: $primaryColor 
     #controlIcon
+      border: none
+      &:focus
+        outline: 2px solid $primaryColor
+        outline-offset: 8px
+      svg
         position: absolute
         bottom: 50%
         left: 50%
@@ -419,15 +427,22 @@ watch(isContactBubbleOpen, async (newVal) => {
     &.active
         height: 90vh
         width: 90vw
-        background-color: rgba(lighten($beige, 8%), .98)
+        background-color: white
-        color: $darkgrey
         display: flex
         flex-direction: column
         text-align: left
         border: 1px solid $lightgrey
         animation: none
         box-shadow: 1px 1px 15px 2px $beige
-        @media(max-width: $breakPointMD)
+        #controlIcon
+          width: auto
+          height: auto
+          top: 2rem
+          position: absolute
+          svg
+            display: block
+            fill: #888
+        @media(max-width: $breakPointLG)
             border-radius: 0
             height: 100%
             width: 100%
@@ -437,10 +452,7 @@ watch(isContactBubbleOpen, async (newVal) => {
                 right: 5vw 
                 left: auto
                 bottom: 4rem !important
-        #controlIcon
+           
-            bottom: 3rem
-            fill: #888
-            width: 2rem
         .mobileAspBox
             width: 30vw
             max-width: 90px
@@ -480,7 +492,7 @@ watch(isContactBubbleOpen, async (newVal) => {
     textarea
         height: 20%
         font-size: 1.1rem
-    button
+    .btn
         font-size: 1.2rem
         border: none
         background-image: linear-gradient(to bottom right, lighten($pink, 10%), $pink)

components/FAQArea.vue

@@ -9,7 +9,7 @@
         <h4> {{ $t('faqBox.questions') }} </h4>
       </div>
       <div class="col-md-6">
-        <button role="button" class="pinkBtn" @click.prevent="toggleContactBubble">
+        <button role="button" class="btn pinkBtn" @click.prevent="toggleContactBubble">
           {{ button }}
         </button>
       </div>

components/template/NavBar.vue

@@ -7,6 +7,7 @@
       scrollPosition > 50 ? 'scrolled' : ''
     ]"
     aria-label="Hauptnavigation"
+    role="menu"
   >
     <!-- Burger Icon als Button -->
     <button
@@ -38,6 +39,9 @@
         class="nav-item"
         @mouseenter="screenWidth >= 1350 && link.subNav && showSubNav(link.label)"
         @mouseleave="screenWidth >= 1350 && link.subNav && hideSubNav(link.label)"
+        @focusin="screenWidth >= 1350 && link.subNav && showSubNav(link.label)"
+        @focusout="screenWidth >= 1350 && link.subNav && hideSubNav(link.label)"
+        role="menuitem"
       >
         <!-- Mit SubNav -->
         <template v-if="link.subNav">
@@ -55,10 +59,10 @@
               {{ isActiveSubNav(link.label) ? 'Untermenü schließen' : 'Untermenü öffnen' }}
             </span>
           </button>
-          <div v-else>
+          <button v-else>
             {{ $t(link.label) }}
             <span class="arrow" :class="{ open: isSubNavOpen === link.label }"></span>
-          </div>
+          </button>
 
           <ul
             :id="`submenu-${link.label}`"
@@ -240,6 +244,8 @@
     color: $darkgrey
     font-size: 1.1rem
     cursor: pointer
+    button
+        all: unset
     a
         text-decoration: none
         color: $darkgrey

layouts/default.vue

@@ -117,7 +117,7 @@ main
   .loopShape
     border-radius: $loopShape
 
-  button, .btn
+  .btn
     background-color: white
     border: 1px solid $darkgrey
     border-radius: 5px

pages/designer/index.vue

@@ -37,7 +37,7 @@
                 </ul>
                 <p><b>Du bleibst der kreative Kopf!</b><br>
                 Ich sorge dafür, dass dein Design genauso im Web erscheint, wie du es geplant hast – mit Top-Performance & perfekter technischer Umsetzung.</p>
-                <button class="pinkBtn" role="button" @click.prevent="toggleContactBubble">Lass uns kennenlernen</button>
+                <button class="btn pinkBtn" role="button" @click.prevent="toggleContactBubble">Lass uns kennenlernen</button>
             </div>
             
         </section>
@@ -126,7 +126,7 @@
                         <h2>Hat Dein Design den richtigen Kontrast?</h2>
                         <p>Mit dem praktischen Kontrastchecker kannst Du herausfinden, ob die Schrift und der Hintergrund in Deinem Design den WCAG_Richtlinien entsprechen. So stellst Du sicher, dass Dein Design für alle gut lesbar ist.</p>
                         <button
-class="mintBtn" role="button"
+class="btn mintBtn" role="button"
             aria-label="Zum Kontrastchecker"
             @click.prevent="navigateTo('/toolbox/kontrastchecker')">Jetzt kostenlos Konstrast prüfen</button>
             </div>

pages/magazin/index.vue

@@ -34,7 +34,7 @@
               <h2>{{ article.header }}</h2>
               
             </div>
-            <button class="mintBtn">{{ $t('pages.magazin.readmore') }}</button>
+            <button class="btn mintBtn">{{ $t('pages.magazin.readmore') }}</button>
           </div>
         </NuxtLinkLocale>
 

pages/sectors/film/index.vue

@@ -12,7 +12,7 @@
         <h1>Webseiten für die Film- & Fernsehbranche</h1>
         <h2>Für Schauspieler, Regisseure, Produktionsfirmen und Filmtechnik-Profis</h2>
         <h3>Einfach zu bedienende Webseiten, die Ihre Arbeit ins richtige Licht rücken</h3>
-        <button class="whiteBtn" role="button" @click.prevent="toggleContactBubble">Erstkontakt – ganz ohne Drehbuch</button>
+        <button class="btn whiteBtn" role="button" @click.prevent="toggleContactBubble">Erstkontakt – ganz ohne Drehbuch</button>
       </HeroBox>
   
       <section class="visibility">

pages/sectors/schools/index.vue

@@ -125,7 +125,7 @@
                             </p>
                             <h3>Dürfen wir auch Sie unterstützen?</h3>
                             <button
-                                class="my-4 pinkBtn"
+                                class="my-4 btn pinkBtn"
                                 role="button"
                                 aria-label="Kontaktformular öffnen"
                                 @click.prevent="toggleContactBubble"

pages/services/accessibility/index.vue

@@ -30,7 +30,7 @@
                 </ul>
                 <h3>Möchten Sie wissen, wie barrierefrei Ihre aktuelle Webseite ist?</h3>
             <button
-class="pinkBtn" role="button"
+class="btn pinkBtn" role="button"
                 aria-label="Barrierefreiheitscheck"
                 @click.prevent="toggleContactBubble">Kostenlosen Barrierefreiheits-Check anfordern!</button>
             </div>

pages/services/index.vue

@@ -62,7 +62,7 @@
             <h2 id="invitation-title">{{ $t('pages.home.invitation.title') }}</h2>
             <h3>{{ $t('pages.home.invitation.teaser') }}</h3>
             <button
-class="pinkBtn" role="button"
+class="btn pinkBtn" role="button"
                     aria-describedby="invitation-title"
                     aria-label="Kontaktformular öffnen"
                     @click.prevent="toggleContactBubble">{{ $t('pages.home.invitation.button') }}</button>

pages/webagency/index.vue

@@ -9,7 +9,7 @@
           <p v-html="$t('pages.webagency.hero.text2')" />
           <p v-html="$t('pages.webagency.hero.text3')" />
           <button
-            class="my-4 pinkBtn"
+            class="my-4 btn pinkBtn"
             role="button"
             aria-label="Kontaktformular öffnen"
             @click.prevent="toggleContactBubble"
@@ -74,7 +74,7 @@
           </div>
 
           <button
-            class="pinkBtn mt-4"
+            class="btn pinkBtn mt-4"
             role="button"
             aria-label="Kontaktformular öffnen"
             @click.prevent="toggleContactBubble"
@@ -90,7 +90,7 @@
         <p class="supheadlineMint">{{ $t('pages.webagency.grafiker.supheadline') }}</p>
         <h2>{{ $t('pages.webagency.grafiker.title') }}</h2>
         <button
-          class="mintBtn"
+          class="btn mintBtn"
           role="button"
           aria-label="Zum Angebot für Kreative"
           @click.prevent="navigateTo(designerLink)"