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/inc/globalNavBar.inc src/hg/htdocs/inc/globalNavBar.inc
index 90e6e0d5575..1f06bd7b2eb 100644
--- src/hg/htdocs/inc/globalNavBar.inc
+++ src/hg/htdocs/inc/globalNavBar.inc
@@ -1,125 +1,126 @@
+<a href="#mainContent" class="skipNav">Skip to main content</a>
 <div id="main-menu-whole">
 
 		<div id="main-menu"><div id="block-nice_menus-1" class="clear-block block block-nice_menus">
 
 	<div class="upcorner"></div>
 	<div class="blockbg">
 		<div class="blockcontent">
 						<div class="content">
 
-<ul class="nice-menu nice-menu-down sf-js-enabled" id="nice-menu-1">
+<nav aria-label="Main menu"><ul class="nice-menu nice-menu-down sf-js-enabled" id="nice-menu-1">
 
 <li class="first even" id="home"><a href="../index.html" ><span id="home-link">Home</span></a></li> 
 
-<li class="menuparent" id="tools1"><a href="../cgi-bin/hgGateway">Genomes</a>
+<li class="menuparent" id="tools1"><a href="../cgi-bin/hgGateway" aria-expanded="false">Genomes</a>
 	<ul style="display: none; visibility: hidden;">
 	<li class="first defaultDropdownLink"><a href="../cgi-bin/hgTracks?db=hg38&amp;position=lastDbPos">Human GRCh38/hg38</a></li>
 	<li class="defaultDropdownLink"><a href="../cgi-bin/hgTracks?db=hg19&amp;position=lastDbPos">Human GRCh37/hg19</a></li>
         <li class="defaultDropdownLink"><a href="../cgi-bin/hgTracks?db=hub_3671779_hs1&position=lastDbPos">Human T2T-CHM13/hs1</a></li>
 	<li class="defaultDropdownLink"><a href="../cgi-bin/hgTracks?db=mm39&amp;position=lastDbPos">Mouse GRCm39/mm39</a></li>
 	<li class="defaultDropdownLink"><a href="../cgi-bin/hgTracks?db=mm10&amp;position=lastDbPos">Mouse GRCm38/mm10</a></li>
 	<li class="defaultDropdownLink"><a title="Browse thousands of additional assemblies in our Genome Repository" href="https://hgdownload.gi.ucsc.edu/hubs/">Genome Repository GenArk</a></li>
 	<li class="last"><a href="../cgi-bin/hgGateway">Other</a></li>
         </ul>
 </li>
 
-<li class="menuparent" id="tools2"><a href="../cgi-bin/hgTracks">Genome Browser</a>
+<li class="menuparent" id="tools2"><a href="../cgi-bin/hgTracks" aria-expanded="false">Genome Browser</a>
 	<ul style="display: none; visibility: hidden;">
 	<li id="backToBrowserLi" class="first"><a id="backToGenomeBrowser" href="../cgi-bin/hgTracks">Back to Genome Browser</a></li>
 	<li><a id="configureMenuLink" title="Configure track display or change the Genome Browser font and other display settings" href="../cgi-bin/hgTracks?hgTracksConfigPage=configure">Configure</a></li>
 	<li><a id="trackSearchMenuLink" title="Search from all available tracks in the current genome" href="../cgi-bin/hgTracks?hgt_tSearch=track+search">Track Search</a></li>
 	<li><a id="shortMatchLink" title="Find short DNA sequences" href="../cgi-bin/hgTrackUi?g=oligoMatch&oligoMatch=pack">Short Exact DNA Match</a></li>
         <!-- OPTIONAL_RECOMMENDED_TRACK_SETS_MENU -->
         <!-- OPTIONAL_EXPORTED_TRACK_DATA_HUBS_MENU -->
 	<li><a id="cartResetMenuLink" title="Reset user settings; Note: this removes customs tracks and track hubs" href="../cgi-bin/cartReset?skipLs=1">Reset All User Settings</a></li>
         </ul>
 </li>
 
 
-<li class="menuparent" id="tools3"><span>Tools</span>
+<li class="menuparent" id="tools3"><button type="button" aria-expanded="false">Tools</button>
 	<ul style="display: none; visibility: hidden;">
 	<li class="first"><a id="blatMenuLink" title="Search the genome for sequence matches" href="../cgi-bin/hgBlat?command=start">Blat</a></li>
 	<li><a id="ispMenuLink" title="Check the specificity of short primers" href="../cgi-bin/hgPcr">In-Silico PCR</a></li>
 	<li><a id="tableBrowserMenuLink" title="Query and retrieve from all Genome Browser data" href="../cgi-bin/hgTables">Table Browser</a></li>
 	<li><a id="liftOverMenuLink" title="Convert coordinates between two assemblies" href="../cgi-bin/hgLiftOver">LiftOver</a></li>
 	<li><a id="vaiMenuLink" title="Annotate variants using a variety of data sources" href="../cgi-bin/hgVai">Variant Annotation Integrator</a></li>
 	<li><a id="diMenuLink" title="Intersect the data from several tracks" href="../cgi-bin/hgIntegrator">Data Integrator</a></li>
         <li><a title="Explore gene/protein interactions and pathways" id="interactionMenuLink" href="../cgi-bin/hgGeneGraph">Gene Interactions</a></li>
 	<li class="last"><a title="See our other tools and external tools for working with Genome Browser data" href="../util.html">Other Tools</a></li>
 	</ul>
 </li>
-<li class="menuparent" id="mirrors"><span>Mirrors</span>
+<li class="menuparent" id="mirrors"><button type="button" aria-expanded="false">Mirrors</button>
 	<ul style="display: none; visibility: hidden;">
 	<li class="first"><a title="A Genome Browser mirror hosted closer to your location may improve speed" href="../mirror.html">Euro/Asia Mirrors</a></li>
 	<li><a href="../goldenPath/help/mirror.html">Mirroring Instructions</a></li>
 	<!-- OPTIONAL_MIRROR_MENU -->
 	</ul>
 
 </li>
-<li class="menuparent" id="downloads"><span>Downloads</span>
+<li class="menuparent" id="downloads"><button type="button" aria-expanded="false">Downloads</button>
 	<ul style="display: none; visibility: hidden;">
 	<li class="first"><a title="Download underlying Genome Browser data files" href="https://hgdownload.gi.ucsc.edu/downloads.html">Genome Data</a></li>
 	<li><a href="https://hgdownload.gi.ucsc.edu/downloads.html#source_downloads">Source Code</a></li>
 	<li><a title="Purchase a commercial license for certain Genome Browser software" href="https://genome-store.ucsc.edu">Genome Browser Store</a></li>
 	<li><a title="Download utilities for working with Genome Browser data" href="https://hgdownload.gi.ucsc.edu/downloads.html#utilities_downloads">Utilities</a></li>
 	<li class="last"><a href="../goldenPath/help/ftp.html">FTP</a></li>
 	<li class="last"><a href="../goldenPath/help/mysql.html">MySQL Access</a></li>
 	<li class="last"><a href="../goldenPath/help/cloud.html">Cloud Access</a></li>
 	<li class="last"><a href="../goldenPath/help/api.html">REST API</a></li>
 	</ul>
 </li>
-<li class="menuparent" id="myData"><span>My Data</span>
+<li class="menuparent" id="myData"><button type="button" aria-expanded="false">My Data</button>
 	<ul style="display: none; visibility: hidden;">
 	<li><a id="customTracksMenuLink" title="Manage your custom tracks" href="../cgi-bin/hgCustom">Custom Tracks</a></li>
 	<li><a id="sessionsMenuLink" title="Create, manage, and share snapshots of Genome Browser configurations" href="../cgi-bin/hgSession?hgS_doMainPage=1">My Sessions</a></li>
 	<li><a id="trackHubsMenuLink" title="Connect and manage your own track hubs or browse public hubs" href="../cgi-bin/hgHubConnect">Track Hubs</a></li>
 	<li><a id="customCompositeMenuLink" title="Build your own collection of tracks on the fly" href="../cgi-bin/hgCollection">Track Collection Builder</a></li>
 	<li class="last"><a id="publicSessionsMenuLink" title="See how others are using the Genome Browser" href="../cgi-bin/hgPublicSessions">Public Sessions</a></li>
 	</ul>
 </li>
 
 <!-- OPTIONAL_VIEW_MENU -->
 
 <!-- OPTIONAL_PROJECT_MENU_START -->
-<li class="menuparent" id="projects"><span>Projects</span>
+<li class="menuparent" id="projects"><button type="button" aria-expanded="false">Projects</button>
 	<ul style="display: none; visibility: hidden;">
 	<li class="first"><a href="../gtex.html">Genotype Tissue Expression (GTEx)</a></li>
 	<li><a href="../ENCODE/index.html">Encyclopedia of DNA Elements (ENCODE)</a></li>
 	<li><a href="../singlecell.html">UCSC Cell Browser</a></li>
 	<li class="last"><a href="../covid19.html">UCSC COVID-19 Research</a></li>
 	</ul>
 </li>
 <!-- OPTIONAL_PROJECT_MENU_END -->
 
-<li class="menuparent" id="help"><span>Help</span>
+<li class="menuparent" id="help"><button type="button" aria-expanded="false">Help</button>
     <ul style="display: none; visibility: hidden;">
 <!-- CONTEXT_SPECIFIC_HELP -->
     <li><a title="See frequently asked questions and search our help documentation" href="../FAQ/">FAQs & Search</a></li>
     <li><a title="Help documentation covering all aspects of the Genome Browser" href="../goldenPath/help/hgTracksHelp.html">Browser Documentation</a></li>
     <li><a title="How-to videos for various Genome Browser tasks and other materials" href="../training/index.html">Training</a></li>
     <li class="last" id="contactUs"><a title="Ask us a question" href="../contacts.html">Contact Us</a></li>
     </ul>
 </li>
 
-<li class="menuparent last" id="aboutUs"><span>About Us</span>
+<li class="menuparent last" id="aboutUs"><button type="button" aria-expanded="false">About Us</button>
 	<ul style="display: none; visibility: hidden;">
 	<li class="first odd"><a href="../goldenPath/newsarch.html">News</a></li>
 	<li class="even"><a href="../cite.html">Cite Us</a></li>
 	<li class="odd"><a href="../goldenPath/releaseLog.html">Release Log</a></li>
 	<li class="even"><a href="../staff.html">Staff</a></li>
 	<li class="odd"><a href="../conditions.html">Conditions of Use</a></li>
 	<li class="even"><a href="../goldenPath/history.html">Our History</a></li>
 	<li class="odd"><a href="../license/">Licenses</a></li>
 	<li class="even last" id="aboutContactLink"><a href="../contacts.html">Contact Us</a></li>
 	</ul>
 </li>
 
-</ul>
+</ul></nav>
 </div>
 		</div>
 	</div>
 	<div class="downcorner"></div>
 
 </div>
 </div><!-- end main-menu -->
 </div><!-- end main-menu-whole -->