Accessibility: Difference between revisions

(9 intermediate revisions by the same user not shown)

Line 1:

網路無障礙與網頁親和力

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

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

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

Line 19:

=== 機構網站 ===

* [http://www.gov.tw/activity/enable/index.htm 電子化政府無障礙網路服務]

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

== 遵循標準、認證 ==

Line 29:

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

== 親和力參考文獻 ==

Line 50:

Line 49:

** 提供參考資料及額外資源的鏈結

* [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}}

== 親和力服務 ==

Line 56:

* [http://www.delorie.com/web/wpbcv.html Web Page Backward Compatibility Viewer] 這個工具可以用來檢視當妳的網頁，看看若沒有各種流行的瀏覽器功能時，它會變成怎樣。

* [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/ 國家通訊傳播委員會無障礙網路空間服務網]

* [[Check Browser Compatibility]] 檢視網頁在不同瀏覽器裡看起來會像甚麼。

* ''停止服務''<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}}

Line 67:

Line 68:

* [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 74:

Line 79:

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

== 多國語言（Multilingual Support） ==

Line 121:

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 ==

[[Category:Design]] [[Category:Translation]]

@@ Line 1: / Line 1: @@
 網路無障礙與網頁親和力
-: [[Image:Owl icon.jpg]] 「他們需要的不是同情與憐憫，而是實質的機會！」語出自[http://www.apad.org.tw 中華民國身心障礙者藝文推廣協會網站]。
+{{Tips}} 「他們需要的不是同情與憐憫，而是實質的機會！」語出自[http://www.apad.org.tw 中華民國身心障礙者藝文推廣協會網站]。
 該技術目的使得有殘疾的人也可以使用科技的好處。例如一個無障礙的網站(accessible Websites)可以讓視覺、聽覺、行動能力與認知能力有障礙的人可以無礙的進行瀏覽網站內容。無障礙的設計也有利於那些使用較為老舊、運算速度較慢的電腦使用者。
@@ Line 19: / Line 19: @@
 === 機構網站 ===
-* [http://www.gov.tw/activity/enable/index.htm 電子化政府無障礙網路服務]
+* [https://accessibility.moda.gov.tw/ 無障礙網路空間服務網] (Formely [http://www.gov.tw/activity/enable/index.htm 電子化政府無障礙網路服務])
 == 遵循標準、認證 ==
@@ Line 29: / 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
 == 親和力參考文獻 ==
@@ Line 50: / Line 49: @@
 ** 提供參考資料及額外資源的鏈結
 * [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}}
 == 親和力服務 ==
@@ Line 56: / Line 56: @@
 * [http://www.delorie.com/web/wpbcv.html Web Page Backward Compatibility Viewer] 這個工具可以用來檢視當妳的網頁，看看若沒有各種流行的瀏覽器功能時，它會變成怎樣。
 * [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/ 國家通訊傳播委員會 無障礙網路空間服務網]
+* [[Check Browser Compatibility]] 檢視網頁在不同瀏覽器裡看起來會像甚麼。
 * ''停止服務''<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}}
@@ Line 67: / Line 68: @@
 * [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 74: / Line 79: @@
 * [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://coseeing.org/ Coseeing 嶼我共視] 「透過多元形式（工具開發、部落格、推廣活動）讓大眾理解障礙者的真實需求與生活情況。目標是讓所有人都能「共同看見」世界，促進共融與理解。」 {{access | date = 2026-07-21}}
 == 多國語言（Multilingual Support） ==
@@ Line 121: / 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]]