Accessibility - Revision history

Planetoid: Text replacement - ": Image:Owl icon.jpg " to "{{Tips}} "

2025-01-08T12:11:46Z

Text replacement - ": Image:Owl icon.jpg " to "{{Tips}} "

← Older revision		Revision as of 20:11, 8 January 2025
Line 1:		Line 1:
	網路無障礙與網頁親和力		網路無障礙與網頁親和力

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

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

Unknown user: /* 親和力軟體 */

2023-06-21T03:47:20Z

親和力軟體

← Older revision		Revision as of 11:47, 21 June 2023
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}}

	== 親和力服務 ==		== 親和力服務 ==

Unknown user: /* 機構網站 */

2023-02-10T02:31:50Z

機構網站

← Older revision		Revision as of 10:31, 10 February 2023
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 電子化政府無障礙網路服務])

	== 遵循標準、認證 ==		== 遵循標準、認證 ==

Unknown user: /* 網站/網頁親和力 */

2023-02-09T19:04:46Z

網站/網頁親和力

← Older revision		Revision as of 03:04, 10 February 2023
Line 20:		Line 20:
	=== 機構網站 ===		=== 機構網站 ===
	* [http://www.gov.tw/activity/enable/index.htm 電子化政府無障礙網路服務]		* [http://www.gov.tw/activity/enable/index.htm 電子化政府無障礙網路服務]


	== 遵循標準、認證 ==		== 遵循標準、認證 ==

Unknown user: Text replacement - "Category:WebDesign" to "Category:Design"

2022-05-16T02:29:02Z

Text replacement - "Category:WebDesign" to "Category:Design"

← Older revision		Revision as of 10:29, 16 May 2022
Line 132:		Line 132:
	<references />		<references />

	[[Category:~~WebDesign~~]] [[Category:Translation]]		[[Category:Design]] [[Category:Translation]]

Unknown user: /* 親和力服務 */

2022-03-29T03:54:38Z

親和力服務

← Older revision		Revision as of 11:54, 29 March 2022
Line 56:		Line 56:
	* [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/ 國家通訊傳播委員會無障礙網路空間服務網]		* [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] 是一個分析網頁是否遵照親和力指導原則的免費服務。也提供全功能的商業版本。		* ''停止服務''<ref>[https://en.wikipedia.org/wiki/Bobby_(software) Bobby (software) - Wikipedia]</ref> [http://www.cast.org/bobby/ Bobby] 是一個分析網頁是否遵照親和力指導原則的免費服務。也提供全功能的商業版本。

Unknown user at 08:04, 20 March 2021

2021-03-20T08:04:07Z

← Older revision		Revision as of 16:04, 20 March 2021
Line 125:		Line 125:
	* 易用性([[Usability]])		* 易用性([[Usability]])


			資料來源：[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:WebDesign]] [[Category:Translation]]		[[Category:WebDesign]] [[Category:Translation]]

Unknown user: /* 親和性書籍 */

2021-03-20T08:02:23Z

親和性書籍

← Older revision		Revision as of 16:02, 20 March 2021
Line 29:		Line 29:

	== 親和性書籍 ==		== 親和性書籍 ==
	* [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

	== 親和力參考文獻 ==		== 親和力參考文獻 ==

Unknown user: /* 親和力服務 */

2021-03-07T07:36:13Z

親和力服務

← Older revision		Revision as of 15:36, 7 March 2021
Line 61:		Line 61:

	文字顏色與背景顏色對比		文字顏色與背景顏色對比

	* [https://webaim.org/resources/contrastchecker/ WebAIM: Color Contrast Checker] 檢視文字前景與背景顏色的對比率 (Contrast Ratio) ，是否符合「無障礙網頁內容指引」(WCAG) 2.0規範建議。{{access \| date = 2016-09-13}}		* [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}}		* [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}}		* [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 面板，可以方便知道背景文字顏色的對比		* {{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]

	== 相關資源 ==		== 相關資源 ==

Unknown user: /* 親和力服務 */

2021-03-07T07:35:18Z

親和力服務

← Older revision		Revision as of 15:35, 7 March 2021
Line 52:		Line 52:

	== 親和力服務 ==		== 親和力服務 ==
			* [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] 這個工具可以用來檢視當妳的網頁，看看若沒有各種流行的瀏覽器功能時，它會變成怎樣。
Line 57:		Line 58:
	* [http://www.danvine.com/icapture/ iCapture] 檢視網頁在 Chrome 裡看起來會像甚麼。 {{access \| date = 2016-09-13}}		* [http://www.danvine.com/icapture/ iCapture] 檢視網頁在 Chrome 裡看起來會像甚麼。 {{access \| date = 2016-09-13}}
	* [https://www.handicap-free.nat.gov.tw/ 國家通訊傳播委員會無障礙網路空間服務網]		* [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] 是一個分析網頁是否遵照親和力指導原則的免費服務。也提供全功能的商業版本。		* ''停止服務''<ref>[https://en.wikipedia.org/wiki/Bobby_(software) Bobby (software) - Wikipedia]</ref> [http://www.cast.org/bobby/ Bobby] 是一個分析網頁是否遵照親和力指導原則的免費服務。也提供全功能的商業版本。

Line 65:		Line 65:
	* [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://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 面板，可以方便知道背景文字顏色的對比		* {{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 面板，可以方便知道背景文字顏色的對比