無障礙小百科

用你的金手指打開一扇扇任意門

焦點 Part2 — 物件的類型與快速導覽

A11y新手村🏕

Published in

a11yvillage

Oct 14, 2022

在上篇焦點入門的文章中有提到全盲視障者會透過不斷的移動焦點建立起虛擬世界裡的心理地圖。但一個 UI 畫面上少則幾十個物件，多則有可能上百個物件，單單使用Tab鍵跳轉上一個與下一個物件指令，這樣線性的在物件間跳轉是很沒有效率的移動，光從頭到尾遊走一遍就會花費非常多的時間。

那是否還有什麼其他移動方式呢？我們可以怎麼輔助螢幕閱讀器使用者更快速的建立虛擬心理地圖呢？

物件不是只有文字 — 類型資訊具有提示功能

平時設計時，我們會以視覺外觀來提示物件的類型，向使用者傳達這個物件是什麼用途。而螢幕閱讀器使用者則是需依靠物件本身所帶有的類型資訊來提示，當焦點移動到一個物件上時，螢幕閱讀器會先讀出物件上的標籤文字而後再讀出其類型，因此當使用者讀到類型提示後便可以大略了解如何與這個物件互動與其作用。

例如當移動到我們的部落格標題連結時螢幕閱讀器會讀「無障礙新手村標題第 2 級連結」，使用者便能了解來到了個帶有標題的連結，讀到此資訊直覺會想「標題耶，應該很重要」、「連結點了會到其他頁面吧」這類的預期目的或作用。

在網頁的視覺呈現上，我們使用 css 給與物件樣式來提示物件類型，但對無障礙設計而言，適當的設定物件的角色屬性才能給予螢幕閱讀器有用的資訊以轉換提供給其使用者了解。

📍常見的物件類型包括

🙅 不可聚焦

標題：用於針對一個容器的介紹性內容或一組導航連結。例如頁面主要區塊開頭文字、logo 或圖標處。

🙆 可聚焦

連結：可以通過 enter 鍵觸發。連結用於將使用者定向到新資源或同一資源內的其他區塊。例如變更網址、下載檔案、移動焦點到頁面內的其他元素上。
按鈕：可以通過 space 鍵觸發。按鈕用於執行程式化動作來產生資料或狀態的改變。例如開啟或關閉新區塊、送出或清除表單。
編輯區：用於提供輸入單行或多行文字。
選擇鈕：用於在多個選項中選擇單個項目。
核取方塊：用於在多個選項中選擇多個項目。
下拉選單：用於在多個選項中選擇項目。

裹著羊皮的狼 — 導致預期與結果落差

這不一定只會在全盲視障者的操作體驗時才會遇到，讓我們想像一個情境：有位來造訪您頁面的使用者小伍，他使用鍵盤導航瀏覽內容。小伍看到一個像按鈕樣式的元素，並期望點擊後發生特定的動作，但什麼也沒發生。因為他看到像「按鈕」樣式的元素不加思索的就按下 space 鍵，但實際上是個超連結的<a> 元素，而 <a> 元素是使用 enter 鍵才能觸發定位導航功能的，此時小伍想必很困惑：「怎麼點擊了卻沒反應？」

由於螢幕閱讀器會讀取物件的類型資訊並依據不同類型提供不同的操作按鍵指令，因此上述這類誤用元素類型情境導致的預期落差，在使用螢幕閱讀器瀏覽頁面時更會放大效果甚至導致無法操作。正確的給予物件相應的類型相當重要，會大大的提高螢幕閱讀器使用者的操作體驗。

任意門：螢幕閱讀器的快速導航 — 像哆啦 A 夢般在資訊海中穿梭自如

物件類型可以用來作為提示使用者如何與其互動外，它也是一種非常重要的導航線索。視障者在用跳轉上一個物件指令與跳轉下一個物件指令時，也會依靠物件類型來加深對整體頁面部局的記憶點，例如某個按鈕在標題元素的上一項、某個連結在核取方塊的下一項這類相對關系資訊，建立起更資訊豐富的心理地圖。

像 NVDA，VoiceOver 等等現今常見的螢幕閱讀器皆有提供按照物件類型分類與跳轉的功能，也就是除了用上一個或下一個跳轉指令來遊走頁面外，更能按物件類型快速跳轉到該物件上，搭配前述相對關係資訊的心理地圖建立方式，就能更快掌握頁面整體結構並在各個物件間快速移動了！

金手指：圖形介面中的快捷鍵 — 像駭客般在彈指間執行所想任務

想必大家都曾看過在影視作品中駭客的手指在鍵盤上起舞，快速的敲打指令與螢幕上黑底白字的 CUI 迅速流淌文字的情景。

而在現今的 GUI 環境中，鍵盤使用者除了透過 tab 在物件間移動選取項目按下 enter 鍵來執行動作外，如果在物件上有快捷鍵設計，便能幫助鍵盤使用者不需逐一遊走尋找物件便可執行任務，對使用鍵盤操作的身障者而言可說是相當的便利呢！此外軟體工程師們其實也常會熟記個種快速鍵來提身寫程式與操作 IDE 的效率，就像各種無障礙設計一樣，良好設計的快捷鍵也能讓更多人受益喔！

最後我們以 google 雲端硬碟與 slack 當案例，來瞧瞧這兩個產品做了哪些快捷鍵與它們間的異同。