diff options
author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:43:23 -0500 |
---|---|---|
committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:43:23 -0500 |
commit | 218934fa2ed1c702a6d3923d2aa2cc6b43c48684 (patch) | |
tree | a9ef8ac1e1b8fe4207b6d64d3841bfb8990b6fd0 /files/zh-tw/learn/accessibility/index.html | |
parent | 074785cea106179cb3305637055ab0a009ca74f2 (diff) | |
download | translated-content-218934fa2ed1c702a6d3923d2aa2cc6b43c48684.tar.gz translated-content-218934fa2ed1c702a6d3923d2aa2cc6b43c48684.tar.bz2 translated-content-218934fa2ed1c702a6d3923d2aa2cc6b43c48684.zip |
initial commit
Diffstat (limited to 'files/zh-tw/learn/accessibility/index.html')
-rw-r--r-- | files/zh-tw/learn/accessibility/index.html | 75 |
1 files changed, 75 insertions, 0 deletions
diff --git a/files/zh-tw/learn/accessibility/index.html b/files/zh-tw/learn/accessibility/index.html new file mode 100644 index 0000000000..9ded955a1e --- /dev/null +++ b/files/zh-tw/learn/accessibility/index.html @@ -0,0 +1,75 @@ +--- +title: 無障礙網頁 +slug: Learn/Accessibility +tags: + - ARIA + - Accessibility + - Articles + - Beginner + - CSS + - CodingScripting + - HTML + - JavaScript + - Landing + - Learn + - Module + - NeedsTranslation + - TopicStub +translation_of: Learn/Accessibility +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">如果要當 web 開發者,學會 HTML、CSS、JavaScript 是很重要的。不過除此之外,你還要學得更多:你需要<strong>負責任地</strong>運用這些技術,才能讓所有讀者都能使用你的網頁。要達成這點,本模塊將展示一般最佳實做(在 <a href="/zh-TW/docs/Learn/HTML">HTML</a>、<a href="/zh-TW/docs/Learn/CSS">CSS</a>、<a href="/en-US/docs/Learn/JavaScript">JavaScript</a> 有示範)、<a href="/zh-TW/docs/Learn/Tools_and_testing/Cross_browser_testing">跨瀏覽器測試</a>、還有其他啟動的要點。</p> + +<h2 id="概觀">概觀</h2> + +<p>When someone describes a site as "accessible," they mean that any user can use all its features and content, regardless of how the user accesses the web — even and especially users with physical or mental impairments.</p> + +<ul> + <li>Sites should be accessible to keyboard, mouse, and touch screen users, and any other way users access the web, including screen readers and voice assistants like Alexa and Google Home.</li> + <li>Applications should be understandable and usable by people regardless of auditory, visual, physical, or cognitive abilities.</li> + <li>Sites should also not cause harm: web features like motion can cause migraines or epileptic seizures.</li> +</ul> + +<p><strong>By default, HTML is accessible, if used correctly.</strong> Web accessibility involves ensuring that content remains accessible, regardless of who and how the web is accessed.</p> + +<h2 id="先決條件">先決條件</h2> + +<p>要理解本模塊的概念,最少理解 <a href="/zh-TW/docs/Learn/HTML">HTML</a>、<a href="/zh-TW/docs/Learn/CSS">CSS</a>、<a href="/zh-TW/docs/Learn/JavaScript">JavaScript</a> 是個好主意。如果在學習相關技術時學習會更好。</p> + +<div class="note"> +<p><strong>注</strong>:如果使用的設備無法讓你建立自己的文件,可以試著在 <a href="http://jsbin.com/">JSBin</a> 或 <a href="https://thimble.mozilla.org/">Thimble</a> 這種程式撰寫網站,執行大多數範例。</p> +</div> + +<h2 id="教學">教學</h2> + +<dl> + <dt><a href="/zh-TW/docs/Learn/Accessibility/What_is_accessibility">何謂無障礙網頁?</a></dt> + <dd>這篇文章針對何謂無障礙網頁,起了一個好開頭。這模塊包含了要考慮哪些族群以及理由、不同族群會用什麼工具和 Web 互動、還有怎麼把無障礙網頁導入 Web 開發工作流程。</dd> + <dt><a href="/zh-TW/docs/Learn/Accessibility/HTML">HTML:無障礙網頁的好開始</a></dt> + <dd>只要確保在任何時候,正確的 HTML 元素都用於正確的目的,就能消除各種網頁的障礙。這篇文章詳述 HTML 如何確保網頁無障礙。</dd> + <dt><a href="/zh-TW/docs/Learn/Accessibility/CSS_and_JavaScript">充分實踐 CSS 與 JavaScript 的無障礙</a></dt> + <dd>如果 CSS 與 JavaScript 使用得當,將可以為無障礙網頁提供助力……反過來的話,就會嚴重影響無障礙體驗。這篇文章詳述如何在內容複雜的情況下,確保能充分實踐 CSS 與 JavaScript 的無障礙。</dd> + <dt><a href="/zh-TW/docs/Learn/Accessibility/WAI-ARIA_basics">WAI-ARIA 基礎</a></dt> + <dd>從之前的文章來看,有時製作要涉及到非語意的 HTML 還有動態 JavaScript 更新技術……等,會令複雜的 UI 控制變得很困難。WAI-ARIA 正是為了解決此一問題而生。它對瀏覽器和輔助技術添加進一步的語意,讓用戶能知道發生了什麼事。我們將介紹如何在基本層面使用此技術,以提昇無障礙。</dd> + <dt><a href="/zh-TW/docs/Learn/Accessibility/Multimedia">無障礙多媒體</a></dt> + <dd>會導致無障礙網頁出問題的另一個根源是多媒體:影片、聲音、圖片等內容,需要有合適的文字替代,以便輔助技術和它的用戶能夠理解。我們將在這篇文章中闡明作法。</dd> + <dt><a href="/zh-TW/docs/Learn/Accessibility/Mobile">行動無障礙網頁</a></dt> + <dd>隨著行動設備訪問漸受歡迎、還有像是 iOS 與 Android 這般熱門平台,已經具備完善的輔助工具,考慮到如何在這些平台上實踐無障礙網頁,就變得十分重要。這篇文章將討論行動裝置特有的無障礙網頁相關議題。</dd> +</dl> + +<h2 id="評估">評估</h2> + +<dl> + <dt><a href="/zh-TW/docs/Learn/Accessibility/Accessibility_troubleshooting">無障礙網頁偵錯</a></dt> + <dd>要評估本模塊,我們會提出一些簡單的網站,你需要偵測有哪些無障礙的問題並修復之。</dd> +</dl> + +<h2 id="參見">參見</h2> + +<ul> + <li><a href="https://egghead.io/courses/start-building-accessible-web-applications-today">Start Building Accessible Web Applications Today</a>:Marcy Sutton 所作的一套優秀教學影片。</li> + <li><a href="https://dequeuniversity.com/resources/">Deque University resources</a>:包含程式碼範例、螢幕閱讀器參考、或是其他有用的資源。</li> + <li><a href="http://webaim.org/resources/">WebAIM resources</a>:有教學、便覽、工具……等。</li> + <li><a href="https://www.w3.org/WAI/ER/tools/">Web Accessibility Evaluation Tools List</a> - includes a list of web accessibility evaluation tools.</li> +</ul> |