152 lines
7.9 KiB
Vue
152 lines
7.9 KiB
Vue
<template>
|
||
<div class="accessiblityPage">
|
||
<HeroBox
|
||
image="/uploads/DML_Service_Header_Accessibility_de8f72f0c1.webp"
|
||
:aria-label="$t('pages.services.accessibility.hero.ariaLabel')"
|
||
:dark-background="true"
|
||
>
|
||
<h1>{{ $t('pages.services.accessibility.hero.headline1') }}</h1>
|
||
<h2>{{ $t('pages.services.accessibility.hero.headline2') }}</h2>
|
||
<h3>{{ $t('pages.services.accessibility.hero.headline3') }}</h3>
|
||
</HeroBox>
|
||
|
||
<section class="targetGroup">
|
||
|
||
<div class="container-10">
|
||
<NuxtImg
|
||
provider="strapi"
|
||
src="/uploads/rollstuhl_a67c73b6a9.webp"
|
||
alt="accessibility"
|
||
/>
|
||
<h2>Für wen ist Barrierefreiheit wichtig?</h2>
|
||
<p>Barrierefreiheit macht Ihre Webseite nicht nur für alle Menschen, insbesondere für Menschen mit Einschränkungen zugänglich, sondern verbessert auch die Auffindbarkeit bei Suchmaschinen und die Nutzbarkeit durch moderne KI-Systeme.</p>
|
||
<h3>Auf was kommt es bei Barrierefreiheit im Web an?</h3>
|
||
<ul class="check">
|
||
<li><b>Tastaturbedienbarkeit:</b> Alle Funktionen sind ohne Maus erreichbar.</li>
|
||
<li><b>Kontraststarke Gestaltung:</b> Gute Lesbarkeit für alle Sehfähigkeiten.</li>
|
||
<li><b>Screenreader-Kompatibilität:</b> Inhalte werden klar und verständlich vorgelesen.</li>
|
||
<li><b>Logische Struktur:</b> Überschriften und Inhalte folgen einer nachvollziehbaren Reihenfolge.</li>
|
||
<li><b>Barrierefreie Medien:</b> Texte als Alternativen, keine automatisch startenden Videos ohne Kontrolle.</li>
|
||
</ul>
|
||
<h3>Möchten Sie wissen, wie barrierefrei Ihre aktuelle Webseite ist?</h3>
|
||
<button
|
||
class="btn pinkBtn" role="button"
|
||
aria-label="Barrierefreiheitscheck"
|
||
@click.prevent="toggleContactBubble">Kostenlosen Barrierefreiheits-Check anfordern!</button>
|
||
</div>
|
||
|
||
</section>
|
||
|
||
<section class="legalBasis">
|
||
<svg class="sectionWave wave-top" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 20">
|
||
<path d="M 0 0 L 500 0 L 500 14 Q 354.4 -2.8 250 11 Q 145.6 24.8 0 14 L 0 0 Z" fill="#FFF"/>
|
||
</svg>
|
||
<div class="container-10">
|
||
<h2>Rechtliche Grundlagen für Barrierefreiheit in Deutschland und der EU</h2>
|
||
<p>Barrierefreiheit im Web ist nicht nur eine gute Praxis, sondern in Deutschland und der Europäischen Union auch gesetzlich vorgeschrieben. Diese Vorgaben sollen sicherstellen, dass digitale Angebote für alle Menschen uneingeschränkt nutzbar sind.</p>
|
||
|
||
<h3>Wichtige Gesetze und Verordnungen:</h3>
|
||
<ul class="check">
|
||
<li><b>Behindertengleichstellungsgesetz (BGG):</b> Regelt die Barrierefreiheit öffentlicher Einrichtungen und deren digitale Angebote in Deutschland.</li>
|
||
<li><b>Barrierefreie-Informationstechnik-Verordnung (BITV 2.0):</b> Konkretisiert die Anforderungen des BGG für Webseiten und mobile Anwendungen öffentlicher Stellen.</li>
|
||
<li><b>EU-Richtlinie 2016/2102:</b> Verpflichtet öffentliche Stellen der Mitgliedstaaten, ihre Websites und mobilen Apps barrierefrei zu gestalten.</li>
|
||
<li><b>European Accessibility Act (EAA):</b> Richtlinie für barrierefreie Produkte und Dienstleistungen, inklusive digitaler Angebote.</li>
|
||
<li><b>WCAG 2.1 (Web Content Accessibility Guidelines):</b> International anerkannte technische Standards, die als Basis für gesetzliche Vorgaben dienen.</li>
|
||
</ul>
|
||
<p>Die Einhaltung dieser Regelungen schützt Sie vor Abmahnungen und verbessert Ihre Reichweite durch bessere Zugänglichkeit für alle Nutzer.</p>
|
||
</div>
|
||
<svg class="sectionWave wave-bottom" style="transform: scale(1,-1)" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 20">
|
||
<path d="M 0 0 L 500 0 L 500 14 Q 354.4 -2.8 250 11 Q 145.6 24.8 0 14 L 0 0 Z" fill="#FFF"/>
|
||
</svg>
|
||
</section>
|
||
|
||
<section class="implementation">
|
||
<div class="container-10">
|
||
<h2>Wie wir Barrierefreiheit für Sie umsetzen</h2>
|
||
<p>
|
||
Mit Nuxt im Front-End und Strapi als flexiblem Headless CMS im Back-End, realisieren wir barrierefreie Webseiten, die sowohl technisch sauber als auch leicht wartbar sind.
|
||
Durch die Trennung von Front-End und Back-End können Inhalte effizient gepflegt und barrierefreie Standards systematisch umgesetzt werden.
|
||
</p>
|
||
<h3>Vorteile gegenüber klassischen CMS wie WordPress oder Contao</h3>
|
||
<ul class="check">
|
||
<li><b>Modulare Architektur:</b> Flexible Komponenten und wiederverwendbare Module erleichtern die Umsetzung von Barrierefreiheitsstandards.</li>
|
||
<li><b>Performance:</b> Nuxt generiert schnelle, serverseitig gerenderte Seiten, die für Nutzer und Suchmaschinen gleichermaßen optimal sind.</li>
|
||
<li><b>SEO & KI-Freundlichkeit:</b> Durch gezielte Meta-Tags und strukturierte Daten unterstützen wir bessere Auffindbarkeit und Kompatibilität mit KI-Systemen.</li>
|
||
<li><b>Content-Management:</b> Strapi ermöglicht barrierefreie Inhalte mit benutzerfreundlichen Editoren und unterstützt mehrsprachige Seiten einfach.</li>
|
||
<li><b>Zukunftssicherheit:</b> Moderne Technologien garantieren nachhaltige Wartbarkeit und Erweiterbarkeit der Webseite.</li>
|
||
</ul>
|
||
<button v-if="false" class="mintBtn">Mehr zum Thema Headless CMS</button>
|
||
</div>
|
||
|
||
</section>
|
||
|
||
<CallToActionBox
|
||
headline="Sie brauchen einen Barrierefreiheitscheck?"
|
||
text="Kein Problem! Wir schauen uns Ihre Seite gerne an..."
|
||
button-text="Kontaktieren Sie uns!"
|
||
/>
|
||
|
||
<section class="articleBox container-5">
|
||
<h3>Lesen Sie jetzt mehr zum Thema Barrierefreiheit und Datenschutz im Web</h3>
|
||
<ArticleCarousel :articles="recommendedArticles" />
|
||
</section>
|
||
|
||
<FAQArea page-link="/leistungen/barrierefreie-webseiten" headline="Weitere Fragen zum Thema Barrierefreiheit im Web" />
|
||
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
|
||
definePageMeta({
|
||
alias: [
|
||
'/leistungen/barrierefreie-webseiten', // Deutsch
|
||
'/services/accessibility', // Englisch
|
||
'/services/accessibilite', // Französisch
|
||
'/servizi/accessibilita', // Italienisch
|
||
'/servicios/accesibilidad', // Spanisch
|
||
'/hizmetler/erisilebilirlik' // Türkisch
|
||
],
|
||
name: 'services-accessibility',
|
||
sitemap: {
|
||
lastmod: '2025-06-23', // ISO 8601 – oder dynamisch generieren
|
||
changefreq: 'monthly', // optional
|
||
priority: 1 // optional
|
||
}
|
||
})
|
||
import { useMainStore } from '@/stores/main'
|
||
import { storeToRefs } from 'pinia'
|
||
const mainStore = useMainStore()
|
||
const { getArticlesByCategoryIds } = storeToRefs(mainStore)
|
||
|
||
const recommendedArticles = computed(() => {
|
||
return getArticlesByCategoryIds.value([1])
|
||
})
|
||
const toggleContactBubble = () => mainStore.toggleContactBubble();
|
||
</script>
|
||
|
||
<style lang="sass">
|
||
.accessiblityPage
|
||
hyphens: auto
|
||
.articleBox
|
||
margin-top: 5rem
|
||
margin-bottom: 6rem
|
||
h3
|
||
text-align: center
|
||
.legalBasis
|
||
background: linear-gradient(90deg, #39324A 0%, #403871 100%);
|
||
color: white
|
||
padding: 12vh 0
|
||
margin: 8vh 0
|
||
.targetGroup
|
||
img
|
||
float: right
|
||
width: 30%
|
||
max-width: 350px
|
||
min-width: 130px
|
||
margin: 1rem 0 2rem 2vw
|
||
|
||
.implementation
|
||
margin: 8vh 0
|
||
padding: 1vh 0 3vh 0
|
||
</style> |