可能損害可訪問性的 CSS 實踐

CSS 已經成為一種無所不能的語言。 最初作為向文本和其他設計元素添加基本樣式的一種方式，現在功能更多。

我們可以用它來製作幾乎任何可以想像到的佈局。 過去需要 JavaScript 或瀏覽器插件的特殊效果和交互性現在得到原生支持。 該語言已經從一種基本工具變成了每個網站背後的基礎技術之一。

但與任何強大的工具一樣，CSS 也會產生意想不到的副作用。 可訪問性是最受關注的領域之一。 有些實現確實弊大於利。

考慮到這一點，讓我們看看一些可能會損害可訪問性的 CSS 做法。 它們包括在開始編寫代碼之前需要仔細考慮的常見功能。 讓我們開始吧！

使用content屬性顯示重要文本

CSS content屬性提供了一種巧妙的方式來為元素添加視覺增強功能。 例如，您可以將它與偽元素結合使用，在一段文本或列表項之前添加一個圖標。 它還可以顯示圖像或文本字符串。

但最後一個可能特別麻煩。 通過content屬性添加的文本不包含在文檔對像模型 (DOM) 中。 這意味著屏幕閱讀器等輔助技術可能無法識別它。

這適用於純裝飾物品。 但是，如果文本為頁面提供了重要的上下文，則可能會導致可訪問性問題。 用戶可能會錯過重要信息。

因此，最好避免使用content屬性來顯示文本。 除非您確信它不會干擾用戶理解頁面的能力。

創建強烈閃爍的動畫序列

動畫是 CSS 取得重大發展的領域。 曾經屬於第三方庫領域的效果現在可以相對輕鬆地製作。 由於它們本身就受支持，因此它們可以利用硬件加速等功能來提高性能。

基本的過渡和變換可以創造奇蹟，營造一種氛圍並吸引用戶的注意力。 並且還可以藉助 JavaScript 構建令人難以置信的逼真效果。

但某些動畫風格可能會產生負面影響。 對於一些用戶來說，過多的移動可能會讓人迷失方向——或者更糟。 強烈的閃光或頻閃效應會導致癲癇發作。 這在網絡上是可能的——就像在電影、電視節目和視頻遊戲中一樣。

WCAG 2.0 提供了一些研究支持的指導，用於創建不會引發癲癇發作或其他不良反應的動畫。 例如，建議將演示文稿設置為每秒閃爍不超過 3 次，同時保持較小的尺寸並避免使用紅色。

值得慶幸的是，這並不限制我們用動作給用戶留下深刻印象的能力。 仍有很多機會可以改進我們的工作。 但是必須仔細檢查所使用的動畫類型及其潛在影響。

交互元素上不直觀的:hover或:focus狀態

CSS 擅長樣式化交互元素。 考慮一下超鏈接和表單字段等日常用品的可能性。 與默認外觀相比，它們可以定製到無法識別的程度。

這一切都很好。 但考慮當用戶與元素交互時會發生什麼也很重要。 想像一下，單擊一個不提供任何視覺提示的按鈕來確認發生了什麼。 或者使用鍵盤在不突出顯示當前鏈接的菜單中切換。

它們可能很簡單，但這些微交互有助於為用戶提供上下文。 確認按鈕點擊或了解您的光標所關注的菜單項只是兩個示例。 當訪問者瀏覽網站時，每一個都會帶來自信感。

交互元素的初始樣式只是成功的一半。 為:hover和:focus偽類提供直觀的樣式來完善用戶體驗。

值得注意的是，這些風格應該很容易被察覺。 實際上，這意味著不僅僅使用顏色作為指標。 添加動畫、輪廓或圖標有助於確保沒有人被遺漏。

將無障礙設計的基礎知識視為理所當然

我們都去過那裡。 項目截止日期即將到來，您需要完成任務。 在發布競賽中，一些與輔助功能相關的項目可能會漏掉。

通常是無障礙設計的基礎知識被拋在了後面。 那些設計師可能認為理所當然並假設的 CSS 實踐已經達到標準。

主要示例包括基本要素，例如清晰的排版和可接受的顏色對比度。 如果不考慮和測試這些項目，網站可能不像您想像的那樣易於訪問。

這就是為什麼值得花一些額外的時間來審查您網站樣式的更廣泛方面。 即使某個項目通過了“眼球”檢查，也要加倍努力進行審核。 您可能會驚訝於您會發現多少細微改進的機會。

這是關於負責任地使用 CSS

因為 CSS 是如此強大，所以很容易被它所提供的可能性所吸引。 既然可以製作電影般的東西，為什麼還要滿足於基本動畫呢？ 我們怎麼能不喜歡使用它來生成內容的便利呢？

這一切都歸結為同理心和責任感。 與任何工具一樣，CSS 可以做很多事情。 但僅僅因為我們可以實現特定功能並不意味著它適合輔助功能。 我們生活在一個世界上，各行各業的人都會消費我們建造的東西。 我們的工作是確保他們能夠毫無障礙地這樣做。

好的一面是，避免上述做法是每個人都可以做到的。 在大多數情況下，這是一個考慮我們所做事情的潛在影響的問題。 從那裡，測試為我們提供了進一步完善事物所需的數據。

CSS 的存在是為了使可訪問性更容易。 這完全取決於我們如何選擇使用它。