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/heatmap.html src/hg/htdocs/goldenPath/help/heatmap.html index 8abbd1746f2..59eeafc8d62 100755 --- src/hg/htdocs/goldenPath/help/heatmap.html +++ src/hg/htdocs/goldenPath/help/heatmap.html @@ -4,31 +4,31 @@ <!-- Relative paths to support mirror sites with non-standard GB docs install --> <!--#include virtual="$ROOT/inc/gbPageStart.html" --> <h1>Positional Heatmap Display</h1> <h2>Overview</h2> <p>The standard display mode for a bigBed track is a simple block or exon/intron marker in the window. Extra fields in the bigBed, however, can contain a variety of additional data. When data in the extra fields meet the schema described below, then the simple block display can be replaced with a positional heatmap. The heatmap provides a sparse 2-dimensional grid for information like expression of allele-specific point mutations across a transcript.</p> <div class="text-center"> <a href="https://genome.ucsc.edu/s/jcasper/heatmap_example" target="_blank"> - <img src="/images/heatmap_example.png" style="width:80%;max-width:1083px"></a> + <img alt="Heatmap track showing a color-coded grid of expression values across genomic positions" src="/images/heatmap_example.png" style="width:80%;max-width:1083px"></a> </div> <h2>Contents</h2> <h6><a href="#extrafields">The Extra Fields</a></h6> <h6><a href="#gettingStarted">Getting Started</a></h6> <h6><a href="#displaying">Displaying Your Heatmap</a></h6> <h6><a href="#troubleshooting">Troubleshooting</a></h6> <a id="extrafields"></a> <h2>The Extra Fields</h2> <p>A heatmap bigBed file starts with the standard 12 BED fields, but adds 7 more. In a heatmap, the standard BED <code>blockCount</code>, <code>blockSizes</code>, and <code>chromStarts</code> fields define the columns of the grid (one column per block), while the extra field <code>_rowCount</code> defines the number of rows. The remaining extra fields provide row labels, @@ -222,31 +222,31 @@ chr1 1200 2400 T2 1000 - 1200 2400 0 4 1,100,100,1 0,200,900,1199 2 "Case 1","Case 2" -5,0,5 #0000ff,#ffffff,#ff0000 ,0.1,-2,,,1.1,-3.5,, ,"0.1, negligible","-2, low",,,"1.1 marginal","-3.5 low",, "Example on transcript 2" </pre> <p>Here is this example in a <a href="examples/heatmap.bed" target="_blank">BED file</a> (using tabs as field separators), and the corresponding <a href="examples/heatmap.bb" target="_blank">bigBed file</a>. The bigBed was created from the BED file using the following command:</p> <pre> bedToBigBed -tab -type=bed12+ -as=heatmap.as heatmap.bed chrom.sizes heatmap.bb </pre> <p>A copy of heatmap.as is available <a href="examples/heatmap.as" target="_blank">here</a>. chrom.sizes files for most assemblies can be found on our <a href="https://hgdownload.soe.ucsc.edu" target="_blank">download server</a>. </p> <div class="text-center"> <a href="https://genome.ucsc.edu/s/jcasper/heatmap_example" target="_blank"> - <img src="/images/heatmap_example2.png" style="width:80%;max-width:1083px"></a> + <img alt="Heatmap track with customized color scale displaying allele-specific data" src="/images/heatmap_example2.png" style="width:80%;max-width:1083px"></a> </div> <a id="displaying"></a> <h2>Displaying your heatmap</h2> <p>Once you have created a bigBed file, you need to tell the Genome Browser to display it as a heatmap rather than a standard bigBed track. This is done by adding the <a href="trackDb/trackDbHub.v3.html#style"><code>style heatmap</code></a> setting to your track's trackDb configuration. Without this setting, the browser will render the file as an ordinary bigBed track and the heatmap extra fields will be ignored.</p> <p>The most common way to load a heatmap track is through a <a href="hubBasics.html">track hub</a>. A minimal trackDb entry for a heatmap track looks like this:</p> <pre> track myHeatmap shortLabel My Heatmap