Summary - Accessibility and i18n

Write a fully accessible, bilingual dropdown menu.

Summary - Accessibility and i18n

In this group you learned to write accessible components, add ARIA and keyboard support, and build multilingual apps with react-i18next.

Semantic HTML is always the first choice; ARIA is added only when needed. Modals and dropdowns require focus management. For multiple languages you combine useTranslation and the Intl API.

Now you will put it all together in one component.

Exercise Write the AccessibleGreeting component

Write AccessibleGreeting. Get t from useTranslation. Return <button aria-label={t('close')} onClick={() => {}}>{t('hello')}</button>. Export it.

Show example solution

import { useTranslation } from 'react-i18next';

function AccessibleGreeting() {
  const { t } = useTranslation();
  return (
    <button aria-label={t('close')} onClick={() => {}}>
      {t('hello')}
    </button>
  );
}
export default AccessibleGreeting;

Test yourself

Which of the following is wrong?
- aria-expanded announces open/closed state
- tabIndex -1 allows programmatic focus
- useTranslation returns a t function
- Colour alone can carry meaning
Show answer

Colour alone can carry meaning — Colour alone must never carry meaning; pair it with text or icon.

Fill in the blank: switch language

const { t, i18n } = useTranslation();
i18n.____('en');

Show answer

const { t, i18n } = useTranslation();
i18n.changeLanguage('en');

Match concepts

aria-label

Label without visible text
focus trap

Keeps focus in modal
t function

Returns translation
Intl

Formats numbers and dates

Next lesson: Integration testing

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies