diff --git a/com.woltlab.wcf/templates/shared_messageTableOfContents.tpl b/com.woltlab.wcf/templates/shared_messageTableOfContents.tpl
index be859f23d8..63954a1594 100644
--- a/com.woltlab.wcf/templates/shared_messageTableOfContents.tpl
+++ b/com.woltlab.wcf/templates/shared_messageTableOfContents.tpl
@@ -1,38 +1,47 @@
-<div class="tableOfContentsWrapper">
-	<div class="tableOfContentsContainer open mobileForceHide" id="tocContainer-{$idPrefix}">
-		<div class="tableOfContentsHeader">
-			<span class="tableOfContentsTitle">{lang}wcf.message.toc{/lang}</span>
-			<span class="jsOnly">[<a href="#" class="jsTableOfContentsHide">{lang}wcf.message.toc.hide{/lang}</a><a href="#" class="jsTableOfContentsShow">{lang}wcf.message.toc.show{/lang}</a>]</span>
+<div class="tableOfContents__wrapper">
+	<nav class="tableOfContents__container" aria-labelledby="tocTitle-{$idPrefix}">
+		<div class="tableOfContents__header">
+			<h2 class="tableOfContents__title" id="tocTitle-{$idPrefix}">{lang}wcf.message.toc{/lang}</h2>
+			
+			<button type="button" 
+				aria-expanded="true" 
+				aria-controls="toc-{$idPrefix}" 
+				class="tableOfContents__toggle button small"
+				id="tocToggle-{$idPrefix}"
+			>
+				{lang}wcf.message.toc.hide{/lang}
+			</button>
 		</div>
-		<ol class="tableOfContents tocLevel1">
+		<ul class="tableOfContents tableOfContents--level1" id="toc-{$idPrefix}">
 			{foreach from=$items item=item}
 				<li>
-					<span class="tocItemTitle"><a href="#{$item->getID()}">{$item->getTitle()}</a></span>
+					<a class="tableOfContents__item" href="#{$item->getID()}">{$item->getTitle()}</a>
 					
-					{if $item->hasChildren()}<ol class="tableOfContents tocLevel{$item->getDepth() + 1}">{else}</li>{/if}
+					{if $item->hasChildren()}<ul class="tableOfContents tableOfContents--level{$item->getDepth() + 1}">{else}</li>{/if}
 					
 					{if !$item->hasChildren() && $item->isLastSibling()}
-						{unsafe:"</ol></li>"|str_repeat:$item->getOpenParentNodes()}
+						{unsafe:"</ul></li>"|str_repeat:$item->getOpenParentNodes()}
 					{/if}
 			{/foreach}
-		</ol>
-	</div>
-</div>
-<script data-relocate="true">
-	require(['Ui/Screen'], function(UiScreen) {
-		var container = elById('tocContainer-{$idPrefix}');
-		elBySelAll('.jsTableOfContentsHide, .jsTableOfContentsShow', container, function(button) {
-			button.addEventListener('click', function(event) {
-				event.preventDefault();
-				
-				container.classList.toggle('open');
+		</ul>
+	</nav>
+	<script>
+		{
+			const button = document.getElementById('tocToggle-{$idPrefix}');
+			button.addEventListener('click', () => {
+				toggle();
 			});
-		});
-		
-		if (UiScreen.is('screen-sm-down')) {
-			container.classList.remove('open');
+			
+			function toggle() {
+				const hidden = button.getAttribute('aria-expanded') === 'true';
+				button.setAttribute('aria-expanded', hidden ? 'false' : 'true');
+				button.textContent = hidden ? '{jslang}wcf.message.toc.show{/jslang}' : '{jslang}wcf.message.toc.hide{/jslang}';
+				document.getElementById(button.getAttribute('aria-controls')).hidden = hidden;
+			}
+			
+			if (window.matchMedia('(max-width: 768px)').matches) {
+				toggle();
+			}
 		}
-		
-		container.classList.remove('mobileForceHide');
-	});
-</script>
+	</script>
+</div>
diff --git a/wcfsetup/install/files/style/ui/toc.scss b/wcfsetup/install/files/style/ui/toc.scss
index c1cced31cc..43e95e6663 100644
--- a/wcfsetup/install/files/style/ui/toc.scss
+++ b/wcfsetup/install/files/style/ui/toc.scss
@@ -1,72 +1,57 @@
-.tableOfContentsContainer {
+.tableOfContents__container {
 	border: 1px solid var(--wcfContentBorderInner);
 	/* The list numbers extend into the horizontal padding, 10px is not enough for double digit numbers. */
-	padding: 10px 20px;
-
-	&.open .jsTableOfContentsShow {
-		display: none;
-	}
+	padding: 20px;
+}
 
-	&:not(.open) {
-		.jsTableOfContentsHide,
-		.tableOfContents {
-			display: none;
-		}
+@include screen-sm-down {
+	.tableOfContents__container {
+		padding: 10px 20px;
 	}
 }
 
 @include screen-md-up {
-	.tableOfContentsWrapper {
+	.tableOfContents__wrapper {
 		float: right;
 		margin: 0 0 10px 10px;
 		max-width: 50%;
 	}
 
-	.htmlContent > .tableOfContentsWrapper + * {
+	.htmlContent > .tableOfContents__wrapper + * {
 		margin-top: 0 !important;
 	}
 }
 
-@include screen-sm-down {
-	.tableOfContentsWrapper {
-		margin-bottom: 10px;
+@include screen-lg {
+	.tableOfContents__wrapper {
+		max-width: 40%;
 	}
+}
 
-	.tableOfContentsContainer {
-		display: inline-block;
-
-		&.mobileForceHide {
-			.jsTableOfContentsShow {
-				display: initial !important;
-			}
-
-			.jsTableOfContentsHide,
-			.tableOfContents {
-				display: none;
-			}
-		}
+@include screen-sm-down {
+	.tableOfContents__wrapper {
+		margin-bottom: 10px;
 	}
 }
 
-.tableOfContentsHeader {
-	text-align: center;
+.tableOfContents__header {
+	align-items: center;
+	display: flex;
+	gap: 10px;
+	justify-content: center;
 }
 
-.tableOfContentsTitle {
+h2.tableOfContents__title {
+	@include wcfFontHeadline;
 	@include wcfFontBold;
+
+	margin: 0;
 }
 
 .htmlContent,
 .messageBody > .messageText {
 	.tableOfContents {
 		margin-left: 15px;
-
-		&.tocLevel2 {
-			list-style-type: lower-alpha;
-		}
-
-		&.tocLevel3 {
-			list-style-type: lower-roman;
-		}
+		margin-bottom: 0;
 	}
 }
diff --git a/wcfsetup/install/lang/en.xml b/wcfsetup/install/lang/en.xml
index f0910fb08a..405fc14e89 100644
--- a/wcfsetup/install/lang/en.xml
+++ b/wcfsetup/install/lang/en.xml
@@ -4287,9 +4287,9 @@ Allowed extensions: gif, jpg, jpeg, png, webp]]></item>
 		<item name="wcf.message.error.tooLong"><![CDATA[The message is too long, must be under {#$maxTextLength} characters.]]></item>
 		<item name="wcf.message.status.deleted"><![CDATA[Deleted]]></item>
 		<item name="wcf.message.status.disabled"><![CDATA[Disabled]]></item>
-		<item name="wcf.message.toc"><![CDATA[Contents]]></item>
-		<item name="wcf.message.toc.hide"><![CDATA[hide]]></item>
-		<item name="wcf.message.toc.show"><![CDATA[show]]></item>
+		<item name="wcf.message.toc"><![CDATA[Table of Contents]]></item>
+		<item name="wcf.message.toc.hide"><![CDATA[Hide]]></item>
+		<item name="wcf.message.toc.show"><![CDATA[Show]]></item>
 		<item name="wcf.message.user.consent.button.enable"><![CDATA[Display all external content]]></item>
 		<item name="wcf.message.user.consent.button.enableOnce"><![CDATA[Display content once]]></item>
 		<item name="wcf.message.user.consent.description"><![CDATA[Content embedded from external sources will not be displayed without your consent.]]></item>