diff --git a/packages/typescriptlang-org/src/components/layout/Sidebar.scss b/packages/typescriptlang-org/src/components/layout/Sidebar.scss
index 0f1eaa478be9..842e762981e9 100644
--- a/packages/typescriptlang-org/src/components/layout/Sidebar.scss
+++ b/packages/typescriptlang-org/src/components/layout/Sidebar.scss
@@ -209,6 +209,7 @@ nav#sidebar {
     z-index: $z-index-for-handbook-nav;
     margin-left: -800px;
     width: 90%;
+    visibility: hidden;
 
     ul {
       padding-bottom: 200px;
@@ -223,6 +224,7 @@ nav#sidebar {
 
     &.show {
       margin-left: 0px;
+      visibility: visible;
     }
 
     & > ul > li,
diff --git a/packages/typescriptlang-org/src/components/layout/Sidebar.tsx b/packages/typescriptlang-org/src/components/layout/Sidebar.tsx
index 3d8d830fe7ea..348dd45d89cf 100644
--- a/packages/typescriptlang-org/src/components/layout/Sidebar.tsx
+++ b/packages/typescriptlang-org/src/components/layout/Sidebar.tsx
@@ -44,11 +44,15 @@ const toggleNavigationSection: MouseEventHandler = (event) => {
 export const SidebarToggleButton = () => {
   const toggleClick = () => {
     const navSidebar = document.getElementById("sidebar")
+    const toggleButton = document.getElementById("small-device-button-sidebar")
     const isOpen = navSidebar?.classList.contains("show")
     if (isOpen) {
       navSidebar?.classList.remove("show")
+      navSidebar?.setAttribute("inert", "")
+      toggleButton?.focus()
     } else {
       navSidebar?.classList.add("show")
+      navSidebar?.removeAttribute("inert")
     }
   }
 
@@ -127,6 +131,23 @@ export const Sidebar = (props: Props) => {
     }
   }
 
+  useEffect(() => {
+    const sidebar = document.getElementById("sidebar")
+    if (!sidebar) return
+
+    const mq = window.matchMedia("(max-width: 800px)")
+    const sync = () => {
+      if (mq.matches && !sidebar.classList.contains("show")) {
+        sidebar.setAttribute("inert", "")
+      } else {
+        sidebar.removeAttribute("inert")
+      }
+    }
+    sync()
+    mq.addEventListener("change", sync)
+    return () => mq.removeEventListener("change", sync)
+  }, [])
+
   return (
     <nav aria-label="sidebar" id="sidebar">
       <ul>