diff --git a/src/generators/legacy-html/assets/api.js b/src/generators/legacy-html/assets/api.js
index 7bb67a21..611fa8c8 100644
--- a/src/generators/legacy-html/assets/api.js
+++ b/src/generators/legacy-html/assets/api.js
@@ -43,6 +43,7 @@
     function closeAllPickers() {
       for (const picker of pickers) {
         picker.parentNode.classList.remove('expanded');
+        picker.ariaExpanded = false;
       }
 
       window.removeEventListener('click', closeAllPickers);
@@ -60,6 +61,7 @@
     for (const picker of pickers) {
       const parentNode = picker.parentNode;
 
+      picker.ariaExpanded = parentNode.classList.contains('expanded');
       picker.addEventListener('click', function (e) {
         e.preventDefault();
 
@@ -67,7 +69,7 @@
           closeAllPickers as window event trigger already closed all the pickers,
           if it already closed there is nothing else to do here
         */
-        if (parentNode.classList.contains('expanded')) {
+        if (picker.ariaExpanded === 'true') {
           return;
         }
 
@@ -77,9 +79,11 @@
         */
 
         requestAnimationFrame(function () {
+          picker.ariaExpanded = true;
           parentNode.classList.add('expanded');
           window.addEventListener('click', closeAllPickers);
           window.addEventListener('keydown', onKeyDown);
+          parentNode.querySelector('.picker a').focus();
         });
       });
     }
diff --git a/src/generators/legacy-html/assets/style.css b/src/generators/legacy-html/assets/style.css
index a430b7b6..5f7fc50d 100644
--- a/src/generators/legacy-html/assets/style.css
+++ b/src/generators/legacy-html/assets/style.css
@@ -142,6 +142,20 @@ a.type {
   font-size: 0.9em;
 }
 
+.skip-to-content {
+  position: fixed;
+  top: -300%;
+}
+
+.skip-to-content:focus {
+  display: block;
+  top: 0;
+  left: 0;
+  background-color: var(--green1);
+  padding: 1rem;
+  z-index: 999999;
+}
+
 #content {
   position: relative;
 }
@@ -203,22 +217,15 @@ li.picker-header .picker-arrow {
   height: 0.6rem;
   border-top: 0.3rem solid transparent;
   border-bottom: 0.3rem solid transparent;
-  border-left: 0.6rem solid var(--color-links);
+  border-left: 0.6rem solid currentColor;
   border-right: none;
   margin: 0 0.2rem 0.05rem 0;
 }
 
-li.picker-header a:focus .picker-arrow,
-li.picker-header a:active .picker-arrow,
-li.picker-header a:hover .picker-arrow {
-  border-left: 0.6rem solid var(--white);
-}
-
-li.picker-header.expanded a:focus .picker-arrow,
-li.picker-header.expanded a:active .picker-arrow,
-li.picker-header.expanded a:hover .picker-arrow,
+li.picker-header.expanded .picker-arrow,
+:root:not(.has-js) li.picker-header:focus-within .picker-arrow,
 :root:not(.has-js) li.picker-header:hover .picker-arrow {
-  border-top: 0.6rem solid var(--white);
+  border-top: 0.6rem solid currentColor;
   border-bottom: none;
   border-left: 0.35rem solid transparent;
   border-right: 0.35rem solid transparent;
@@ -226,11 +233,13 @@ li.picker-header.expanded a:hover .picker-arrow,
 }
 
 li.picker-header.expanded > a,
+:root:not(.has-js) li.picker-header:focus-within > a,
 :root:not(.has-js) li.picker-header:hover > a {
   border-radius: 2px 2px 0 0;
 }
 
 li.picker-header.expanded > .picker,
+:root:not(.has-js) li.picker-header:focus-within > .picker,
 :root:not(.has-js) li.picker-header:hover > .picker {
   display: block;
   z-index: 1;
@@ -592,35 +601,26 @@ hr {
   margin: 0;
 }
 
-.toc li a::before {
-  content: '■';
-  color: var(--color-text-primary);
-  padding-right: 1em;
-  font-size: 0.9em;
-}
-
-.toc li a:hover::before {
-  color: var(--white);
-}
-
-.toc ul ul a {
-  padding-left: 1rem;
+.toc > ul:first-child {
+  margin-left: 1rem;
 }
 
-.toc ul ul ul a {
-  padding-left: 2rem;
+.toc li {
+  display: list-item;
+  list-style: square;
 }
 
-.toc ul ul ul ul a {
-  padding-left: 3rem;
+.toc li a {
+  display: inline;
+  padding-left: 0;
 }
 
-.toc ul ul ul ul ul a {
-  padding-left: 4rem;
+.toc li a:hover::before {
+  color: var(--white);
 }
 
-.toc ul ul ul ul ul ul a {
-  padding-left: 5rem;
+.toc ul {
+  padding-left: 1rem;
 }
 
 #toc .stability_0::after,
diff --git a/src/generators/legacy-html/template.html b/src/generators/legacy-html/template.html
index ffcbe9c0..400fe835 100644
--- a/src/generators/legacy-html/template.html
+++ b/src/generators/legacy-html/template.html
@@ -39,6 +39,7 @@
     </style>
   </head>
   <body class="alt apidoc" id="api-section-__FILENAME__">
+    <a href="#apicontent" class="skip-to-content">Skip to content</a>
     <div id="content" class="clearfix">
       <div role="navigation" id="column2" class="interior">
         <div id="intro" class="interior">
@@ -100,12 +101,12 @@ <h1>Node.js __VERSION__ documentation</h1>
               <li class="pinned-header">Node.js __VERSION__</li>
               __TOC_PICKER__ __GTOC_PICKER__ __ALTDOCS__
               <li class="picker-header">
-                <a href="#">
+                <a href="#options-picker" aria-controls="options-picker">
                   <span class="picker-arrow"></span>
                   Options
                 </a>
-                <div class="picker">
-                  <ul>
+                <div class="picker" tabindex="-1">
+                  <ul id="options-picker">
                     <li>
                       <a href="all.html">View on single page</a>
                     </li>
diff --git a/src/generators/legacy-html/utils/buildDropdowns.mjs b/src/generators/legacy-html/utils/buildDropdowns.mjs
index 0ec0d879..22d9cb01 100644
--- a/src/generators/legacy-html/utils/buildDropdowns.mjs
+++ b/src/generators/legacy-html/utils/buildDropdowns.mjs
@@ -23,10 +23,10 @@ import {
 const buildToC = tableOfContents => {
   if (tableOfContents.length) {
     return (
-      `<li class="picker-header"><a href="#">` +
+      `<li class="picker-header"><a href="#toc-picker" aria-controls="toc-picker">` +
       `<span class="picker-arrow"></span>` +
       `Table of contents</a><div class="picker">` +
-      `<div class="toc">${tableOfContents}</div></div></li>`
+      `<div class="toc" tabindex="-1">${tableOfContents.replace('<ul', '<ul id="toc-picker"')}</div></div></li>`
     );
   }
 
@@ -42,9 +42,9 @@ const buildToC = tableOfContents => {
  * @param {string} navigationContents The stringified Navigation
  */
 const buildNavigation = navigationContents =>
-  `<li class="picker-header"><a href="#">` +
+  `<li class="picker-header"><a href="#gtoc-picker" aria-controls="gtoc-picker">` +
   `<span class="picker-arrow"></span>Index</a>` +
-  `<div class="picker"><ul><li><a href="index.html">Index</a>` +
+  `<div class="picker" tabindex="-1" id="gtoc-picker"><ul><li><a href="index.html">Index</a>` +
   `</li></ul><hr class="line" />${navigationContents}</div></li>`;
 
 /**
@@ -76,9 +76,9 @@ const buildVersions = (api, added, versions) => {
   });
 
   return (
-    `<li class="picker-header"><a href="#">` +
+    `<li class="picker-header"><a href="#alt-docs" aria-controls="alt-docs">` +
     `<span class="picker-arrow"></span>Other versions</a>` +
-    `<div class="picker"><ol id="alt-docs">${versionsAsList.join('')}</ol></div></li>`
+    `<div class="picker" tabindex="-1"><ol id="alt-docs">${versionsAsList.join('')}</ol></div></li>`
   );
 };