Accessibility and localization.
Prepare keyboard navigation, readable status indicators, and language settings together.
Quick overview
Use this guide to support reading and editing without a mouse and provide guidance in the user's language.
Integration steps
- Try keyboard navigation
Tab into the Grid and move between cells with arrow keys. Verify that focus is clearly visible.
- Verify editing and cancellation
On an editable Quantity cell, press Enter to edit, then Enter to commit or Escape to cancel. Users must also be able to reach controls outside the table.
- Set the app language
Set locale to ko, en, or ja and supply column headings through headerName. Changing locale does not automatically translate source order values.
Verify keyboard access and match built-in UI messages to the user's language.
Verify touch, keyboard, and screen-reader experiences across the whole app. Provide readable status text instead of relying only on tooltips or colors.
Useful terms
- Focus
- The position currently receiving keyboard input.
- locale
- Sets the language and wording of built-in Grid UI such as pagination.
Keyboard and focus
#- Entry and navigation Tab into the Grid and use arrow keys to navigate cells. Ensure controls before and after it remain reachable.
- Edit Use Enter to start and commit editable cells. Escape cancels editing.
- Feature menus Operate buttons, selectors, and column menus with the keyboard and verify visible focus.
- Logo Brand marks are decorative and excluded from reading and tab order.
Language and messages
#locale supports built-in locales en·ko·ja. Set column headings through headerName and built-in UI messages through locale.messages as needed.
grid.locale = 'en';
grid.columnDefs = [{ field: 'product', headerName: 'Product' }];
grid.locale = {
extends: 'en',
messages: { 'pagination.navAriaLabel': 'Order list pagination' }
};Meaning and contrast
#Describe the table's purpose and units in nearby headings and text. Convey loading, empty results, and save success/failure in words. Use labels or icons alongside colors for status.
Check header, data, and focus readability on narrow screens, with enlarged text, and in light/dark themes. Verify keyboard and screen-reader behavior against your service's accessibility requirements.