本網誌加入定位點與便捷鍵設計 / Use Anchor and Accesskey in this Blog
我一直以來致力於推動資訊自由的理念。為了讓所有人都能夠自由地取用任何資訊，無障礙網頁的相關規範一直是我關注的其中一個重點。而且作為一位專長網頁應用程式開發的工程師，比起畫面的美觀，我認為易用性更為重要。因此這次也參考我國國家通訊傳播委員會推行的無障礙網頁規範，將「定位點」(又名導盲磚)跟「便捷鍵」(accesskey，又稱快速鍵)加入到「布丁布丁吃什麼？」之中。未來大家可以使用Alt鍵搭配U、C、R、F或H等不同按鍵來快速跳到網誌的特定區域。
定位點與便捷鍵的使用 / Usage of Anchors and Accesskeys
我已經在網站說明中加入對於定位點與便捷鍵的說明：
「布丁布丁吃什麼？」支援以便捷鍵和導盲磚的功能，讓讀者可以用鍵盤快速鍵來閱讀本網誌。以Windows的Chrome瀏覽器來說，便捷鍵的設定如下：
- Alt + U 鍵：跳到上方選單列。再按tab鍵則可以選擇要進入的選單。
- Alt + C 鍵：跳到主要內文區。按鍵盤下鍵可以開始閱讀內文。
- Alt + R 鍵：跳到側欄區，包含本網誌的相關訊息。
- Alt + F 鍵：跳到下方網誌宣告區。
- Alt + H 鍵：回到首頁的連結。 (非正式定位點)
不同的瀏覽器與作業系統下，便捷鍵的組合按鍵會有所不同，w3schools彙整了各種便捷鍵組合按鍵的使用情況，如下所示：
| 瀏覽器 | Windows | Linux | Mac |
|---|---|---|---|
 Internet Explorer | [Alt] + accesskey | N/A | |
 Chrome | [Alt] + accesskey | [Alt] + accesskey | [Control] [Alt] + accesskey |
|
Firefox | [Alt] [Shift] + accesskey | [Alt] [Shift] + accesskey | [Control] [Alt] + accesskey |
 Safari | [Alt] + accesskey | N/A | [Control] [Alt] + accesskey |
|
Opera | Opera 15或更新版本: [Alt] + accesskey Opera 12.1或舊版: [Shift] [Esc] + accesskey | ||
無障礙網頁規範：定位點 / Regulations for Zero-barrier Webpage Development
你在瀏覽網站時，有沒有注意到政府機關網站通常會在下面的角落擺上一個無障礙網頁的認證標章呢？
這表示該網頁是國家認證的無障礙網頁，標章等級是AAA，是W3C所推行的最高檢測等級。(詳情請見「標章設計精神」) 而若要達到AAA登記無障礙網頁所需要的功能，就得要在網站內加上網頁定位點(導盲磚)搭配鍵盤便捷鍵。
網頁定位點，早期稱作導盲磚，是以三個冒號「:::」來呈現的一種我國特有的無障礙網頁設計。無障礙網頁規範中的「什麼是定位點(原名導盲磚)？」的介紹如下：
所謂定位點(原名導盲磚)，其顯示方式是利用三個冒號(:::)來代表，且需要搭配快速鍵設計來使用。
主要用途在於幫助使用者快速定位及搜尋。主要優點有以下：
(1)快速跳躍至網頁不同區塊，可避免使用者迷失在網頁中。
(2)方便使用者在各框架頁(frame)間快速移動。
(3)可導引使用者依自己需要，跳至所需的區塊中。
定位點的實作是使用<a>標籤包住定位點的三個冒號，並且加上accesskey便捷鍵屬性、title 元素標題屬性、以及href連結目標屬性。舉例來說本網誌跳到上方選單的定位點的程式如下：
如何設計便捷鍵？ / How to Implement Accesskeys?
HTML的便捷鍵(accesskey)是網頁設計中相當基礎且好用的屬性。我以前也會用便捷鍵來控制應用程式，例如Timemark to SSA。可是網頁開發有著很大的自由是一回事，大家要如何用統一的方式來設計便捷鍵則是另外一回事。
以英國政府網站為例，他們提出了11種建議在政府網站中加入的便捷鍵：
- S – 略過導覽 (Skip navigation)
- 1 – 首頁 (Home page)
- 2 – 最新消息 (What’s new)
- 3 – 網站導覽 (Site map)
- 4 – 搜尋 (Search)
- 5 – 常見問題 (Frequently Asked Questions (FAQ)
- 6 – 說明 (Help)
- 7 – 投訴程序 (Complaints procedure)
- 8 – 詞彙與條款 (Terms and conditions)
- 9 – 意見回饋 (Feedback form)
- 0 – 便捷鍵說明 (Access key details)
不過這種設計很多網頁設計者並不買單就是了。
而我國規範的原文並沒有很明確的定義要如何設計定位點，只有大概的方向。「一探無障礙網頁的定位點（導盲磚）」這篇文章就搭配官方審查與意見留言板做了相當多的探討。其中比較重要的幾個原則歸納摘錄如下：
- 定位點必須是「找得到」的 (可以看到的)
- 定位點數量不宜過多 (大部分教學都說不要超過5個，可是你看上面英國政府就用了11個)
- 定位點應搭配 accesskey 和 title 屬性使用
- 快速鍵（accesskey）不應與瀏覽器的快速鍵設定相同
- 若有標題元素，定位點應置於標題元素之前
- 展示「定位點 + 快速鍵」的使用說明
- 定位點的 href 屬性值應為鏈結錨點，而非連結至其他文件：例如上面的href="#menu-primary"
其中我覺得比較有趣的是許多我國政府的便捷鍵都採用U 上方、L 左方、C 中間、R 右方、B 下方的這種設計，例如我國的總統府網站。
便捷鍵設計的爭議 / The Problem with Accesskeys
但其實諷刺的是，這種便捷鍵設計表現出對盲人瀏覽網頁的誤解。他們在閱讀網頁時，並沒有視覺化畫面上下左右的概念，而只有訊息先後出現的差別。
我們用一個簡單的範例來看看。上圖是我用WebbIE來瀏覽本網誌的一個畫面。基本上拿掉所有CSS跟JavaScript效果之後，我們可以「看」(實際是「聽」)得到文字訊息只會這樣垂直排列下來。便捷鍵L、R的設計就喪失了他的方向意義。其實可以說「:::」這樣的設計並不是真的給盲人使用，而是讓可以看見網頁的人覺得自我感覺良好、看得到實作無障礙網頁的功能。
因此，像是英國政府這樣子以電話撥號的形式來設計便捷鍵，或是以區塊、功能的英文作為代號，例如選單目錄 (Menu) 就用M，可能會是比較好的設計。或是像「UK Government Access Keys Standard For Websites」這篇所討論的，以rel=""屬性跟內文來完整說明連結內容，而不要太過著重便捷鍵的設計，也許這才是一個根本的解決辦法。
不過這種便捷鍵的設計在我國已經流傳了好多年，儼然成為我國的一種特色文化。我姑且也就尊重這種文化，照著這種方式來實作吧。
