CUNY Academic Commons

One of the items from the accessibility audit (instance ID 510188-01) mentions the following about the cv-top-row blocks on a user's CV page:

The [cv-top-row block] is visually a description list but is not marked up as a description list.

When content is presented as a description list, or a clearly related collection of terms and their descriptions, marking it up using semantic description list HTML elements helps assistive technology users to navigate and orient themselves within a page of content. Screen reader users can navigate to (or over) description lists when they are correctly marked up. Also, when reading content in a description list, assistive technology provides rich information about how long the list is and where the user is in the list.

The new markup should resemble something like:

<dl>
    <!-- wp:cac/cv-top-row -->
    <dt>Social</dt>
    <dd>
        <!-- wp:social-links -->
        <ul class="wp-block-social-links">
            <!-- wp:social-link {"service":"orcid"} /-->
            <!-- wp:social-link {"service":"google-scholar"} /-->
            <!-- wp:social-link {"service":"linkedin"} /-->
            <!-- wp:social-link {"service":"facebook"} /-->
            <!-- wp:social-link {"service":"instagram"} /-->
            <!-- wp:social-link {"service":"x"} /-->
        </ul>
        <!-- /wp:social-links -->
    </dd>
    <!-- /wp:cac/cv-top-row -->

    <!-- wp:cac/cv-top-row -->
    <dt>Contact</dt>
    <dd>
        <!-- wp:paragraph {"placeholder":"(555) 212-9876 * test@example.com"} -->
        <p></p>
        <!-- /wp:paragraph -->
    </dd>
    <!-- /wp:cac/cv-top-row -->

    <!-- wp:cac/cv-top-row -->
    <dt>Website</dt>
    <dd>
        <!-- wp:paragraph {"placeholder":"https://example.com"} -->
        <p></p>
        <!-- /wp:paragraph -->
    </dd>
    <!-- /wp:cac/cv-top-row -->
</dl>

Switching out the markup in the cv-top-row blocks could be difficult and would require something similar to what was done in #25349. All three cv-top-row blocks would also need to be wrapped around with the <dl> element as shown in the example above.

Jeremy, can you take a look and see how difficult this would be to implement?