色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

如何使網格單元不可見并完全排除在流程之外，但對于可訪問性技術來說是可訪問的？

CSS
錢衛國2年前7瀏覽0評論

創建下面的卡片:

enter image description here

問題 即使對新手來說也沒什么難的，直到在等式中加入了可及性變量。 沒有視覺障礙的用戶將理解頂部的兩個標簽分別是全名和姓名拼寫，但是考慮到可訪問性，需要指定上面兩個標簽的含義。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>

它來應用樣式，它看起來會像:

enter image description here

& quot官方名稱& quot和& quot姓名拼寫& quot標簽必須明顯隱藏，不影響網格。 網格的基本初始樣式有:

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

不可接受的解決方案 display: none不是可接受的解決方案，因為AFAIK也將對可訪問性技術隱藏目標項目。 “可見性:隱藏”不能解決問題，因為它只能使項目完全透明:enter image description here

如果我們將寬度:0、高度:0和溢出:隱藏應用于必須不可見的標簽，并將grid-column: 1 / -1應用于具有正式名稱和名稱拼寫的標簽，將出現附加行:enter image description here

即使高度和寬度為零，隱藏的單元格仍然會礙事，但是必須完全排除在網格流之外。

添加位置:絕對除了寬度:0，高度:0和溢出:隱藏為我工作。