Happy Designer 4 Summary(2):無障礙網頁設計要點

(本篇內容整理自台灣數位有聲書推展學會-吳志超的演講)

視障者與明眼人瀏覽方式不同。明眼人可以藉著視線上下及左右兩個維度的移動,來快速偵測內容要點;而視障者的瀏覽方式為線性,也就是選定一個起點從頭讀到尾,如果錯了,再換另外一個起點。因此為視障者提供網頁上的路標是很重要的。

無障礙網頁設計的重點非常清楚,包括以下幾點。

  1. Access Key 搭配錨點(Anchor)使用:視障者少用滑鼠,而多用鍵盤。Access Key 讓視障者用快速鍵跳到特定的區塊,Anchor 上的id有助於視障者了解這個區塊的大意。
  2. NoScript替代方案:Javascript等前端介面上的效果會造成視障者的困擾,另外設計NoScript的介面是無障礙網頁的必要條件之一。
  3. 圖片、影片、聲音檔的替代文字(Alt):即使視障者無法看見真正的圖片影音,但仍然可以由Alt或是旁邊的文字說明來了解。
  4. 合理的Table:用來陳述資料,而非用來排版。善用<th>和<caption>增加表格的可讀性。
  5. Heading和List的使用:這對文件結構幾乎是最重要的一點,其中Heading的<h1>~<h6>的階層性更為重要,因為視障者會藉此來理解整份文件的內容脈絡,<h2>之前預期一定會有<h1>,不能像明眼人只把他當作字型設定來用。

這次請到了真正的Screen Reader使用者,來demo “JAWS" 這個Screen Reader軟體。Screen Reader當然只能讀文字,所以好的文件結構,是無障礙網頁的核心。

http://www.standards-schmandards.com/2005/browsing-habits/

JAWS能以快速鍵列出整份文件的Heading、List和link tag 裡的詞並且唸出來,所以讓JAWS理想運作的條件,就是好的文件脈絡和容易理解的link。最顯著的例子,就是不要在link上寫"click here",而要寫出link到什麼樣的內容,比如說"Read more about the college"。建議網頁製作者用Screen Reader,來實際檢查網頁的Accessibility。

正巧google到北卡州大的Accessibility說明文件,非常完整且up to date:

www.ncsu.edu/it/access/webaccess/index.php

我的Happy Designer筆記(powerpoint)

廣告

One thought on “Happy Designer 4 Summary(2):無障礙網頁設計要點

  1. Does your blog have a contact page? I’m having a tough time locating it but, I’d like to send you an email.
    I’ve got some suggestions for your blog you might be interested in hearing. Either way, great blog and I look forward to seeing it develop over time.

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

您的留言將使用 WordPress.com 帳號。 登出 / 變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 / 變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 / 變更 )

Google+ photo

您的留言將使用 Google+ 帳號。 登出 / 變更 )

連結到 %s