ARIA Grid
Grade ARIA
Uma grade ARIA é um conjunto interativo de linhas e células. As teclas de seta movem o foco para cima, para baixo, para a esquerda e para a direita.
Outro exemplo
Um mapa de assentos é uma grade de 12 por 20. As setas movem um assento, Home vai para o início da linha, e Enter seleciona um assento. Assentos indisponíveis mantêm seus nomes, mas estão desativados; a página também oferece uma lista quando mover por posição é difícil.
Partes principais
- 01contêiner de grade
- 02Linhas e células
- 03Modelo de foco de dois eixos
Use-o quando
Use-o quando o layout de linhas e colunas importa. Um ponto de tabulação gerenciado pode ser mais fácil do que centenas de controles separados.
Não o use quando
Não adicione funções de grade a uma tabela que as pessoas apenas leem. Uma grade requer controles de teclado parecidos com aplicativos.
Nome usado no código
role=grid/row/gridcell + roving tabindex or aria-activedescendant Antes de lançar
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 Grade ARIA (ARIA Grid). User context: Um mapa de assentos é uma grade de 12 por 20. As setas movem um assento, Home vai para o início da linha, e Enter seleciona um assento. Assentos indisponíveis mantêm seus nomes, mas estão desativados; a página também oferece uma lista quando mover por posição é difícil. Recommended pattern: Grade ARIA (ARIA Grid). Why it fits: Use-o quando o layout de linhas e colunas importa. Um ponto de tabulação gerenciado pode ser mais fácil do que centenas de controles separados. Do not use it when: Não adicione funções de grade a uma tabela que as pessoas apenas leem. Uma grade requer controles de teclado parecidos com aplicativos. 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): É oficial para essa fonte. Outras plataformas ou equipes podem usar o termo de outra maneira. Unknowns to confirm: Product wording, data source, analytics events, supported devices and languages, and platform limits.
Conferir este pedido
Review how Grade ARIA (ARIA Grid) is used now. Definition: Uma grade ARIA é um conjunto interativo de linhas e células. As teclas de seta movem o foco para cima, para baixo, para a esquerda e para a direita. 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.