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/htdocs/goldenPath/help/hubBasics.html src/hg/htdocs/goldenPath/help/hubBasics.html index 772e5035124..33647779c19 100755 --- src/hg/htdocs/goldenPath/help/hubBasics.html +++ src/hg/htdocs/goldenPath/help/hubBasics.html @@ -134,67 +134,67 @@ type bigBed 12 + bigDataUrl gtexCaviar.chr7_155799529-155812871.bb </code></pre> <p>The <code>type</code> line consists of three parts: <ul> <li>"bigBed" is the basic track type. <li>"12" indicates how many standard BED fields are included in your file. You may need to change this to match the number of standard BED fields in your file. <li>"+" tells the genome browser there are extra fields beyond the standard fields. If your file has no extra fields, replace this with a "." (e.g. type bigBed 12 .). </ul> <p>Here is a screenshot of what this basic bigBed track looks like displayed in the Genome Browser: <br> -<img src="/images/bigBedReqSettings.png"> +<img alt="Browser display of a basic bigBed track configured with required settings only" src="/images/bigBedReqSettings.png"> <p> The bigBed format also offers a wide range of customization options for the display, from decorators to highlights. Additionally, it offers extensive <a href="/goldenPath/help/hubQuickStartFilter.html"> filter controls</a>, <a href="/goldenPath/help/hubQuickStartSearch.html"> searching options</a>, and mouseover configurations. Our <a href="trackDb/trackDbHub.html" target="_blank">trackDb documentation</a> contains a full listing of settings available for the format. <p> Here is the bigBed configuration with some commonly used settings, including filtering and mouseover configuration. <p><pre><code>track bigBedCommonSettings shortLabel bigBed Common Settings longLabel A bigBed Example with Commonly Used Settings visibility pack type bigBed 12 + bigDataUrl gtexCaviar.chr7_155799529-155812871.bb filterLabel.cpp CPP (Causal Posterior Probability) filter.cpp 0 filterLabel.geneName Gene Symbol filterText.geneName * mouseOver $name; CPP: $cpp </code></pre> <p> And here is what that track looks like in the Genome Browser: <br> -<img src="/images/bigBedCommonSettings.png"> +<img alt="Browser display of a bigBed track configured with commonly used optional settings" src="/images/bigBedCommonSettings.png"> <p> These common settings added options to the track configuration pop-up: <br> -<img src="/images/bigBedCommonSettingsPopUp.png"> +<img alt="Track configuration pop-up showing filtering and mouseover options for a bigBed track" src="/images/bigBedCommonSettingsPopUp.png"> <h2>bigWig Tracks</h2> <p> You can use <a href="bigWig.html">bigWig</a> to tracks to display continuous annotations, such as RNA-seq expression, conservation scores, or other genome signal scores. You can build a bigWig using one of two plain-text formats: <a href="wiggle.html" target="_blank">wiggle</a> or <a href="bedgraph.html" target="_blank">bedGraph</a>. <h3>Building a bigWig</h3> <p> <ol> <li>Download the <code>wigToBigWig</code> utility for your system type from our <a href="https://hgdownload.gi.ucsc.edu/downloads.html#utilities_downloads">download @@ -229,31 +229,31 @@ longLabel A bigWig Example with Commonly Used Settings visibility pack type bigWig -20 10.003 bigDataUrl hg38.phyloP100way.chr7_155799529-155812871.bw color 60,60,140 </code></pre> <p>The <code>type</code> line consists of two parts: <ul> <li>"bigWig" is the basic track type <li>"-20 10.003" indicates the minimum and maximum of the data in the bigWig </ul> <p> Here is what this looks like visualized in the Genome Browser: <br> -<img src="/images/bigWigReqSettings.png"> +<img alt="Browser display of a basic bigWig signal track with required settings only" src="/images/bigWigReqSettings.png"> <a name="grouping"></a> <h2>Grouping tracks</h2> <p> Next, we'll provide a basic overview of how to group your tracks using composite tracks and super tracks. This will allow you to pull similar data together under a single container. <h3>Composite Tracks</h3> <p> Composite tracks can hold multiple tracks of the same type. For example, you use a composite to group together a set of RNA-seq experiments, including replicates. <p> @@ -279,31 +279,31 @@ visibility dense track compositeBigWig2 bigDataUrl c.chr7_155799529-155812871.bw shortLabel bigWig #2 longLabel bigWig in Composite Track Example #2 parent compositeExample type bigWig 0 1 color 0,255,0 autoScale group visibility dense </code></pre> <p> This composite track configuration will display like so: <br> -<img src="/images/compositeBigWig.png"> +<img alt="Composite track displaying multiple bigWig subtracks grouped together in the browser" src="/images/compositeBigWig.png"> <h3>Super Tracks</h3> <p> Super tracks are a more general type of container. They can contain tracks of different types and even composites. <p> Configuring a basic super track is quite similar to composite tracks. There are two key components of a composite: (1) the line "superTrack on" in the parent track stanza, and (2) including "parent superTrackName" for each track that will be part of the super track. <p><pre><code>track superTrackExample shortLabel Super Track Example longLabel A super-track of related data of various types together: individual, multiWig, and composite superTrack on show @@ -333,31 +333,31 @@ longLabel A composite-contained bigWig in a super track example #1 parent superTrackCompositeBigWig on type bigWig 0 1 track superTrackCompositeBigWig2 bigDataUrl c.chr7_155799529-155812871.bw shortLabel ST bigWig composite #2 longLabel A composite-contained bigWig in a super track example #2 parent superTrackCompositeBigWig on type bigWig 0 1 </code></pre> <p> Loading the example hub with this super track configuration looks like this: <br> -<img src="/images/superTrackEx.png"> +<img alt="Super track grouping bigBed, composite bigWig, and multiWig tracks in a folder hierarchy" src="/images/superTrackEx.png"> <a name="description"></a> <h2>Creating description pages</h2> <p> If you plan to share your track hub more widely, you will want to create a description page for your tracks. A description page could contain a short description of what the data represents, how the data was generated, a link to the associated paper, or a contact email for questions regarding the data. Multiple tracks can use the same description page. <p> We provide an <a href="examples/hubExamples/templatePage.html">example description html</a> that you can modify with the details for your track. Once you've modified this example html for your track, add an <code>html</code> to the corresponding track stanza: <p><pre><code>track bigWigExample