CodeBlanks Logo Icon CodeBlanks
Login Register

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.

Practice Write the AccessibleGreeting component

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

Starter code

App.jsx
import { useTranslation } from 'react-i18next';

// Write the AccessibleGreeting component here

Sample solution

App.jsx
import { useTranslation } from 'react-i18next';

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

Questions and answers

Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.

1 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 Correct answer

Explanation: Colour alone must never carry meaning; pair it with text or icon.

2 Fill in the blank: switch language

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

Explanation: changeLanguage switches the language.

3 Match concepts

Term Meaning
aria-label Label without visible text
focus trap Keeps focus in modal
t function Returns translation
Intl Formats numbers and dates

All lessons in Advanced

1 Next.js basics

  1. What is Next.js?
  2. App Router
  3. Page and layout
  4. Summary - Next.js basics

2 SSR and SSG

  1. What is SSR?
  2. What is SSG?
  3. Server Components
  4. Summary - SSR and SSG

3 API routes

  1. API routes
  2. GET and POST
  3. JSON response
  4. Summary - API routes

4 Next.js store

  1. Project: Next.js store
  2. Static home page
  3. Dynamic product page
  4. Cart API

5 Data fetching

  1. Data fetching with SWR
  2. React Query basics
  3. Mutations
  4. Summary - Data fetching

6 Redux Toolkit

  1. What is Redux Toolkit?
  2. createSlice
  3. configureStore
  4. Summary - Redux Toolkit

7 Zustand

  1. What is Zustand?
  2. Store with create
  3. Using selectors
  4. Summary - Zustand

8 State project

  1. Project: State management
  2. Redux Toolkit store
  3. Zustand cart store
  4. Data fetching with SWR

9 react-hook-form

  1. What is react-hook-form?
  2. register and handleSubmit
  3. Validation
  4. Summary - react-hook-form

10 Framer Motion

  1. What is Framer Motion?
  2. The motion component
  3. Transitions and variants
  4. Summary - Framer Motion

11 Accessibility and i18n

  1. Accessibility basics
  2. ARIA and keyboard
  3. i18n and react-i18next
  4. Summary - Accessibility and i18n

12 Advanced testing

  1. Integration testing
  2. Mock Service Worker
  3. Coverage measurement
  4. Summary - Advanced testing

13 CI/CD and monitoring

  1. CI/CD basics
  2. GitHub Actions
  3. Performance monitoring
  4. Summary - CI/CD and monitoring

14 Advanced final

  1. Challenge: Next.js API
  2. Challenge: Zustand store
  3. Challenge: Form and validation
  4. Challenge: Accessible modal