ade21ee4e0109c70e29860d5393306e48e6a44d3
lrnassar
  Mon Mar 16 16:38:58 2026 -0700
Adding keyboard navigation accessibility to the Genome Browser menu bar and all main CGI pages. Converts non-focusable menu bar span elements to keyboard-accessible buttons using the W3C disclosure navigation pattern, adds aria-expanded state for screen readers, skip navigation link, and main content landmark. Also adds a Keyboard Navigation section to the accessibility page with screenshots. refs #37252

diff --git src/hg/htdocs/accessibility.html src/hg/htdocs/accessibility.html
index b25dd6ffd9a..da8d10d8a43 100755
--- src/hg/htdocs/accessibility.html
+++ src/hg/htdocs/accessibility.html
@@ -28,30 +28,67 @@
 <button type="button">Configure</button> button below the image.</p>
 
 <div class="text-center">
   <img src="images/howToChangeFont.gif" alt="GIF showing how to change
 Genome Browser fonts" width='50%'></div>
 
 <p>
 <b>Font sizes and tooltip sizes:</b> The font size and tooltip text size can also be changed in 
 the same configuration menu shown above. The tooltip text size is shown when you mouseover any 
 items.</p>
 
 <div class="text-center">
   <img src="images/increasedTooltipSize.png" alt="An example of a tooltip with increased
 text size" width='60%'></div>
 
+<h2>Keyboard Navigation</h2>
+<p>
+The Genome Browser supports keyboard navigation across all main pages, including the Gateway,
+Genome Browser tracks display, BLAT, Table Browser, and In-Silico PCR.</p>
+
+<p>
+<b>Skip to main content:</b> Press <b>Tab</b> once on any page to reveal a
+"Skip to main content" link. Press <b>Enter</b> to bypass the navigation menu and jump
+directly to the page content. This is especially helpful for users navigating with a keyboard
+or switch device.</p>
+
+<div class="text-center">
+  <img src="images/skipNavLink.png" alt="The 'Skip to main content' link appearing at the
+top left of the page when focused via keyboard" width='40%'></div>
+
+<p>
+<b>Menu bar navigation:</b> All items in the top navigation menu bar are accessible by
+keyboard. Press <b>Tab</b> to move through menu items. Dropdown menus (such as Tools,
+Downloads, Help) open automatically when their parent item receives focus. Press
+<b>Enter</b> to follow a link or <b>Escape</b> to close an open dropdown and return
+to the menu bar.</p>
+
+<div class="text-center">
+  <img src="images/keyboardMenuNav.png" alt="The Tools dropdown menu open via keyboard
+focus, showing a white focus ring around the Tools button" width='40%'></div>
+
+<p>
+<b>Screen reader landmarks:</b> Each page is structured with a <em>navigation</em> landmark
+for the menu bar and a <em>main</em> landmark for the page content. Screen reader users can
+use landmark navigation to jump between these regions (e.g., the <b>D</b> key in NVDA or
+the rotor in VoiceOver).</p>
+
+<p>
+<b>Keyboard shortcuts:</b> In addition to standard Tab navigation, the Genome Browser
+tracks display supports keyboard shortcuts for common actions. Press <b>?</b> on the
+tracks page to see available shortcuts.</p>
+
 <h2>Display and Color</h2>
 <p>
 <b>Inverted colors and high contrast display:</b> We recommend using native OS tools for color 
 display options on the Genome Browser. Below is an example of our tracks display using 
 the "Inverted Colors Mode" as outlined by the <a target="_blank"
 href="https://www.a11yproject.com/posts/operating-system-and-browser-accessibility-display-modes/#inverted-colors-mode"
 >Operating System and Browser Accessibility Display Modes</a> page on the <a target="_blank"
 href="https://www.a11yproject.com/">A11Y Project</a> website. High contrast 
 and Filtered colors mode may also be helpful.</p>
 
 <div class="text-center">
   <img src="images/browserInvertedColors.png" alt="An example of the Browser tracks display
 with inverted image colors" width='60%'></div>
 
 <p>