initial commit

6 files changed, 599 insertions, 0 deletions

diff --git a/files/zh-tw/web/accessibility/aria/aria_techniques/index.html b/files/zh-tw/web/accessibility/aria/aria_techniques/index.html
new file mode 100644
index 0000000000..502a808e1d
--- /dev/null
+++ b/files/zh-tw/web/accessibility/aria/aria_techniques/index.html
@@ -0,0 +1,164 @@
+---
+title: Using ARIA
+slug: Web/Accessibility/ARIA/ARIA_Techniques
+translation_of: Web/Accessibility/ARIA/ARIA_Techniques
+---
+<p> </p>
+
+<h2 id="Roles（角色）">Roles（角色）</h2>
+
+<p> </p>
+
+<h3 id="Widget_roles_（局部組件）"><a href="/en/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_switch_role">Widget roles （局部組件）</a></h3>
+
+<div class="index">
+<ul>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_button_role" title="Using the button role">Button （按鈕）</a></li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_checkbox_role" title="Using the checkbox role">Checkbox （複選核取方塊）</a></li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_dialog_role" title="Using the dialog role">Dialog （對話）</a></li>
+ <li>Gridcell （網格欄）</li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_link_role" title="Using the Link role">Link （超連結）</a></li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_log_role" title="Using the Log role">Log （紀錄）</a></li>
+ <li>Marquee</li>
+ <li>Menuitem</li>
+ <li>Menuitemcheckbox </li>
+ <li>Menuitemradio</li>
+ <li>Option</li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_progressbar_role" title="en/ARIA/ARIA_Techniques/Using_the_progressbar_role">Progressbar （進度條）</a></li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_radio_role" title="en/ARIA/ARIA_Techniques/Using_the_radio_role">Radio （單選選項鈕）</a></li>
+ <li>Scrollbar</li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_slider_role" title="en/ARIA/ARIA_Techniques/Using_the_slider_role">Slider （滑軌控制鈕）</a></li>
+ <li>Spinbutton</li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_status_role" title="Using the link role">status （狀態）</a></li>
+ <li>Tab （頁籤）</li>
+ <li>Tabpanel （頁籤面板）</li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_textbox_role" title="en/ARIA/ARIA_Techniques/Using_the_textbox_role">textbox （頁籤容器）</a></li>
+ <li>Timer （計時器）</li>
+ <li>Tooltip （提示）</li>
+ <li>Treeitem</li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_switch_role">switch （開關）</a></li>
+</ul>
+</div>
+
+<h3 id="Composite_roles">Composite roles</h3>
+
+<p>下面的技術，描述了每個複合角色，以及他們的必要和可選的子角色。</p>
+
+<div class="index">
+<ul>
+ <li>Combobox （組合框）</li>
+ <li>Grid （網格）(包含 row （橫列）, gridcell （網格欄）, rowheader （橫列表頭）, columnheader （欄表頭） roles)</li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_listbox_role" title="en/ARIA/ARIA_Techniques/Using_the_listbox_role">Listbox  （列表框）</a> (包含 option role)</li>
+ <li>Menu （選單）</li>
+ <li>Menubar （選單條）</li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_radio_role" title="en/ARIA/ARIA_Techniques/Using_the_radio_role">Radiogroup （單選選項群組） (see radio role)</a></li>
+ <li>Tablist （頁籤列表） (包含 tab 和 tabpanel roles)</li>
+ <li>Tree</li>
+ <li>Treegrid</li>
+</ul>
+</div>
+
+<h3 id="Document_structure_roles"><a href="https://www.w3.org/TR/wai-aria/roles#document_structure_roles">Document structure roles</a></h3>
+
+<div class="index">
+<ul>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_article_role" title="en/Accessibility/ARIA/ARIA_Techniques/Using_the_article_role">Article</a></li>
+ <li>Definition</li>
+ <li>Directory</li>
+ <li>Document</li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_group_role" title="en/ARIA/ARIA_Techniques/Using_the_group_role">Group</a></li>
+ <li>Heading</li>
+ <li>Img</li>
+ <li>List</li>
+ <li>Listitem</li>
+ <li>Math</li>
+ <li>Note</li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_presentation_role" title="en/ARIA/ARIA_Techniques/Using_the_presentation_role">Presentation</a></li>
+ <li>Region</li>
+ <li>Separator</li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_toolbar_role" title="en/ARIA/ARIA_Techniques/Using_the_toolbar_role">Toolbar</a></li>
+</ul>
+</div>
+
+<h3 id="Landmark_roles"><a href="https://www.w3.org/TR/wai-aria/roles#landmark_roles">Landmark roles </a></h3>
+
+<div class="index">
+<ul>
+ <li>Application</li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_banner_role" title="en/ARIA/ARIA_Techniques/Using_the_banner_role">Banner</a></li>
+ <li>Complementary</li>
+ <li>Contentinfo</li>
+ <li>Form</li>
+ <li>Main</li>
+ <li>Navigation</li>
+ <li>Search</li>
+</ul>
+</div>
+
+<h2 id="States_and_properties">States and properties</h2>
+
+<p> </p>
+
+<h3 id="Widget_attributes">Widget attributes</h3>
+
+<div class="index">
+<ul>
+ <li>aria-autocomplete</li>
+ <li>aria-checked</li>
+ <li>aria-current</li>
+ <li>aria-disabled</li>
+ <li>aria-expanded</li>
+ <li>aria-haspopup</li>
+ <li>aria-hidden</li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-invalid_attribute" title="Using the aria-invalid attribute">aria-invalid</a></li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute" title="Using the aria-labelledby attribute">aria-label</a></li>
+ <li>aria-level</li>
+ <li>aria-multiline</li>
+ <li>aria-multiselectable</li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-orientation_attribute" title="en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-orientation_attribute">aria-orientation</a></li>
+ <li>aria-pressed</li>
+ <li>aria-readonly</li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-required_attribute" title="Using the aria-required property">aria-required</a></li>
+ <li>aria-selected</li>
+ <li>aria-sort</li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuemax_attribute" title="Using the aria-required attribute">aria-valuemax</a></li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuemin_attribute" title="en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuemin_attribute">aria-valuemin</a></li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuenow_attribute" title="en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuenow_attribute">aria-valuenow</a></li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuetext_attribute" title="en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuetext_attribute">aria-valuetext</a></li>
+</ul>
+</div>
+
+<h3 id="Live_region_attributes">Live region attributes</h3>
+
+<div class="index">
+<ul>
+ <li>aria-live</li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-relevant_attribute" title="en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-relevant_attribute">aria-relevant</a></li>
+ <li>aria-atomic</li>
+ <li>aria-busy</li>
+</ul>
+</div>
+
+<h3 id="Drag_drop_attributes">Drag &amp; drop attributes</h3>
+
+<div class="index">
+<ul>
+ <li>aria-dropeffect</li>
+ <li>aria-dragged</li>
+</ul>
+</div>
+
+<h3 id="Relationship_attributes">Relationship attributes</h3>
+
+<div class="index">
+<ul>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-activedescendant_attribute" title="Role">aria-activedescendant</a></li>
+ <li>aria-controls</li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute" title="Using the aria-labelledby attribute">aria-describedby</a></li>
+ <li>aria-flowto</li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute" title="en/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute">aria-labelledby</a></li>
+ <li>aria-owns</li>
+ <li>aria-posinset</li>
+ <li>aria-setsize</li>
+</ul>
+</div>
diff --git a/files/zh-tw/web/accessibility/aria/forms/basic_form_hints/index.html b/files/zh-tw/web/accessibility/aria/forms/basic_form_hints/index.html
new file mode 100644
index 0000000000..532911294d
--- /dev/null
+++ b/files/zh-tw/web/accessibility/aria/forms/basic_form_hints/index.html
@@ -0,0 +1,119 @@
+---
+title: 基本表單應用
+slug: Web/Accessibility/ARIA/forms/Basic_form_hints
+tags:
+  - 待翻譯
+translation_of: Web/Accessibility/ARIA/forms/Basic_form_hints
+---
+<h2 id="Form_labels" name="Form_labels">表單的 label</h2>
+
+<p>當使用傳統的 HTML 表單元素建立表單時，提供控制用的標籤（label）以及將標籤與對應表單元素建立關聯是非常重要的。當 screen reader （例如瀏覽器、電子郵件……等等）瀏覽一個頁面時，screen reader 會顯示 form controls ，但若沒有標示 control 和 label 之間的關聯，  screen reader 沒法知道哪個 label 是對應哪個 control。</p>
+
+<p>下面的範例顯示一個使用標籤的表單。注意每一個 {{ HTMLElement("input") }} 元件都有 <strong><code>id</code></strong>，每一個 {{ HTMLElement("label") }} 元件有 <strong><code>for </code></strong>屬性，用來對應 {{ HTMLElement("input") }} 元素的<strong> </strong><strong><code>id</code></strong> 。</p>
+
+<p><em>範例 1. 使用 label 的簡易表單</em></p>
+
+<pre class="brush: html">&lt;form&gt;
+  &lt;ul&gt;
+    &lt;li&gt;
+      &lt;input id="wine-1" type="checkbox" value="riesling"/&gt;
+      &lt;label for="wine-1"&gt;Berg Rottland Riesling&lt;/label&gt;
+    &lt;/li&gt;
+    &lt;li&gt;
+      &lt;input id="wine-2" type="checkbox" value="weissbergunder"/&gt;
+      &lt;label for="wine-2"&gt;Weissbergunder&lt;/label&gt;
+    &lt;/li&gt;
+    &lt;li&gt;
+      &lt;input id="wine-3" type="checkbox" value="pinot-grigio"/&gt;
+      &lt;label for="wine-3"&gt;Pinot Grigio&lt;/label&gt;
+    &lt;/li&gt;
+    &lt;li&gt;
+      &lt;input id="wine-4" type="checkbox" value="gewurztraminer"/&gt;
+      &lt;label for="wine-4"&gt;Berg Rottland Riesling&lt;/label&gt;
+    &lt;/li&gt;
+  &lt;/ul&gt;
+&lt;/form&gt;
+</pre>
+
+<h2 id="Labeling_with_ARIA" name="Labeling_with_ARIA">使用 ARIA 標籤</h2>
+
+<p>HTML 的 {{ HTMLElement("label") }} 元素適用於表單相關元素 , 但是許多表單控件被實現為動態JavaScript小部件 , 使用 {{ HTMLElement("div") }} 或 {{ HTMLElement("span") }}。 <a href="http://www.w3.org/WAI/intro/aria.php" title="http://www.w3.org/WAI/intro/aria.php">WAI-ARIA</a> , 來自 W3C 的網路無障礙計畫 ( <a href="http://www.w3.org/WAI/" title="http://www.w3.org/WAI/">Web Accessibility Initiative</a> ) 的<strong>無障礙互聯網應用程序</strong>規範 ( <strong>Accessible Rich Internet Applications</strong> specification ) , 為這些情況提供了 <code><a href="http://www.w3.org/TR/2010/WD-wai-aria-20100916/states_and_properties#aria-labelledby" title="http://www.w3.org/TR/2010/WD-wai-aria-20100916/states_and_properties#aria-labelledby"><strong>aria-labelledby</strong></a></code> 屬性。</p>
+
+<p>下面的範例顯示使用無序列表 ( unordered list ) 實現的單選按鈕組 ( radio button group )。注意程式碼第三行 , {{ HTMLElement("li") }} 元素將 <code><strong>aria-labelledby</strong></code> 屬性設置為 <code>"rg1_label"</code> , 在第一行中元素 {{ HTMLElement("h3") }} 的 <strong><code>id</code> </strong>, 即單選按鈕組的標籤。</p>
+
+<p><em>範例 2. </em>使用無序列表實現的單選按鈕組<em> ( 改編自 <a href="http://www.oaa-accessibility.org/examplep/radio1/">http://www.oaa-accessibility.org/examplep/radio1/</a>)</em></p>
+
+<pre class="brush: html">&lt;h3 id="rg1_label"&gt;Lunch Options&lt;/h3&gt;
+
+&lt;ul class="radiogroup" id="rg1"  role="radiogroup" aria-labelledby="rg1_label"&gt;
+  &lt;li id="r1"  tabindex="-1" role="radio" aria-checked="false"&gt;
+    &lt;img role="presentation" src="radio-unchecked.gif" /&gt; Thai
+  &lt;/li&gt;
+  &lt;li id="r2"  tabindex="-1" role="radio"  aria-checked="false"&gt;
+    &lt;img role="presentation" src="radio-unchecked.gif" /&gt; Subway
+  &lt;/li&gt;
+  &lt;li id="r3"   tabindex="0" role="radio" aria-checked="true"&gt;
+    &lt;img role="presentation" src="radio-checked.gif" /&gt; Radio Maria
+  &lt;/li&gt;
+&lt;/ul&gt;
+</pre>
+
+<h2 id="Describing_with_ARIA" name="Describing_with_ARIA">Describing with ARIA</h2>
+
+<p>Form controls sometimes have a description associated with them, in addition to the label. ARIA provides the <a href="http://www.w3.org/TR/2010/WD-wai-aria-20100916/states_and_properties#aria-describedby" title="http://www.w3.org/TR/2010/WD-wai-aria-20100916/states_and_properties#aria-describedby"><strong>aria-describedby</strong></a> attribute to directly associate the description with the control.</p>
+
+<p>The example below shows a {{ HTMLElement("button") }} element that is described by a sentence in a separate {{ HTMLElement("div") }} element. The <strong>aria-describedby</strong> attribute on the {{ HTMLElement("button") }} references the <strong>id</strong> of the {{ HTMLElement("div") }}.</p>
+
+<p><em>Example 3. A button described by a separate element.</em></p>
+
+<pre class="brush: html">&lt;button aria-describedby="descriptionRevert"&gt;Revert&lt;/button&gt;
+&lt;div id="descriptionRevert"&gt;Reverting will undo any changes that have been made
+                            since the last save.&lt;/div&gt;</pre>
+
+<p>(Note that the <strong>aria-describedby</strong> attribute is used for other purposes, in addition to form controls.)</p>
+
+<h2 id="Required_and_invalid_fields" name="Required_and_invalid_fields">Required and invalid fields</h2>
+
+<p>Web developers typically use presentational strategies to indicated required or invalid fields, but assistive technologies (ATs) cannot necessarily infer this information from the presentation. ARIA provides attributes for indicating that form controls are required or invalid:</p>
+
+<ul>
+ <li>The <a href="http://www.w3.org/TR/2010/WD-wai-aria-20100916/states_and_properties#aria-required" title="http://www.w3.org/TR/2010/WD-wai-aria-20100916/states_and_properties#aria-required"><strong>aria-required</strong></a> property can be applied to a form element to indicate to an AT that it is required to complete the form.</li>
+ <li>The <a href="http://www.w3.org/TR/2010/WD-wai-aria-20100916/states_and_properties#aria-invalid" title="http://www.w3.org/TR/2010/WD-wai-aria-20100916/states_and_properties#aria-invalid"><strong>aria-invalid</strong></a> state can be programmatically applied to indicate to an AT which data fields have incorrect data, so that the user knows they have entered invalid data.</li>
+</ul>
+
+<p>The example below shows a simple form with three fields. On lines 4 and 12, the <strong>aria-required</strong> attributes are set to true (in addition to the asterisks next to the labels) indicating that the name and email fields are required. The second part of the example is a snippet of JavaScript that validates the email format and sets the <strong>aria-invalid</strong> attribute of the email field (line 12 of the HTML) according to the result (in addition to changing the presentation of the element).</p>
+
+<p><em>Example 4a. A form with required fields.</em></p>
+
+<pre class="brush: html">&lt;form&gt;
+  &lt;div&gt;
+    &lt;label for="name"&gt;* Name:&lt;/label&gt;
+    &lt;input type="text" value="name" id="name" aria-required="true"/&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;label for="phone"&gt;Phone:&lt;/label&gt;
+    &lt;input type="text" value="phone" id="phone" aria-required="false"/&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;label for="email"&gt;* E-mail:&lt;/label&gt;
+    &lt;input type="text" value="email" id="email" aria-required="true"/&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<p><em>Example 4b. Part of a script that validates the form entry.</em></p>
+
+<pre class="brush: js">var validate = function () {
+  var emailElement = document.getElementById(emailFieldId);
+  var valid = emailValid(formData.email); // returns true if valid, false otherwise
+
+  emailElement.setAttribute("aria-invalid", !valid);
+  setElementBorderColour(emailElement, valid); // sets the border to red if second arg is false
+};</pre>
+
+<h2 id="Providing_Helpful_Error_Messages" name="Providing_Helpful_Error_Messages">提供有幫助的錯誤訊息</h2>
+
+<p>繼續閱讀了解如何使用 <a href="/en-US/docs/aria/forms/alerts" title="aria/forms/alerts">ARIA alerts to enhance forms</a>.</p>
+
+<div class="note">TBD: we should either combine into one article or separate into techniques, or both. Also, is ARIA markup appropriate for error messages in a page loaded after server side validation?</div>
+
+<p>參閱 <a href="http://www.w3.org/TR/wai-aria-practices/" title="http://www.w3.org/TR/wai-aria-practices/">WAI-ARIA Authoring Practices</a> .</p>
diff --git a/files/zh-tw/web/accessibility/aria/forms/index.html b/files/zh-tw/web/accessibility/aria/forms/index.html
new file mode 100644
index 0000000000..ca529d1b1e
--- /dev/null
+++ b/files/zh-tw/web/accessibility/aria/forms/index.html
@@ -0,0 +1,19 @@
+---
+title: Forms
+slug: Web/Accessibility/ARIA/forms
+tags:
+  - ARIA
+  - Accessibility
+  - NeedsTranslation
+  - TopicStub
+translation_of: Web/Accessibility/ARIA/forms
+---
+<p>下列連結提供多種技術的資訊來處進網頁表格的存取:</p>
+
+<ul>
+ <li><a href="/en/Accessibility/ARIA/Basic_form_hints">基本表格提示</a>:增加對於無效以及需使用的區域進行提示以及描述</li>
+ <li><a href="/en/Accessibility/ARIA/forms/alerts">警戒</a>:透過警戒功能顯示錯誤訊息於用戶端</li>
+ <li><a href="/en/Accessibility/ARIA/forms/Multipart_labels">多元件標籤</a>:啟動複雜表格標籤使表格可任意變動</li>
+</ul>
+
+<p>透過<a class="external" href="http://yaccessibilityblog.com/library/aria-invalid-form-inputs.html" title="http://yaccessibilityblog.com/library/aria-invalid-form-inputs.html">Yahoo! article on form validation and ARIA</a>, 網頁的瀏覽可發現上面所列出的技術的實際應用.</p>
diff --git a/files/zh-tw/web/accessibility/aria/index.html b/files/zh-tw/web/accessibility/aria/index.html
new file mode 100644
index 0000000000..891695ab5a
--- /dev/null
+++ b/files/zh-tw/web/accessibility/aria/index.html
@@ -0,0 +1,142 @@
+---
+title: ARIA
+slug: Web/Accessibility/ARIA
+tags:
+  - ARIA
+  - Accessibility
+  - NeedsTranslation
+  - TopicStub
+translation_of: Web/Accessibility/ARIA
+---
+<p>Accessible Rich Internet Applications <strong>(ARIA)</strong> defines ways to make Web content and Web applications (especially those developed with Ajax and JavaScript) more accessible to people with disabilities. For example, ARIA enables accessible navigation landmarks, JavaScript widgets, form hints and error messages, live content updates, and more.</p>
+
+<p>ARIA is a set of special accessibility attributes which can be added to any markup, but is especially suited to HTML. The <code>role</code> attribute defines what the general type of object is (such as an article, alert, or slider). Additional ARIA attributes provide other useful properties, such as a description for a form or the current value of a progressbar.</p>
+
+<p>ARIA is implemented in most popular browsers and screen readers. However, implementations vary and older technologies don't support it well (if at all). Use either "safe" ARIA that degrades gracefully, or ask users to upgrade to newer technology.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Please contribute and make ARIA better for the next person! Not enough time? Send suggestions to Mozilla's <a href="https://lists.mozilla.org/listinfo/accessibility">accessibility mailing list</a>, or #accessibility <a href="https://wiki.mozilla.org/IRC">IRC channel</a>.</p>
+</div>
+
+<table class="topicpage-table">
+ <tbody>
+  <tr>
+   <td>
+    <h3 id="Documentation" name="Documentation">Getting Started with ARIA</h3>
+
+    <dl>
+     <dt><a href="/en-US/docs/Accessibility/An_overview_of_accessible_web_applications_and_widgets" title="An overview of accessible web applications and widgets">Introduction to ARIA</a></dt>
+     <dd>A quick introduction to making dynamic content accessible with ARIA. See also the classic <a class="external" href="http://dev.opera.com/articles/view/introduction-to-wai-aria/" title="http://dev.opera.com/articles/view/introduction-to-wai-aria/">ARIA intro by Gez Lemon</a>, from 2008.</dd>
+     <dt><a href="/en-US/docs/Accessibility/ARIA/Web_applications_and_ARIA_FAQ" title="https://developer.mozilla.org/en-US/docs/Accessibility/Web_applications_and_ARIA_FAQ">Web Applications and ARIA FAQ</a></dt>
+     <dd>Answers common questions about WAI-ARIA and why it's needed to make web applications accessible.</dd>
+     <dt><a class="external" href="http://zomigi.com/blog/videos-of-screen-readers-using-aria-updated/" title="http://zomigi.com/blog/videos-of-screen-readers-using-aria-updated/">Videos of Screen Readers Using ARIA</a></dt>
+     <dd>See both real and simplfied examples from around the web, including "before" and "after" ARIA videos. </dd>
+     <dt><a class="external" href="http://w3c.github.io/aria-in-html/">Using ARIA in HTML</a></dt>
+     <dd>A practical guide for developers. It suggests what ARIA attributes to use on HTML elements. Suggestions are based on implementation realities.</dd>
+    </dl>
+
+    <h3 id="Simple_ARIA_Enhancements">Simple ARIA Enhancements</h3>
+
+    <dl>
+     <dt><a class="external" href="http://www.paciellogroup.com/blog/2010/10/using-wai-aria-landmark-roles/" rel="external" title="http://www.paciellogroup.com/blog/2010/10/using-wai-aria-landmark-roles/">Enhancing Page Navigation with ARIA Landmarks</a></dt>
+     <dd>A nice intro to using ARIA landmarks to improve web page navigation for screen reader users. <a class="external" href="http://www.paciellogroup.com/blog/2011/07/html5-accessibility-chops-aria-landmark-support/" rel="external" title="http://www.paciellogroup.com/blog/2011/07/html5-accessibility-chops-aria-landmark-support/">See also, ARIA landmark implementation notes</a> and examples on real sites (updated as of July '11).</dd>
+     <dt><a href="/en-US/docs/ARIA/forms" rel="internal" title="/en-US/docs/ARIA/forms">Improving Form Accessibility</a></dt>
+     <dd>ARIA is not just for dynamic content! Learn how to improve accessibility of HTML forms using additional ARIA attributes. </dd>
+     <dt><a href="/en-US/docs/Accessibility/ARIA/ARIA_Live_Regions" title="Live Regions">Live regions (work-in-progress)</a></dt>
+     <dd>Live regions provide suggestions to screen readers about how to handle changes to the contents of a page.</dd>
+     <dt><a class="external" href="http://www.freedomscientific.com/Training/Surfs-up/AriaLiveRegions.htm" rel="external" title="http://www.freedomscientific.com/Training/Surfs-up/AriaLiveRegions.htm">Using ARIA Live Regions to Announce Content Changes</a></dt>
+     <dd>A quick summary of live regions, by the makers of JAWS screen reader software. Note that live regions are also supported by NVDA in Firefox, and VoiceOver with Safari (as of OS X Lion and iOS 5).</dd>
+    </dl>
+
+    <h3 id="ARIA_for_Scripted_Widgets">ARIA for Scripted Widgets</h3>
+
+    <dl>
+     <dt><a class="external" href="/en-US/docs/Accessibility/Keyboard-navigable_JavaScript_widgets" title="en-US/docs/Accessibility/Keyboard-navigable_JavaScript_widgets">Keyboard Navigation and Focus for JavaScript Widgets</a></dt>
+     <dd>The first step in developing an accessible JavaScript widget is to make it keyboard navigable. This article steps through the process. The <a class="external" href="http://www.yuiblog.com/blog/2009/02/23/managing-focus/" title="http://www.yuiblog.com/blog/2009/02/23/managing-focus/">Yahoo! focus management article</a> is a great resource as well.</dd>
+     <dt><a class="external" href="http://access.aol.com/dhtml-style-guide-working-group/" title="http://dev.aol.com/dhtml_style_guide">Style Guide for Keyboard Navigation</a></dt>
+     <dd>A challenge with ARIA is getting developers to implement consistent behavior -- clearly best for users. This style guide describes the keyboard interface for common widgets.</dd>
+    </dl>
+
+    <h3 id="ARIA_Resources">ARIA Resources</h3>
+
+    <dl>
+     <dt><a href="/en-US/docs/Accessibility/ARIA/widgets/overview" title="en-US/docs/aria/widgets/overview">Widget Techniques, Tutorials, and Examples</a></dt>
+     <dd>Need a slider, a menu, or another kind of widget? Find resources here.</dd>
+     <dt><a class="external" href="http://www.paciellogroup.com/blog/2009/07/wai-aria-implementation-in-javascript-ui-libraries/" title="http://www.paciellogroup.com/blog/2009/07/wai-aria-implementation-in-javascript-ui-libraries/">ARIA-Enabled JavaScript UI Libraries</a></dt>
+     <dd>If you're starting a new project, choose a UI widget library with ARIA support already built-in. Warning: this is from 2009 -- content should be moved to an MDN page where it can be updated.</dd>
+     <dt><a class="external" href="http://dl.dropbox.com/u/573324/CSUN2012/index.html" title="http://dl.dropbox.com/u/573324/CSUN2012/index.html">Accessibility of HTML5 and Rich Internet Applications - CSUN 2012 Workshop Materials</a></dt>
+     <dd>Includes slide presentations and examples.</dd>
+    </dl>
+   </td>
+   <td>
+    <h3 id="Community" name="Community">Mailing List</h3>
+
+    <dl>
+     <dt><a class="link-https" href="https://groups.google.com/forum/#!forum/free-aria" title="https://groups.google.com/forum/#!forum/free-aria">Free ARIA Google Group</a></dt>
+     <dd>A place to ask questions about ARIA, as well as make suggestions for improving the ARIA documentation found on these pages.</dd>
+    </dl>
+
+    <h3 id="Community" name="Community">Blogs</h3>
+
+    <p>ARIA information on blogs tends to get out of date quickly. Still, there is some great info out there from other developers making ARIA work today.</p>
+
+    <p><a class="external" href="http://www.paciellogroup.com/blog/category/wai-aria/" title="http://www.paciellogroup.com/blog/category/wai-aria/">Paciello Group</a></p>
+
+    <p><a class="external" href="http://www.accessibleculture.org/tag/wai-aria/" title="http://www.accessibleculture.org/tag/wai-aria/">Accessible Culture</a></p>
+
+    <h3 id="Filing_Bugs">Filing Bugs</h3>
+
+    <p><a href="/en/Accessibility/ARIA/How_to_file_ARIA-related_bugs" title="https://developer.mozilla.org/en/ARIA/How_to_file_ARIA-related_bugs">File ARIA bugs on browsers, screen readers, and JavaScript libraries</a>.</p>
+
+    <h3 id="Examples">Examples</h3>
+
+    <dl>
+     <dt><a class="external" href="/en-US/docs/Accessibility/ARIA/ARIA_Test_Cases" title="en-US/docs/ARIA/examples">ARIA Examples Library</a></dt>
+     <dd>A set of barebones example files which are easy to learn from.</dd>
+     <dt><span class="external">Accessible JS Widget Library Demos</span></dt>
+     <dd><a class="external" href="http://dojotoolkit.org/widgets" title="http://dojotoolkit.org/widgets">Dojo</a>, <a class="external" href="http://hanshillen.github.com/jqtest/" title="http://hanshillen.github.com/jqtest/">jQuery</a>, <a class="external" href="http://wiki.fluidproject.org/display/fluid/Components" title="http://wiki.fluidproject.org/display/fluid/Components">Fluid</a>, <a class="external" href="http://yuilibrary.com/gallery/" title="http://yuilibrary.com/gallery/">YUI</a></dd>
+    </dl>
+
+    <dl>
+     <dt><a class="external" href="http://mail.yahoo.com" title="http://mail.yahoo.com">Yahoo! Mail</a></dt>
+     <dd>Yahoo! puts it all together with Yahoo! Mail, a web app that almost looks like a native app. It works very well. As a <a class="external" href="http://www.marcozehe.de/2011/09/21/review-the-all-new-yahoo-mail-web-application/" title="http://www.marcozehe.de/2011/09/21/review-the-all-new-yahoo-mail-web-application/">review of Yahoo! Mail</a> by screen reader Marco Zehe says, "Keep up the good work!".</dd>
+    </dl>
+
+    <dl>
+     <dt><a class="external" href="http://search.yahoo.com" title="http://search.yahoo.com">Yahoo! Search</a></dt>
+     <dd>Yahoo! has done an amazing job of advancing ARIA here, by exercising ARIA's full capabilities and <a class="external" href="http://ycorpblog.com/2011/03/23/searchdirect/" title="http://ycorpblog.com/2011/03/23/searchdirect/">sharing their techniques</a>. Yahoo! Search uses a combination of ARIA landmarks, live regions, and widgets.</dd>
+    </dl>
+
+    <h3 id="Standardization_Efforts">Standardization Efforts</h3>
+
+    <dl>
+     <dt><a class="external" href="http://www.w3.org/WAI/intro/aria.php" title="http://www.w3.org/WAI/intro/aria.php">WAI-ARIA Activities Overview at W3C</a></dt>
+     <dd>Authoritative Overview of WAI-ARIA Standardization efforts by the Web Accessibility Initiative (WAI)</dd>
+     <dt><a class="external" href="http://www.w3.org/TR/wai-aria/" title="http://www.w3.org/TR/wai-aria/">WAI-ARIA Specification</a></dt>
+     <dd>The W3C specification itself, useful as a reference. Note that, at this stage, it is important to test compatibility, as implementations are still inconsistent.</dd>
+     <dt><a class="external" href="http://www.w3.org/WAI/PF/aria-practices/" title="http://www.w3.org/WAI/PF/aria-practices/">WAI-ARIA Authoring Practices</a></dt>
+     <dd>Like the W3C WAI-ARIA specification, the official best practices represents a future ideal -- a day when authors can rely on consistent ARIA support across browsers and screen readers. The W3C documents provide an in-depth view of ARIA.<br>
+     <br>
+     For now, web developers implementing ARIA should maximize compatibility. Use best practices docs and examples based on current implementations.</dd>
+     <dt><a class="external" href="http://www.openajax.org/member/wiki/Accessibility" title="http://www.openajax.org/member/wiki/Accessibility">Open AJAX Accessibility Task Force</a></dt>
+     <dd>The Open AJAX effort centers around developing tools, sample files, and automated tests for ARIA.</dd>
+     <dt><a href="/en-US/docs/Accessibility/ARIA/ARIA_Techniques" title="ARIA Techniques">Under Construction: WCAG 2.0 ARIA Techniques</a></dt>
+     <dd>The community needs a complete set of WCAG techniques for WAI-ARIA + HTML, so that organizations can be comfortable claiming their ARIA-enabled content is WCAG compliant. This is mostly important when regulations or policies are based on WCAG.</dd>
+    </dl>
+   </td>
+  </tr>
+ </tbody>
+ <tbody>
+  <tr>
+   <td colspan="2">
+    <h3 id="Related_Topics" name="Related_Topics">Related Topics</h3>
+
+    <dl>
+     <dd><a href="/en-US/docs/Accessibility" title="en-US/docs/Accessibility">Accessibility</a>, <a href="/en-US/docs/AJAX" title="en-US/docs/AJAX">AJAX</a>, <a href="/en-US/docs/JavaScript" title="en-US/docs/JavaScript">JavaScript</a></dd>
+    </dl>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p> </p>
diff --git a/files/zh-tw/web/accessibility/index.html b/files/zh-tw/web/accessibility/index.html
new file mode 100644
index 0000000000..b8ed259ecf
--- /dev/null
+++ b/files/zh-tw/web/accessibility/index.html
@@ -0,0 +1,61 @@
+---
+title: 無障礙網頁
+slug: Web/Accessibility
+tags:
+  - Accessibility
+  - Advanced
+  - Landing
+  - NeedsTranslation
+  - TopicStub
+  - Web Development
+translation_of: Web/Accessibility
+---
+<p><span class="seoSummary">網路開發中的無障礙網頁，意味著盡可能令所有人都能使用網站，就算是在某些感官方面受限的人也不例外。本頁面會提供一些關於無障礙網頁的資訊。</span></p>
+
+<p>「理想的無障礙環境就是在各方面都營造一個無障礙的環境。在有形方面，所應該考量事情包括，生活上、行動上、教育上所可能遭受到的障礙，並提供其足以克服這些環境的需求，此等需求包括個體本身的配備，如點字機……以及周圍環境中的裝設，如扶手、導盲磚……」 <a class="external" href="https://zh.wikipedia.org/wiki/%E7%84%A1%E9%9A%9C%E7%A4%99%E7%92%B0%E5%A2%83">中文維基百科的「無障礙環境」、「理想無障礙環境」章節</a></p>
+
+<p>「<strong>從根本上，網路是為了在所有人面前都能運行而設計的</strong>，無論他們使用的軟硬體、語言文化、地理位置、抑或身心功能如何。當聽覺、運動、視力或認知能力障礙的人，都能訪問網路的時候，這個目標才算達成。」<a href="http://www.w3.org/standards/webdesign/accessibility" title="http://www.w3.org/standards/webdesign/accessibility">W3C - Accessibility</a></p>
+
+<div class="cleared topicpage-table">
+<div class="section">
+<h2 class="Key_accessibility_tutorials" id="Key_accessibility_tutorials" name="Key_accessibility_tutorials">重要概念</h2>
+
+<p>MDN <a href="/zh-TW/docs/Learn/Accessibility">Accessibility Learning Area</a> 涵蓋了最新的無障礙網頁教學所需：</p>
+
+<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>
+</div>
+
+<div class="section">
+<h2 class="Other_documentation" id="Other_documentation" name="Other_documentation">其他文件</h2>
+
+<dl>
+ <dt><a href="/zh-TW/docs/Web/Accessibility/Understanding_WCAG">Understanding the Web Content Accessibility Guidelines</a></dt>
+ <dd>
+ <p>This set of articles provides quick explanations to help you understand the steps that need to be taken to conform to the recommendations outlined in the W3C Web Content Accessibility Guidelines 2.0 (WCAG 2.0 or just WCAG, for the purposes of this writing).</p>
+ </dd>
+ <dt><a href="/zh-TW/Accessibility/Keyboard-navigable_JavaScript_widgets" title="en/Accessibility/Keyboard-navigable JavaScript widgets">Keyboard-navigable JavaScript widgets</a></dt>
+ <dd>Until now, web developers who want to make their styled &lt;div&gt; and &lt;span&gt; based widgets have lacked the proper techniques. <strong>Keyboard accessibility</strong> is part of the minimum accessibility requirements which a developer should be aware of.</dd>
+ <dt><a href="/zh-TW/docs/Accessibility/ARIA" title="/en-US/docs/Accessibility/ARIA">ARIA</a></dt>
+ <dd>A collection of articles to learn how to use ARIA to make your HTML documents more accessible.</dd>
+ <dt><a href="/zh-TW/docs/Accessibility/AT_Development" title="AT Development">Assistive technology (AT) development</a></dt>
+ <dd>A collection of articles intended for AT developers</dd>
+ <dt><a href="/zh-TW/docs/Web/Accessibility/Mobile_accessibility_checklist">Mobile accessibility checklist</a></dt>
+ <dd>This document provides a concise checklist of accessibility requirements for mobile app developers.</dd>
+</dl>
+
+<p><span class="alllinks"><a href="/zh-TW/docs/tag/Accessibility" title="/en-US/docs/tag/Accessibility">所有與無障礙網頁相關的文章……</a></span></p>
+</div>
+</div>
diff --git a/files/zh-tw/web/accessibility/mobile_accessibility_checklist/index.html b/files/zh-tw/web/accessibility/mobile_accessibility_checklist/index.html
new file mode 100644
index 0000000000..b05da206bc
--- /dev/null
+++ b/files/zh-tw/web/accessibility/mobile_accessibility_checklist/index.html
@@ -0,0 +1,94 @@
+---
+title: 行動無障礙檢核清單
+slug: Web/Accessibility/Mobile_accessibility_checklist
+translation_of: Web/Accessibility/Mobile_accessibility_checklist
+---
+<div class="summary">
+<p><span class="seoSummary">本文提供行動應用程式開發者一個簡潔的無障礙必備要件檢核清單，本文將隨著更多模型產生而不斷地演進。</span></p>
+</div>
+
+<h2 id="顏色">顏色</h2>
+
+<ul>
+ <li>顏色對比<strong>必須</strong>符合<a href="http://www.w3.org/TR/WCAG/">WCAG 2.0</a> AA 等級要求:
+
+  <ul>
+   <li>一般文字對比值為4.5:1(小於18點字或14點粗體)</li>
+   <li>大文字對比值為 3:1(大於18點字或14點粗體)</li>
+  </ul>
+ </li>
+ <li>透過顏色傳遞資訊 <strong>必須</strong> 能藉由其他方式獲得資訊 (底線文字表示連結等)</li>
+</ul>
+
+<div class="note">
+<p><strong>注意</strong>: Jon Snook已撰寫實用的 <a href="http://snook.ca/technical/colour_contrast/colour.html">Colour Contrast Checker</a> 能用於檢查背景與前景顏色的對比。同樣地，<a href="http://contrast-finder.tanaguru.com/">Tanaguru Contrast-Finder</a> 也提供類似功能，而且建議相似且更好的對比顏色提供你考量使用。</p>
+</div>
+
+<h2 id="可視性">可視性</h2>
+
+<ul>
+ <li>內容隱藏技術如完全不透明、Z型態索引順序與螢幕外的配置<strong>必須不能</strong>單獨用於處理可視性。</li>
+ <li>目前可視螢幕之外的所有事物<strong>必須</strong>真正地不可見(特別適用於具有多個卡片的單一頁面應用程式)：
+  <ul>
+   <li><strong>使用</strong> <code>hidden</code> 屬性或 <code>visibility</code> 或 <code>display</code> 樣式屬性。</li>
+   <li>除非絕對無法避免，否則<strong>不應</strong>使用<code>aria-hidden</code> 屬性。</li>
+  </ul>
+ </li>
+</ul>
+
+<h2 id="焦點">焦點</h2>
+
+<ul>
+ <li>所有可觸發的元素<strong>必須</strong>可獲得焦點：
+
+  <ul>
+   <li>標準的控制措施如連結、按鈕與表單輸入框預設為可獲得焦點。</li>
+   <li>非標準的控制措施<strong>必須</strong>賦予它們合適的<a href="http://www.w3.org/TR/wai-aria/roles">ARIA Role</a> ，如按鈕、連結或核取框。</li>
+  </ul>
+ </li>
+ <li>焦點應該以邏輯的順序與一致的方式處理。</li>
+</ul>
+
+<h2 id="文字相等意義">文字相等意義</h2>
+
+<ul>
+ <li>在應用程式之中，為每一個非嚴格呈現的非文字元素提供文字相等意義。
+  <ul>
+   <li>在適當情況下使用<em>alt與</em><em>title</em>(使用指引請參見Steve Faulkner關於<a href="http://blog.paciellogroup.com/2013/01/using-the-html-title-attribute-updated/">Using the HTML title attribute</a>的文章)。</li>
+   <li>如果上述屬性不適用，則使用合適的<a href="http://www.w3.org/WAI/PF/aria/states_and_properties#global_states_header">ARIA屬性</a>如<code>aria-label</code>、<code>aria-labelledby</code>或 <code>aria-describedby。</code></li>
+  </ul>
+ </li>
+ <li>文字圖片 <strong>必須</strong>避免使用。</li>
+ <li>所有表單控制措施<strong>必須</strong>有標籤({{ htmlelement("label") }} 元素) ，以利於螢幕報讀器使用者使用。</li>
+</ul>
+
+<h2 id="處理狀態">處理狀態</h2>
+
+<ul>
+ <li>標準控制措施如選項按鈕與核取框可被作業系統處理。然而，其他客製的控制措施狀態改變必須透過<a href="http://www.w3.org/TR/wai-aria/states_and_properties#attrs_widgets_header">ARIA狀態</a>如<code> aria-checked</code>、<code>aria-disabled</code>、<code>ria-selected</code>、<code>aria-expanded</code>與<code>aria-pressed</code>來提供。</li>
+</ul>
+
+<h2 id="一般準則">一般準則</h2>
+
+<ul>
+ <li>應用程式的名稱<strong>必須</strong>提供。</li>
+ <li>標題<strong>必須</strong>不能破壞層級結構。
+  <pre class="brush: html">&lt;h1&gt;Top level heading&lt;/h1&gt;
+  &lt;h2&gt;Secondary heading&lt;/h2&gt;
+  &lt;h2&gt;Another secondary heading&lt;/h2&gt;
+    &lt;h3&gt;Low level heading&lt;/h3&gt;</pre>
+ </li>
+ <li><a href="http://www.w3.org/TR/wai-aria/roles#landmark_roles_header">ARIA地標角色</a><strong>應該</strong>用於描述應用程式或文件結構，例如<code>banner</code>、<code>complementary</code>、<code>contentinfo</code>、 <code>main</code>、 <code>navigation</code>、<code>search</code>。</li>
+ <li>觸控事件處理器<strong>必須</strong>只有在<code>touchend</code>事件上觸發。</li>
+ <li>觸控目標<strong>必須</strong>提供使用者足夠大的互動操作(有用的觸控目標大小指引請參見<a href="http://www.bbc.co.uk/guidelines/futuremedia/accessibility/mobile/design/touch-target-size">BBC Mobile Accessibility Guidelines</a>)。</li>
+</ul>
+
+<div class="note">
+<p><strong>注意</strong>: <a href="http://www.tanaguru.com/">Tanaguru自動無障礙測試服務</a>提供有用的方法去發現一些發生於網頁或安裝的網頁應用程式(如Firefox OS)無障礙錯誤。你可在<a href="http://tanaguru.org/">tanaguru.org</a>找到更多關於Tanaguru技術開發，以及貢獻該專案的資訊。</p>
+</div>
+
+<div class="note">
+<p><strong>注意</strong>: <a href="http://yzen.github.io/firefoxos/2014/04/30/mobile-accessibility-checklist.html">本文件原始版本</a>由<a href="http://yzen.github.io/">Yura Zenevich</a>撰寫。</p>
+</div>
+
+<p> </p>