Global readiness

Internationalization & Accessibility

ngbootstrap components are designed to work with localized labels, right-to-left layouts, keyboard navigation, and screen-reader friendly state updates. Keep visible text in your app layer and pass component labels through the public inputs each component exposes.

Core practices

Localize labels

Use component i18n or label inputs for button text, empty states, pagination labels, filter labels, and ARIA descriptions instead of hard-coding English strings in templates.

Support RTL

Set dir="rtl" at the app, page, or component boundary. Components that support directional layout should read from normal document direction whenever possible.

Keep keyboard paths complete

Interactive examples should be reachable by keyboard, show visible focus, and document any shortcut keys used by grids, trees, menus, or drag interactions.

Announce state changes

Sorting, paging, selection, drag/drop, and async loading should expose meaningful status text for assistive technology through the component APIs or application live regions.

Example pattern

<ngb-datagrid
  [columns]="columns"
  [data]="rows"
  [labels]="{
    globalFilter: 'Search all columns',
    emptyState: 'No matching records',
    rowsPerPage: 'Rows per page'
  }"
  dir="rtl"
></ngb-datagrid>

Checklist

Do not rely on color alone to communicate state.
Verify focus order after adding custom templates or toolbar actions.
Translate user-facing strings through public label/i18n inputs.
Test RTL pages for sticky columns, icons, popups, and horizontal scrolling.
Keep examples screen-reader friendly by preserving semantic buttons, labels, and table headers.