LemonWiki共筆

Accessibility: Difference between revisions

← Older edit
Tag: wikieditor
 
(15 intermediate revisions by the same user not shown)
Line 1: Line 1:
網路無障礙與網頁親和力
網路無障礙與網頁親和力


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


該技術目的使得有殘疾的人也可以使用科技的好處。例如一個無障礙的網站(accessible Websites)可以讓視覺、聽覺、行動能力與認知能力有障礙的人可以無礙的進行瀏覽網站內容。無障礙的設計也有利於那些使用較為老舊、運算速度較慢的電腦使用者。
該技術目的使得有殘疾的人也可以使用科技的好處。例如一個無障礙的網站(accessible Websites)可以讓視覺、聽覺、行動能力與認知能力有障礙的人可以無礙的進行瀏覽網站內容。無障礙的設計也有利於那些使用較為老舊、運算速度較慢的電腦使用者。
Line 16: Line 16:
* Dominique Hazaël-Massieux: [http://www.w3.org/2002/03/csslayout-howto Tableless layout HOWTO] 2002/11/19
* 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
* idplay: [http://blog.elixus.org/acer/archives/000381.html web accessibility & userability] December 31, 2002
* Wei-Hsun Chen (2019). [https://medium.com/uxeastmeetswest/%E5%8F%AF%E9%81%94%E6%80%A7%E8%A8%AD%E8%A8%88-design-for-accessibility-%E5%9F%BA%E6%96%BC%E4%BB%8B%E9%9D%A2%E4%B9%8B%E4%B8%8A-98617b6ae819 可達性設計(Design for Accessibility) — 基於介面之上 – UXeastmeetswest – Medium]


=== 機構網站 ===
=== 機構網站 ===
* [http://www.gov.tw/activity/enable/index.htm 電子化政府無障礙網路服務]
* [https://accessibility.moda.gov.tw/ 無障礙網路空間服務網] (Formely [http://www.gov.tw/activity/enable/index.htm 電子化政府無障礙網路服務])
 


== 遵循標準、認證 ==
== 遵循標準、認證 ==
Line 28: Line 28:


== 親和性書籍 ==
== 親和性書籍 ==
* [http://www.diveintoaccessibility.org/ Dive Into Accessibility] [http://dia.z6i.org/ 在 30 天內打造更具親和力的網站] (GNU Free Documentation License)
* [http://www.diveintoaccessibility.org/ Dive Into Accessibility] [http://dia.z6i.org/ 在 30 天內打造更具親和力的網站] ([https://web.archive.org/web/20210122061559/http://dia.z6i.org/ Wayback 上的網頁備份]) (GNU Free Documentation License)
* [http://joeclark.org/book/sashay/serialization/ Building Accessible Websites] by Joe Clark ISBN: 073571150X  
* [http://joeclark.org/book/sashay/serialization/ Building Accessible Websites] by Joe Clark ISBN: 073571150X


== 親和力參考文獻 ==
== 親和力參考文獻 ==
Line 49: Line 49:
** 提供參考資料及額外資源的鏈結
** 提供參考資料及額外資源的鏈結
* [https://chrome.google.com/webstore/detail/spectrum/ofclemegkcmilinpcimpjkfhjfgmhieb/related Spectrum]: {{chrome}} 瀏覽器上的擴充套件，模擬不同眼疾觀看網頁的效果。例如紅色盲 (protanopia)、紅色弱視 (protanomaly)、綠色盲 (deuteranopia)、綠色弱視 (deuteranomaly)等。
* [https://chrome.google.com/webstore/detail/spectrum/ofclemegkcmilinpcimpjkfhjfgmhieb/related Spectrum]: {{chrome}} 瀏覽器上的擴充套件，模擬不同眼疾觀看網頁的效果。例如紅色盲 (protanopia)、紅色弱視 (protanomaly)、綠色盲 (deuteranopia)、綠色弱視 (deuteranomaly)等。
* [https://www.figma.com/community/plugin/733343906244951586/Color-Blind Color Blind | Figma Community] {{access | date=2023-06-21}}


== 親和力服務 ==
== 親和力服務 ==
* [http://www.cast.org/bobby/ Bobby] 是一個分析網頁是否遵照親和力指導原則的免費服務。也提供全功能的商業版本。
* [http://wave.webaim.org/ WAVE Web Accessibility Tool] {{access | date = 2021-03-07}}
* [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] 檢視網頁在 Chrome 裡看起來會像甚麼。 {{access | date = 2016-09-13}}
* [https://www.handicap-free.nat.gov.tw/ 國家通訊傳播委員會 無障礙網路空間服務網]
* [http://enable.nat.gov.tw/index.jsp 無障礙網路空間服務網]
* [[Check Browser Compatibility]] 檢視網頁在不同瀏覽器裡看起來會像甚麼。
* [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] 是一個分析網頁是否遵照親和力指導原則的免費服務。也提供全功能的商業版本。


文字顏色與背景顏色對比
文字顏色與背景顏色對比
* [http://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] {{access | date = 2016-11-07}}
* [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://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 愛˙通用設計的小魚]
* [https://color.a11y.com/ Color Contrast Accessibility Validator] {{access | date = 2021-03-07}}
* {{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 面板，可以方便知道背景文字顏色的對比
其他服務工具清單
* [https://www.w3.org/WAI/ER/tools/ Web Accessibility Evaluation Tools List]


== 相關資源 ==
== 相關資源 ==
Line 70: Line 79:
* [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}}
* [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}}
* [https://coseeing.org/ Coseeing 嶼我共視] 「透過多元形式（工具開發、部落格、推廣活動）讓大眾理解障礙者的真實需求與生活情況。目標是讓所有人都能「共同看見」世界，促進共融與理解。」 {{access | date = 2026-07-21}}


== 多國語言（Multilingual Support） ==
== 多國語言（Multilingual Support） ==
Line 117: Line 127:




[[Category:WebDesign]] [[Category:Translation]]
資料來源：[http://dia.z6i.org/ 在 30 天內打造更具親和力的網站] ([https://web.archive.org/web/20210122061559/http://dia.z6i.org/ Wayback 上的網頁備份]) (GNU Free Documentation License v. 1.1)
 
== References ==
 
<references />
 
[[Category:Design]] [[Category:Translation]]
Retrieved from "https://wiki.planetoid.info/index.php/Accessibility"