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/inc/hgCollectionHelpInclude.html src/hg/htdocs/inc/hgCollectionHelpInclude.html index fec8f0456e8..e36078cb5a7 100755 --- src/hg/htdocs/inc/hgCollectionHelpInclude.html +++ src/hg/htdocs/inc/hgCollectionHelpInclude.html @@ -20,31 +20,31 @@ <a name="Intro"></a> <h2>Introduction</h2> <p>The <a href="../cgi-bin/hgCollection">Track Collection Builder</a> (My Data > Track Collection Builder) is a tool that allows multiple tracks to be copied and grouped together into one composite track or "collection." A <a href="../goldenPath/help/trackDb/trackDbHub.html#compositeTrack" target="_blank" >composite track</a> can be thought of as a container for grouping a set of similar-type annotation tracks. </p> <a name="Video"></a> <h3> Quick video demo</h3> <p> <!--#if expr="${SERVER_NAME} = /-china/" --> <a href='../../../videos/2_RiIY07omY.mp4'> - <img src=../../images/videoIcon.png></a> + <img alt="" src=../../images/videoIcon.png></a> Visit our <a href="/videos/" target="_blank">Video Page</a>. <!--#else --> <iframe width="560" height="350" src="https://www.youtube.com/embed/2_RiIY07omY?rel=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> </p> <p> Visit our <a href="https://www.youtube.com/channel/UCQnUJepyNOw0p8s2otX4RYQ/videos" target="_blank">YouTube channel</a> for more videos. <!--#endif --> </p> <a name="SupportedData"></a> <h3>Supported Data Types</h3> <p> Only the following continuous-value graphing track types can be added to a collection:</p> @@ -117,32 +117,31 @@ <li>Add & remove tracks</li> <ul> <li>To add a track to a collection, click the green "plus" <i class="jstree-icon jstree-themeicon fa fa-plus jstree-themeicon-custom"></i> symbol to the left of each track, or right-click (or select multiple, 'command + click', 'shift + click') and <button type="button">Add</button>.</li> <li> To remove a track from a collection, click the red "minus" <i class="jstree-icon jstree-themeicon fa fa-minus-square jstree-themeicon-custom"></i> symbol to the left of each track, or right-click and <button type="button">Delete</button>. <li>A single track can be added/duplicated multiple times into a single collection.</li> <li>A single track can be added to multiple collections, where various comparison views can be applied (see 'Step 4' below).</li> <li>Drag and drop to reorder tracks within a collection.</li> <li>To add tracks directly from the browser, right click on the track to see options. <p> - <img src="../../images/hgCollectionRtClickAddFromBrowser.jpg" - alt="hgCollectionRtClickAddFromBrowser.jpg"></p> + <img alt="Right-click context menu showing option to add track to collection" src="../../images/hgCollectionRtClickAddFromBrowser.jpg"></p> </ul> </ul> <a name="BrowserOptions"></a> <h3>Step 3: Browser viewing options</h3> <p> When viewing collections within the browser, the following viewing options are available:</p> <ul> <li><strong>Re-order collections within the browser</strong></li> <p> Drag and drop collections (composite tracks) <i>within the browser</i> to rearrange the order in which they appear in the browser.</p> <li><strong>Sorting by similarity</strong></li> @@ -158,32 +157,31 @@ <p> To sort by magnitude, right-click the collection in the browser window and select <button type="button">Sort by Magnitude</button>. For the given region visible in the browser window, tracks within the collection will sort in order of magnitude, with the highest in magnitude at the top of the subtracks in the collection where magnitude reflects the total number of pixels set when drawing each track. </p> </ul> <p> <strong>Tip:</strong> Displaying collection names in the browser:</p> <div class="row"> <!-- Left column --> <div class="col-md-4" > <p> - <img src="../../images/hgCollectionMouseOver.jpg" - alt="hgCollection Mouse-over in browser window.jpg"></p> + <img alt="Track Collection Builder showing mouseover tooltip on a collection item" src="../../images/hgCollectionMouseOver.jpg"></p> </div> <!-- end left column --> <!-- Middle column --> <br> <div class="col-md-4" style="background-color:#eef0f2;"> <p> Once a collection has been created and tracks have been added to it, click <button class="gbButtonGo" type="button">GO</button> (upper right) to view the collection in the browser window. In the browser, mouse-over the gray vertical buttons at the left window frame to see the name of each collection.</p><br> </div> <!-- end middle column --> <!-- Right column --> <div class="col-md-4"> <p></p> </div> <!-- end right column --> </div> <!-- end row --><br> @@ -194,64 +192,61 @@ <li><strong>Track Color:</strong></li> <p> Track color for all subtracks in a collection can be set by double-clicking the collection folder in the right window of the Track Collection Builder, which will display a pop-up dialog box. In the pop-up, a color can be set for the subtracks in the collection. Color will be applied as a gradient to subtracks in the collection (e.g., if red is selected, the subtrack graphs will appear in varied shades of red within the browser window).</p> <p> To revert back to the original track color, change the color picker to '#000000'. To change the track color to black rather than any non-black original color, set the color picker to any shade of black besides '#000000', such as '#000001'. For example, if a track's original color is green, you can change it to red with the color picker. To change this track back to the original color (green), set the color picker to '#000000'. If you instead want to change that track to black, select any shade of black in the color picker, such as '#000001'.</p> <p> - <img src="../../images/hgCollectionClickToEditColor.jpg" - alt="hgCollection double click folder icon to edit color"></p> + <img alt="Track Collection Builder with color editing icon on a folder" src="../../images/hgCollectionClickToEditColor.jpg"></p> <p> - <img src="../../images/hgCollectionSetColor.jpg" - alt="hgCollection name, description and color pop-up editor"></p> + <img alt="Color picker dialog for setting track collection display color" src="../../images/hgCollectionSetColor.jpg"></p> <li><strong>Merge methods (aggregate/overlay graphing view options):</strong></li> <dl> <dt>None</dt> <dd>Default setting; no overlay/merge is applied. Subtracks appear as individual tracks within the collection/composite.</dd> <dt>Transparent</dt> <dd>Subtrack graphs are merged together with transparent overlay views.</dd> <dt>Solid</dt> <dd>Subtrack graphs are merged together with solid overlay views.</dd> <dt>Stacked</dt> <dd>Subtrack graphs are layered horizontally with solid overlay views for each subtrack.</dd> <dt>Add</dt> <dd>Subtrack graphs are layered horizontally and merged into one solid overlay color; the silhouette of 'stacked.' For this 'add' view, there is also the option to configure how missing data are treated (see section below). </dd> <dt>Subtract</dt> <dd>The first (top) subtrack is subtracted from the sum of the others. Note: Re-order collection subtracks in the 'Collected Tracks' pane to change which subtract is at the top. For this 'subtract' view, there is also the option to configure how missing data are treated (see section below).</dd> </dl> <div class="row"> <!-- Left column --> <div class="col-md-4" > <p> - <img src="../../images/hgCollectionMergeMethod.jpg" - alt="hgCollection drop-down options for Merge Method "></p> + <img alt="Merge method dropdown options for combining tracks in a collection" src="../../images/hgCollectionMergeMethod.jpg"></p> </div> <!-- end left column --> <!-- Middle column --> <br> <div class="col-md-4" style="background-color:#eef0f2;"> <p>Tracks in collections can be displayed with <a href="/goldenpath/help/trackDb/trackDbHub.html#multiWig" target="_blank"> multiWig aggregate/overlay</a> "merge" methods (stacked, transparent, etc.) as well as new add & subtract options.</p><br> </div> <!-- end middle column --> <!-- Right column --> <div class="col-md-4"> <p></p> </div> <!-- end right column --> </div> <!-- end row --><br>