Bug #25420
openBug #25126: VPAT Initial Report
CV Editor: cv-top-row blocks should use a description list
0%
Description
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?
Updated by Jeremy Felt 17 days ago
I've pushed a fix for this in https://github.com/cuny-academic-commons/cac/commit/978650d8fc48e424585de6b800b57cfb63931e1d
- Introduce a
cac/cv-top-rowsblock to wrap top row content in<dl>. - Modify
cac/cv-top-row blockto use<dt>for the header, and<dd>for the content alongside it. - Modify the default template used when creating CVs to include these changes.
- Filter the render of existing CVs to correct the markup as it is displayed.
- Automatically migrate block content when the CV is next edited in the CV editor.
Existing CVs will render as expected via filtered markup. New CVs will be created with the correct markup.
Updated by Raymond Hoh 14 days ago
Thanks Jeremy! On CDEV, I tested all the available CVs and all of them have the correct definition list markup now.
I only found one issue with a CV where the Social Links unordered list in the definition list was not wrapped with <ul class="wp-block-social-links">: https://cunyac.reclaimhosting.dev/members/scottvoth/. This causes a slight, visual issue where the social links are rendered vertically instead of horizontally.
I've added the output of the cac/cv-top block for this CV to help debug the issue:
<!-- wp:cac/cv-top -->
<div class="wp-block-cac-cv-top"><!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column {"width":"20%"} -->
<div class="wp-block-column" style="flex-basis:20%"><!-- wp:cac/cv-profile-image {"imageURL":"d1ae5173-88d8-41b8-acc9-99f65238706d-spiral-gravatar.jpeg"} /-->
<!-- wp:cac/cv-shortlink {"shortlink":"testmember1","userId":"455"} /-->
<!-- wp:cac/cv-profile-navigation {"userId":"455"} /--></div>
<!-- /wp:column -->
<!-- wp:column {"width":"80%"} -->
<div class="wp-block-column" style="flex-basis:80%"><!-- wp:cac/cv-heading-group -->
<div class="wp-block-cac-cv-heading-group"><!-- wp:heading {"placeholder":"Your name","anchor":"test-member"} -->
<h2 id="test-member" class="wp-block-heading">Test Member</h2>
<!-- /wp:heading -->
<!-- wp:paragraph {"placeholder":"(preferred pronouns)"} -->
<p>(he/him/his)</p>
<!-- /wp:paragraph --></div>
<!-- /wp:cac/cv-heading-group -->
<!-- wp:cac/cv-group -->
<div class="wp-block-cac-cv-group"><!-- wp:heading {"level":3,"anchor":null} -->
<h3 class="wp-block-heading"></h3>
<!-- /wp:heading -->
<!-- wp:paragraph {"placeholder":"Short bio"} -->
<p>A test member of the CUNY Academic Commons.</p>
<!-- /wp:paragraph -->
<!-- wp:social-links -->
<ul class="wp-block-social-links"><!-- wp:social-link {"service":"x"} /-->
<!-- wp:social-link {"service":"wordpress"} /-->
<!-- wp:social-link {"service":"behance"} /--></ul>
<!-- /wp:social-links --></div>
<!-- /wp:cac/cv-group -->
<!-- wp:cac/cv-top-row -->
<div class="wp-block-cac-cv-top-row"><div class="cac-cv-top-row-header"><p class="section-heading">Contact</p></div><div class="cac-cv-top-row-content"><!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->
<!-- wp:social-link {"url":"wordpress.com/scottvoth","service":"wordpress"} /-->
<!-- wp:social-link {"url":"twitter.com/tisvott","service":"x"} /--></div></div>
<!-- /wp:cac/cv-top-row -->
<!-- wp:cac/cv-top-row -->
<div class="wp-block-cac-cv-top-row"><div class="cac-cv-top-row-header"><p class="section-heading">Blog</p></div><div class="cac-cv-top-row-content"><!-- wp:paragraph {"placeholder":"https://example.com"} -->
<p><a href="https://inperpetualbeta.cunyac.reclaimhosting.dev">https://</a>testing blog@reclaim<a href="https://inperpetualbeta.cunyac.reclaimhosting.dev">hosting.dev</a></p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:cac/cv-top-row --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:cac/cv-top -->