접근성과 다국어.
키보드 탐색, 읽기 쉬운 상태 표현과 언어 설정을 함께 준비하세요.
빠르게 이해하기
마우스 없이도 주문을 읽고 편집할 수 있게 하고, 사용자 언어에 맞는 안내를 제공할 때 참고하세요.
앱에서 연결하는 순서
- 키보드로 이동해 보기
Grid 작업 화면에서 Tab으로 표에 진입하고 방향키로 셀 사이를 이동하세요. 현재 포커스 위치가 구분되는지 확인합니다.
- 편집과 취소 확인
편집 가능한 수량 셀에서 Enter로 편집하고 Enter로 확정하거나 Escape로 취소하세요. 표 밖 컨트롤로도 이동할 수 있어야 합니다.
- 앱의 언어 설정
locale을 ko·en·ja 중 하나로 설정하고 열 제목은 headerName으로 작성하세요. 언어가 바뀌어도 주문 원본 값은 자동 번역되지 않습니다.
확인할 결과
키보드로 기능을 사용할 수 있는지 확인하고 기본 UI 문구를 사용자 언어에 맞출 수 있습니다.
터치·키보드·스크린 리더의 사용 경험은 앱 전체에서 확인해야 합니다. 툴팁이나 색상에만 의존하지 말고 상태를 읽을 수 있는 텍스트도 제공하세요.
알아두면 쉬운 용어
- 포커스
- 현재 키보드 입력을 받을 위치입니다.
- locale
- 페이지 이동 등 Grid 기본 UI의 언어와 문구를 설정합니다.
키보드와 포커스
#- 진입과 이동 Tab으로 Grid에 진입하고 방향키로 셀을 탐색합니다. 업무 화면의 앞뒤 컨트롤로도 이동할 수 있어야 합니다.
- 편집 편집 가능한 셀에서 Enter로 편집을 시작하고 적용합니다. Escape는 편집을 취소합니다.
- 기능 메뉴 버튼·선택 상자·열 메뉴도 키보드로 조작하고 포커스가 보이는지 확인하세요.
- 로고 브랜드 마크는 장식 요소이며 읽기 순서·탭 순서에 포함되지 않습니다.
언어와 문구
#locale은 기본 언어 en·ko·ja를 지원합니다. 열 제목은 headerName으로, 기본 UI 문구는 locale.messages로 설정합니다.
grid.locale = 'ko';
grid.columnDefs = [{ field: 'product', headerName: '제품' }];
grid.locale = {
extends: 'ko',
messages: { 'pagination.navAriaLabel': '주문 목록 페이지 이동' }
};의미와 대비
#표의 목적과 단위를 주변 제목·설명에 표시하고, 로딩·빈 결과·저장 성공과 실패를 텍스트로 전달하세요. 상태를 색상만으로 구분하지 말고 명칭이나 아이콘을 함께 사용하세요.
좁은 화면, 확대된 글자, 밝은 테마와 어두운 테마에서 헤더·데이터·포커스의 가독성을 확인하세요. 서비스의 접근성 요구에 맞춰 실제 키보드와 스크린 리더로 검증하세요.