Accessibility: Difference between revisions
Jump to navigation
Jump to search
m (rollback) |
m (Text replacement - ": Image:Owl icon.jpg " to "{{Tips}} ") |
||
| (48 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
網路無障礙與網頁親和力 | 網路無障礙與網頁親和力 | ||
{{Tips}} 「他們需要的不是同情與憐憫，而是實質的機會！」語出自[http://www.apad.org.tw 中華民國身心障礙者藝文推廣協會網站]。 | |||
該技術目的使得有殘疾的人也可以使用科技的好處。例如一個無障礙的網站(accessible Websites)可以讓視覺、聽覺、行動能力與認知能力有障礙的人可以無礙的進行瀏覽網站內容。無障礙的設計也有利於那些使用較為老舊、運算速度較慢的電腦使用者。 | 該技術目的使得有殘疾的人也可以使用科技的好處。例如一個無障礙的網站(accessible Websites)可以讓視覺、聽覺、行動能力與認知能力有障礙的人可以無礙的進行瀏覽網站內容。無障礙的設計也有利於那些使用較為老舊、運算速度較慢的電腦使用者。 | ||
美國1998年復健法（Rehabilitation Act）五○八條款(Section 508)通過，要求公共組織2001/6/25以後，確保所有的電子及資訊科技能讓受雇於政府或一般公立機構的身心障礙者使用，受到影響的科技硬體包含了影印機、傳真機、電話以及其他電子裝置，而同樣地在軟體部分則包含了網站及套裝軟體等等。詳情請看 | 美國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) | ||
== 網站/網頁親和力 == | == 網站/網頁親和力 == | ||
=== 文章 === | === 文章 === | ||
* [http://jedi | * Jedi (2003). [http://jedi.org/blog/archives/002537.html 網路無障礙與網頁親和力 | Jedi's BLOG] | ||
* [http://ccca.nctu.edu.tw/~hlb/articles/archives/000065.php 障礙重重的無障礙網路空間服務網] | * 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] | * 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 | * 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 電子化政府無障礙網路服務]) | ||
== 遵循標準、認證 == | == 遵循標準、認證 == | ||
* [http://bobby.watchfire.com/bobby/html/en/index.jsp Bobby AAA 認證] | * [http://bobby.watchfire.com/bobby/html/en/index.jsp Bobby AAA 認證] | ||
* [http://www.w3.org/WAI/ | * World Wide Web Consortium (W3C) [http://www.w3.org/WAI/ Web Accessibility Initiative] (簡稱 WAI, 資訊網親和/可及性推動組織)，發佈的[http://www.w3.org/TR/WAI-WEBCONTENT/ Web Content Accessibility Guidelines] 1.0(簡稱WCAG 1.0）[http://www2.csj.ks.edu.tw/~tch023/accessibility/overint.htm WCAG中文翻譯] | ||
* [http://www.section508.gov/ Section 508 認證] | * [http://www.section508.gov/ Section 508 認證] | ||
* [http://validator.w3.org/ HTML/XHTML 1.0 Strict 認證(Validator)]: MarkUp Validation Service | * [http://validator.w3.org/ HTML/XHTML 1.0 Strict 認證(Validator)]: MarkUp Validation Service | ||
== 親和性書籍 == | == 親和性書籍 == | ||
* [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 43: | Line 43: | ||
* [http://links.sourceforge.net/ Links] 是一個給頻寬不足的視覺性使用者用的純文字瀏覽器。 | * [http://links.sourceforge.net/ Links] 是一個給頻寬不足的視覺性使用者用的純文字瀏覽器。 | ||
* [http://www.opera.com/ Opera] 是一個配備許多親和力功能的視覺性瀏覽器，包括有文字縮放、自訂樣式表、圖片標定等多樣功能。有提供免費下載的版本。與 Windows 、 Macintosh 、 Linux 和許多其他的作業系統相容。 | * [http://www.opera.com/ Opera] 是一個配備許多親和力功能的視覺性瀏覽器，包括有文字縮放、自訂樣式表、圖片標定等多樣功能。有提供免費下載的版本。與 Windows 、 Macintosh 、 Linux 和許多其他的作業系統相容。 | ||
* [http://ais.z6i.org/web/resources/toolbar/ 網站親和力工具列]: 由澳洲國家資訊暨圖書部門 ([http://www.nils.org.au/ NILS]) 的親和資訊解決方案 ([http://www.nils.org.au/ais/ Accessible Information Solutions], AIS) 團隊所提供，由[http://jedi.org/blog/ Jedi]中文化。功能包含 | |||
** 指認網頁上的元件 | |||
** 改善第三方線上應用程式的使用 | |||
** 模擬使用者經驗 | |||
** 提供參考資料及額外資源的鏈結 | |||
* [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:// | * [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. | * [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}} | |||
* [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 55: | Line 77: | ||
* [http://trace.wisc.edu/world/web/ Designing More Usable Web Sites] 列出了大量額外的資源。 | * [http://trace.wisc.edu/world/web/ Designing More Usable Web Sites] 列出了大量額外的資源。 | ||
* [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 無障礙全球資訊網] | |||
* [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:// | * [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 82: | Line 106: | ||
建議關鍵字: Web Interoperability, Best Viewed With Any Browser, universal access (普及近用) | 建議關鍵字: Web Interoperability, Best Viewed With Any Browser, universal access (普及近用) | ||
* http://www.w3.org/WAI/UA/ | * [http://www.w3.org/WAI/UA/ User Agent Accessibility Guidelines Working Group (UAWG)] | ||
User Agent Accessibility Guidelines Working Group (UAWG) | |||
* [http://www.w3.org/TR/UAAG10/ User Agent Accessibility Guidelines 1.0] | |||
* [http://www.w3.org/Promotion/WIP/ WIP -- Web Interoperability Pledge] ''expired data'' | |||
* [http://www.anybrowser.org/campaign/ Viewable with Any Browser: Campaign] | |||
* [http://www.browserlist.browser.org/ The Browser List Project (web browsers in June 2000)] | |||
The | * [http://developer.gnome.org/projects/gap/access-def.html The GNOME Accessibility Project] | ||
* [http://toget.pchome.com.tw/intro/network_www/network_www_plugin/4244.html BrowserSizer]:BrowserSizer 可以提供網頁的設計人員以不同的「視窗大小」來觀看網頁的內容展示及版面的配置狀況，再也不用自行去變更螢幕解析度了，在網頁的設計上更能得心應手。 | |||
http:// | |||
* 通用設計(universal design) | |||
其他網頁設計概念 | |||
* 易用性([[Usability]]) | |||
資料來源：[http://dia.z6i.org/ 在 30 天內打造更具親和力的網站] ([https://web.archive.org/web/20210122061559/http://dia.z6i.org/ Wayback 上的網頁備份]) (GNU Free Documentation License v. 1.1) | |||
http:// | |||
== References == | |||
<references /> | |||
[[Category: | [[Category:Design]] [[Category:Translation]] | ||
Latest revision as of 20:11, 8 January 2025
網路無障礙與網頁親和力
「他們需要的不是同情與憐憫，而是實質的機會！」語出自中華民國身心障礙者藝文推廣協會網站。
該技術目的使得有殘疾的人也可以使用科技的好處。例如一個無障礙的網站(accessible Websites)可以讓視覺、聽覺、行動能力與認知能力有障礙的人可以無礙的進行瀏覽網站內容。無障礙的設計也有利於那些使用較為老舊、運算速度較慢的電腦使用者。
美國1998年復健法（Rehabilitation Act）五○八條款(Section 508)通過，要求公共組織2001/6/25以後，確保所有的電子及資訊科技能讓受雇於政府或一般公立機構的身心障礙者使用，受到影響的科技硬體包含了影印機、傳真機、電話以及其他電子裝置，而同樣地在軟體部分則包含了網站及套裝軟體等等。詳情請看 Section508.gov 或 Access Board (Eva Kaplan-Leiserson)
網站/網頁親和力[edit]
文章[edit]
- Jedi (2003). 網路無障礙與網頁親和力 | Jedi's BLOG
- Jedi (2016). 網站設計技術與無障礙要求 | Jedi's BLOG
- hlb (2003). 障礙重重的無障礙網路空間服務網 原始連結失連，請點選備份網頁
- 洪朝貴 (2002). 文書處理第零課: 放下對外觀的執著
- Musings: Accessibility Statement
- Dominique Hazaël-Massieux: Tableless layout HOWTO 2002/11/19
- idplay: web accessibility & userability December 31, 2002
- Wei-Hsun Chen (2019). 可達性設計(Design for Accessibility) — 基於介面之上 – UXeastmeetswest – Medium
機構網站[edit]
- 無障礙網路空間服務網 (Formely 電子化政府無障礙網路服務)
遵循標準、認證[edit]
- Bobby AAA 認證
- World Wide Web Consortium (W3C) Web Accessibility Initiative (簡稱 WAI, 資訊網親和/可及性推動組織)，發佈的Web Content Accessibility Guidelines 1.0(簡稱WCAG 1.0）WCAG中文翻譯
- Section 508 認證
- HTML/XHTML 1.0 Strict 認證(Validator): MarkUp Validation Service
親和性書籍[edit]
- Dive Into Accessibility 在 30 天內打造更具親和力的網站 (Wayback 上的網頁備份) (GNU Free Documentation License)
- Building Accessible Websites by Joe Clark ISBN: 073571150X
親和力參考文獻[edit]
- W3 親和力指導原則解釋了每一個指導原則背後的理由。
- W3 親和力技術解釋了如何採行每一個指導原則。
- W3 親和力核對表可以作為忙碌開發者的親和力指引。
- 美國聯邦政府 508 親和力指導原則。
親和力軟體[edit]
- JAWS 是 Windows 上的螢幕朗讀軟體(Screen Reader)，這裡提供了可以下載的限時展示版。
- Home Page Reader 是 Windows 上的螢幕朗讀軟體，這裡提供了可以下載的展示版。
- Lynx 是一個免費的純文字瀏覽器，搭配可覆新的布拉耶點字顯示器後就可以給盲人使用。
- Links 是一個給頻寬不足的視覺性使用者用的純文字瀏覽器。
- Opera 是一個配備許多親和力功能的視覺性瀏覽器，包括有文字縮放、自訂樣式表、圖片標定等多樣功能。有提供免費下載的版本。與 Windows 、 Macintosh 、 Linux 和許多其他的作業系統相容。
- 網站親和力工具列: 由澳洲國家資訊暨圖書部門 (NILS) 的親和資訊解決方案 (Accessible Information Solutions, AIS) 團隊所提供，由Jedi中文化。功能包含
- 指認網頁上的元件
- 改善第三方線上應用程式的使用
- 模擬使用者經驗
- 提供參考資料及額外資源的鏈結
- Spectrum: Chrome
瀏覽器上的擴充套件，模擬不同眼疾觀看網頁的效果。例如紅色盲 (protanopia)、紅色弱視 (protanomaly)、綠色盲 (deuteranopia)、綠色弱視 (deuteranomaly)等。 - Color Blind | Figma Community [Last visited: 2023-06-21]
親和力服務[edit]
- WAVE Web Accessibility Tool [Last visited: 2021-03-07]
- HTML Validator 是一個用來檢查網頁是否吻合已公開的 HTML 標準的免費服務。
- Web Page Backward Compatibility Viewer 這個工具可以用來檢視當妳的網頁，看看若沒有各種流行的瀏覽器功能時，它會變成怎樣。
- Lynx Viewer 是一個讓妳檢視網頁在 Lynx 裡看起來會像甚麼的免費服務。
- 國家通訊傳播委員會 無障礙網路空間服務網
- Check Browser Compatibility 檢視網頁在不同瀏覽器裡看起來會像甚麼。
- 停止服務[1] Bobby 是一個分析網頁是否遵照親和力指導原則的免費服務。也提供全功能的商業版本。
文字顏色與背景顏色對比
- WebAIM: Color Contrast Checker 檢視文字前景與背景顏色的對比率 (Contrast Ratio) ，是否符合「無障礙網頁內容指引」(WCAG) 2.0規範建議。[Last visited: 2016-09-13]
- How to Calculate Color Contrast from RGB Values(網頁備份) [Last visited: 2016-11-07]
- Colorable 介紹: Colorable 網頁色彩線上產生器，可產生符合 WCAG 規範配色組合 [Last visited: 2017-01-02]
- Toptal Color Blind Filter 「適合在網頁版面設計完畢之後，確認目前的顏色配置，是否會造成色盲、色弱者辨識困難的小工具。」出處：愛˙通用設計的小魚
- Color Contrast Accessibility Validator [Last visited: 2021-03-07]
- Chrome What's New In DevTools (Chrome 65) | Web | Google Developers Contrast ratio in devtools 開發者工具的調色盤增加 Contrast Ratio 面板，可以方便知道背景文字顏色的對比
其他服務工具清單
相關資源[edit]
- WebAIM 是一個投注於改善線上學習材料親和力的非營利組織。
- Designing More Usable Web Sites 列出了大量額外的資源。
- Viewable with Any Browser: Campaign
- 無障礙全球資訊網
- Bernard Tyers on Twitter: Our @HODigital Access Needs posters have been translated into Chinese for Taiwan! Thank you @VioletVivirand on Github! #a11y #accessibility [Last visited: 2016-12-20]
多國語言（Multilingual Support）[edit]
- 中文化辭彙搜尋：輸入中文或英文搜尋，結果顯示兩岸不同的電腦用語。 [Last visited: 2016-09-13]
- 相關概念：翻譯(Multilingual Translators)、國際化(Globalization)
未分類[edit]
- 導一齣瀏覽器的史詩戰役 by ilya
- 聾啞 by Dowba
- 我認識一位聾啞人士，他是我姨丈的大哥，也就是我表哥的大伯，自出生下來便啞了，一直到我小學不知幾年級的時候因病去世了，我忘記那是什麼時候了。因為生活不方便的關係，一直和我姨丈他們一家住在一起，生活圈沒有很大，也是因為言語不方便的關係，印象中每次去他們家的時候，我都稱他為「啞巴大伯」，和我表哥一樣也稱他為大伯，這樣子才顯親切，而他也不避諱被人稱作啞巴，總是很親切的招招手打聲招呼。……
建議關鍵字: Web Interoperability, Best Viewed With Any Browser, universal access (普及近用)
- WIP -- Web Interoperability Pledge expired data
- BrowserSizer:BrowserSizer 可以提供網頁的設計人員以不同的「視窗大小」來觀看網頁的內容展示及版面的配置狀況，再也不用自行去變更螢幕解析度了，在網頁的設計上更能得心應手。
- 通用設計(universal design)
其他網頁設計概念
- 易用性(Usability)
資料來源：在 30 天內打造更具親和力的網站 (Wayback 上的網頁備份) (GNU Free Documentation License v. 1.1)