Eine barrierefreie und übersichtliche Tabelle von Creator-Agenturen im DACH-Raum (Deutschland, Österreich, Schweiz). Diese Anwendung bietet eine einfache und zugängliche Möglichkeit, Agenturen nach verschiedenen Kriterien zu filtern und zu sortieren.
Diese Anwendung wurde nach den WCAG 2.1 AA Standards entwickelt und bietet:
- Vollständige Keyboard-Navigation - Alle Funktionen sind ohne Maus bedienbar
- Screen Reader Unterstützung - Optimiert für NVDA, JAWS, VoiceOver und andere
- Hoher Farbkontrast - Mindestens 4.5:1 Kontrastverhältnis für bessere Lesbarkeit
- Responsive Design - Funktioniert auf allen Geräten und Bildschirmgrößen
- Focus Management - Klare visuelle Fokusindikatoren
- ARIA Landmarks - Strukturierte Navigation für assistive Technologien
- Live Regions - Dynamische Inhaltsänderungen werden angekündigt
- Skip Links - Schnelle Navigation zu Hauptinhalten
Tab/Shift+Tab- Navigation zwischen ElementenEnter/Space- Aktivierung von Buttons und LinksArrow Keys- Navigation in Tabellen und ListenEscape- Schließen von Modals und DropdownsHome/End- Sprung zum ersten/letzten Element
# Automatisierte Accessibility-Tests ausführen
npm run test:a11y
# ESLint Accessibility-Regeln prüfen
npm run lint:a11y
# Vollständiges Accessibility-Audit
npm run audit:a11y- Übersichtliche Darstellung von Creator-Agenturen im DACH-Raum
- Erweiterte Filterung nach:
- Agentur-Name (Volltext-Suche)
- Fokus-Bereich
- Plattformen
- Referenzen
- Status
- Preismodell
- Mindest-Follower-Anzahl
- Sortierung nach allen Spalten
- Responsive Design für Desktop, Tablet und Mobile
- Modal-Details für detaillierte Agentur-Informationen
- Export-Funktionalität (geplant)
Die Agentur-Daten werden aus einer CSV-Datei geladen und enthalten Informationen zu:
- Agentur-Name und Website
- Fokus-Bereiche und Spezialisierungen
- Unterstützte Social Media Plattformen
- Bekannte Referenzen und Kunden
- Geschäftsbedingungen
- Follower-Reichweite
- Status (aktiv/inaktiv)
- Rechtsform und Standort
- Gründungsjahr
- Abteilungen
- Zusätzliche Notizen
- React 18 mit TypeScript
- Tailwind CSS für Styling
- PapaParse für CSV-Verarbeitung
- React Helmet Async für SEO
- Axe-core für Accessibility-Testing
- ESLint jsx-a11y für Accessibility-Linting
# Dependencies installieren
npm install
# Entwicklungsserver starten
npm start
# Für Produktion bauen
npm run build
# Tests ausführen
npm test
# Accessibility-Tests
npm run test:a11y# TypeScript-Typen prüfen
npm run type-check
# ESLint ausführen
npm run lint
# ESLint mit Accessibility-Regeln
npm run lint:a11y# Bundle-Größe analysieren
npm run analyze# Unit Tests
npm test
# Test Coverage
npm run test:coverage
# Accessibility Tests
npm run test:a11yDie Anwendung wird automatisch auf GitHub Pages deployed: https://xboxdevcom.github.io/agencys/
- TypeScript Kompilierung
- Tailwind CSS Optimierung
- Bundle Minimierung
- Accessibility-Validierung
- Deployment zu GitHub Pages
- Modern Browsers: Chrome 90+, Firefox 88+, Safari 14+, Edge 90+
- Screen Readers: NVDA, JAWS, VoiceOver, Dragon NaturallySpeaking
- Mobile: iOS Safari, Chrome Mobile, Samsung Internet
Diese Anwendung erfüllt:
- ✅ WCAG 2.1 Level A - Grundlegende Barrierefreiheit
- ✅ WCAG 2.1 Level AA - Erweiterte Barrierefreiheit
- ✅ Section 508 - US-Bundesstandards
- ✅ EN 301 549 - Europäische Standards
- NVDA (Windows)
- JAWS (Windows)
- VoiceOver (macOS/iOS)
- TalkBack (Android)
- Dragon NaturallySpeaking (Sprachsteuerung)
Beim Beitragen zu diesem Projekt beachte bitte:
- Accessibility First - Alle neuen Features müssen barrierefrei sein
- Testing - Führe Accessibility-Tests vor Pull Requests aus
- Documentation - Dokumentiere Accessibility-Features
- Code Review - Accessibility wird in Code Reviews geprüft
- Keyboard-Navigation funktioniert
- Screen Reader-Tests durchgeführt
- Farbkontrast geprüft (min. 4.5:1)
- ARIA-Attribute korrekt verwendet
- Focus Management implementiert
- Automatisierte Tests bestanden
MIT License - siehe LICENSE für Details.
Bei Accessibility-Problemen oder Fragen:
- 🐛 Issues: GitHub Issues für Bug Reports
- 📧 Email: accessibility@example.com
- 📖 Docs: Siehe
/docs/accessibility.md
Hinweis: Diese Anwendung wird kontinuierlich auf Barrierefreiheit getestet und verbessert. Feedback von Nutzern assistiver Technologien ist sehr willkommen!