HTML 表格是改進 HTML 表格可訪問性的好方法。它們幫助人們理解否則難以閱讀的信息。例如,用戶可以通過快速掃描查看每個單元格中的信息如何與表格中的其他信息相關聯。但這也讓盲人更難理解這些細胞是如何組合在一起的。

如果他們很難到達您的餐桌,您就會阻止很多人使用您的產品。我們可以通過正確編寫 HTML 代碼使屏幕閱讀器能夠理解來解決這個問題。為此,您需要知道如何使 HTML 表格更易於使用。您將在本文中了解有關 HTML 表格可訪問性以及如何製作可訪問表格的更多信息。

如何改進 HTML 表格可訪問性

有意義地使用 alt 屬性

編寫內容的人決定使用綠色複選標記圖像來顯示計劃功能何時屬於某個計劃的一部分,但他們忘記添加 alt 屬性。 AT 的用戶無法判斷何時添加了功能,因為單元格中的圖像不會告訴他們任何信息。

要解決此問題,請確保圖像具有 alt 文本,告訴用戶圖像的內容是關於。即使看起來正確,“複選標記”的 alt 屬性也沒有任何意義。我改用了“包含的功能”這個短語。 (雖然我認為使用圖標字體比使用圖像更好。)

為該表添加標題

該表看起來有一個標題,上面寫著“選擇一個計劃, ” 但該文本實際上是標題級別 h3>。將它移動到表格> 元素內並將其標記為標題> 讓輔助技術(例如屏幕閱讀器)以編程方式知道該文本與表格> 相關。

包括每一列的標題文本

在這種情況下,表中的第一個單元格是空的。屏幕閱讀器讀出第 1 列第 1 列。全做完了。但是這些細胞中的其他信息呢?需要一個說明它們是什麼的標題。

從視覺的角度來看,內容的作者不希望第一列有標題,但是當在下一個單元格的內容之前說出列的名稱時,AT 用戶會受益。

檢查您的(con)文本

屏幕閱讀器並不總是按照您期望的方式使用縮寫和標點符號。這張表向我展示了兩個有趣的例子。首先,團隊計劃的用戶數看起來像“2-50”,但由於未顯示連字符,因此宣佈為“250”。為了確保這一點很清楚,我們可以添加單詞“to”作為隱藏的幫助文本,為了安全起見,我們可以對 AT 隱藏連字符。

什麼是 HTML 表格可訪問性?

有些功能可以讓殘障人士更輕鬆地使用軟件和網站。其中一些功能包括鍵盤快捷鍵、文本到語音、色盲用戶訪問、字幕、單聲道音頻等。那麼,HTML 表格的可訪問性到底是什麼?

屏幕閱讀器是一種輔助工具,可幫助盲人了解網站或應用程序上的內容。這些有用的工具會從 HTML 標籤中大聲讀取信息。但是屏幕閱讀器如何理解 HTML 表格?

屏幕閱讀器在閱讀 HTML 表格時是從左到右、從上到下的。正因為如此,他們通常很難弄清楚一個單元格在哪裡,或者它與另一個單元格或標題的關係。因此,開發人員應該編寫正確的 HTML 代碼,以便幫助殘障人士的技術能夠讀取這些代碼。在下一部分中,我們將討論如何做到這一點。

By Maisy Hall

我是一名自由作家。 我也是素食主義者和環保主義者。 每當我有時間時,我都會專注於冥想。