5be4aee1392162b38bbd1318ea87d40f2ec63eb3 lrnassar Fri Mar 20 14:29:52 2026 -0700 Minor punctuation fix on accessibility page per QA feedback. refs #37254 diff --git src/hg/htdocs/accessibility.html src/hg/htdocs/accessibility.html index 0fc0916ab78..fff5707c982 100755 --- src/hg/htdocs/accessibility.html +++ src/hg/htdocs/accessibility.html @@ -1,130 +1,130 @@ <!DOCTYPE html> <!--#set var="TITLE" value="Accessibility options in the UCSC Genome Browser" --> <!--#set var="ROOT" value="." --> <!-- Relative paths to support mirror sites with non-standard GB docs install --> <!--#include virtual="$ROOT/inc/gbPageStart.html" --> <h1>Accessibility options in the UCSC Genome Browser</h1> <p> 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.</p> <h2>Font and Font Sizes</h2> <p> <b>Fonts:</b> The Genome Browser supports various fonts that can facilitate reading and interpretation of the tracks display. These include the <a target="_blank" href="https://opendyslexic.org/">OpenDyslexic</a> font designed by Abbie Gonzalez to mitigate some of the common reading errors caused by dyslexia, and the <a target="_blank" href="https://fonts.google.com/specimen/Atkinson+Hyperlegible"> Atkinson Hyperlegible</a> font, designed by the <a href="https://www.brailleinstitute.org/freefont/" target="_blank">Braille Institute</a>.</p> <p> The font can be configured anytime from the tracks display via the blue bar menu <b>Genome Browser </b> > <b>Configure</b>, the keyboard shortcuts <b>C + F</b>, or clicking the <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>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> <b>Visual Snow Syndrome (VSS):</b> Some users have found the <a target="_blank" href="https://github.com/belvederef/visual-snow-relief-overlay">Visual Snow Relief Overlay</a> 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 <a target="_blank" href="https://github.com/belvederef/visual-snow-relief-overlay/blob/main/DISCLAIMER.md"> Medical Disclaimer</a> regarding the use of this tool.</p> <h2>Image Descriptions</h2> <p> Images throughout our static documentation pages — including help guides, tutorials, the news archive, and portal pages — include descriptive alt text for screen reader compatibility. When a screen reader encounters an image, it will announce a brief description of the image content (e.g., "RepeatMasker track in dense mode showing color-coded repeat classes on a single -line") rather than the filename. Purely decorative images such as icons and spacers are marked +line") rather than the filename. Purely decorative images, such as icons and spacers, are marked to be skipped by screen readers.</p> <!--#include virtual="$ROOT/inc/gbPageEnd.html" -->