ARIA Grid
ARIA 그리드
ARIA 그리드는 행과 셀의 상호작용 가능한 집합입니다. 화살표 키로 위, 아래, 왼쪽, 오른쪽으로 포커스를 이동합니다.
다른 예시
좌석 배치는 12x20 그리드입니다. 화살표는 한 자리 이동, Home은 행의 시작으로 이동, Enter는 좌석을 선택합니다. 사용 불가능한 좌석은 이름을 유지하지만 비활성화되며, 위치 이동이 어려울 때 페이지에서 목록도 제공합니다.
주요 부분
- 01그리드 컨테이너
- 02행과 셀
- 032축 초점 모델
사용할 때
행과 열의 레이아웃이 중요할 때 사용하세요. 관리되는 하나의 탭 정지가 수백 개의 개별 컨트롤보다 더 쉬울 수 있습니다.
다음 경우에는 사용하지 마세요
사람들이 읽기만 하는 테이블에 그리드 역할을 추가하지 마십시오. 그리드는 앱과 같은 키보드 제어가 필요합니다.
코드에서 사용된 이름
role=grid/row/gridcell + roving tabindex or aria-activedescendant 출시하기 전에
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 그리드 (ARIA Grid)。 User context：좌석 배치는 12x20 그리드입니다. 화살표는 한 자리 이동, Home은 행의 시작으로 이동, Enter는 좌석을 선택합니다. 사용 불가능한 좌석은 이름을 유지하지만 비활성화되며, 위치 이동이 어려울 때 페이지에서 목록도 제공합니다. Recommended pattern：ARIA 그리드 (ARIA Grid)。 Why it fits：행과 열의 레이아웃이 중요할 때 사용하세요. 관리되는 하나의 탭 정지가 수백 개의 개별 컨트롤보다 더 쉬울 수 있습니다. Do not use it when：사람들이 읽기만 하는 테이블에 그리드 역할을 추가하지 마십시오. 그리드는 앱과 같은 키보드 제어가 필요합니다. 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)：해당 출처에 대해 공식적인 것입니다. 다른 플랫폼이나 팀은 그 용어를 다른 방식으로 사용할 수 있습니다. Unknowns to confirm: Product wording, data source, analytics events, supported devices and languages, and platform limits.
이 요청을 확인하세요
Review how ARIA 그리드 (ARIA Grid) is used now. Definition: ARIA 그리드는 행과 셀의 상호작용 가능한 집합입니다. 화살표 키로 위, 아래, 왼쪽, 오른쪽으로 포커스를 이동합니다. 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.