digimedialoop/dml_frontend
digimedialoop/dml_frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

nav barrierefrei

Browse Source
This commit is contained in:
Sabrina Hennrich 2025-06-16 16:39:48 +02:00
parent 905e7d3e00
commit 750dccc863
12 changed files with 53 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/CallToActionBox.vue
View File

@ -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>

52
components/ContactForm.vue
View File

@ -7,17 +7,20 @@
aria-labelledby="controlIcon"
role="dialog"
>
<svg
id="controlIcon"
tabindex="0"
role="button"
aria-label="Toggle contact form"
@click="toggleContactBubble"
@keydown.space.prevent="toggleContactBubble"
@keydown.enter.prevent="toggleContactBubble"
>
<use :xlink:href="`/assets/icons/collection.svg#${isContactBubbleOpen ? 'times' : 'talk'}`" />
</svg>
<button
id="controlIcon"
tabindex="0"
role="button"
aria-label="Toggle contact form"
@click="toggleContactBubble"
@keydown.space.prevent="toggleContactBubble"
@keydown.enter.prevent="toggleContactBubble"
>
<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)
color: $darkgrey
background-color: white
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)

2
components/FAQArea.vue
View File

@ -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>

10
components/template/NavBar.vue
View File

@ -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

2
layouts/default.vue
View File

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

4
pages/designer/index.vue
View File

@ -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>

2
pages/magazin/index.vue
View File

@ -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>

2
pages/sectors/film/index.vue
View File

@ -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">

2
pages/sectors/schools/index.vue
View File

@ -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"

2
pages/services/accessibility/index.vue
View File

@ -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>

2
pages/services/index.vue
View File

@ -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>

6
pages/webagency/index.vue
View File

@ -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)"