Komponenten-Priorisierung für A11y-Tests
Diese Priorisierungsmatrix hilft bei der Entscheidung, welche Komponenten zuerst mit A11y-Tests versehen werden sollten. Die Priorisierung basiert auf drei Hauptkriterien:
- Nutzungshäufigkeit: Wie oft wird die Komponente in Anwendungen verwendet?
- Komplexität: Wie komplex ist die Komponente in Bezug auf Interaktionen und Zugänglichkeit?
- Kritikalität: Wie wichtig ist die Komponente für die Kernfunktionalität der Anwendung?
Priorisierungsmatrix
| Priorität | Komponenten | Begründung |
|---|---|---|
| P0 - Kritisch | Button, Input, Checkbox, Radio, Select, Form, Link | Diese Komponenten sind grundlegend für die Benutzerinteraktion und werden in fast jeder Anwendung verwendet. Sie sind kritisch für die Barrierefreiheit, da sie die primären Interaktionspunkte darstellen. |
| P1 - Hoch | Modal, Dialog, Alert, Tooltip, Tabs, Accordion, Dropdown, Menu | Diese Komponenten werden häufig verwendet und haben komplexe Interaktionsmuster, die besondere Aufmerksamkeit in Bezug auf Barrierefreiheit erfordern. |
| P2 - Mittel | Card, Badge, Avatar, Breadcrumb, Pagination, ProgressBar, Spinner, Toast | Diese Komponenten werden regelmäßig verwendet, haben aber weniger komplexe Interaktionsmuster. |
| P3 - Niedrig | Container, Grid, Flex, Box, Divider, Spacer | Diese Komponenten sind hauptsächlich Layout-Komponenten mit minimaler Interaktion. |
| P4 - Spezialisiert | Charts, DataGrid, DatePicker, TimePicker, ColorPicker, FileUpload, MediaPlayer | Diese Komponenten sind komplex, werden aber weniger häufig verwendet oder sind für spezifische Anwendungsfälle gedacht. |
Detaillierte Priorisierung nach Paketen
@smolitux/core
| Komponente | Nutzungshäufigkeit | Komplexität | Kritikalität | Priorität |
|---|---|---|---|---|
| Button | Hoch | Niedrig | Hoch | P0 |
| Input | Hoch | Mittel | Hoch | P0 |
| Checkbox | Hoch | Mittel | Hoch | P0 |
| Radio | Hoch | Mittel | Hoch | P0 |
| Select | Hoch | Hoch | Hoch | P0 |
| Form | Hoch | Hoch | Hoch | P0 |
| Modal | Mittel | Hoch | Mittel | P1 |
| Dialog | Mittel | Hoch | Mittel | P1 |
| Alert | Mittel | Mittel | Mittel | P1 |
| Tooltip | Mittel | Mittel | Niedrig | P1 |
| Tabs | Mittel | Hoch | Mittel | P1 |
| Accordion | Mittel | Hoch | Niedrig | P1 |
| Card | Hoch | Niedrig | Niedrig | P2 |
| Badge | Mittel | Niedrig | Niedrig | P2 |
| Avatar | Mittel | Niedrig | Niedrig | P2 |
| Breadcrumb | Niedrig | Mittel | Niedrig | P2 |
| Pagination | Niedrig | Mittel | Mittel | P2 |
| ProgressBar | Niedrig | Niedrig | Niedrig | P2 |
| Spinner | Mittel | Niedrig | Niedrig | P2 |
| Toast | Mittel | Mittel | Niedrig | P2 |
| Skeleton | Niedrig | Niedrig | Niedrig | P3 |
| Drawer | Niedrig | Hoch | Niedrig | P1 |
| Menu | Mittel | Hoch | Mittel | P1 |
| Popover | Mittel | Mittel | Niedrig | P1 |
| Switch | Mittel | Mittel | Mittel | P1 |
| TextArea | Hoch | Mittel | Hoch | P0 |
| FileUpload | Niedrig | Hoch | Mittel | P4 |
| ColorPicker | Niedrig | Hoch | Niedrig | P4 |
@smolitux/layout
| Komponente | Nutzungshäufigkeit | Komplexität | Kritikalität | Priorität |
|---|---|---|---|---|
| Container | Hoch | Niedrig | Niedrig | P3 |
| Grid | Hoch | Niedrig | Niedrig | P3 |
| Flex | Hoch | Niedrig | Niedrig | P3 |
| Sidebar | Mittel | Mittel | Niedrig | P2 |
| Header | Mittel | Niedrig | Niedrig | P2 |
| Footer | Mittel | Niedrig | Niedrig | P2 |
| DashboardLayout | Niedrig | Mittel | Niedrig | P3 |
@smolitux/charts
| Komponente | Nutzungshäufigkeit | Komplexität | Kritikalität | Priorität |
|---|---|---|---|---|
| AreaChart | Niedrig | Hoch | Niedrig | P4 |
| BarChart | Niedrig | Hoch | Niedrig | P4 |
| LineChart | Niedrig | Hoch | Niedrig | P4 |
| PieChart | Niedrig | Hoch | Niedrig | P4 |
| RadarChart | Niedrig | Hoch | Niedrig | P4 |
| ScatterPlot | Niedrig | Hoch | Niedrig | P4 |
| Heatmap | Niedrig | Hoch | Niedrig | P4 |
@smolitux/media
| Komponente | Nutzungshäufigkeit | Komplexität | Kritikalität | Priorität |
|---|---|---|---|---|
| AudioPlayer | Niedrig | Hoch | Niedrig | P4 |
| VideoPlayer | Niedrig | Hoch | Niedrig | P4 |
| MediaCarousel | Niedrig | Hoch | Niedrig | P4 |
| MediaGrid | Niedrig | Mittel | Niedrig | P4 |
| MediaUploader | Niedrig | Hoch | Niedrig | P4 |
@smolitux/ai, @smolitux/blockchain, @smolitux/federation, @smolitux/resonance
Diese spezialisierten Pakete enthalten Komponenten, die weniger häufig verwendet werden, aber dennoch wichtig für bestimmte Anwendungsfälle sind. Sie werden in Phase 4 des A11y-Testplans behandelt.
Implementierungsreihenfolge
Basierend auf der Priorisierung werden wir die A11y-Tests in folgender Reihenfolge implementieren:
-
Phase 1 (Woche 1-2): P0-Komponenten
- Button, Input, Checkbox, Radio, Select, Form, TextArea, Link
-
Phase 2 (Woche 3-4): P1-Komponenten
- Modal, Dialog, Alert, Tooltip, Tabs, Accordion, Dropdown, Menu, Drawer, Popover, Switch
-
Phase 3 (Woche 5-6): P2- und P3-Komponenten
- Card, Badge, Avatar, Breadcrumb, Pagination, ProgressBar, Spinner, Toast
- Container, Grid, Flex, Box, Divider, Spacer, Sidebar, Header, Footer, DashboardLayout
-
Phase 4 (Woche 7-8): P4-Komponenten
- Charts (AreaChart, BarChart, LineChart, PieChart, RadarChart, ScatterPlot, Heatmap)
- Media (AudioPlayer, VideoPlayer, MediaCarousel, MediaGrid, MediaUploader)
- Spezialisierte Komponenten aus @smolitux/ai, @smolitux/blockchain, etc.
Aktualisierung der Priorisierung
Diese Priorisierung wird regelmäßig überprüft und aktualisiert, basierend auf:
- Feedback von Benutzern und Entwicklern
- Nutzungsstatistiken aus Analytics
- Neue Komponenten, die zur Bibliothek hinzugefügt werden
- Änderungen in den Barrierefreiheitsanforderungen