為什么

盡管一些網(wǎng)頁設(shè)計工具為按鈕等元素指定了 CSS 高度值，但設(shè)置高度或最大高度實際上可能會違反  WCAG 2.2 Success Criterion 1.4.4 Resize Text.

標準要求：

除了字幕和文本圖片外，文本可以在不使用輔助技術(shù)的情況下放大到 200% 而不會丟失內(nèi)容或功能。

如果對影響元素計算高度和寬度的 CSS 屬性使用固定值，當(dāng)文字大小增大時，元素內(nèi)部的文字會被截斷。

還不信服？

你可能會想："但當(dāng)我把瀏覽器放大到 200% 時，按鈕文本看起來很好！"這可能是這個標準的一個常見誤解。我以前不知道瀏覽器縮放只是問題的一部分！

深入了解 SC 1.4.4: Resize Text ，它指出我們（“作者”）必須處理用戶只增加文本大小的情況，因為他們的瀏覽器（或其他“用戶代理”）可能沒有縮放功能。

文檔說：

如果用戶代理不提供縮放功能，但允許用戶更改文字大小，那么作者有責(zé)任確保在調(diào)整文字大小時內(nèi)容仍然可用。

這個標準也是為什么 CSS font-size 屬性使用 rem單位，而 line-height 屬性不使用單位的一個原因。在沒有瀏覽器縮放等機制的情況下，文字大小必須可以調(diào)整到 200%。

但怎么辦？處理起來比你想象的更容易！

代碼演示

注意：為了這些演示的目的，請假裝我們使用 rem 單位設(shè)置 font-size。我在這里使用 px 單位，以免繼承我的網(wǎng)站的基本字體樣式。

演示 1

首先，我們看看在 font-size 、 height 、 line-height 和 width 使用固定值的情況下，當(dāng)文字大小增大時會發(fā)生什么。在文字大小增大之前，按鈕看起來很棒！但文字大小增大后就不那么好看了。

<button style="font-size: 16px; height: 36px; line-height: 18px; width: 82px;">
  delete all
</button>

演示 2

現(xiàn)在，我們使用相同的代碼，并嘗試在 line-height 和 padding 中不使用單位，以影響按鈕的 height 和 width 。當(dāng)文字大小加倍時，我們應(yīng)該不會看到文字被截斷。

<button style="font-size: 16px; line-height: 1.125; padding: 8px;">
  delete all
</button>

1111111111111

另一種方法

理解文檔中提到的一種技術(shù)是 C28：使用 em 單位指定文本容器的大小。根據(jù)我的經(jīng)驗，隨著視口尺寸的縮小，我發(fā)現(xiàn)這種方法更難維護。

想象一下，一個具有大文本大小設(shè)置的移動設(shè)備。使用 em 單位設(shè)置的文本容器可能會比視口寬。如果文本被設(shè)備大小截斷，這意味著我們有違反不只一個而是兩個 WCAG 2.2 標準的風(fēng)險：

• SC 1.4.4 調(diào)整文本大小
• SC 1.4.10 重排

在使用技術(shù) C28 時，防止出現(xiàn)這種情況的一種方法是利用 CSS 屬性，如 max-width ，但我個人更傾向于使用盡可能少的 CSS 屬性（以降低長期維護成本）。與使用 width 和 max-width 相比，我們可能只需使用 padding ，然后讓瀏覽器執(zhí)行其默認的魔法，使元素適合視口。