南投縣政府無障礙網站教育訓練 (二) 視障上網環境介紹及展示 資料來源:淡江大學盲生資源中心.

Presentation on theme: "南投縣政府無障礙網站教育訓練 (二) 視障上網環境介紹及展示 資料來源:淡江大學盲生資源中心."— Presentation transcript:

1 南投縣政府無障礙網站教育訓練 (二) 視障上網環境介紹及展示 資料來源:淡江大學盲生資源中心

2 前言 使用者導向的無障礙網站

3 無障礙網站設計 網際網路障礙者指的是某些人會因為其身心的特殊狀況，在使用一般電腦上網時，產生一般人不會發生的困難。
主要為眼盲、弱視、智力障礙以及部分肢障的使用者。其中以視障者所受到的影響層面最為廣大。 Web Accessibility （網站可及性） Accessible Web Site Design

4 無障礙網站設計 使用者本身無法看、聽、行動或是對某種型態的資訊無法順利解讀 無法閱讀以及對文字理解有困難 無法使用滑鼠或鍵盤
網站可及性被重視的原因是因為使用者可能會在不同的狀況下上網： 使用者本身無法看、聽、行動或是對某種型態的資訊無法順利解讀 無法閱讀以及對文字理解有困難 無法使用滑鼠或鍵盤 使用純文字螢幕、小型螢幕或上網速度緩慢 對所使用的文字語言無法了解（例如以翻譯器將西班牙文轉為英文輸出） 處於某種環境下，使其眼、耳、手無法使用網頁 使用較早版本的瀏覽器或語音瀏覽器等不同操作系統。

5 內容大綱 盲用電腦硬體設備 視窗導盲鼠系統 無障礙網頁支援方案 結論 設計原理 系統架構 無字天書輸入法 中文字形字意輔助系統 自動導引功能
系統操作介面 系統功能及特色 視障者學習需時評估 視障者上網模式探討 無障礙網頁支援方案 視窗導盲鼠網頁支援方案 多重使用者介面網站建置 網頁導盲磚設置 結論

6 盲用電腦輔具介紹 點字觸摸顯示器 語音箱 金點一號(40方) 金點二號(45方, G-Mouse 轉接線)
超點二號(45方, G-Mouse, COM) 其他觸摸顯示器 語音箱 語音合成器

7 國產觸摸顯示器升級 型號 點字方 升級 介面 升級方式 備註 金點一號 ４０ 否 ＬＰＴ 無法升級 金點二號 ４５ 可 金點轉接線 超點一號
超點轉接線 可升級為超點二號 超點二號 ＣＯＭ 不需升級

8 超點一號升級小卡

9 多功能轉接器功能及特色 提供LPT埠轉COM埠之介面 LPT埠可以接一般印表機 升級金點二號，延長其適用年限
可使用USB to COM轉接線，解決新一代電腦無COM埠問題 可以連接操作國內外盲用軟體(例如：Andy, JAWS, Windows Eyes, Screen Reader, Screen Power, Window Bridge, …等)

10 視窗導盲鼠系統 (第一部份) 資料來源: 淡江大學盲生資源中心：林柏榮

11 視窗導盲鼠系統套件

12 套件內容 軟體系統光碟一片，內容包括: 多功能轉接器 軟體保護鎖 G-Mouse主系統 中華電信研究所語音系統(含微軟英文語音系統)
國音輸入法99版與6.5最新版 金點二號、超點RS-232版 WCBE2002盲用編輯器 多功能轉接器 軟體保護鎖

13 視窗導盲鼠系統示意圖 Guide Mouse Speech Module Rainbow Keypro Cursor Text Module
Braille Reader Text to Braille 8051, serial to parallel box (Serial) (Parallel) (USB) Speaker Protection (Line Out) System Requirement: Pentium III – 500MHz CPU 256 MB RAM 60MB HDD Sound Card 1 Serial Port 1 USB Port Windows 98 (PC) Six-Key IME (LPT) or Auto Guiding Function

14 視窗導盲鼠系統設計原理 Screen Reader功能 以點字、有聲輔助 系統使用獨立分工的模組 以鍵盤九宮格模擬「系統操作介面」
搭配鍵盤方向鍵、空白鍵、ALT、Ctrl和鍵盤快速鍵操作 「自動導引功能」

15 視窗導盲鼠系統架構圖 無字天書輸入法 字形字意輔助系統 點字轉譯模組 觸摸 顯示器 自動導引功能模組 游標文字顯示模組 系統 核心
觸摸 顯示器 自動導引功能模組 游標文字顯示模組 系統 核心 中英文 語音模組 音效卡(喇叭) 系統操作介面模組 Y Microsoft Speech 英文 N CHTTL Speech * CHTTL = Chunghwa Telecom Telecommunication Laboratiories

16 無字天書輸入法 F D S J K L 1 2 3 4 5 6 依照點字規則，同時按下對應的點。

17 無字天書輸入法的優點 不需要再學習鍵盤的排列位置 以六點方式輸入，打字速度快 手指移動範圍小，輸入正確率高 1 2 3 4 5 6
F D S J K L 1 2 3 4 5 6 依照點字規則，同時按下對應的點。

18 無字天書輸入法流程 啟動國音 否 英文、數字 注音點字碼 六點輸入法 轉譯處理 是 詞庫修正 點字轉換表 一般明眼中文字
m>`l!"-f/`='|`h:"a}"/ dw"*"e|" az`k!"i:"k+"d!ar0'v"/1q>`e*1m+"*'ku' e{`c>"a/1d!ac."k_'- "1*"my1 詞庫修正 點字轉換表 一般明眼中文字

19 中文字形字意輔助系統 點字以拼音顯示，同音異字問題困擾 淡江、蛋漿 陳美惠、陳美慧 研考會、”嚴拷會” 第41~45方顯示功能
形、音、意盲人詞達意 104查號台--盲人值機服務

20 形音意盲人詞達意 中文字由字形、字音和字意所構成 視障者以「字音」和「詞彙」方式識字 建立「盲用字典資料庫」(簡單、通俗、易於瞭解)
以音、意、形的順序輔助文字識別 淡：清淡，淡而無味，左水右炎 江：江水，河流的通稱，左水右工 張：張開，姓氏，弓長張，左弓右長

21 中文字形字意輔助系統流程 以自然輸入法詞庫校正，大部份的常用詞皆能正常修正 以「詞彙消去法」修正 以字形字意五方顯示資訊，直接在輸入法中選字
蛋漿：輸入雞蛋(消去雞)，米漿(消去米) 以字形字意五方顯示資訊，直接在輸入法中選字

22 視窗導盲鼠系統 （第二部分） 資料來源: 淡江大學盲生資源中心：林柏榮

23 自動導引功能構想 視窗好像刮刮樂彩券 點、線、面(點延伸為線，線累積為面) 視窗系統有兩種游標 無法直接使用滑鼠設備
鍵盤游標、滑鼠指標 無法直接使用滑鼠設備 必需以鍵盤模擬滑鼠指標操作功能 視窗環境資料不是整齊排列，字體有大小之分，必須建立一套自動搜尋的機制

24 自動導引功能模式 建立自動搜尋的機制，找資料不費力 以自動搜尋文字的方法，改善視障者對於陌生畫面的無助感
以面、線、點三種導引模式協助視障者瞭解視窗上的文字訊息 面導引模式 線導引模式 點導引模式

25 面導引模式 陌生視窗有如摸黑走進一間陌生房間 面導引模式採取二個方向地氈式搜尋 由焦點視窗左上角，從左至右，由上往下搜尋(搜尋行間距8點)
由焦點視窗左下角，從左至右，由下往上搜尋(搜尋行間距8點)

26 面導引模式(1)

27 面導引模式(2)

28 面導引模式(3)

29 面導引模式(4)

30 線導引模式 線導引模式針對「點字視窗」所顯示的位置提供兩種搜尋模式 如果左、右皆無其他文字訊息，則會找回原來的位置
由點字視窗該行的左邊界，自左向右搜尋 由點字視窗該行的右邊界，自右向左搜尋 如果左、右皆無其他文字訊息，則會找回原來的位置 視障者可藉以明瞭該行左、右側資料分佈狀況

31 線導引模式示意圖

32 點導引模式 點導引模式提供四個方向可供操作： 由點字視窗位置向左搜尋，如果沒找到文字資料，則上移8點，繼續搜尋，其範圍為原資料位置到左邊界
由點字視窗位置向上搜尋，如果沒找到文字資料，則上移8點，繼續搜尋，其範圍為上一個字串長度 由點字視窗位置向右搜尋，如果沒找到文字資料，則下移8點，繼續搜尋，其範圍為原資料位置到右邊界 由點字視窗位置向下搜尋，如果沒找到文字資料，則下移8點，繼續搜尋，其範圍為上一個字串長度

33 點導引模式示意圖

34 系統操作介面 為避免多個重疊視窗內容干擾，資料處理範圍以焦點視窗為限 視障者對於捲軸和移動視窗的工作有障礙，建議將焦點視窗放大到全螢幕
最佳解析度1280x1024,不要低於1024x768,以避免不正常折行和頻繁換頁的情況發生 鍵盤九宮格17個按鍵重新定義為系統操作功能鍵，依其不同的作特性區分為四組：「鍵盤游標作方式」、 「滑鼠指標操作方式」 、 「手動模式操作方式」和「自動導引功能操作方式」

35 鍵盤游標操作方式 0 所有視窗縮到最小回到桌面 5 盲用視窗回到鍵盤游標位置 - 前一個鍵盤游標項目 + 下一個鍵盤游標項目
Enter 執行

36 滑鼠指標操作方式 NumLock 導盲鼠模式切換(導盲鼠模式、手動模式、純導盲鼠模式) / 滑鼠左鍵 * 滑鼠右鍵
. (DEL) 將鼠標移回游標位置

37 手動模式操作方式 手動模式可以讓使用者小範圍的移動滑鼠，而且並不主動尋找文字，其功能鍵操作如下： 1 移到目前字串的最右邊 2 滑鼠往下移動
3 減少每次移動的點數 4 滑鼠往左移動 6 滑鼠往右移動 7 移到目前字串的最左邊 8 滑鼠往上移動 9 增加每次移動的點數

38 自動導引功能操作方式 8 2 4 6 游標向「上下左右」搜尋 9 從焦點視窗「左上角」開始搜尋 7 從焦點視窗「左邊界」開始搜尋
3 從焦點視窗「左下角」開始搜尋 1 從焦點視窗「右邊界」開始搜尋

39 視窗導盲鼠系統功能及特色 即時中英文語音和點字輸出 自動導引功能使視障者不費力搜尋螢幕上的資料
無字天書輸入法可直覺輸入，不需再學習鍵盤排列位置 字形字意輔助系統可以輔助視障者輸入正確的中文字 利用COM埠傳輸訊號，解決國內外盲用軟體使用問題 五雙功能-雙碼(Big5, GB)、雙顯示(繁, 簡)、雙點字(國語, 大陸)、雙語音(中, 英)、雙輸入(國語, 大陸) 相容於舊有DOS環境操作 視窗平台可以使用較多的電腦週邊 除了需靠視覺操作的應用軟體之外，支援大多數Windows應用軟體皆可操作 提供良好的明盲共同操作介面，使家長老師能夠輔助視障生學習電腦操作 軟體免費取得

40 具有五雙功能：雙碼、雙點字、雙顯示、雙語音、雙輸出
國內外視窗版盲用系統比較表 系統名稱 相關資料 視窗導盲鼠系統 Hal Screen Reader JAWS for Windows Virgo Virgo NT 研發或代理銷售機構 淡江大學 Hynapse Adaptive Freedom Scientific Baum 所在地 台灣 美國 德國 相關網址 適用語言 中、英、日 其它語系研發中 英、荷、德、法 義等九種 義等十餘種 德、英、法 義、西班牙 系統需求 DOS 6.22 Windows 98 Windows2000 Windows XP Windows 95 Windows NT Windows 2000 Windows Me 適用機種 皆可 該公司所生產的點字觸摸顯示器 特殊功能 目前唯一可直接判別中文同音異字 無 具有五雙功能：雙碼、雙點字、雙顯示、雙語音、雙輸出 軟體價格 免費贈送 標準版 US$695 專業版 US$1,095 標準版 US$895 專業版 US$1,195 EUR895

41 視障者學習需時評估 課程名稱 時數(時) 教學內容及預期效益 備註 導盲鼠簡介 1 瞭解導盲鼠的功能及特色 Dos與Windows介面之比較
使視障者對導盲鼠系統有基本概念 視窗概念 2 瞭解視窗概念 視窗為視覺化操作介面，使盲人瞭解視窗架構，建立心裡地圖。 鍵盤操作 熟悉鍵盤位置，並透過鍵盤來操作Windows 透過鍵盤操作Windows，盲人能更準確、快速的操作。 導盲鼠操作 利用鍵盤模擬滑鼠來操作Windows 本系統提供鍵盤與導盲鼠來操作Windows 瀏覽畫面 在陌生環境（軟體）中，自己熟悉畫面架構 功能表 透過功能表可操作大多數應用程式的功能 語音操作 透過語音瞭解螢幕上的資訊 無字天書 輸入法 透過六點點字輸入中、英文 編輯軟體 3 編輯、閱讀文章 檔案管理 管理檔案 瀏覽網頁 瀏覽網頁，及搜尋資料 收發信件 收發電子郵件 狀況排除 排除狀況 總計 26 讓盲人能進入Windows環境

42 無障礙網頁支援方案 資料來源: 淡江大學盲生資源中心：林柏榮

43 視障者上網模式探討 視障者慣用MS-DOS作業系統，有傳統記憶體640K限制 透過淡大盲生資源中心入口網站上網
以NCSA透過淡大入口網站，可多工多視窗 伺服器端提供最新視障介面網路軟體，免除視障者自行更新之不便 TKBirds97 ET2000 國音 BBS站 Mail主機 字形字意輔助系統 NCSA Telix Commo CBE98編輯器 金點二號 語音箱 全盲視障者 全球資訊網 視障專用純文字瀏覽器 網際 網路

44 純文字的數位落差 1997年「行政院NII推動小組」之「無障礙網頁設計要點」 2002年「行政院研考會」之「無障礙網頁開發規範」
Lynx與主流瀏覽器落差太大 純文字模式使網頁呈現內容受到極大限制 表格、框架、多媒體資料與其他外掛軟體等條文相當繁瑣不易瞭解

45 Internet Explorer

46 Lynx 純文字瀏覽器

47 視窗導盲鼠網頁支援方案 直接操作Windows作業系統
可使用Internet Explorer瀏覽器，打破使用Lynx所導致的視障者與純文字的等號關係 「行政院NII推動小組」的12條「無障礙網頁設計要點」僅剩一條(圖形加替代文字) 解決網頁動態元件問題(純導盲鼠模式) 共用邊框不再是障礙

48 網頁動態元件的干擾

49 網頁共用邊框的問題

50 多重使用者介面網站建置 視障者的視覺能力差異性頗大，全盲、重度弱視、輕度弱視、對某些顏色對比敏感
利用多重使用者介面(全盲純文字、弱視大字體、高反差顏色配置)，達到個人化網頁的功能 可確保網站內容同步，僅使用者介面不同 免費系統核心PHPNuke、PostNuke、Xoops等，縮短系統開發時間 以多重佈景主題功能設計多重使用者介面

51 無障礙全球資訊網網站架構 Apache WEB Server MySQL Server PHP Nuke Core
Big5 to Unicode User Client Multi-User Interface Big5 to GB code HTML to WML

52 網頁導盲磚設置 導盲磚－無障礙空間 網頁導盲磚－無障礙網路空間 網頁導盲磚格式 網頁導盲磚語法 網頁導盲磚美化 :::左側區塊
:::中央區塊 :::右側區塊 網頁導盲磚語法 <a accesskey=”L” href=”sitemap.htm”>:::左側區塊</a> <a accesskey=”C” href=”sitemap.htm”>:::中央區塊</a> <a accesskey=”R” href=”sitemap.htm”>:::右側區塊</a> 網頁導盲磚美化 將字形設為最小字 字的顏色和底色相同

53 網頁導盲磚設置範例

54 網頁導盲磚美化

55 結語 視障者端介面的改良、瀏覽器加強對於身心障礙者的支援與無障礙網頁規範的制定三者必須同步進行，才能夠根本有效地解決問題。
「視窗導盲鼠系統」提供視障者在操作微軟視窗系統時完善的輔助介面，為視障者使用中文Windows平台跨出第一步。 使用Internet Explorer瀏覽器支援多媒體網頁，解開了Lynx所帶來的文字枷鎖，打破長年來視障者與純文字間的等號關係，提供政府在制定無障礙網頁規範時考慮之基準點(視窗模式)。 資料庫的運用與多重使用者介面的設計, 不但可以因應不同使用者的需求，減少瀏覽網頁的障礙，也可以避免多套網頁所產生的不同步問題。 「網頁導盲磚」的設置不須大幅度修改網頁，又可以有效的簡化視障者瀏覽網頁的操作，提供政府單位在制定規範時參考。