如何让网格单元格不可见且脱离布局流但仍支持无障碍技术？

制作如下样式的卡片：
[目标卡片样式]

不考虑无障碍需求的话，新手也能轻松做出这个卡片。视觉正常的用户能看懂顶部两个标签是全名和拼音，但为了符合无障碍要求，必须明确这两个标签的含义，用<dl>标签看起来很合适。

<div class="PersonCard" tabindex="0">

  <div class="PersonCard-Avatar"></div>
    
  <dl class="PersonCard-Metadata">
    
    <dt class="PersonCard-Metadata-Key PersonCard-Metadata-Key__Invisible">Official name</dt>
    <dd class="PersonCard-Metadata-Value PersonCard-Metadata-Value__OfficialName">Gutierrez Jaunita</dd>
        
    <dt class="PersonCard-Metadata-Key PersonCard-Metadata-Key__Invisible">Name spell</dt>
    <dd class="PersonCard-Metadata-Value PersonCard-Metadata-Value__OfficialNameSpell">gut'....</dd>
        
    <dt class="PersonCard-Metadata-Key">
      <svg class="PersonCard-Metadata-Key-Icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 15.11">
        <path d="M0 0v15.07h20V0zm18.49 1.55L10 8.74 1.52 1.55v-.06h17z" />
      </svg>
      <span class="PersonCard-Metadata-Key-Label">Email</span>
    </dt>
        
    <dd class="PersonCard-Metadata-Value">rogelio.buffington@cumque.gov</dd>
    <dt class="PersonCard-Metadata-Key">
      <svg class="PersonCard-Metadata-Key-Icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 17.83 20">
        <path d="M2.68.3l-1 .86 4 4.76 1-.87a1.07 1.07 0 00.12-1.51L4.18.43A1.06 1.06 0 002.68.3zM4.46 13.8c3.72 4.43 9.12 7.35 11.11 5.68l.28-.24-4-4.78a1.08 1.08 0 01-1.22-.16 24.48 24.48 0 01-3-3.14A24.33 24.33 0 015 7.64a1.07 1.07 0 010-1.23L1 1.63l-.2.24C-1.19 3.54.74 9.37 4.46 13.8zM13.46 13.15l-1 .86 4 4.76 1-.87a1.07 1.07 0 00.13-1.51L15 13.28a1.07 1.07 0 00-1.54-.13z" />
      </svg>
      <span class="PersonCard-Metadata-Key-Label">Phone</span>
    </dt>
    <dd class="PersonCard-Metadata-Value">4041386640</dd>
  </dl>
</div>

应用样式后的效果如下：
[应用样式后的卡片效果]

"Official name"和"Name spell"这两个标签需要视觉隐藏，但不能影响网格布局。网格的基础初始样式如下：

display: grid;
grid-template-columns: auto minmax(0, 1fr);
row-gap: 4px;
column-gap: 8px;
align-items: center;

• display: none不可行，因为它会同时把目标元素从无障碍技术中隐藏。
• visibility: hidden解决不了问题，它只会让元素完全透明，仍会占据网格空间：
  [visibility:hidden效果示意图]
• 给需要隐藏的标签设置width: 0、height: 0和overflow: hidden，同时给全名和拼音的<dd>设置grid-column: 1 / -1，会出现额外的空行：
  [宽高为0+grid-column设置后的效果示意图]

即便把隐藏单元格的宽高设为0，它还是会干扰布局，必须让这些元素完全脱离网格布局流。

内容的提问来源于stack exchange，提问作者Takeshi Tokugawa YD