沒穿方服

先看看官方解說什麼是定位點(原名導盲磚)？

所謂定位點(原名導盲磚)，其顯示方式是利用三個冒號(:::)來代表，且需要搭配快速鍵設計來使用。主要用途在於幫助使用者快速定位及搜尋。主要優點有以下：

1. 快速跳躍至網頁不同區塊，可避免使用者迷失在網頁中。
2. 方便使用者在各框架頁 (frame) 間快速移動。
3. 可導引使用者依自己需要，跳至所需的區塊中。

定位點的設計程式碼如下：

<a accesskey="L" href="intro.jsp" title="左側區域"> ::: </a>
<a accesskey="C" href="intro.jsp" title="中間區域"> ::: </a>
<a accesskey="R" href="intro.jsp" title="右側區域"> ::: </a>

title 屬性文字方便語音合成器告知使用者，是在網頁中的哪一個區塊。
每一個瀏覽器都有搜尋的功能，可以讓使用者搜尋所需資訊的地方。在 HTML 4.0 中 accesskey 的功能可以搭配 ALT 鍵使用，跳到所需的區塊。
請將網頁定位點 (:::) 搭配快速鍵的使用說明，描述於網站導覽或明顯處供使用者瞭解，請不要隱藏於 ::: 的連結處，以提供各種使用者使用。

所以最基本的認識，就是照抄上面的程式碼，放在網頁各區域的前面。例如 Google 台灣 可能會變成：

先別急著美化（免得改壞），目前網頁應已接近無障礙服務網所重視的幾項要求：

1. 定位點必須是「找得到」的

   官方堅持使用者以 Ctrl + F 尋找功能搜尋「:::」字串時，必須能「發現」定位點。
   ……在此戲稱「導盲磚必須看得見」原則。參考官方留言板，以下作法會被退件：

   1. 用 display:none 隱藏定位點（相當於由顯示中移除，可能導致沒有定位點）
   2. 把 ::: 幾個字改為圖片（Ctrl + F 找不到）
   3. 把 ::: 字體設為極端小（Ctrl + F 找得到，但是不容易看到，也是不行）

   再者，倒是允許把 ::: 文字顏色設為跟背景色相同，無障礙服務網亦如此設計。

2. 定位點數量不宜過多

   要設計幾個「:::」端視頁面內容而定。例如若網頁沒有選單／內容區的分別，就不必硬加上定位點。

   

3. 定位點應搭配 accesskey 和 title 屬性使用

4. 快速鍵（accesskey）不應與瀏覽器的快速鍵設定相同

   不清楚照範例用 L, C, R 是否就萬事 OK，在常見問題 - 定位點(::: )搭配快速鍵常見問題與解決方案 裡列出了常見的熱鍵，優先避開它們應該就差不多了。

5. 若有標題元素，定位點應置於標題元素之前

   這裡強調定位點在文件中的位置，應置於該區域的完整內容之前。前例中沒有標題元素（h1, h2, ...），有的話應作如下安排：

   :::

   <h5>示範選單</h5>

   • <li>列表項目</li>
   • <li>列表項目</li>
   :::

   <h5>示範段落</h5>

   <p>內文</p>

   
   而不是：

   <h5>示範選單</h5>

   • <li>::: 示範選單區</li>
   • <li>列表項目</li>
   • <li>列表項目</li>

   <h5>示範段落</h5>

   :::

   <p>內文</p>

   
   如此在跳至定位點後，循序瀏覽才不會錯過標題。

6. 展示「定位點 + 快速鍵」的使用說明

   快速鍵的說明一定要提供，並且跟網站導覽（sitemap）擺在一起。形式可參考研考會的網站導覽。

7. 定位點的 href 屬性值應為鏈結錨點，而非連結至其他文件

   定位點的 href 屬性要使用含 # 的頁內鏈結（例如 href="#section_2"）以避免按了快速鍵後瀏覽器跟著鏈結出去。參考官方解說定位點(:::)設定連結時，Firefox與IE瀏覽器瀏覽時的差異：

   若於定位點 (:::) 上設定超連結時，於不同瀏覽器"解析"定位點 (:::) 的超連結語法時，將呈現以下的差異：

   1. Firefox 瀏覽器，解析定位點內含的超連結語法時，將直接執行內含的超連結，而自動轉至超連結指向的頁面，使定位點失去最重要的「定位」功效。
   2. IE 瀏覽器，解析定位點內含的超連結語法時，瀏覽器不會自動執行該超連結，會正常定位在定位點 (:::) 上，而定位點內含指向的超連結頁面，須透過「ENTER」鍵才會觸發。

   故，設計定位點 (:::) 搭配快速鍵時，考量各瀏覽器不同的語法解析，請勿於定位點上設定超連結，並將『快速鍵定義說明』統一載明於「網站導覽」頁內容區上方。

   這點和 <a accesskey="L" href="intro.jsp" title="左側區域"> ::: </a> 形成矛盾…… 看來是發現 Firefox 處理 accesskey 的行為後，為了顧全不同瀏覽器而忍痛自打嘴巴，所以語氣才會有點悻悻然吧。

   

---

其實以上規定，最大特徵不外乎用 Ctrl + F 尋找 ::: 文字的行為，把握這點、合理設計你的網頁應該就能過關了。

但是為什麼要通過檢測？

當然無奈的理由居多，但是此規範是否合理？所謂君子詐善，無異小人之肆惡，負責任的設計者請不能懶得思考，好歹也要看看文章、看看討論才是，這裡引用一位積極貢獻者不惑仔的中肯留言：

定位點應算是本國自創的方法，其提出的作法個人也不太認同，因為這種方式親和力不夠，對沒有學習過定位點操作的盲人(甚至非盲人)，沒什麼太大作用(根本不知道什麼是::)，必須是經過強迫訓練的盲生才比較有幫助，而這些人應只佔少數之少數吧。

不過定位點的概念是值得認同的，因為可以讓非滑鼠操作者，在一個複雜內容的頁面，以快速鍵快速轉至想要閱讀的區域，其實可以想像成電話語音服務一樣，按1. 做什麼... 2.做什麼... 3. 做什麼...等等，就像我先前提的，如果有一天，上網是用聽和說的時候，這樣的概念就很重要了。因此，個人認為較好的作法，應該是直接在每一頁做成有指示的連結列跳至指定的區域，如，本文(C)|主目錄(M)|分類子目錄(N)|細項目錄(L)...這樣就不需要特別的學習就可以使用了，而且每一頁也可以有不同的連結。其實，對盲人來說，文件內容只有前後(上下)，並沒有所謂的左邊欄、右邊欄、或中間區，硬是要分那邊實在不符實際，而且快速鍵連結本來就直接可以跳至 id 位置，不需要另外製作一個無意義的::，這根本是對語意誤解的作法。

參考 http://www.w3.org/TR/html4/interact/forms.html#adef-accesskey 節錄如下

”...when a user activates a link defined by the A element, the user agent generally follows the link. When a user activates a radio button, the user agent changes the value of the radio button. When the user activates a text field, it allows input, etc.”

真高興終於有人提出這問題了，是沒有必要一定要按照研考會提出的方式製作，用我提出的要比他們的::，更有意義多了，而且更具親和力。

~不惑仔

其建議「本文 (C)｜主目錄 (M)」形式就是個很實在的通用設計，再回頭看「:::」便顯得短視不可靠，舉個例子，在談論 ::: 的文章內按Ctrl + F 搜尋 :::，不是會找到一堆非定位點的東西嗎？

::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

更令人不安者，政府的「無障礙」顯然輕忽 W3C 提供的網頁標準。包括研考會、無障礙網路空間服務網在內，送到 W3C Markup Validator 檢驗都無法過關，誤解 HTML 語意的情形也屢受批評。而這諸多障礙，在無障礙網路空間服務網的官僚作風下（參考留言板與網路討論），後續發展教人難以期待。

---

到此心理有底，就別抱怨，標章照貼，寫法看個人良心吧。

以下是我偏好的定位點原始碼，主要在 href 屬性上說事：

<a accesskey="C" href="#start-content" title="主要內容區" id="start-content">:::</a>

沒有規定 a 元素一定要有 href 屬性，但一般瀏覽器對缺少 href 的 a 元素之 accesskey 沒有反應；所以給 a href="#fragment-identifier 並搭配相應的 id（或 name）以做定位。

另外研考會和無障礙服務網使用的 a href="#" 是個很普遍、但不在 W3C 文件中的寫法；一個不指向外部資源或頁內錨點的 a 元素應該是無理、錯誤的。所以瀏覽器對 # 的處理可能出乎設計者的意料（例：重讀頁面、捲至頁首）而喪失定位點的功能，與其等出狀況再滅火，不如現在就停用該寫法，一次做對才是。