這是我們關於表單可訪問性的小系列文章中的第 3 篇文章。如果你錯過了第二篇文章，請查看 使用 :focus-visible 管理使用者焦點。在這篇文章中，我們將介紹在瀏覽表單時使用螢幕閱讀器以及一些最佳做法。
什麼是螢幕閱讀器？
當您在網路上瀏覽時，您可能聽說過「螢幕閱讀器」一詞。您此時甚至可能正在使用螢幕閱讀器對您正在建置的體驗執行手動輔助功能測試。螢幕閱讀器是一種 AT 或輔助技術。
螢幕閱讀器將數位文字轉換為合成語音或點字輸出，這在點字閱讀器中很常見。
在此範例中，我將使用 Mac VO。 Mac VO (VoiceOver) 內建於所有 Mac 裝置； iOS、iPadOS 和 macOS 系統。根據執行 macOS 的裝置類型，開啟 VO 可能會有所不同。我正在寫這篇文章的運行 VO 的 Macbook Pro 沒有觸控欄，所以我將根據硬體使用快捷鍵。
在 macOS 上旋轉 VO
如果您使用的是更新的 Macbook Pro，您機器上的鍵盤將如下圖所示。
您將首先按住 cmd 鍵，然後快速按三次 Touch ID。
如果您使用的是帶有 TouchBar 的 MBP (MacBook Pro)，您將使用該快捷方式 cmd+fn+f5 打開 VO。如果您在桌上型電腦或筆記型電腦上使用傳統鍵盤，按鍵應該相同，否則您必須在輔助使用設定中開啟 VO。
如果您點擊「使用 VoiceOver」按鈕，您就可以很好地使用 VO 來測試您的網站和應用程式。需要記住的一件事是 VO 針對 Safari 進行了最佳化。話雖如此，請確保在執行螢幕閱讀器測試時 Safari 是您正在使用的瀏覽器。 iPhone 和 iPad 也是如此。
從一開始就可以透過兩種主要方式使用 VO。我個人使用它的方式是導航到一個網站並結合使用 tab, control, option, shift 和箭頭鍵，我可以僅使用這些鍵有效地瀏覽體驗。
導航體驗的另一種常見方法是使用 旁白轉子。 Rotor 是一項設計可直接導航到您想要體驗的位置的功能。透過使用 Rotor，您無需遍歷整個站點，將其視為「選擇您自己的冒險」。
修飾鍵
修飾鍵是您使用 VO 中不同功能的方式。預設修飾鍵或 VO is control + option 但您可以將其變更為大寫鎖定或選擇兩個選項交替使用。
使用轉子
為了使用轉子，您必須使用修飾鍵和字母“U”的組合。對我來說，我的修改鍵是 caps lock。我按 caps lock + U 轉子會為我旋轉。一旦轉子出現，我就可以使用左右箭頭導航到我想要的體驗的任何部分。
按標題等級導航
導航體驗的另一種巧妙方法是透過標題層級。如果您使用修飾鍵 + 的組合 cmd + H 您可以根據標題層級遍歷文件結構。您也可以按 shift 依照這樣的順序，修飾鍵 + shift + cmd + H.
歷史和最佳實踐
表單是 HTML 中最強大的原生元素之一。無論您是在頁面上搜尋某些內容、提交購買表格或提交調查。表單是網路的基石，也是為我們的體驗引入互動性的催化劑。
Web 表單的歷史可以追溯到 1995 年 XNUMX 月，當時它在 HTML 2.0 規範。有人說網路的美好時光，至少我是這麼說的。 Stephanie Stimac 寫了一篇很棒的文章 碎雜誌 標題為“標準化 Select 及其他：本機 HTML 表單控制項的過去、現在和未來“。
以下是建立可存取的網頁表單時應遵循的 5 個最佳實踐。
- 確保您使用的是表單元素。預設情況下，表單是可存取的，並且應始終在 div 上使用。
<form>
<!-- Form controls are nested here. -->
</form>
- 請務必使用
for和id屬性上label的和input以便將它們聯繫起來。這樣，如果您點擊/點擊標籤，焦點將轉移到輸入，您可以開始輸入。
<label for="name">Name:</label>
<input type="text" id="name" name="name" required aria-required/>- 如果需要某個欄位才能讓表單完整，請使用 required 屬性和 aria-required 屬性。這些將限製表單的提交。 aria-required 屬性明確告訴輔助技術該欄位是必要的.
<input type="text" id="name" name="name" required aria-required/>- 使用，
:focus,:focus-within和:focus-visibleCSS 偽類用於管理和自訂使用者接收焦點的方式。
form:focus-within {
background-color: #cfffcf;
}
input:focus-within {
border: 10px solid #000000;
}
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
outline: 2px solid crimson;
border-radius: 3px;
}- A
button用於呼叫操作，例如提交表單。用它！不要使用創建按鈕div的。 Adiv根據定義是一個分隔符號。它沒有固有的可訪問性屬性。
演示
如果您想查看程式碼，請導航至 VoiceOver 示範 GitHub 儲存庫。如果您想使用您選擇的螢幕閱讀器嘗試上面的演示，請查看 使用 VoiceOver 導航 Web 表單.
螢幕閱讀器軟體
以下是您可以在給定作業系統上使用的各種類型的螢幕閱讀器軟體的清單。如果您不選擇 Mac 機器，還有 Windows 和 Linux 以及 Android 裝置的選項。
NVDA
NVDA 是 NV Access 的螢幕閱讀器。目前僅在執行 Microsoft Windows 7 SP1 及更高版本的 PC 上支援。如需更多存取權限，請查看 NV Access 網站上的 NVDA 版本 2024.1 下載頁面!
顎
“我們需要一個更好的螢幕閱讀器”
- 匿名
如果您理解上面的參考內容，那麼您就處於良好的夥伴關係中。根據 JAWS 網站，簡而言之就是這樣：
「JAWS（透過語音獲取工作）是世界上最受歡迎的螢幕閱讀器，專為因視力喪失而無法看到螢幕內容或無法使用滑鼠進行導航的電腦使用者而開發。 JAWS 為 PC 上最受歡迎的電腦應用程式提供語音和點字輸出。您將能夠在辦公室、遠端桌面或家中瀏覽互聯網、編寫文件、閱讀電子郵件以及建立簡報。
親自查看 JAWS 如果解決方案適合您的需求，請務必嘗試！
旁白
「講述人」是 WIndows 11 隨附的內建螢幕閱讀器解決方案。
逆戟鯨
Orca 是一個螢幕閱讀器，可以在運行 GNOME 的不同 Linux 發行版上使用。
「Orca 是一款免費、開源、靈活且可擴展的螢幕閱讀器，可透過語音和可刷新點字存取圖形桌面。
Orca 與支援輔助技術服務供應商介面 (AT-SPI) 的應用程式和工具包搭配使用，AT-SPI 是 Linux 和 Solaris 的主要輔助技術基礎架構。支援 AT-SPI 的應用程式和工具包包括 GNOME Gtk+ 工具包、Java 平台的 Swing 工具包、LibreOffice、Gecko 和 WebKitGtk。正在尋求 AT-SPI 對 KDE Qt 工具包的支援。
對講
Google TalkBack 是 Android 裝置上使用的螢幕閱讀器。有關打開和使用它的更多信息， 在 Android 輔助使用支援網站上查看這篇文章.
瀏覽器支持
如果您正在尋找對 HTML 元素和 ARIA（可訪問的富互聯網應用程式）屬性的實際瀏覽器支持，我建議 HTML 版 caniuse.com 和 ARIA 的輔助使用支援 取得有關瀏覽器支援的最新 4-1-1。請記住，如果瀏覽器不支援該技術，螢幕閱讀器很可能也不支援。
數字A11Y 可以幫助總結瀏覽器和螢幕閱讀器資訊及其文章， 螢幕閱讀器和瀏覽器！哪一個是可訪問性測試的最佳組合？
外部連結
https://support.apple.com/guide/voiceover/with-the-voiceover-rotor-mchlp2719/mac
https://www.w3.org/TR/wai-aria/
https://www.w3.org/WAI/standards-guidelines/aria/
https://support.google.com/accessibility/android/answer/6283677?hl=en
https://support.google.com/accessibility/android/answer/6283677?hl=en
