initial commit

4 files changed, 444 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>