651f959d7553ee0256b1e0b37ffa83d64709511d
lrnassar
  Mon Mar 16 17:57:16 2026 -0700
Adding accessible labels to form controls across main CGI pages. Extends cheapcgi and hui libraries with aria-label support for track visibility dropdowns, and adds <label> elements to hgBlat, hgTables, hgPcr, and hgGateway form controls. Also adds Form Control Labels section to accessibility page. refs #37253

diff --git src/hg/htdocs/accessibility.html src/hg/htdocs/accessibility.html
index da8d10d8a43..c544c4000e9 100755
--- src/hg/htdocs/accessibility.html
+++ src/hg/htdocs/accessibility.html
@@ -65,30 +65,47 @@
 <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>Form Control Labels</h2>
+<p>
+Form controls across the Genome Browser's main tools — including BLAT, Table Browser,
+In-Silico PCR, and the Gateway — are labeled for screen reader compatibility. When
+navigating by <b>Tab</b>, screen readers will announce each control's purpose
+(e.g., "Query type, combobox" rather than just "combobox").</p>
+
+<p>
+Clicking a label's text will also focus or activate its associated control. For example,
+clicking "Forward primer:" on the In-Silico PCR page focuses the primer input field, and
+clicking "Flip reverse primer:" toggles the checkbox.</p>
+
+<p>
+On the Genome Browser tracks display, track visibility dropdowns (Hide/Dense/Squish/Pack/Full)
+are labeled with the track's name, so screen reader users can identify which track they are
+adjusting.</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>