diff --git a/native/src/BottomTabNavigator.tsx b/native/src/BottomTabNavigator.tsx
index 93514288a1..e8534fbe60 100644
--- a/native/src/BottomTabNavigator.tsx
+++ b/native/src/BottomTabNavigator.tsx
@@ -27,6 +27,7 @@ import Text from './components/base/Text'
 import { TAB_NAVIGATOR_ID } from './constants'
 import { NavigationProps, RoutesParamsType } from './constants/NavigationTypes'
 import buildConfig from './constants/buildConfig'
+import dimensions from './constants/dimensions'
 import useLoadRegionContent from './hooks/useLoadRegionContent'
 import useNavigate from './hooks/useNavigate'
 import useRegionAppContext from './hooks/useRegionAppContext'
@@ -44,8 +45,6 @@ const PlacesStack = createStackNavigator<RoutesParamsType>()
 const EventsStack = createStackNavigator<RoutesParamsType>()
 const NewsStack = createStackNavigator<RoutesParamsType>()
 
-const TAB_HEIGHT = 60
-
 const CategoriesStackScreen = () => (
   <CategoriesStack.Navigator screenOptions={{ header: defaultHeader, animation: 'none' }}>
     <CategoriesStack.Screen name={CATEGORIES_ROUTE} initialParams={{}} component={CategoriesContainer} />
@@ -188,7 +187,7 @@ const BottomTabNavigator = ({ navigation }: BottomTabNavigatorProps): ReactEleme
           tabBarActiveTintColor: theme.colors.onSurface,
           tabBarInactiveTintColor: theme.colors.onSurfaceVariant,
           tabBarStyle: {
-            height: TAB_HEIGHT + insets.bottom,
+            height: dimensions.bottomNavigationHeight + insets.bottom,
             backgroundColor: theme.colors.surfaceVariant,
             display: bottomTabsVisible ? 'flex' : 'none',
           },
@@ -196,7 +195,7 @@ const BottomTabNavigator = ({ navigation }: BottomTabNavigatorProps): ReactEleme
         }}>
         {Tabs}
       </Tab.Navigator>
-      {chatVisible && <ChatFab style={{ bottom: TAB_HEIGHT + insets.bottom }} />}
+      {chatVisible && <ChatFab style={{ bottom: dimensions.bottomNavigationHeight + insets.bottom }} />}
     </View>
   )
 }
diff --git a/native/src/components/ChatFab.tsx b/native/src/components/ChatFab.tsx
index e4836d40dd..780e94c120 100644
--- a/native/src/components/ChatFab.tsx
+++ b/native/src/components/ChatFab.tsx
@@ -1,8 +1,8 @@
 import { useFocusEffect } from '@react-navigation/native'
 import React, { ReactElement, useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
-import { ViewStyle } from 'react-native'
-import { Badge, FAB, useTheme } from 'react-native-paper'
+import { TouchableOpacity, ViewStyle } from 'react-native'
+import { Badge, useTheme } from 'react-native-paper'
 import styled from 'styled-components/native'
 
 import { CHAT_DEFAULT_POLLING_INTERVAL, CHAT_ROUTE, getChatName } from 'shared'
@@ -12,7 +12,9 @@ import buildConfig from '../constants/buildConfig'
 import useNavigate from '../hooks/useNavigate'
 import useRegionAppContext from '../hooks/useRegionAppContext'
 import { determineApiUrl } from '../utils/helpers'
+import { elevatedStyle } from '../utils/styles'
 import ChatHighlightPopup from './ChatHighlightPopup'
+import Icon from './base/Icon'
 
 const Container = styled.View`
   position: absolute;
@@ -21,6 +23,16 @@ const Container = styled.View`
   align-items: flex-end;
 `
 
+const TouchableFab = styled(TouchableOpacity)`
+  width: 56px;
+  height: 56px;
+  border-radius: 30%;
+  background-color: ${props => props.theme.colors.primary};
+  justify-content: center;
+  align-items: center;
+  ${elevatedStyle}
+`
+
 const StyledBadge = styled(Badge)`
   position: absolute;
   right: -8px;
@@ -60,17 +72,18 @@ const ChatFab = ({ style }: ChatFabProps): ReactElement => {
   return (
     <Container style={style}>
       <ChatHighlightPopup chatName={getChatName(buildConfig().appName)} />
-      <FAB
-        icon='forum-outline'
+      <TouchableFab
+        accessibilityRole='button'
+        activeOpacity={0.9}
         onPress={() => navigation.navigate(CHAT_ROUTE)}
         accessibilityLabel={getChatName(buildConfig().appName)}
-        variant='primary'
-        style={{ backgroundColor: theme.colors.primary }}
-        size='medium'
-        aria-label={getChatName(buildConfig().appName)}
-      />
+        testID='fab'>
+        <Icon size={24} source='forum-outline' color={theme.colors.background} />
+      </TouchableFab>
       {unreadMessageCount > 0 && (
-        <StyledBadge aria-label={t('unreadMessages', { count: unreadMessageCount })}>{unreadMessageCount}</StyledBadge>
+        <StyledBadge accessibilityLabel={t('unreadMessages', { count: unreadMessageCount })}>
+          {unreadMessageCount}
+        </StyledBadge>
       )}
     </Container>
   )
diff --git a/native/src/components/Feedback.tsx b/native/src/components/Feedback.tsx
index b96f491e7a..ba9b788f49 100644
--- a/native/src/components/Feedback.tsx
+++ b/native/src/components/Feedback.tsx
@@ -61,7 +61,7 @@ const Feedback = ({
 
   if (sendingStatus === 'successful') {
     return (
-      <Wrapper>
+      <Wrapper accessible accessibilityRole='alert' accessibilityLiveRegion='assertive'>
         <Caption title={t('thanksHeadline')} />
         <Text>{t('thanksMessage')}</Text>
         <Button onPress={navigation.goBack} mode='contained' style={{ marginTop: 16 }}>
@@ -106,7 +106,11 @@ const Feedback = ({
           accessibilityRole='text'
         />
         {sendingStatus === 'failed' && (
-          <Text variant='body2' style={{ textAlign: 'left' }}>
+          <Text
+            variant='body2'
+            style={{ textAlign: 'left' }}
+            accessibilityRole='alert'
+            accessibilityLiveRegion='assertive'>
             {t('failedSendingFeedback')}
           </Text>
         )}
diff --git a/native/src/components/HeaderBox.tsx b/native/src/components/HeaderBox.tsx
index 5b46deff04..0f17a3463d 100644
--- a/native/src/components/HeaderBox.tsx
+++ b/native/src/components/HeaderBox.tsx
@@ -33,6 +33,7 @@ const HeaderBox = ({ goBack, canGoBack = true, title, language, regionsPath }: H
   const AppIcon = buildConfigAssets().AppIcon
   const HeaderIcon = canGoBack ? (
     <Appbar.BackAction
+      accessibilityRole='button'
       style={{ backgroundColor: 'transparent' }}
       onPress={goBack}
       accessibilityLabel={t('back')}
diff --git a/native/src/components/HeaderMenu.tsx b/native/src/components/HeaderMenu.tsx
index 14e8fb4b0c..44eb24777a 100644
--- a/native/src/components/HeaderMenu.tsx
+++ b/native/src/components/HeaderMenu.tsx
@@ -103,6 +103,7 @@ const HeaderMenu = ({
             iconColor={theme.colors.onSurface}
             onPress={() => setVisible(!visible)}
             accessibilityLabel={t('settings')}
+            accessibilityState={{ expanded: visible }}
             testID='header-overflow-menu-button'
           />
         }>
diff --git a/native/src/components/Page.tsx b/native/src/components/Page.tsx
index be8966e050..cfc16aa2d1 100644
--- a/native/src/components/Page.tsx
+++ b/native/src/components/Page.tsx
@@ -12,7 +12,7 @@ const Container = styled.View<{ $padding: boolean }>`
   ${props => props.$padding && `padding: 0 ${dimensions.pageContainerPaddingHorizontal}px 8px;`}
 `
 const SpaceForTts = styled.View<{ $ttsPlayerVisible: boolean }>`
-  height: ${props => (props.$ttsPlayerVisible ? dimensions.ttsPlayerHeight : 0)}px;
+  height: ${props => (props.$ttsPlayerVisible ? dimensions.ttsPlayerHeight + dimensions.bottomNavigationHeight : 0)}px;
 `
 
 type PageProps = {
diff --git a/native/src/components/SearchHeader.tsx b/native/src/components/SearchHeader.tsx
index 76d78b9a12..6b446cb734 100644
--- a/native/src/components/SearchHeader.tsx
+++ b/native/src/components/SearchHeader.tsx
@@ -33,6 +33,7 @@ const SearchHeader = ({ query, navigation, onSearchChanged }: SearchHeaderProps)
     <BoxShadow>
       <Horizontal>
         <Appbar.BackAction
+          accessibilityRole='button'
           onPress={navigation.goBack}
           accessibilityLabel={t('back')}
           style={{ backgroundColor: 'transparent' }}
diff --git a/native/src/components/TtsPlayer.tsx b/native/src/components/TtsPlayer.tsx
index fb8fdda59c..0a05b621c3 100644
--- a/native/src/components/TtsPlayer.tsx
+++ b/native/src/components/TtsPlayer.tsx
@@ -3,21 +3,15 @@ import { useTranslation } from 'react-i18next'
 import { StyleSheet } from 'react-native'
 import { TouchableRipple } from 'react-native-paper'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
-import styled, { css, useTheme } from 'styled-components/native'
+import styled, { useTheme } from 'styled-components/native'
 
 import { isRTLText } from '../constants/contentDirection'
+import dimensions from '../constants/dimensions'
+import { elevatedStyle } from '../utils/styles'
 import Icon from './base/Icon'
 import IconButton from './base/IconButton'
 import Text from './base/Text'
 
-const elevatedStyle = css`
-  shadow-color: ${props => props.theme.colors.onSurface};
-  shadow-offset: 0 2px;
-  shadow-opacity: 0.2;
-  shadow-radius: 3px;
-  elevation: 5;
-`
-
 const StyledTtsPlayer = styled.View<{ insetBottom: number }>`
   background-color: ${props => props.theme.colors.ttsPlayer.background};
   border-radius: 8px;
@@ -91,7 +85,7 @@ const TtsPlayer = ({
   const { t } = useTranslation('layout')
 
   return (
-    <StyledTtsPlayer insetBottom={bottom}>
+    <StyledTtsPlayer insetBottom={dimensions.bottomNavigationHeight + bottom} accessibilityLabel={t('readAloudPlayer')}>
       <TouchableRipple
         borderless
         role='button'
diff --git a/native/src/components/base/ToggleButton.tsx b/native/src/components/base/ToggleButton.tsx
index b3e57dd319..fcabc806ba 100644
--- a/native/src/components/base/ToggleButton.tsx
+++ b/native/src/components/base/ToggleButton.tsx
@@ -63,7 +63,12 @@ const ToggleButton = ({ text, onPress, icon, active, style }: ToggleButtonProps)
         },
         style,
       ]}>
-      <TouchableRipple role='switch' onPress={onPress} style={styles.TouchableRippleStyle} borderless>
+      <TouchableRipple
+        role='button'
+        onPress={onPress}
+        style={styles.TouchableRippleStyle}
+        borderless
+        accessibilityState={{ selected: active }}>
         <>
           {icon}
           <Text variant='body3' numberOfLines={1} style={[styles.text, { color: getTextColor() }]}>
diff --git a/native/src/constants/dimensions.ts b/native/src/constants/dimensions.ts
index 6db3cd3a66..4950fece32 100644
--- a/native/src/constants/dimensions.ts
+++ b/native/src/constants/dimensions.ts
@@ -2,6 +2,7 @@ export type DimensionsType = {
   headerHeight: number
   modalHeaderHeight: number
   ttsPlayerHeight: number
+  bottomNavigationHeight: number
   categoryListItem: {
     iconSize: number
     margin: number
@@ -23,6 +24,7 @@ const dimensions: DimensionsType = {
   headerHeight: 60,
   modalHeaderHeight: 40,
   ttsPlayerHeight: 100,
+  bottomNavigationHeight: 60,
   categoryListItem: {
     iconSize: 40,
     margin: 5,
diff --git a/native/src/constants/index.ts b/native/src/constants/index.ts
index 8c932b9f6b..975c1b0af7 100644
--- a/native/src/constants/index.ts
+++ b/native/src/constants/index.ts
@@ -1,4 +1,5 @@
 export const ROOT_NAVIGATOR_ID = 'rootNavigator'
+
 export const TAB_NAVIGATOR_ID = 'tabNavigator'
 export type NavigatorIds = typeof ROOT_NAVIGATOR_ID | typeof TAB_NAVIGATOR_ID
 
diff --git a/native/src/routes/LanguageSelection.tsx b/native/src/routes/LanguageSelection.tsx
index 9725a82233..6109a6a258 100644
--- a/native/src/routes/LanguageSelection.tsx
+++ b/native/src/routes/LanguageSelection.tsx
@@ -2,7 +2,7 @@ import { shouldPolyfill } from '@formatjs/intl-displaynames/should-polyfill'
 import '@formatjs/intl-locale/polyfill'
 import React, { ReactElement, useCallback, useContext, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { StyleSheet } from 'react-native'
+import { AccessibilityInfo, StyleSheet } from 'react-native'
 import { Button } from 'react-native-paper'
 import styled from 'styled-components/native'
 
@@ -77,6 +77,9 @@ const LanguageSelection = ({ navigation, route }: LanguageSelectionProps): React
             if (code !== languageCode) {
               changeLanguageCode(code)
             }
+            AccessibilityInfo.announceForAccessibility(
+              `${t('languageChangedTo')} ${userLanguageNames?.of(code) ?? name}`,
+            )
             navigation.goBack()
           }
         : () => setAlertDialogTitle(t('noTranslation')),
diff --git a/native/src/routes/__tests__/Places.spec.tsx b/native/src/routes/__tests__/Places.spec.tsx
index d787c9ebe6..b96f1948cc 100644
--- a/native/src/routes/__tests__/Places.spec.tsx
+++ b/native/src/routes/__tests__/Places.spec.tsx
@@ -168,7 +168,7 @@ describe('Places', () => {
   it('should not push to history when a category is selected inside the filter modal', () => {
     const { localHistory, getByRole } = renderPlaces({ ...resetHistory, showFilterSelection: true })
 
-    fireEvent.press(getByRole('switch', { name: 'Dienstleistung' }))
+    fireEvent.press(getByRole('button', { name: 'Dienstleistung' }))
 
     expect(localHistory.push).not.toHaveBeenCalled()
     expect(localHistory.pushReset).not.toHaveBeenCalled()
@@ -193,7 +193,7 @@ describe('Places', () => {
   it('should apply the newly selected category when showPlaces is pressed', () => {
     const { localHistory, getByRole, getByText } = renderPlaces({ ...resetHistory, showFilterSelection: true })
 
-    fireEvent.press(getByRole('switch', { name: 'Dienstleistung' }))
+    fireEvent.press(getByRole('button', { name: 'Dienstleistung' }))
     fireEvent.press(getByText('showPlaces'))
 
     expect(localHistory.pop).toHaveBeenCalledTimes(1)
@@ -248,7 +248,7 @@ describe('Places', () => {
     const initial = renderAt({ ...resetHistory, showFilterSelection: true })
     const { getByRole, getByText, getAllByText, rerender } = renderWithTheme(initial.element)
 
-    fireEvent.press(getByRole('switch', { name: 'Gastronomie' }))
+    fireEvent.press(getByRole('button', { name: 'Gastronomie' }))
     fireEvent.press(getByText('showPlaces'))
     expect(initial.localHistory.pushReset).toHaveBeenLastCalledWith({
       placeCategoryId: place0.category.id,
diff --git a/native/src/utils/styles.ts b/native/src/utils/styles.ts
new file mode 100644
index 0000000000..2a7aeb1522
--- /dev/null
+++ b/native/src/utils/styles.ts
@@ -0,0 +1,9 @@
+import { css } from 'styled-components/native'
+
+export const elevatedStyle = css`
+  shadow-color: ${props => props.theme.colors.onSurface};
+  shadow-offset: 0 2px;
+  shadow-opacity: 0.2;
+  shadow-radius: 3px;
+  elevation: 5;
+`
diff --git a/translations/src/translations.json b/translations/src/translations.json
index a7303ef30b..166c795979 100644
--- a/translations/src/translations.json
+++ b/translations/src/translations.json
@@ -7596,6 +7596,7 @@
       "localInformationLabel": "Informationen",
       "events": "Veranstaltungen",
       "news": "Nachrichten",
+      "languageChangedTo": "Sprache wurde geändert zu",
       "noLanguages": "Nicht verfügbar in anderen Sprachen",
       "noTranslation": "Keine Übersetzung verfügbar",
       "languageNotAvailableMessage": "Diese Seite ist noch nicht in allen Sprachen verfügbar. Wir erweitern unser Sprachangebot aktiv. Du kannst deine Sprache über die <1>Feedback-Funktion</1> anfragen.",
@@ -7623,6 +7624,7 @@
       "getOnPlayStore": "Im Google Play Store anschauen",
       "accessibility": "Barrierefreiheit",
       "readAloud": "Vorlesefunktion",
+      "readAloudPlayer": "Vorlese-Player",
       "nothingToRead": "Nichts zu lesen",
       "nothingToReadFullMessage": "Auf dieser Seite gibt es nichts zu lesen.",
       "languageNotSupported": "Sprache wird nicht unterstützt",
@@ -7912,6 +7914,7 @@
       "localInformationLabel": "Information",
       "events": "Events",
       "news": "News",
+      "languageChangedTo": "Language changed to",
       "noLanguages": "Not available in other languages",
       "noTranslation": "No translation available",
       "languageNotAvailableMessage": "This page is not yet available in all languages. We are actively expanding our language options. You can request your language via the <1>feedback</1> feature.",
@@ -7939,6 +7942,7 @@
       "getOnPlayStore": "GET — On the Google Play Store",
       "accessibility": "Accessibility",
       "readAloud": "Read aloud",
+      "readAloudPlayer": "Read aloud player",
       "nothingToRead": "Nothing to read",
       "nothingToReadFullMessage": "There is nothing to read on this page.",
       "languageNotSupported": "Language is not supported.",
@@ -8727,6 +8731,7 @@
       "searchLanguage": "Поиск языка",
       "locations": "Карта",
       "changeLocation": "Изменить местоположение",
+      "languageChangedTo": "Язык изменен на",
       "changeLanguage": "Изменить язык",
       "settings": "Настройки",
       "copyUrl": "Копировать ссылку",
@@ -8745,6 +8750,7 @@
       "getOnPlayStore": "Просмотреть в Google Play Store",
       "accessibility": "Доступность",
       "readAloud": "Функция чтения вслух",
+      "readAloudPlayer": "Проигрыватель для чтения вслух",
       "nothingToRead": "Текст для чтения отсутствует",
       "nothingToReadFullMessage": "На этой странице отсутствует текст для чтения.",
       "languageNotSupported": "Язык не поддерживается",
diff --git a/web/src/components/GeneralHeader.tsx b/web/src/components/GeneralHeader.tsx
index 02dad38e90..255e36f28d 100644
--- a/web/src/components/GeneralHeader.tsx
+++ b/web/src/components/GeneralHeader.tsx
@@ -7,10 +7,12 @@ import { useLocation } from 'react-router'
 import { REGIONS_ROUTE, pathnameFromRouteInformation } from 'shared'
 import { LanguageModel } from 'shared/api'
 
+import useAnnounceLanguageChange from '../hooks/useAnnounceLanguageChange'
 import { supportedLanguages } from '../utils'
 import Header from './Header'
 import HeaderLanguageSelectorItem from './HeaderLanguageSelectorItem'
 import HeaderMenu from './HeaderMenu'
+import LiveAnnouncer from './LiveAnnouncer'
 import MenuItem from './MenuItem'
 
 type GeneralHeaderProps = {
@@ -30,6 +32,8 @@ const GeneralHeader = ({ languageCode, regionLanguages }: GeneralHeaderProps): R
     path: `/${slug}/${language.code}`,
   }))
 
+  const announcement = useAnnounceLanguageChange(languageCode, languageChangePaths, t)
+
   const actionItems = [
     languageChangePaths.length > 0 ? (
       <HeaderLanguageSelectorItem
@@ -44,7 +48,12 @@ const GeneralHeader = ({ languageCode, regionLanguages }: GeneralHeaderProps): R
     </HeaderMenu>,
   ]
 
-  return <Header logoHref={regionsPath} actionItems={actionItems} language={languageCode} />
+  return (
+    <>
+      <LiveAnnouncer message={announcement} />
+      <Header logoHref={regionsPath} actionItems={actionItems} language={languageCode} />
+    </>
+  )
 }
 
 export default GeneralHeader
diff --git a/web/src/components/HeaderLanguageSelectorItem.tsx b/web/src/components/HeaderLanguageSelectorItem.tsx
index 0137b44f1d..58f3b52c0d 100644
--- a/web/src/components/HeaderLanguageSelectorItem.tsx
+++ b/web/src/components/HeaderLanguageSelectorItem.tsx
@@ -55,6 +55,7 @@ const HeaderLanguageSelectorItem = ({
       text={isOpen ? '' : t('changeLanguage') /* to not cover the dropdown with the tooltip */}
       icon={<TranslateOutlinedIcon />}
       innerText={forceText || desktop ? currentLanguageName : undefined}
+      aria-expanded={isOpen}
     />
   )
 
diff --git a/web/src/components/HeaderMenu.tsx b/web/src/components/HeaderMenu.tsx
index 6c1527fe28..e4ef713b5a 100644
--- a/web/src/components/HeaderMenu.tsx
+++ b/web/src/components/HeaderMenu.tsx
@@ -113,10 +113,15 @@ const HeaderMenu = ({ children, pageTitle, fitScreen, ref }: HeaderMenuProps): R
 
   return (
     <>
-      <IconButton onClick={openMenu} aria-label={t('sideBarOpenAriaLabel')} aria-expanded={open}>
+      <IconButton
+        onClick={openMenu}
+        aria-label={t('sideBarOpenAriaLabel')}
+        aria-expanded={open}
+        aria-haspopup='menu'
+        aria-controls={open ? 'side-menu' : undefined}>
         <MoreVertIcon />
       </IconButton>
-      <StyledMenu anchorEl={menuAnchorElement} open={open} onClose={closeMenu}>
+      <StyledMenu role='menu' id='side-menu' anchorEl={menuAnchorElement} open={open} onClose={closeMenu}>
         {withDividers([
           ...items,
           <MenuItem
diff --git a/web/src/components/RegionContentHeader.tsx b/web/src/components/RegionContentHeader.tsx
index 04b0874fc1..970fafa75b 100644
--- a/web/src/components/RegionContentHeader.tsx
+++ b/web/src/components/RegionContentHeader.tsx
@@ -5,11 +5,13 @@ import { useTranslation } from 'react-i18next'
 import { regionContentPath, pathnameFromRouteInformation, SEARCH_ROUTE } from 'shared'
 import { CategoryModel, RegionModel } from 'shared/api'
 
+import useAnnounceLanguageChange from '../hooks/useAnnounceLanguageChange'
 import useDimensions from '../hooks/useDimensions'
 import Header from './Header'
 import HeaderActionItem from './HeaderActionItem'
 import HeaderLanguageSelectorItem from './HeaderLanguageSelectorItem'
 import { LanguageChangePath } from './LanguageSelection'
+import LiveAnnouncer from './LiveAnnouncer'
 import NavigationTabs from './NavigationTabs'
 import RegionContentMenu from './RegionContentMenu'
 
@@ -37,6 +39,8 @@ const RegionContentHeader = ({
   const searchPath = pathnameFromRouteInformation({ route: SEARCH_ROUTE, ...params })
   const { desktop } = useDimensions()
 
+  const announcement = useAnnounceLanguageChange(languageCode, languageChangePaths, t)
+
   const actionItems = [
     <HeaderActionItem key='search' to={searchPath} text={t('search')} icon={<SearchOutlinedIcon />} />,
     languageChangePaths ? (
@@ -51,13 +55,16 @@ const RegionContentHeader = ({
   ].filter(Boolean)
 
   return (
-    <Header
-      logoHref={categoriesPath}
-      actionItems={actionItems}
-      regionName={regionModel.name}
-      language={languageCode}
-      tabBar={desktop && <NavigationTabs regionModel={regionModel} languageCode={languageCode} />}
-    />
+    <>
+      <LiveAnnouncer message={announcement} />
+      <Header
+        logoHref={categoriesPath}
+        actionItems={actionItems}
+        regionName={regionModel.name}
+        language={languageCode}
+        tabBar={desktop && <NavigationTabs regionModel={regionModel} languageCode={languageCode} />}
+      />
+    </>
   )
 }
 
diff --git a/web/src/components/TtsPlayer.tsx b/web/src/components/TtsPlayer.tsx
index 1eb9fb5486..076f031bea 100644
--- a/web/src/components/TtsPlayer.tsx
+++ b/web/src/components/TtsPlayer.tsx
@@ -99,11 +99,16 @@ const TtsPlayer = ({
   useUpdateDimensions()
 
   return (
-    <StyledTtsPlayer id={TTS_PLAYER_ELEMENT_ID} bottom={bottomNavigationHeight ?? visibleFooterHeight}>
+    <StyledTtsPlayer
+      id={TTS_PLAYER_ELEMENT_ID}
+      aria-label={t('readAloudPlayer')}
+      aria-describedby={`${TTS_PLAYER_ELEMENT_ID}-title`}
+      bottom={bottomNavigationHeight ?? visibleFooterHeight}
+      open>
       <CloseIconButton onClick={close} aria-label={t('common:close')}>
         <CloseIcon />
       </CloseIconButton>
-      <HeaderText component='span' variant='h4'>
+      <HeaderText id={`${TTS_PLAYER_ELEMENT_ID}-title`} component='span' variant='h4'>
         {title}
       </HeaderText>
       {/* Sound player panel shouldn't be rotated in rtl */}
diff --git a/web/src/components/base/AlertDialog.tsx b/web/src/components/base/AlertDialog.tsx
index 1500698557..fbb389274f 100644
--- a/web/src/components/base/AlertDialog.tsx
+++ b/web/src/components/base/AlertDialog.tsx
@@ -40,7 +40,13 @@ const AlertDialog = ({ title, close, children, className, actions }: DialogProps
   const dialogContainer = document.getElementById(LAYOUT_ELEMENT_ID)
 
   return (
-    <StyledMuiDialog role='alertdialog' onClose={close} container={dialogContainer} className={className} open>
+    <StyledMuiDialog
+      role='alertdialog'
+      aria-describedby='dialog-description'
+      onClose={close}
+      container={dialogContainer}
+      className={className}
+      open>
       <Stack direction='row' alignItems='center' justifyContent='space-between' marginInline={1}>
         <DialogTitle component='h2' variant='h4' textOverflow='ellipsis' whiteSpace='nowrap' overflow='hidden'>
           {title}
@@ -51,7 +57,7 @@ const AlertDialog = ({ title, close, children, className, actions }: DialogProps
           </IconButton>
         )}
       </Stack>
-      <DialogContent>{children}</DialogContent>
+      <DialogContent id='dialog-description'>{children}</DialogContent>
       {actions}
     </StyledMuiDialog>
   )
diff --git a/web/src/components/base/Snackbar.tsx b/web/src/components/base/Snackbar.tsx
index 851edd5775..afea172958 100644
--- a/web/src/components/base/Snackbar.tsx
+++ b/web/src/components/base/Snackbar.tsx
@@ -39,6 +39,7 @@ const Snackbar = ({ open, onClose, severity, message, title, action }: SnackbarP
       <StyledAlert
         severity={severity}
         onClose={onClose}
+        role={severity === 'error' ? 'alert' : 'status'}
         variant={severity === 'error' ? 'filled' : 'standard'}
         action={action}>
         {!!title && <AlertTitle>{title}</AlertTitle>}
diff --git a/web/src/hooks/useAnnounceLanguageChange.ts b/web/src/hooks/useAnnounceLanguageChange.ts
new file mode 100644
index 0000000000..c2e66f6416
--- /dev/null
+++ b/web/src/hooks/useAnnounceLanguageChange.ts
@@ -0,0 +1,22 @@
+import { useRef, useEffect, useState } from 'react'
+
+const useAnnounceLanguageChange = (
+  languageCode: string,
+  languageChangePaths: { code: string; name: string }[] | null,
+  t: (key: string) => string,
+): string => {
+  const previousLanguage = useRef(languageCode)
+  const [announcement, setAnnouncement] = useState('')
+
+  useEffect(() => {
+    if (previousLanguage.current !== languageCode) {
+      const languageName = languageChangePaths?.find(l => l.code === languageCode)?.name ?? languageCode
+      setAnnouncement(`${t('languageChangedTo')} ${languageName}`)
+      previousLanguage.current = languageCode
+    }
+  }, [languageCode, languageChangePaths, t])
+
+  return announcement
+}
+
+export default useAnnounceLanguageChange