揭開屏幕讀取器的神秘面紗：可訪問的表格和最佳實踐

>這是我們有關可訪問的Web表單的系列中的第三部分。 如果您錯過了上一篇文章，請查看“以以下方式管理用戶焦點：focus-Visible”。本文探討了表格中的屏幕閱讀器導航，並概述了可訪問表格設計的最佳實踐。

編輯註：本文已更新以反映當前的最佳實踐，並包括其他代碼示例。 歡迎您的反饋！ >

了解屏幕讀取器

屏幕讀取器是將數字文本轉換為音頻或盲文的輔助技術（AT）。 它們是視力受損用戶的重要工具。 本指南以Mac Vo（VoiceOver）為例，是Apple設備的內置屏幕讀取器。 激活和使用VO的特定方法可能會根據您的設備而略有不同。

>

激活MacOS上的畫外音 在新的MacBook Pros上，通過按住命令鍵並迅速按Touch ID三次來激活VO。 較舊的MacBook專業人士（帶觸摸欄）使用快捷方式CMD FN F5。 對於傳統鍵盤，請使用同等快捷方式或通過可訪問性設置啟用VO。 激活後，VO提供了一個介紹性消息。

>您可以使用選項卡，控件，選項，換檔和箭頭鍵的組合進行導航，也可以利用VoiceOver轉子進行更直接的導航。 Voiceover中的

修飾符鍵

>默認的配音修改器鍵是控制選項，但是可以將其自定義為caps鎖定或兩者的組合。

>使用配音轉子

>

>使用修飾符鍵“ U”（例如，蓋帽u）激活轉子。 使用左和右箭頭鍵在不同的選項中導航。

>通過標題級別導航

>使用修飾符鍵CMD H通過標題級別導航。使用修飾符鍵移動CMD H向上移動文檔結構。 > Web表單的最佳實踐

Web表單是Web交互的基礎。 以下是創建可訪問表格的一些最佳實踐：

1. > 顯式與隱式標籤：for當隱式標記（使用<label>...</label>>屬性屬性屬性到鏈接標籤和輸入）是可以接受的，而顯式標籤（
）通常是優選的。

<label for="name">Name:</label> <input type="text" id="name">

2. 必需字段：使用強制性字段的required屬性。 始終提供一個視覺提示（例如，星號），以指示所有用戶所需的字段。

<label for="email">Email (required):<span style="color:red">*</span></label> <input type="email" id="email" required>

>
3. 使用本機HTML按鈕：始終使用元素進行表單提交；避免使用樣式為按鈕的Divs。 <button></button>
>演示和資源

>有關代碼示例，請訪問。 使用VoiceOver的實時演示可以在

上可用，以

。 > 屏幕讀取器軟件選項>

> nvda： Windows的免費和開源屏幕讀取器。

> jaws：

>一個流行的Windows商業屏幕讀取器。
• 敘述者：
> Windows 11的內置屏幕讀取器。
• orca：>基於GNOME的Linux發行版的屏幕讀取器
• 對話： Android的內置屏幕讀取器。
• >瀏覽器和屏幕讀取器兼容性
• > 有關HTML元素和ARIA屬性的瀏覽器支持的信息，請諮詢Caniuse.com和ARIA的可訪問性支持文檔。 請記住，屏幕閱讀器的兼容性取決於瀏覽器支持。 Digitala11y的文章“屏幕讀取器和瀏覽器！哪種是可訪問性測試的最佳組合？”提供有用的見解。

確認

感謝Adrian Roselli，Karl Groves，Todd Libby，Scott O’Hara，Kev Bonnett等人的貢獻。

進一步閱讀

Apple VoiceOver支持

> wai-aria創作實踐

HTML

• > wai-aria
• Google Talkback支持
• 了解屏幕讀取器交互模式
• 必需的屬性要求

以上是揭開屏幕讀取器的神秘面紗：可訪問的表格和最佳實踐的詳細內容。更多資訊請關注PHP中文網其他相關文章！