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/trackDescriptions/bigRmskTrackDesc.html src/hg/htdocs/goldenPath/trackDescriptions/bigRmskTrackDesc.html index f3746c37cb8..e2d9e2ececf 100644 --- src/hg/htdocs/goldenPath/trackDescriptions/bigRmskTrackDesc.html +++ src/hg/htdocs/goldenPath/trackDescriptions/bigRmskTrackDesc.html @@ -7,102 +7,102 @@ <h4>Context Sensitive Zooming</h4> <p> This track employs a technique which chooses the appropriate visual representation for the data based on the zoom scale, and or the number of annotations currently in view. The track will automatically switch from the most detailed visualization ('Full' mode) to the denser view ('Pack' mode) when the window size is greater than 45kb of sequence. It will further switch to the even denser single line view ('Dense' mode) if more than 500 annotations are present in the current view. </p> <h4>Dense Mode Visualization</h4> <p> In dense display mode, a single line is displayed denoting the coverage of repeats using a series of colored boxes. The boxes are colored based on the classification of the repeat (see below for legend). <br> <br> -<img height="30" width="1250" src="/images/rmskDense.png"> +<img height="30" width="1250" alt="RepeatMasker track in dense mode showing color-coded repeat classes on a single line" src="/images/rmskDense.png"> </p> <h4>Pack Mode Visualization</h4> <p> In pack mode, repeats are represented as sets of joined features. These are color coded as above based on the class of the repeat, and the further details such as orientation (denoted by chevrons) and a family label are provided. This family label may be optionally turned off in the track configuration. <br> <br> -<img height="100" width="1250" src="/images/rmskPack.png"> +<img height="100" width="1250" alt="RepeatMasker track in pack mode showing joined repeat features with orientation chevrons" src="/images/rmskPack.png"> <br> <br> The pack display mode may also be configured to resemble the original UCSC repeat track. In this visualization repeat features are grouped by classes (see below), and displayed on separate track lines. The repeat ranges are denoted as grayscale boxes, reflecting both the size of the repeat and the amount of base mismatch, base deletion, and base insertion associated with a repeat element. The higher the combined number of these, the lighter the shading. <br> <br> -<img height="100" width="1250" src="/images/rmskOrigPack.png"> +<img height="100" width="1250" alt="RepeatMasker track in original pack mode with grayscale boxes grouped by repeat class" src="/images/rmskOrigPack.png"> </p> <h4>Full Mode Visualization</h4> <p> In the most detailed visualization repeats are displayed as chevron boxes, indicating the size and orientation of the repeat. The interior grayscale shading represents the divergence of the repeat (see above) while the outline color represents the class of the repeat. Dotted lines above the repeat and extending left or right indicate the length of unaligned repeat model sequence and provide context for where a repeat fragment originates in its consensus or pHMM model. If the length of the unaligned sequence is large, an interruption line and bp size is indicated instead of drawing the extension to scale. <br> <br> -<img height="125" width="1250" src="/images/rmskFull.png"> +<img height="125" width="1250" alt="RepeatMasker track in full mode showing chevron boxes with divergence shading" src="/images/rmskFull.png"> </p> <p> For example, the following repeat is a SINE element in the forward orientation with average divergence. Only the 5' proximal fragment of the consensus sequence is aligned to the genome. The 3' unaligned length (384bp) is not drawn to scale and is instead displayed using a set of interruption lines along with the length of the unaligned sequence. </p> -<img src="/images/rmskExample1.svg"> +<img alt="Diagram of a forward-strand SINE element with only the 5-prime fragment aligned" src="/images/rmskExample1.svg"> <p> Repeats that have been fragmented by insertions or large internal deletions are now represented by join lines. In the example below, a LINE element is found as two fragments. The solid connection lines indicate that there are no unaligned consensus bases between the two fragments. Also note these fragments form the 3' extremity of the repeat, as there is no unaligned consensus sequence following the last fragment. </p> -<img src="/images/rmskExample2.svg"> +<img alt="Diagram of a LINE element split into two fragments connected by join lines" src="/images/rmskExample2.svg"> <p> In cases where there is unaligned consensus sequence between the fragments, the repeat will look like the following. The dotted line indicates the length of the unaligned sequence between the two fragments. In this case the unaligned consensus is longer than the actual genomic distance between these two fragments. </p> -<img src="/images/rmskExample3.svg"> +<img alt="Diagram of two repeat fragments with dotted line indicating unaligned consensus" src="/images/rmskExample3.svg"> <p> If there is consensus overlap between the two fragments, the joining lines will be drawn to indicate how much of the left fragment is repeated in the right fragment. </p> -<img src="/images/rmskExample4.svg"> +<img alt="Diagram showing consensus overlap between two repeat fragment copies" src="/images/rmskExample4.svg"> <p> The following table lists the repeat class colors: </p> <table> <thead> <tr> <th style="border-bottom: 2px solid #6678B1;">Color</th> <th style="border-bottom: 2px solid #6678B1;">Repeat Class</th> </tr> </thead> <tr> <td bgcolor="#1F77B4"></td>