e0acf54776ecc8d4f488a1ca6a2263dea409ba60 lrnassar Mon May 26 07:52:47 2025 -0700 First draft of the new accessibility page, refs #35572 diff --git src/hg/htdocs/accessibility.html src/hg/htdocs/accessibility.html new file mode 100755 index 00000000000..b25dd6ffd9a --- /dev/null +++ src/hg/htdocs/accessibility.html @@ -0,0 +1,67 @@ +<!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>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> + + +<!--#include virtual="$ROOT/inc/gbPageEnd.html" -->