diff --git a/src/app/App.tsx b/src/app/App.tsx
index c6a13476..a81efb41 100644
--- a/src/app/App.tsx
+++ b/src/app/App.tsx
@@ -17,6 +17,7 @@ import Toolbar from '../toolbar/Toolbar';
 import Tour from '../tour/Tour';
 import { isMacOS } from '../utils/os';
 import { useAppLastDocsPageSetting } from './hooks';
+import { useI18n } from './i18n';
 
 const Editor = React.lazy(async () => {
     const [sagaModule, componentModule] = await Promise.all([
@@ -145,7 +146,6 @@ const Docs: React.VFC = () => {
             }}
             src={initialDocsPage}
             allowFullScreen={true}
-            role="documentation"
             width="100%"
             height="100%"
         />
@@ -153,6 +153,7 @@ const Docs: React.VFC = () => {
 };
 
 const App: React.VFC = () => {
+    const i18n = useI18n();
     const { isDarkMode } = useTernaryDarkMode();
     const { isSettingShowDocsEnabled } = useSettingIsShowDocsEnabled();
     const [isDragging, setIsDragging] = useState(false);
@@ -189,9 +190,12 @@ const App: React.VFC = () => {
     return (
         <div className="pb-app" onContextMenu={(e) => e.preventDefault()}>
             <div className="pb-app-body">
-                <div className="pb-app-activities">
+                <aside
+                    className="pb-app-activities"
+                    aria-label={i18n.translate('landmark.activities')}
+                >
                     <Activities />
-                </div>
+                </aside>
                 {/* need a container with position: relative; for SplitterLayout since it uses position: absolute; */}
                 <div className="pb-app-main" style={{ position: 'relative' }}>
                     <SplitterLayout
@@ -210,26 +214,35 @@ const App: React.VFC = () => {
                             secondaryInitialSize={terminalSplit}
                             onSecondaryPaneSizeChange={setTerminalSplit}
                         >
-                            <div className="pb-app-editor">
+                            <main
+                                className="pb-app-editor"
+                                aria-label={i18n.translate('landmark.editor')}
+                            >
                                 <Toolbar />
                                 <React.Suspense
                                     fallback={<Spinner className="pb-editor" />}
                                 >
                                     <Editor />
                                 </React.Suspense>
-                            </div>
-                            <div className="pb-app-terminal">
+                            </main>
+                            <aside
+                                className="pb-app-terminal"
+                                aria-label={i18n.translate('landmark.terminal')}
+                            >
                                 <React.Suspense
                                     fallback={<Spinner className="h-100" />}
                                 >
                                     <Terminal />
                                 </React.Suspense>
-                            </div>
+                            </aside>
                         </SplitterLayout>
-                        <div className="pb-app-docs">
+                        <aside
+                            className="pb-app-docs"
+                            aria-label={i18n.translate('landmark.documentation')}
+                        >
                             {isDragging && <div className="pb-app-docs-drag-helper" />}
                             <Docs />
-                        </div>
+                        </aside>
                     </SplitterLayout>
                 </div>
             </div>
diff --git a/src/app/i18n.ts b/src/app/i18n.ts
new file mode 100644
index 00000000..47ec2790
--- /dev/null
+++ b/src/app/i18n.ts
@@ -0,0 +1,12 @@
+// SPDX-License-Identifier: MIT
+// Copyright (c) 2022 The Pybricks Authors
+
+import { useI18n as useShopifyI18n } from '@shopify/react-i18n';
+import type { TypedI18n } from '../i18n';
+import type translations from './translations/en.json';
+
+export function useI18n(): TypedI18n<typeof translations> {
+    // istanbul ignore next: babel-loader rewrites this line
+    const [i18n] = useShopifyI18n();
+    return i18n;
+}
diff --git a/src/app/translations/en.json b/src/app/translations/en.json
new file mode 100644
index 00000000..b7a1925b
--- /dev/null
+++ b/src/app/translations/en.json
@@ -0,0 +1,8 @@
+{
+    "landmark": {
+        "activities": "Activities",
+        "editor": "Editor",
+        "terminal": "Terminal",
+        "documentation": "Documentation"
+    }
+}