ARIA Grid
ARIA-Raster
Ein ARIA-Raster ist ein interaktives Set von Reihen und Zellen. Mit den Pfeiltasten wird der Fokus nach oben, unten, links und rechts bewegt.
Ein weiteres Beispiel
Eine Sitzkarte ist ein 12-mal-20-Raster. Pfeile bewegen einen Platz, Home geht zum Anfang der Reihe, und Enter wählt einen Platz. Unverfügbare Plätze behalten ihre Namen, sind aber deaktiviert; die Seite bietet auch eine Liste, wenn die Positionsbewegung schwierig ist.
Hauptteile
- 01Grid-Container
- 02Zeilen und Zellen
- 03Zwei-Achsen-Fokusmodell
Verwenden Sie es, wenn
Verwenden Sie es, wenn das Zeilen- und Spaltenlayout wichtig ist. Ein gesteuerter Tabstop kann einfacher sein als Hunderte einzelner Steuerelemente.
Nutze es nicht, wenn
Fügen Sie keine Rasterrollen zu einer Tabelle hinzu, die nur gelesen wird. Ein Raster erfordert app-ähnliche Tastatursteuerungen.
In Code verwendeter Name
role=grid/row/gridcell + roving tabindex or aria-activedescendant Vor dem Ausliefern
Give assistive tools the control’s name (accessible name), purpose (role), value, and state. Check keyboard use, visible focus, target size, disabled and busy states, feedback, and recovery.
Outcome: Complete the task with ARIA-Raster (ARIA Grid). User context: Eine Sitzkarte ist ein 12-mal-20-Raster. Pfeile bewegen einen Platz, Home geht zum Anfang der Reihe, und Enter wählt einen Platz. Unverfügbare Plätze behalten ihre Namen, sind aber deaktiviert; die Seite bietet auch eine Liste, wenn die Positionsbewegung schwierig ist. Recommended pattern: ARIA-Raster (ARIA Grid). Why it fits: Verwenden Sie es, wenn das Zeilen- und Spaltenlayout wichtig ist. Ein gesteuerter Tabstop kann einfacher sein als Hunderte einzelner Steuerelemente. Do not use it when: Fügen Sie keine Rasterrollen zu einer Tabelle hinzu, die nur gelesen wird. Ein Raster erfordert app-ähnliche Tastatursteuerungen. Product requirements: Define the default, loading, empty, error, success, and recovery states. Keep user input. Give clear feedback after every action. Accessibility and resilience: Use semantic HTML, full keyboard access, and visible focus. Make the layout work when zoomed and support reduced motion. Follow the project’s current rules. Do not add a new UI library unless the project already uses it. Acceptance criteria: The main task works with keyboard only and at 320px width. Focus and status changes are announced. Check loading, failure, retry, cancel, and reduced-motion paths. Evidence and limits (evidence boundary): Es ist offiziell für diese Quelle. Andere Plattformen oder Teams können den Begriff auf andere Weise verwenden. Unknowns to confirm: Product wording, data source, analytics events, supported devices and languages, and platform limits.
Diese Anfrage prüfen
Review how ARIA-Raster (ARIA Grid) is used now. Definition: Ein ARIA-Raster ist ein interaktives Set von Reihen und Zellen. Mit den Pfeiltasten wird der Fokus nach oben, unten, links und rechts bewegt. Release checks: Give assistive tools the control’s name (accessible name), purpose (role), value, and state. Check keyboard use, visible focus, target size, disabled and busy states, feedback, and recovery. Before changing code, list the evidence, gaps, severity, and the smallest safe fix.