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 @@ -1,67 +1,104 @@

Accessibility options in the UCSC Genome Browser

This page provides information about accessibility options in the UCSC Genome Browser, including internal configuration settings and third-party tools. While we are not affiliated with the external tools listed, we offer them as helpful suggestions for improving accessibility. If you know of additional resources that may benefit the community, please contact us at genome-www@soe.ucsc.edu so we can consider including them.

Font and Font Sizes

Fonts: The Genome Browser supports various fonts that can facilitate reading and interpretation of the tracks display. These include the OpenDyslexic font designed by Abbie Gonzalez to mitigate some of the common reading errors caused by dyslexia, and the Atkinson Hyperlegible font, designed by the Braille Institute.

The font can be configured anytime from the tracks display via the blue bar menu Genome Browser > Configure, the keyboard shortcuts C + F, or clicking the button below the image.

GIF showing how to change
 Genome Browser fonts

Font sizes and tooltip sizes: 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.

An example of a tooltip with increased
 text size
+

Keyboard Navigation

+

+The Genome Browser supports keyboard navigation across all main pages, including the Gateway, +Genome Browser tracks display, BLAT, Table Browser, and In-Silico PCR.

+ +

+Skip to main content: Press Tab once on any page to reveal a +"Skip to main content" link. Press Enter 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.

+ +
+ The 'Skip to main content' link appearing at the
+top left of the page when focused via keyboard
+ +

+Menu bar navigation: All items in the top navigation menu bar are accessible by +keyboard. Press Tab to move through menu items. Dropdown menus (such as Tools, +Downloads, Help) open automatically when their parent item receives focus. Press +Enter to follow a link or Escape to close an open dropdown and return +to the menu bar.

+ +
+ The Tools dropdown menu open via keyboard
+focus, showing a white focus ring around the Tools button
+ +

+Screen reader landmarks: Each page is structured with a navigation landmark +for the menu bar and a main landmark for the page content. Screen reader users can +use landmark navigation to jump between these regions (e.g., the D key in NVDA or +the rotor in VoiceOver).

+ +

+Keyboard shortcuts: In addition to standard Tab navigation, the Genome Browser +tracks display supports keyboard shortcuts for common actions. Press ? on the +tracks page to see available shortcuts.

+

Display and Color

Inverted colors and high contrast display: 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 Operating System and Browser Accessibility Display Modes page on the A11Y Project website. High contrast and Filtered colors mode may also be helpful.

An example of the Browser tracks display
 with inverted image colors

Visual Snow Syndrome (VSS): Some users have found the Visual Snow Relief Overlay tool useful in reducing symptoms of the visual snow condition. The tool creates a static noise overlay that allows users to interact with the windows and controls underneath the overlay. However, please note the Medical Disclaimer regarding the use of this tool.