Accessibility: Difference between revisions

From LemonWiki共筆
Jump to navigation Jump to search
(23 intermediate revisions by 4 users not shown)
Line 1: Line 1:
網路無障礙與網頁親和力
網路無障礙與網頁親和力


: ''他們需要的不是同情與憐憫,而是實質的機會!''(語出自[http://www.apad.org.tw 中華民國身心障礙者藝文推廣協會網站]。)
: [[Image:Owl icon.jpg]] 「他們需要的不是同情與憐憫,而是實質的機會!」語出自[http://www.apad.org.tw 中華民國身心障礙者藝文推廣協會網站]。


該技術目的使得有殘疾的人也可以使用科技的好處。例如一個無障礙的網站(accessible Websites)可以讓視覺、聽覺、行動能力與認知能力有障礙的人可以無礙的進行瀏覽網站內容。無障礙的設計也有利於那些使用較為老舊、運算速度較慢的電腦使用者。
該技術目的使得有殘疾的人也可以使用科技的好處。例如一個無障礙的網站(accessible Websites)可以讓視覺、聽覺、行動能力與認知能力有障礙的人可以無礙的進行瀏覽網站內容。無障礙的設計也有利於那些使用較為老舊、運算速度較慢的電腦使用者。


美國1998年復健法(Rehabilitation Act)五○八條款(Section 508)通過,要求公共組織2001/6/25以後,確保所有的電子及資訊科技能讓受雇於政府或一般公立機構的身心障礙者使用,受到影響的科技硬體包含了影印機、傳真機、電話以及其他電子裝置,而同樣地在軟體部分則包含了網站及套裝軟體等等。詳情請看 http://www.section508.gov/ 或 [http://www.access-board.gov/508.htm Access Board] (Eva Kaplan-Leiserson)
美國1998年復健法(Rehabilitation Act)五○八條款(Section 508)通過,要求公共組織2001/6/25以後,確保所有的電子及資訊科技能讓受雇於政府或一般公立機構的身心障礙者使用,受到影響的科技硬體包含了影印機、傳真機、電話以及其他電子裝置,而同樣地在軟體部分則包含了網站及套裝軟體等等。詳情請看 [https://www.section508.gov/ Section508.gov] 或 [http://www.access-board.gov/508.htm Access Board] (Eva Kaplan-Leiserson)


== 網站/網頁親和力 ==
=== 文章 ===
* Jedi (2003). [http://jedi.org/blog/archives/002537.html 網路無障礙與網頁親和力 | Jedi's BLOG]
* Jedi (2016). [http://jedi.org/blog/archives/006177.html 網站設計技術與無障礙要求 | Jedi's BLOG]
* hlb (2003). [http://ccca.nctu.edu.tw/~hlb/articles/archives/000065.php 障礙重重的無障礙網路空間服務網] 原始連結失連,請點選[http://wayback.archive.org/web/20030501132235/http://ccca.nctu.edu.tw/~hlb/articles/archives/000065.php 備份網頁]
* 洪朝貴 (2002). [https://www.cyut.edu.tw/~ckhung/a/c021.php 文書處理第零課: 放下對外觀的執著]
* Musings: [http://golem.ph.utexas.edu/~distler/blog/accessibility.html Accessibility Statement]
* Dominique Hazaël-Massieux: [http://www.w3.org/2002/03/csslayout-howto Tableless layout HOWTO] 2002/11/19
* idplay: [http://blog.elixus.org/acer/archives/000381.html web accessibility & userability] December 31, 2002
=== 機構網站 ===
* [http://www.gov.tw/activity/enable/index.htm 電子化政府無障礙網路服務]


Hi! jAoNVXH


== 遵循標準、認證 ==
== 遵循標準、認證 ==
Line 37: Line 48:
** 模擬使用者經驗
** 模擬使用者經驗
** 提供參考資料及額外資源的鏈結
** 提供參考資料及額外資源的鏈結
* [https://chrome.google.com/webstore/detail/spectrum/ofclemegkcmilinpcimpjkfhjfgmhieb/related Spectrum]: {{chrome}} 瀏覽器上的擴充套件,模擬不同眼疾觀看網頁的效果。例如紅色盲 (protanopia)、紅色弱視 (protanomaly)、綠色盲 (deuteranopia)、綠色弱視 (deuteranomaly)等。


== 親和力服務 ==
== 親和力服務 ==
* [http://www.cast.org/bobby/ Bobby] 是一個分析網頁是否遵照親和力指導原則的免費服務。也提供全功能的商業版本。
* [http://validator.w3.org/ HTML Validator] 是一個用來檢查網頁是否吻合已公開的 HTML 標準的免費服務。
* [http://validator.w3.org/ HTML Validator] 是一個用來檢查網頁是否吻合已公開的 HTML 標準的免費服務。
* [http://www.delorie.com/web/wpbcv.html Web Page Backward Compatibility Viewer] 這個工具可以用來檢視當妳的網頁,看看若沒有各種流行的瀏覽器功能時,它會變成怎樣。
* [http://www.delorie.com/web/wpbcv.html Web Page Backward Compatibility Viewer] 這個工具可以用來檢視當妳的網頁,看看若沒有各種流行的瀏覽器功能時,它會變成怎樣。
* [http://www.delorie.com/web/lynxview.html Lynx Viewer] 是一個讓妳檢視網頁在 Lynx 裡看起來會像甚麼的免費服務。
* [http://www.delorie.com/web/lynxview.html Lynx Viewer] 是一個讓妳檢視網頁在 Lynx 裡看起來會像甚麼的免費服務。
* [http://www.danvine.com/icapture/ iCapture] 讓妳檢視網頁在 Mac Safari 裡看起來會像甚麼。
* [http://www.danvine.com/icapture/ iCapture] 檢視網頁在 Chrome 裡看起來會像甚麼。 {{access | date = 2016-09-13}}
* [http://enable.nat.gov.tw/index.jsp 無障礙網路空間服務網]
* [https://www.handicap-free.nat.gov.tw/ 國家通訊傳播委員會 無障礙網路空間服務網]
* [http://wave.webaim.org/ WAVE Web Accessibility Tool] {{access | date = 2016-09-13}}
* ''停止服務''<ref>[https://en.wikipedia.org/wiki/Bobby_(software) Bobby (software) - Wikipedia]</ref> [http://www.cast.org/bobby/ Bobby] 是一個分析網頁是否遵照親和力指導原則的免費服務。也提供全功能的商業版本。
 
文字顏色與背景顏色對比
* [https://webaim.org/resources/contrastchecker/ WebAIM: Color Contrast Checker] 檢視文字前景與背景顏色的對比率 (Contrast Ratio) ,是否符合「無障礙網頁內容指引」(WCAG) 2.0規範建議。{{access | date = 2016-09-13}}
* [http://www.had2know.com/technology/color-contrast-calculator-web-design.html How to Calculate Color Contrast from RGB Values]([http://web.archive.org/web/20161210010555/http://www.had2know.com/technology/color-contrast-calculator-web-design.html 網頁備份]) {{access | date = 2016-11-07}}
* [https://colorable.jxnblk.com/ Colorable] 介紹: [https://free.com.tw/colorable/ Colorable 網頁色彩線上產生器,可產生符合 WCAG 規範配色組合] {{access | date = 2017-01-02}}
* [https://www.toptal.com/designers/colorfilter Toptal Color Blind Filter] 「適合在網頁版面設計完畢之後,確認目前的顏色配置,是否會造成色盲、色弱者辨識困難的小工具。」出處:[https://www.facebook.com/loveudfish/photos/a.10151967822379750.1073741826.199162759749/10156644242119750/?type=3&theater 愛˙通用設計的小魚]
* {{Chrome}} [https://developers.google.com/web/updates/2018/01/devtools#a11y What's New In DevTools (Chrome 65)  |  Web  |  Google Developers] [https://remysharp.com/2017/08/17/contrast-ratio-in-devtools Contrast ratio in devtools] 開發者工具的調色盤增加 Contrast Ratio 面板,可以方便知道背景文字顏色的對比


== 相關資源 ==
== 相關資源 ==
Line 51: Line 71:
* [http://www.anybrowser.org/campaign/index.html Viewable with Any Browser: Campaign]
* [http://www.anybrowser.org/campaign/index.html Viewable with Any Browser: Campaign]
* [http://www.batol.net/index.asp 無障礙全球資訊網]
* [http://www.batol.net/index.asp 無障礙全球資訊網]
* [https://twitter.com/bernardtyers/status/791673687707713537?s=06 Bernard Tyers on Twitter: Our @HODigital Access Needs posters have been translated into Chinese for Taiwan! Thank you @VioletVivirand on Github! #a11y #accessibility] {{access | date = 2016-12-20}}


== 多國語言(Multilingual Support) ==
== 多國語言(Multilingual Support) ==
* [http://blog.elixus.org/jedi/archives/000785.html Jedi's BLOG: 網誌國際化]
* [http://blog.elixus.org/jedi/archives/000785.html Jedi's BLOG: 網誌國際化]


* [http://www.cpatch.org/glossary/default.asp 中文化辞汇搜寻]:輸入英文搜尋,結果顯示兩岸不同的電腦用語。
* [http://glossary.pank.org/ 中文化辭彙搜尋]:輸入中文或英文搜尋,結果顯示兩岸不同的電腦用語。 {{access | date = 2016-09-13}}


* [http://www.alanwood.net/unicode/ Unicode and Multilingual Support in HTML, Fonts, Web Browsers and Other Applications]
* [http://www.alanwood.net/unicode/ Unicode and Multilingual Support in HTML, Fonts, Web Browsers and Other Applications]
Line 98: Line 119:




[[Category:WebDesign]]
[[Category:WebDesign]] [[Category:Translation]]

Revision as of 10:40, 31 May 2018

網路無障礙與網頁親和力

Owl icon.jpg 「他們需要的不是同情與憐憫,而是實質的機會!」語出自中華民國身心障礙者藝文推廣協會網站

該技術目的使得有殘疾的人也可以使用科技的好處。例如一個無障礙的網站(accessible Websites)可以讓視覺、聽覺、行動能力與認知能力有障礙的人可以無礙的進行瀏覽網站內容。無障礙的設計也有利於那些使用較為老舊、運算速度較慢的電腦使用者。

美國1998年復健法(Rehabilitation Act)五○八條款(Section 508)通過,要求公共組織2001/6/25以後,確保所有的電子及資訊科技能讓受雇於政府或一般公立機構的身心障礙者使用,受到影響的科技硬體包含了影印機、傳真機、電話以及其他電子裝置,而同樣地在軟體部分則包含了網站及套裝軟體等等。詳情請看 Section508.govAccess Board (Eva Kaplan-Leiserson)

網站/網頁親和力

文章

機構網站


遵循標準、認證

親和性書籍

親和力參考文獻

親和力軟體

  • JAWS 是 Windows 上的螢幕朗讀軟體(Screen Reader),這裡提供了可以下載的限時展示版。
  • Home Page Reader 是 Windows 上的螢幕朗讀軟體,這裡提供了可以下載的展示版。
  • Lynx 是一個免費的純文字瀏覽器,搭配可覆新的布拉耶點字顯示器後就可以給盲人使用。
  • Links 是一個給頻寬不足的視覺性使用者用的純文字瀏覽器。
  • Opera 是一個配備許多親和力功能的視覺性瀏覽器,包括有文字縮放、自訂樣式表、圖片標定等多樣功能。有提供免費下載的版本。與 Windows 、 Macintosh 、 Linux 和許多其他的作業系統相容。
  • 網站親和力工具列: 由澳洲國家資訊暨圖書部門 (NILS) 的親和資訊解決方案 (Accessible Information Solutions, AIS) 團隊所提供,由Jedi中文化。功能包含
    • 指認網頁上的元件
    • 改善第三方線上應用程式的使用
    • 模擬使用者經驗
    • 提供參考資料及額外資源的鏈結
  • Spectrum: Chrome Browser chrome.png 瀏覽器上的擴充套件,模擬不同眼疾觀看網頁的效果。例如紅色盲 (protanopia)、紅色弱視 (protanomaly)、綠色盲 (deuteranopia)、綠色弱視 (deuteranomaly)等。

親和力服務

文字顏色與背景顏色對比

相關資源

多國語言(Multilingual Support)

  • 中文化辭彙搜尋:輸入中文或英文搜尋,結果顯示兩岸不同的電腦用語。 [Last visited: 2016-09-13]
相關概念:翻譯(Multilingual Translators)、國際化(Globalization)

未分類

我認識一位聾啞人士,他是我姨丈的大哥,也就是我表哥的大伯,自出生下來便啞了,一直到我小學不知幾年級的時候因病去世了,我忘記那是什麼時候了。因為生活不方便的關係,一直和我姨丈他們一家住在一起,生活圈沒有很大,也是因為言語不方便的關係,印象中每次去他們家的時候,我都稱他為「啞巴大伯」,和我表哥一樣也稱他為大伯,這樣子才顯親切,而他也不避諱被人稱作啞巴,總是很親切的招招手打聲招呼。……



建議關鍵字: Web Interoperability, Best Viewed With Any Browser, universal access (普及近用)

  • BrowserSizer:BrowserSizer 可以提供網頁的設計人員以不同的「視窗大小」來觀看網頁的內容展示及版面的配置狀況,再也不用自行去變更螢幕解析度了,在網頁的設計上更能得心應手。
  • 通用設計(universal design)

其他網頁設計概念