File Preview Card Group Accessibility
Best Practices
A file preview card group must use a semantic list, with each card in a list item. Each image must have alternative text that identifies the file, unless the same information is adjacent.
Repeated card actions must have names that identify their target file. Decorative file and action icons must be hidden from assistive technology.
Interaction Design
Keyboard
TAB moves through links and buttons in DOM order. The group itself does not add a tab stop.
Screen Reader
A screen reader announces the list length, each card's content, and the accessible name of each action.
Pointer
Clicking or tapping a card action performs that action for its file.
ARIA Reference
| Attribute | Description |
|---|---|
| aria-label | Names an icon-only card action. |
| aria-hidden="true" | Hides decorative file and action icons. |