# Keyboard and localization

Grid is a workspace for navigating many rows and columns with a keyboard. Cell navigation, editing, menus, and paths to app buttons outside the table must all be understandable.

Canonical: https://grid.syidax.com/docs/guides/keyboard-a11y-i18n/

<a id="understand"></a>

## How it works and when to use it

The locale changes Grid's built-in text. Translate column names, source data, and app guidance in the app, and format numbers and dates through valueFormatter.

In the code, grid is the Grid element prepared in the installation chapter. Check each example's data and settings, and implement the app functions and server endpoints for your project.

- [Installation and integration · Shared sample data](https://grid.syidax.com/docs/guides/getting-started.md)

<a id="example-1"></a>

## Example 1. Korean and keyboard navigation

Configure a basic environment with Korean messages and keyboard navigation.

```javascript
grid.locale = 'ko';
grid.keyboardNavigation = true;
```

Verify the result: Built-in messages appear in Korean, and keyboard navigation is available. Test every button and editor with Tab, arrow keys, Enter, and Escape.

<a id="example-2"></a>

## Example 2. Switch supported languages

Pass the app's selected language to Grid.

```javascript
grid.locale = 'ja';
```

Verify the result: Grid's built-in messages switch to Japanese. Source values such as order statuses are not translated automatically.

<a id="example-3"></a>

## Example 3. Accessible business cells

Give renderer buttons names that identify their row, and show text beside status colors. Outside the table, provide a readable status area for result counts and save outcomes.

Verify the result: Screen-reader and keyboard users should understand their location and next action. Avoid announcing every cell through a live region on each large data update.

<a id="pitfalls"></a>

## Combining features and troubleshooting

Intercepting every keydown in the app can break Grid editing and navigation. Limit shortcut targets and the scope of preventDefault.

Row virtualization keeps only some DOM nodes. Do not assume off-DOM rows are inaccessible; verify navigation and announcements with assistive technology.

<a id="related-api"></a>

## APIs used by this feature

- [locale](https://grid.syidax.com/docs/options/locale.md) — A Korean, English, or Japanese preset, or an object overriding default messages. Translate source data and column headings in your app.
- [keyboardNavigation](https://grid.syidax.com/docs/options/keyboardNavigation.md) — Configures keyboard navigation across cells and internal Grid features.
- [activeCellChanged](https://grid.syidax.com/docs/events/activeCellChanged.md) — Emitted when keyboard or pointer input changes the active cell. Separate from range or row selection.
- [localeChanged](https://grid.syidax.com/docs/events/localeChanged.md) — Emitted when the Grid locale changes.

<a id="next"></a>

## Related reading

- [How rows, columns, and IDs relate](https://grid.syidax.com/docs/guides/concepts.md)
- [Connect results and events](https://grid.syidax.com/docs/guides/data-event-access.md)
- [Explore in Features](https://grid.syidax.com/grid/keyboard-a11y-i18n) — The guide describes which interactions are available to try.