dml_frontend/pages/services/accessibility/index.vue

<template>
    <div class="accessiblityPage">
        <HeroBox
            image="/uploads/DML_Service_Header_Accessibility_de8f72f0c1.webp"
            :aria-label="$t('pages.services.accessibility.hero.ariaLabel')"
            :content="{
                headline1: 'pages.services.accessibility.hero.headline1',
                headline2: 'pages.services.accessibility.hero.headline2',
                headline3: 'pages.services.accessibility.hero.headline3'
            }"
            :dark-background="true"
        /> 
        <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="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>

            <FAQArea page-link="/leistungen/barrierefreie-webseiten" headline="Weitere Fragen zum Thema Barrierefreiheit im Web" />

    </div>
</template>

<script setup>
import { useMainStore } from '@/stores/main';
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'
})
const mainStore = useMainStore();
const toggleContactBubble = () => mainStore.toggleContactBubble();
</script>

<style lang="sass">
.accessiblityPage
    .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
            margin: 1rem 0 2rem 2rem
    .implementation
        margin: 8vh 0
        padding: 1vh 0 3vh 0
</style>