CSS中的可訪問性至關(guān)重要，因?yàn)樗梢源_保所有用戶（包括殘疾人）都可以有效地導(dǎo)航和理解Web內(nèi)容。為此，首先，通過滿足WCAG對比度，可以明智地使用高對比度的顏色，並與WebAim對比檢查器這樣的工具進(jìn)行測試組合，避免僅依賴顏色來傳達(dá)含義，考慮到暗模式和耐受性障礙友好的偏好。其次，通過保持焦點(diǎn)狀態(tài)可見且清晰：可見焦點(diǎn)樣式，避免概述：除非更換，否則將邊框，盒子陰影或背景調(diào)整結(jié)合起來，以提高可見性。第三，確保使用相對單元縮放時(shí)可讀性，避免固定寬度和有問題的絕對定位，而不會阻止在移動(dòng)設(shè)備上調(diào)整大小的文本。第四，通過使用.Visally Hadide類代替顯示：無或可見性：隱藏以使屏幕閱讀器可訪問內(nèi)容。

可訪問性（A11Y）不是一個(gè)額外的功能，它是構(gòu)建網(wǎng)站的核心部分。如果您的CSS妨礙了可訪問性，即使是最語義的HTML也無濟(jì)於事。這是確保您的樣式支持良好可訪問性的方法。

明智地使用高對比度的顏色

顏色對比是最容易忽略的事物之一，也是可讀性最具影響力的東西之一。文本需要與其背景明顯區(qū)分。 WCAG建議至少針對正常文本的4.5：1對比度，大型文本或UI組件的對比度為3：1。

• 使用WebAIM對比檢查器之類的工具來測試組合。
• 不要單獨(dú)依靠顏色傳達(dá)信息（例如，針對所需字段的紅色星號 - 也添加圖標(biāo)或文本）。
• 考慮黑模式用戶 - 在不同的照明條件下測試您的顏色選擇。

有些患有閱讀障礙或視覺障礙的人更喜歡在偏白背景上而不是純黑/白色。因此，儘管高對比度很重要，但可用性也不只是通過一個(gè)公式。

使焦點(diǎn)狀態(tài)可見和清晰

鍵盤導(dǎo)航對許多用戶至關(guān)重要，而焦點(diǎn)樣式是使之成為可能的。默認(rèn)情況下，瀏覽器顯示焦點(diǎn)輪廓，但是設(shè)計(jì)人員通常無需更換它即可將其刪除。

• 始終保持:focus樣式。
• 避免outline: none 。
• 不僅要使用概述 - 結(jié)合邊框，盒子陰影或背景調(diào)整以提高可見性。

例如：

按鈕：聚焦，
輸入：焦點(diǎn){
  大綱：無；
  邊界色：＃005FCC;
  盒子陰影：0 0 0 3PX RGBA（0，95，204，0.3）;
}

這使接口保持清潔，但仍然可以訪問。

確保內(nèi)容在縮放時(shí)保持可讀性

許多用戶依靠瀏覽器縮放來讀取內(nèi)容。您的佈局應(yīng)優(yōu)雅地處理至少200％。避免設(shè)置固定的寬度，該寬度會在放大時(shí)引起水平滾動(dòng)。

• 使用em ， rem或%而不是像素等相對單元進(jìn)行佈局和字體尺寸。
• 避免position: absolute以縮放時(shí)可能隱藏內(nèi)容的方式。
• 通過縮小瀏覽器並檢查所有內(nèi)容是否仍然可用來測試。

另外，不要使用text-size-adjust: none;除非絕對必要 - 它可以防止移動(dòng)用戶自己調(diào)整文本大小。

負(fù)責(zé)任地隱藏元素

有時(shí)，您需要在視覺上隱藏某些內(nèi)容，但要為屏幕讀取器保留它（例如僅輔助技術(shù)所需的標(biāo)籤）。使用display: none或visibility: hidden從可訪問性樹完全將其刪除。

相反，使用這樣的課程：

 。
  位置：絕對；
  寬度：1px;
  身高：1px;
  保證金：-1px;
  填充：0;
  溢出：隱藏；
  剪輯：rect（0 0 0 0）;
  白色空間：nowrap;
  邊界：0;
}

現(xiàn)在，您可以在視覺上.visually-hidden屏幕閱讀器仍然可以使用。

基本上就是這樣。這些不是複雜的規(guī)則，但是當(dāng)始終如一地應(yīng)用時(shí)它們會產(chǎn)生真正的不同。

以上是CSS可訪問性（A11Y）最佳實(shí)踐教程的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！