WCAG 2.1 Richtlinien

import Image from 'next/image'

// Informatives Bild
export function ProductImage({ product }) {
  return (
    <Image
      src={product.imageUrl || "/placeholder.svg"}
      alt={`${product.name} - ${product.description}`}
      width={300}
      height={200}
    />
  )
}

// Dekoratives Bild
export function DecorativeImage() {
  return (
    <Image
      src="/decoration.png"
      alt=""
      role="presentation"
      width={400}
      height={100}
    />
  )
}

// Icon in einem Button mit verstecktem Text für Screenreader
export function SearchButton() {
  return (
    <button className="p-2 bg-black text-white rounded-full">
      <svg 
        xmlns="http://www.w3.org/2000/svg" 
        width="24" 
        height="24" 
        viewBox="0 0 24 24" 
        fill="none" 
        stroke="currentColor" 
        aria-hidden="true"
      >
        <circle cx="11" cy="11" r="8"></circle>
        <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
      </svg>
      <span className="sr-only">Suchen</span>
    </button>
  )
}

import Image from 'next/image'

export function ComplexChart() {
  return (
    <figure>
      <Image
        src="/sales-chart.png"
        alt="Verkaufszahlen nach Regionen 2023"
        width={600}
        height={400}
        aria-describedby="chart-description"
      />
      <figcaption id="chart-description" className="mt-2 text-sm text-gray-600">
        <h3 className="font-bold">Verkaufszahlen nach Regionen 2023</h3>
        <p>
          Das Diagramm zeigt die Verkaufszahlen für vier Regionen:
          Nord (42%), Süd (28%), Ost (15%) und West (15%).
          Die Region Nord hat den größten Anteil, gefolgt von Süd.
          Ost und West haben identische Anteile.
        </p>
      </figcaption>
    </figure>
  )
}

WEBVTT

00:00:01.000 --> 00:00:04.000
Moderator: Willkommen zu unserem Webinar über digitale Barrierefreiheit.

00:00:04.500 --> 00:00:08.000
Heute sprechen wir über die WCAG 2.1 Richtlinien und ihre Bedeutung.

00:00:08.500 --> 00:00:12.000
Gast: Vielen Dank für die Einladung. Ich freue mich, hier zu sein.

00:00:12.500 --> 00:00:15.000
[Applaus]

WEBVTT

00:00:00.500 --> 00:00:01.000
Eine Frau und ein Mann sitzen an einem Tisch mit Mikrofonen.

00:00:07.000 --> 00:00:08.000
Eine Präsentation mit dem Titel "WCAG 2.1" wird eingeblendet.

00:00:15.500 --> 00:00:16.500
Das Publikum applaudiert.

import { useState } from 'react'

export function AccessibleVideoPlayer() {
  const [showTranscript, setShowTranscript] = useState(false)
  
  return (
    <figure className="max-w-3xl mx-auto">
      <div className="aspect-video bg-black">
        <video 
          controls 
          className="w-full h-full"
          poster="/video-thumbnail.jpg"
        >
          <source src="/video.mp4" type="video/mp4" />
          <source src="/video.webm" type="video/webm" />
          
          {/* Untertitel in verschiedenen Sprachen */}
          <track 
            kind="captions" 
            src="/captions-de.vtt" 
            srcLang="de" 
            label="Deutsch" 
            default 
          />
          <track 
            kind="captions" 
            src="/captions-en.vtt" 
            srcLang="en" 
            label="English" 
          />
          
          {/* Audiodeskription */}
          <track 
            kind="descriptions" 
            src="/descriptions-de.vtt" 
            srcLang="de" 
            label="Audiodeskription" 
          />
          
          <p>
            Ihr Browser unterstützt das Video-Element nicht. 
            Sie können das Video <a href="/video.mp4">hier herunterladen</a>.
          </p>
        </video>
      </div>
      
      <figcaption className="mt-4">
        <button 
          onClick={() => setShowTranscript(!showTranscript)}
          className="flex items-center gap-2 text-sm font-medium"
          aria-expanded={showTranscript}
        >
          <span>{showTranscript ? 'Transkript ausblenden' : 'Transkript anzeigen'}</span>
          <svg 
            xmlns="http://www.w3.org/2000/svg" 
            width="20" 
            height="20" 
            viewBox="0 0 24 24" 
            fill="none" 
            stroke="currentColor" 
            strokeWidth="2" 
            strokeLinecap="round" 
            strokeLinejoin="round"
            className={showTranscript ? 'rotate-180' : ''}
          >
            <polyline points="6 9 12 15 18 9"></polyline>
          </svg>
        </button>
        
        {showTranscript && (
          <div className="mt-4 p-4 bg-gray-50 rounded-md text-sm">
            <h3 className="font-bold mb-2">Vollständige Transkription</h3>
            <div className="space-y-2">
              <p><strong>Moderator (00:01):</strong> Willkommen zu unserem Webinar über digitale Barrierefreiheit.</p>
              <p><strong>Moderator (00:04):</strong> Heute sprechen wir über die WCAG 2.1 Richtlinien und ihre Bedeutung.</p>
              <p><strong>Gast (00:08):</strong> Vielen Dank für die Einladung. Ich freue mich, hier zu sein.</p>
              <p><strong>Moderator (00:12):</strong> [Applaus] Lassen Sie uns mit einer Einführung beginnen...</p>
              {/* Weitere Transkription */}
            </div>
          </div>
        )}
      </figcaption>
    </figure>
  )
}

import { useState, useRef, useEffect } from 'react'

export function AccessibleDropdown() {
  const [isOpen, setIsOpen] = useState(false)
  const dropdownRef = useRef(null)
  
  // Dropdown öffnen/schließen
  const toggleDropdown = () => {
    setIsOpen(!isOpen)
  }
  
  // Tastaturnavigation
  const handleKeyDown = (e) => {
    if (e.key === 'Escape' && isOpen) {
      setIsOpen(false)
    }
  }
  
  // Klick außerhalb schließt Dropdown
  useEffect(() => {
    const handleClickOutside = (event) => {
      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
        setIsOpen(false)
      }
    }
    
    document.addEventListener('mousedown', handleClickOutside)
    return () => {
      document.removeEventListener('mousedown', handleClickOutside)
    }
  }, [])
  
  return (
    <div 
      className="relative" 
      ref={dropdownRef}
      onKeyDown={handleKeyDown}
    >
      <button
        className="px-4 py-2 bg-gray-200 rounded"
        onClick={toggleDropdown}
        aria-haspopup="true"
        aria-expanded={isOpen}
        aria-controls="dropdown-menu"
      >
        Optionen
      </button>
      
      {isOpen && (
        <ul
          id="dropdown-menu"
          role="menu"
          className="absolute mt-1 w-40 bg-white border rounded shadow-lg"
        >
          <li 
            role="menuitem" 
            tabIndex={0}
            className="px-4 py-2 hover:bg-gray-100 cursor-pointer"
            onClick={() => {
              console.log('Option 1 selected')
              setIsOpen(false)
            }}
          >
            Option 1
          </li>
          <li 
            role="menuitem" 
            tabIndex={0}
            className="px-4 py-2 hover:bg-gray-100 cursor-pointer"
            onClick={() => {
              console.log('Option 2 selected')
              setIsOpen(false)
            }}
          >
            Option 2
          </li>
        </ul>
      )}
    </div>
  )
}

import { useState, useEffect, useRef } from 'react'

export function AccessibleCarousel({ slides, interval = 5000 }) {
  const [currentSlide, setCurrentSlide] = useState(0)
  const [isPaused, setIsPaused] = useState(false)
  const timerRef = useRef(null)
  
  // Zum nächsten Slide wechseln
  const nextSlide = () => {
    setCurrentSlide((prev) => (prev === slides.length - 1 ? 0 : prev + 1))
  }
  
  // Zum vorherigen Slide wechseln
  const prevSlide = () => {
    setCurrentSlide((prev) => (prev === 0 ? slides.length - 1 : prev - 1))
  }
  
  // Karussell pausieren/fortsetzen
  const togglePause = () => {
    setIsPaused(!isPaused)
  }
  
  // Timer für automatischen Wechsel
  useEffect(() => {
    if (!isPaused) {
      timerRef.current = setTimeout(nextSlide, interval)
    }
    
    return () => {
      if (timerRef.current) {
        clearTimeout(timerRef.current)
      }
    }
  }, [currentSlide, isPaused, interval])
  
  return (
    <div 
      className="relative overflow-hidden" 
      role="region" 
      aria-roledescription="carousel"
      aria-label="Bildergalerie"
    >
      <div className="flex transition-transform duration-500" style={{ transform: `translateX(-${currentSlide * 100}%)` }}>
        {slides.map((slide, index) => (
          <div 
            key={index}
            className="w-full flex-shrink-0"
            role="group"
            aria-roledescription="slide"
            aria-label={`${index + 1} von ${slides.length}`}
          >
            <img 
              src={slide.image || "/placeholder.svg"} 
              alt={slide.alt || ''} 
              className="w-full h-auto"
            />
            {slide.caption && (
              <div className="p-4 bg-black bg-opacity-50 text-white">
                {slide.caption}
              </div>
            )}
          </div>
        ))}
      </div>
      
      <div className="absolute bottom-4 left-0 right-0 flex justify-center gap-4">
        <button 
          onClick={togglePause}
          className="px-4 py-2 bg-white bg-opacity-75 rounded"
          aria-pressed={isPaused}
        >
          {isPaused ? 'Fortsetzen' : 'Pausieren'}
        </button>
        <button 
          onClick={prevSlide}
          className="px-4 py-2 bg-white bg-opacity-75 rounded"
          aria-label="Vorheriges Bild"
        >
          Zurück
        </button>
        <button 
          onClick={nextSlide}
          className="px-4 py-2 bg-white bg-opacity-75 rounded"
          aria-label="Nächstes Bild"
        >
          Weiter
        </button>
      </div>
      
      <div className="absolute bottom-16 left-0 right-0 flex justify-center gap-2">
        {slides.map((_, index) => (
          <button
            key={index}
            onClick={() => setCurrentSlide(index)}
            className={`w-3 h-3 rounded-full ${
              currentSlide === index ? 'bg-white' : 'bg-white bg-opacity-50'
            }`}
            aria-label={`Zu Bild ${index + 1} wechseln`}
            aria-current={currentSlide === index ? 'true' : 'false'}
          />
        ))}
      </div>
    </div>
  )
}

// components/SkipLink.tsx
export function SkipLink() {
  return (
    <a 
      href="#main-content" 
      className="sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 focus:z-50 focus:p-4 focus:bg-white focus:text-black focus:outline focus:outline-2"
    >
      Zum Hauptinhalt springen
    </a>
  )
}

// app/layout.tsx
import { SkipLink } from '@/components/SkipLink'
import { Navigation } from '@/components/Navigation'

export default function RootLayout({ children }) {
  return (
    <html lang="de">
      <head>
        <title>Seitentitel - Firmenname - Beschreibung</title>
      </head>
      <body>
        <SkipLink />
        <header>
          <Navigation />
        </header>
        <main id="main-content">
          {children}
        </main>
        <footer>
          {/* Footer-Inhalt */}
        </footer>
      </body>
    </html>
  )
}

// components/ArticleLink.tsx
interface ArticleLinkProps {
  href: string;
  title: string;
  description: string;
}

export function ArticleLink({ href, title, description }: ArticleLinkProps) {
  return (
    <a 
      href={href}
      className="block p-4 border rounded-lg hover:bg-gray-50 transition-colors"
      aria-describedby={`desc-${href.replace(/\//g, '-')}`}
    >
      <h3 className="text-lg font-bold">{title}</h3>
      <p id={`desc-${href.replace(/\//g, '-')}`} className="text-sm text-gray-600">
        {description}
      </p>
    </a>
  )
}

import { useState } from 'react'

// Komponente mit ausreichend großen Klickbereichen
export function ActionButtons() {
  return (
    <div className="flex space-x-2">
      <button 
        className="p-3 min-w-[44px] min-h-[44px] flex items-center justify-center bg-blue-100 rounded hover:bg-blue-200"
        aria-label="Bearbeiten"
      >
        <svg 
          xmlns="http://www.w3.org/2000/svg" 
          width="24" 
          height="24" 
          viewBox="0 0 24 24" 
          fill="none" 
          stroke="currentColor" 
          strokeWidth="2" 
          aria-hidden="true"
        >
          <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path>
          <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path>
        </svg>
      </button>
      
      <button 
        className="p-3 min-w-[44px] min-h-[44px] flex items-center justify-center bg-red-100 rounded hover:bg-red-200"
        aria-label="Löschen"
      >
        <svg 
          xmlns="http://www.w3.org/2000/svg" 
          width="24" 
          height="24" 
          viewBox="0 0 24 24" 
          fill="none" 
          stroke="currentColor" 
          strokeWidth="2" 
          aria-hidden="true"
        >
          <path d="M3 6h18"></path>
          <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"></path>
          <path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
        </svg>
      </button>
    </div>
  )
}

// Karte mit alternativen Bedienmöglichkeiten
export function AccessibleMap() {
  const [zoomLevel, setZoomLevel] = useState(5)
  
  const handleZoomIn = () => {
    setZoomLevel(prev => Math.min(prev + 1, 10))
  }
  
  const handleZoomOut = () => {
    setZoomLevel(prev => Math.max(prev - 1, 1))
  }
  
  const handleZoomChange = (e) => {
    setZoomLevel(parseInt(e.target.value))
  }
  
  return (
    <div className="map-container border rounded overflow-hidden">
      <div 
        className="map bg-gray-200 h-64" 
        style={{ transform: `scale(${zoomLevel / 5})` }}
        aria-label="Interaktive Karte"
        role="application"
      >
        {/* Karteninhalt */}
        <div className="flex items-center justify-center h-full text-gray-500">
          Karteninhalt (Beispiel)
        </div>
      </div>
      
      <div className="map-controls bg-white p-2 flex items-center space-x-4">
        <button 
          onClick={handleZoomOut}
          className="p-2 min-w-[44px] min-h-[44px] bg-gray-100 rounded hover:bg-gray-200"
          aria-label="Verkleinern"
          disabled={zoomLevel === 1}
        >
          -
        </button>
        
        <div className="flex-1">
          <label htmlFor="zoom-level" className="sr-only">Zoom-Level</label>
          <input 
            type="range" 
            id="zoom-level" 
            min="1" 
            max="10" 
            value={zoomLevel}
            onChange={handleZoomChange}
            className="w-full"
          />
        </div>
        
        <button 
          onClick={handleZoomIn}
          className="p-2 min-w-[44px] min-h-[44px] bg-gray-100 rounded hover:bg-gray-200"
          aria-label="Vergrößern"
          disabled={zoomLevel === 10}
        >
          +
        </button>
      </div>
    </div>
  )
}

// In Next.js: app/layout.tsx
export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="de">
      <body>{children}</body>
    </html>
  )
}

// Komponente mit mehrsprachigem Inhalt
export function MultilingualQuote() {
  return (
    <div className="my-6">
      <h2>Inspirierende Zitate</h2>
      
      {/* Deutsches Zitat - keine zusätzliche Sprachkennzeichnung nötig */}
      <blockquote className="border-l-4 border-gray-300 pl-4 my-4">
        <p>Der Weg ist das Ziel.</p>
        <footer>— Konfuzius</footer>
      </blockquote>
      
      {/* Englisches Zitat - mit Sprachkennzeichnung */}
      <blockquote lang="en" className="border-l-4 border-gray-300 pl-4 my-4">
        <p>The journey is the reward.</p>
        <footer>— Steve Jobs</footer>
      </blockquote>
      
      {/* Französisches Zitat - mit Sprachkennzeichnung und Übersetzung */}
      <blockquote lang="fr" className="border-l-4 border-gray-300 pl-4 my-4">
        <p>La vie est belle.</p>
        <footer>— Französisches Sprichwort</footer>
      </blockquote>
      <p className="text-sm text-gray-600">Übersetzung: Das Leben ist schön.</p>
    </div>
  )
}

// components/layout/Navigation.tsx
// Konsistente Navigation für alle Seiten
export function Navigation() {
  return (
    <nav className="bg-gray-100 p-4">
      <ul className="flex space-x-6">
        <li><a href="/" className="hover:underline">Startseite</a></li>
        <li><a href="/produkte" className="hover:underline">Produkte</a></li>
        <li><a href="/dienstleistungen" className="hover:underline">Dienstleistungen</a></li>
        <li><a href="/ueber-uns" className="hover:underline">Über uns</a></li>
        <li><a href="/kontakt" className="hover:underline">Kontakt</a></li>
      </ul>
    </nav>
  )
}

// components/forms/LanguageSelector.tsx
// Vorhersehbares Verhalten bei Eingabe
import { useState } from 'react'

export function LanguageSelector() {
  const [language, setLanguage] = useState('')
  const [showConfirmation, setShowConfirmation] = useState(false)
  
  const handleLanguageChange = (e) => {
    setLanguage(e.target.value)
    // Keine automatische Weiterleitung oder Kontextänderung
  }
  
  const applyLanguageChange = () => {
    if (language) {
      setShowConfirmation(true)
      // Hier könnte die Sprache der Anwendung geändert werden
    }
  }
  
  return (
    <div className="my-4">
      <label htmlFor="language-select" className="block mb-2">Sprache auswählen:</label>
      <select 
        id="language-select" 
        value={language} 
        onChange={handleLanguageChange}
        className="border p-2 rounded mr-2"
      >
        <option value="">Bitte wählen...</option>
        <option value="de">Deutsch</option>
        <option value="en">Englisch</option>
        <option value="fr">Französisch</option>
      </select>
      
      <button 
        onClick={applyLanguageChange}
        className="bg-blue-600 text-white px-4 py-2 rounded"
      >
        Sprache ändern
      </button>
      
      {showConfirmation && (
        <div className="mt-2 p-2 bg-green-100 text-green-800 rounded">
          Sprache wurde auf {language === 'de' ? 'Deutsch' : language === 'en' ? 'Englisch' : 'Französisch'} geändert.
        </div>
      )}
    </div>
  )
}

import { useState } from 'react'

export function AccessibleForm() {
  const [formData, setFormData] = useState({
    name: '',
    email: '',
    password: ''
  })
  
  const [errors, setErrors] = useState({
    name: '',
    email: '',
    password: ''
  })
  
  const [submitted, setSubmitted] = useState(false)
  
  const handleChange = (e) => {
    const { name, value } = e.target
    setFormData({
      ...formData,
      [name]: value
    })
    
    // Echtzeit-Validierung
    validateField(name, value)
  }
  
  const validateField = (name, value) => {
    let errorMessage = ''
    
    switch (name) {
      case 'name':
        errorMessage = value.trim() === '' ? 'Name ist erforderlich' : ''
        break
      case 'email':
        const emailRegex = /^[^s@]+@[^s@]+.[^s@]+$/
        errorMessage = !emailRegex.test(value) ? 'Gültige E-Mail-Adresse erforderlich' : ''
        break
      case 'password':
        errorMessage = value.length < 8 ? 'Passwort muss mindestens 8 Zeichen lang sein' : 
                      !/d/.test(value) ? 'Passwort muss mindestens eine Zahl enthalten' : ''
        break
      default:
        break
    }
    
    setErrors(prev => ({
      ...prev,
      [name]: errorMessage
    }))
    
    return errorMessage === ''
  }
  
  const handleSubmit = (e) => {
    e.preventDefault()
    
    // Alle Felder validieren
    let formIsValid = true
    Object.keys(formData).forEach(field => {
      const isValid = validateField(field, formData[field])
      if (!isValid) formIsValid = false
    })
    
    if (formIsValid) {
      // Formular absenden
      setSubmitted(true)
    } else {
      // Fokus auf das erste Feld mit Fehler setzen
      const firstErrorField = Object.keys(errors).find(field => errors[field] !== '')
      if (firstErrorField) {
        document.getElementById(firstErrorField)?.focus()
      }
    }
  }
  
  if (submitted) {
    return (
      <div className="p-4 bg-green-100 text-green-800 rounded" role="alert">
        <h2 className="text-xl font-bold mb-2">Registrierung erfolgreich!</h2>
        <p>Vielen Dank für Ihre Anmeldung.</p>
      </div>
    )
  }
  
  return (
    <form onSubmit={handleSubmit} noValidate className="space-y-6">
      <div>
        <label htmlFor="name" className="block mb-1 font-medium">
          Name
        </label>
        <input
          type="text"
          id="name"
          name="name"
          value={formData.name}
          onChange={handleChange}
          aria-invalid={errors.name !== ''}
          aria-describedby={errors.name ? 'name-error' : undefined}
          className={`w-full p-2 border rounded ${errors.name ? 'border-red-500' : 'border-gray-300'}`}
        />
        {errors.name && (
          <div id="name-error" className="mt-1 text-red-500 text-sm" role="alert">
            {errors.name}
          </div>
        )}
      </div>
      
      <div>
        <label htmlFor="email" className="block mb-1 font-medium">
          E-Mail
        </label>
        <input
          type="email"
          id="email"
          name="email"
          value={formData.email}
          onChange={handleChange}
          aria-invalid={errors.email !== ''}
          aria-describedby={errors.email ? 'email-error' : undefined}
          className={`w-full p-2 border rounded ${errors.email ? 'border-red-500' : 'border-gray-300'}`}
        />
        {errors.email && (
          <div id="email-error" className="mt-1 text-red-500 text-sm" role="alert">
            {errors.email}
          </div>
        )}
      </div>
      
      <div>
        <label htmlFor="password" className="block mb-1 font-medium">
          Passwort
        </label>
        <input
          type="password"
          id="password"
          name="password"
          value={formData.password}
          onChange={handleChange}
          aria-invalid={errors.password !== ''}
          aria-describedby="password-hint password-error"
          className={`w-full p-2 border rounded ${errors.password ? 'border-red-500' : 'border-gray-300'}`}
        />
        <div id="password-hint" className="mt-1 text-sm text-gray-600">
          Das Passwort muss mindestens 8 Zeichen lang sein und Zahlen enthalten.
        </div>
        {errors.password && (
          <div id="password-error" className="mt-1 text-red-500 text-sm" role="alert">
            {errors.password}
          </div>
        )}
      </div>
      
      <button
        type="submit"
        className="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700"
      >
        Registrieren
      </button>
    </form>
  )
}