@gurupanguji

Technical Specification: Enhance Media Semantics (#211)

Overview

This specification details the update to media elements, specifically in the reviews/index.html file, to use semantic HTML5 <figure> and <figcaption> elements. This change explicitly links images to their descriptive text and metadata, improving accessibility and SEO.

Technical Details

1. Review Entries

Location: reviews/index.html Target: <a class="review-entry wide"> wrapping <div class="entry-image"> and <div class="entry-info"> Replacement: Change the <a class="review-entry"> block so that the outer structural container for the image and text is a <figure>, and the text/metadata is wrapped in a <figcaption>. Since the whole block is a link, the structure will be:

<a href="..." class="review-entry wide" style="text-decoration: none; display: contents;">
  <figure class="review-entry wide" style="margin: 0;">
    <div class="entry-image">...</div>
    <figcaption class="entry-info">...</figcaption>
  </figure>
</a>

Using display: contents; on the <a> tag ensures it doesn’t disrupt the CSS grid layout of the parent .review-list, while allowing the .review-entry (now a <figure>) to act as the grid item.

2. “Coming Soon” Entries

Location: reviews/index.html Target: <div class="review-entry coming-soon"> Replacement: Change the outer <div> to a <figure>, and wrap the tag, title, and description inside a <figcaption>.

Verification Requirements