5709a7858d5c197721be66d5218a79124abadb70 lrnassar Tue Mar 17 08:46:31 2026 -0700 Adding alt text to images across static documentation pages, CGI headers, markdown docs, and Pandoc templates. Content images receive AI-generated descriptive alt text; decorative images (icons, spacers, toggles) receive alt="" per WCAG best practice. Also adds Image Descriptions section to the accessibility page, and fixes Pandoc Lua writers to output alt attributes. 67 files, covering help docs, news archive, ENCODE pages, portal pages, and session examples. refs #37254 diff --git src/hg/hgGateway/hgGateway.html src/hg/hgGateway/hgGateway.html index 83dd228cb7d..5231cb6a3bf 100644 --- src/hg/hgGateway/hgGateway.html +++ src/hg/hgGateway/hgGateway.html @@ -1,317 +1,317 @@ <!-- For determining width of scrollbar (if there is one) --> <div id="sbTestContainer"> <div id="sbTestContainerDPlain"></div> <div id="sbTestContainerDScroll" style="overflow: scroll;"> <div id="sbTestContainerDInsideScroll"></div> </div> </div> <div id="pageContent"> <div id="selectSpeciesSection" class="jwColumn" style="width: 450px;"> <div class="jwSectionTitle"> Browse/Select Species </div> <div class="jwSectionContents"> <div id="popSpeciesTitle" class="jwSubsectionTitle"> Popular Species </div> <div class="jwSubsectionContents"> <div class="jwIconWrapper"> <div class="jwIconSprite jwIconSpriteHuman"></div> <div class="jwIconSpriteLabel">Human</div> </div> <div class="jwIconWrapper"> <div class="jwIconSprite jwIconSpriteMouse"></div> <div class="jwIconSpriteLabel">Mouse</div> </div> <div class="jwIconWrapper"> <div class="jwIconSprite jwIconSpriteRat"></div> <div class="jwIconSpriteLabel">Rat</div> </div> <div class="jwIconWrapper"> <div class="jwIconSprite jwIconSpriteZebrafish"></div> <div class="jwIconSpriteLabel">Zebrafish</div> </div> <div class="jwIconWrapper"> <div class="jwIconSprite jwIconSpriteFly"></div> <div class="jwIconSpriteLabel">Fruitfly</div> </div> <div class="jwIconWrapper"> <div class="jwIconSprite jwIconSpriteWorm"></div> <div class="jwIconSpriteLabel">Worm</div> </div> <div class="jwIconWrapper"> <div class="jwIconSprite jwIconSpriteYeast"></div> <div class="jwIconSpriteLabel">Yeast</div> </div> <br>Search through thousands of genome assemblies <span id="speciesSearchInfo"> <svg style="height:1.1em; vertical-align:top" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <circle cx="12" cy="12" r="10" stroke="#1C274C" stroke-width="1.5"/> <path d="M12 17V11" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round"/> <circle cx="1" cy="1" r="1" transform="matrix(1 0 0 -1 11 9)" fill="#1C274C"/> </svg> </span> <div> <input id="speciesSearch" value="" size=42> </div> <a href="/assemblySearch.html" id="assemblySearchLink" style="text-decoration: none;"> <div style="padding: 0px; display: flex; align-items: center; margin-top: 12px;"> <p style="margin: 0; padding-right: 0px; color: blue; text-decoration: underline;" title="Not finding your assembly on the Gateway page? Visit the Genome assembly search and request page to request it. Ensure you have a GCA_ or GCF_ identifier from NCBI.">Unable to find a genome? Send us a request.</p> - <img src="/images/magnify.png" + <img alt="" src="/images/magnify.png" style="height: 16px; width: 16px; margin-top: 0px; margin-left: 5px;" title="Not finding your assembly on the Gateway page? Visit the Genome assembly search and request page to request it. Ensure you have a GCA_ or GCF_ identifier from NCBI."> </div> </a> </div> <!-- Recent Genomes Panel (replaces species tree) --> <div id="recentGenomesTitle" class="jwSubsectionTitle" style="display: none;"> Recent Genomes <span id="recentGenomesInfo"> <svg style="height:1.1em; vertical-align:top" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <circle cx="12" cy="12" r="10" stroke="#1C274C" stroke-width="1.5"/> <path d="M12 17V11" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round"/> <circle cx="1" cy="1" r="1" transform="matrix(1 0 0 -1 11 9)" fill="#1C274C"/> </svg> </span> </div> <div id="recentGenomesSection" class="jwSubsectionContents" style="display: none;"> <div id="recentGenomesPanel" class="recentGenomesPanel"> <div id="recentGenomesList" class="recentGenomesList"> <!-- Recent genomes will be populated by JavaScript --> </div> </div> </div> <div id="connectedHubsTitle" class="jwSubsectionTitle" style="display: none;"> Connected Hub Assemblies <span id="connectedHubsInfo"> <svg style="height:1.1em; vertical-align:top" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <circle cx="12" cy="12" r="10" stroke="#1C274C" stroke-width="1.5"/> <path d="M12 17V11" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round"/> <circle cx="1" cy="1" r="1" transform="matrix(1 0 0 -1 11 9)" fill="#1C274C"/> </svg> </span> </div> <div id="connectedHubsSection" class="jwSubsectionContents" style="display: none;"> <div id="connectedHubsPanel" class="recentGenomesPanel"> <div id="connectedHubsList" class="recentGenomesList"> <!-- Connected hubs will be populated by JavaScript --> </div> </div> </div> <a href="#showSpeciesTree" id="speciesTreeLink">Show species tree</a> <!-- Species tree underneath the recent genomes section --> <div id="representedSpeciesTitle" class="jwSubsectionTitle" style="display: none;"> Commonly used assemblies </div> <div id="speciesGraphic" class="jwSubsectionContents" style="display: none;"> <div id="sliderWidgetContainer" class="jwSliderWidget"> <div id="sliderSvgContainer" class="jwSliderIcon"> <svg id="sliderSvg" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1" height="53" width="30"> <rect id="sliderRectangle" ry="3" y="1.5" x="1.5" height="50" width="24" style="fill: none; stroke: #222222; stroke-width: 3;"></rect> <path id="sliderTriangle" d="m 2.5,24 0,6 4,-3 z" style="fill: #222222; stroke: #222222; stroke-width: 3"></path> </svg> </div> <!-- sliderSvgContainer --> <div class="jwRainbowSlider" id="rainbowSlider"> <!-- JS will populate this --> </div> </div> <!-- sliderWidgetContainer --> <div class="jwSpeciesPicker" id="speciesPicker"> <div id="speciesTreeContainer" class="jwColumn" style="overflow: visible;"> <svg id="speciesTree" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <!-- The y coordinates of these will be overwritten by JS. --> <!-- I tried creating them in JS, but then the image style url('#clipWhatever') didn't work. --> <clipPath id="clipHuman"> <rect x="2" y="0" width="65" height="65"></rect> </clipPath> <clipPath id="clipMouse"> <rect x="2" y="0" width="65" height="65"></rect> </clipPath> <clipPath id="clipFly"> <rect x="2" y="0" width="65" height="65"></rect> </clipPath> <clipPath id="clipWorm"> <rect x="2" y="0" width="65" height="65"></rect> </clipPath> <clipPath id="clipYeast"> <rect x="2" y="0" width="65" height="65"></rect> </clipPath> <clipPath id="clipMonkey"> <rect x="2" y="0" width="65" height="65"></rect> </clipPath> <clipPath id="clipHedgehog"> <rect x="2" y="0" width="65" height="65"></rect> </clipPath> <clipPath id="clipPig"> <rect x="2" y="0" width="65" height="65"></rect> </clipPath> <clipPath id="clipCow"> <rect x="2" y="0" width="65" height="65"></rect> </clipPath> <clipPath id="clipOrca"> <rect x="2" y="0" width="65" height="65"></rect> </clipPath> <clipPath id="clipHorse"> <rect x="2" y="0" width="65" height="65"></rect> </clipPath> <clipPath id="clipDog"> <rect x="2" y="0" width="65" height="65"></rect> </clipPath> <clipPath id="clipWalrus"> <rect x="2" y="0" width="65" height="65"></rect> </clipPath> <clipPath id="clipBat"> <rect x="2" y="0" width="65" height="65"></rect> </clipPath> <clipPath id="clipElephant"> <rect x="2" y="0" width="65" height="65"></rect> </clipPath> <clipPath id="clipManatee"> <rect x="2" y="0" width="65" height="65"></rect> </clipPath> <clipPath id="clipArmadillo"> <rect x="2" y="0" width="65" height="65"></rect> </clipPath> <clipPath id="clipKangaroo"> <rect x="2" y="0" width="65" height="65"></rect> </clipPath> <clipPath id="clipBird"> <rect x="2" y="0" width="65" height="65"></rect> </clipPath> <clipPath id="clipLizard"> <rect x="2" y="0" width="65" height="65"></rect> </clipPath> <clipPath id="clipFrog"> <rect x="2" y="0" width="65" height="65"></rect> </clipPath> <clipPath id="clipFish"> <rect x="2" y="0" width="65" height="65"></rect> </clipPath> <clipPath id="clipEbola"> <rect x="2" y="0" width="65" height="65"></rect> </clipPath> </defs> <style> text { stroke:none; fill: black; font-size: 12px; text-anchor: end; letter-spacing: 0.025em; cursor: pointer; } text:hover, text.selected { fill: #31469A; /* rainbow dark blue: */ font-weight: bold; } text.trackHubsLink { text-anchor: start; } line { stroke: #4b759d; stroke-width: 1; } line:hover { stroke-width: 2; } </style> <!-- Tree inserted here by JS --> </svg> </div> <!-- speciesTreeContainer --> </div> <!-- speciesPicker --> </div> <!-- speciesGraphic --> </div> <!-- jwSectionContents --> </div> <!-- selectSpeciesSection --> <div id="findPositionSection" class ="jwColumn"> <div id="findPositionTitle" class="jwSectionTitle"> Find Position </div> <div id="findPositionContents" class="jwSectionContents" style="display: none;"> <!-- To avoid empty containers jumping around, hide first. --> <div id="findPosInputContainer" style="display: inline-block;"> <div id="selectAssemblyLabel" class="jwInputLabel">Assembly</div> <select id="selectAssembly"> </select> <div class="vertSpacerAbovePosition"></div> <div class="jwInputLabel"> Position/Search Term <span style="font-size: smaller"> (<a href="../../goldenPath/help/query.html">Examples</a>) </span> </div> <input id="positionInput" value="" size="40"> <div class="jwCurrentPos"> Current position: <span id="positionDisplay" class="jwPosDisplay"></span> <i id="copyPosition" class="fa fa-copy jwTextBlue" title="Copy the current position into the input above"></i> </div> </div> <div class="jwGoButtonContainer" title="Go to the Genome Browser"> <div class="jwGoButton"> GO </div> <i class="jwGoIcon fa fa-play fa-2x"></i> </div> <div id="surveyContainer" class="jwSurveyContainer"></div> <div class="vertSpacerBelowPosition jwClearBoth"></div> <div id="descriptionTitle" class="jwDescriptionTitle"> <div class="jwFloatLeft"> <b><span id="descriptionGenome"></span> Genome Browser</b> - <span id="descriptionDb"></span> assembly </div> <div class="jwFloatRight" style="margin-left: 5px;"> <a id="chromInfoLink" class="jwAnchor" href="hgTracks?chromInfoPage=&hgsid=$hgsid"> <div class="jwWhiteButton"> View sequences </div> </a> </div> <div class="jwClearBoth"></div> </div> <div id="descriptionText" class="jwDescriptionText"> </div> </div> </div> </div> <div style="clear: both;"></div>