diff --git a/entry_types/scrolled/config/locales/new/de.yml b/entry_types/scrolled/config/locales/new/de.yml
index 786382e4e5..b971a5130c 100644
--- a/entry_types/scrolled/config/locales/new/de.yml
+++ b/entry_types/scrolled/config/locales/new/de.yml
@@ -227,6 +227,8 @@ de:
tr: Türkisch
unknown: "(Unbekannt)"
zh: Chinesisch
+ navigation_skip_links:
+ content: Zum Inhalt
inline_editing:
cancel: Abbrechen
url_placeholder: URL eingeben oder einfügen
diff --git a/entry_types/scrolled/config/locales/new/en.yml b/entry_types/scrolled/config/locales/new/en.yml
index 329e3b1434..2a011a0cb2 100644
--- a/entry_types/scrolled/config/locales/new/en.yml
+++ b/entry_types/scrolled/config/locales/new/en.yml
@@ -141,6 +141,8 @@ en:
tr: Turkish
unknown: "(Unknown)"
zh: Chinese
+ navigation_skip_links:
+ content: To the content
inline_editing:
cancel: Cancel
url_placeholder: Type or paste URL
diff --git a/entry_types/scrolled/package/spec/frontend/SkipLinks-spec.js b/entry_types/scrolled/package/spec/frontend/SkipLinks-spec.js
new file mode 100644
index 0000000000..34d914b825
--- /dev/null
+++ b/entry_types/scrolled/package/spec/frontend/SkipLinks-spec.js
@@ -0,0 +1,23 @@
+import React from 'react';
+
+import {SkipLinks} from 'frontend/navigation/SkipLinks';
+import styles from 'frontend/navigation/SkipLinks.module.css';
+
+import {render} from '@testing-library/react';
+
+describe('SkipLinks', () => {
+ it('renders skip links', async () => {
+ const {getByText} = render();
+
+ expect(getByText(/content/).classList.contains(styles.link)).toBe(true);
+ });
+
+ it('focus the button', async () => {
+ const {container} = render();
+
+ const elem = document.getElementsByClassName(styles.link)[0];
+ elem.focus();
+
+ expect(document.activeElement).toBe(elem);
+ });
+});
diff --git a/entry_types/scrolled/package/src/frontend/Entry.js b/entry_types/scrolled/package/src/frontend/Entry.js
index 30cd65b64a..b17cf53648 100644
--- a/entry_types/scrolled/package/src/frontend/Entry.js
+++ b/entry_types/scrolled/package/src/frontend/Entry.js
@@ -43,7 +43,7 @@ export default withInlineEditingDecorator('EntryDecorator', function Entry(props
}
return (
-
+
{renderChapters(entryStructure,
diff --git a/entry_types/scrolled/package/src/frontend/navigation/AppHeader.js b/entry_types/scrolled/package/src/frontend/navigation/AppHeader.js
index 19e2df30c5..0208d60b02 100644
--- a/entry_types/scrolled/package/src/frontend/navigation/AppHeader.js
+++ b/entry_types/scrolled/package/src/frontend/navigation/AppHeader.js
@@ -10,6 +10,7 @@ import {LegalInfoMenu} from "./LegalInfoMenu";
import {SharingMenu} from "./SharingMenu";
import {ToggleMuteButton} from './ToggleMuteButton';
import {Logo} from './Logo';
+import {SkipLinks} from './SkipLinks';
import styles from './AppHeader.module.css';
@@ -90,6 +91,7 @@ export function AppHeader(props) {
+