目标

创建以下卡片：

问题

即使对于新手来说也没有什么困难，直到将可访问性变量添加到等式中。没有视觉障碍的用户将理解顶部的两个标签分别是全名和名称拼写，但是考虑到可访问性，需要指定上面两个标签的含义。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>

如果要应用样式，它将看起来像：

“官方名称”和“名称拼写”标签必须明显隐藏在不影响网格的地方。网格的基本初始样式为：

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

不可接受的解决方案

• display: none不是可接受的解决方案，因为AFAIK也会隐藏目标项以防止辅助功能技术。
• visibility: hidden不会解决这个问题，因为它只会使项目完全透明：

• 如果我们将width: 0，height: 0和overflow: hidden应用于标签，该标签必须是不可见的，并且将grid-column: 1 / -1应用于具有官方名称和名称拼写的标签，则会出现额外的行：

即使高度和宽度为零，隐藏的单元格仍然会碍事，但是必须完全排除在网格流之外。