diff options
Diffstat (limited to 'files/vi/web/accessibility/aria/index.html')
| -rw-r--r-- | files/vi/web/accessibility/aria/index.html | 136 |
1 files changed, 136 insertions, 0 deletions
diff --git a/files/vi/web/accessibility/aria/index.html b/files/vi/web/accessibility/aria/index.html new file mode 100644 index 0000000000..b7587c76b0 --- /dev/null +++ b/files/vi/web/accessibility/aria/index.html @@ -0,0 +1,136 @@ +--- +title: ARIA +slug: Web/Accessibility/ARIA +tags: + - ARIA + - Accessibility + - HTML + - NeedsTranslation + - TopicStub +translation_of: Web/Accessibility/ARIA +--- +<p class="summary"><span class="seoSummary">Accessible Rich Internet Applications <strong>(ARIA) </strong>is a set of attributes that define ways to make web content and web applications (especially those developed with JavaScript) more accessible to people with disabilities. </span></p> + +<p><span class="seoSummary">It supplements HTML so that interactions and widgets commonly used in applications can be passed to assistive technologies</span> when there is not otherwise a mechanism. For example, ARIA enables accessible navigation landmarks in HTML4, JavaScript widgets, form hints and error messages, live content updates, and more. </p> + +<div class="warning"> +<p>Many of these widgets were later incorporated into HTML5, and <strong>developers should prefer using the correct semantic HTML element over using ARIA</strong>, if such an element exists. For instance, native elements have built-in <a href="/en-US/docs/Web/Accessibility/Keyboard-navigable_JavaScript_widgets">keyboard accessibility</a>, roles and states. However, if you choose to use ARIA, you are responsible for mimicking (the equivalent) browser behaviour in script.</p> +</div> + +<p>Here's the markup for a progress bar widget:</p> + +<pre class="brush: html notranslate"><div id="percent-loaded" role="progressbar" aria-valuenow="75" + aria-valuemin="0" aria-valuemax="100"> +</div> +</pre> + +<p>This progress bar is built using a <code><div></code>, which has no meaning. Unfortunately, there isn't a more semantic tag available to developers in HTML 4, so we need to include ARIA roles and properties. These are specified by adding attributes to the element. In this example, the <code>role="progressbar"</code> attribute informs the browser that this element is actually a JavaScript-powered progress bar widget. The <code>aria-valuemin</code> and <code>aria-valuemax</code> attributes specify the minimum and maximum values for the progress bar, and the <code>aria-valuenow</code> describes the current state of it and therefore must be kept updated with JavaScript.</p> + +<p>Along with placing them directly in the markup, ARIA attributes can be added to the element and updated dynamically using JavaScript code like this:</p> + +<pre class="brush: js notranslate"><code>// Find the progress bar <div> in the DOM. + var progressBar = document.getElementById("percent-loaded");</code> + +<code>// Set its ARIA roles and states, +// so that assistive technologies know what kind of widget it is.</code> + progressBar.setAttribute("role", "progressbar"); + progressBar.setAttribute("aria-valuemin", 0); + progressBar.setAttribute("aria-valuemax", 100); + +// Create a function that can be called at any time to update +// the value of the progress bar. + function updateProgress(percentComplete) { + progressBar.setAttribute("aria-valuenow", percentComplete); + }</pre> + +<div class="note"> +<p>Note that ARIA was invented after HTML4, so does not validate in HTML4 or its XHTML variants. However, the accessibility gains it provides far outweigh any technical invalidity.</p> + +<p>In HTML5, all ARIA attributes validate. The new landmark elements (<code><main></code>, <code><header></code>, <code><nav></code> etc) have built-in ARIA roles, so there is no need to duplicate them.</p> +</div> + +<h2 id="Support">Support</h2> + +<p>Like any other web technology, there are varying degrees of support for ARIA. Support is based on the operating system and browser being used, as well as the kind of assistive technology interfacing with it. In addition, the version of the operating system, browser, and assistive technology are contributing factors. Older software versions may not support certain ARIA roles, have only partial support, or misreport its functionality.</p> + +<p>It is also important to acknowledge that some people who rely on assistive technology are reluctant to upgrade their software, for fear of losing the ability to interact with their computer and browser. Because of this, it is important to <a href="/en-US/docs/Learn/Accessibility/HTML">use semantic HTML elements</a> whenever possible, as semantic HTML has far better support for assistive technology.</p> + +<p>It is also important to test your authored ARIA with actual assistive technology. Much as how browser emulators and simulators are not an effective solution for testing full support, proxy assistive technology solutions aren't sufficient to fully guarantee functionality.</p> + +<section id="sect1"> +<div class="row topicpage-table"> +<div class="section"> +<h2 class="Documentation" id="Tutorials">Tutorials</h2> + +<dl> + <dt><a href="/en-US/docs/Accessibility/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/">ARIA intro by Gez Lemon</a>, from 2008.</dd> + <dt><a class="external" href="http://zomigi.com/blog/videos-of-screen-readers-using-aria-updated/">Videos of screen readers using ARIA</a></dt> + <dd>See both real and simplified examples from around the web, including "before" and "after" ARIA videos.</dd> + <dt><a class="external" href="https://w3c.github.io/using-aria/">Using ARIA</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> + +<h2 id="Simple_ARIA_enhancements">Simple ARIA enhancements</h2> + +<dl> + <dt><a class="external" href="https://www.paciellogroup.com/blog/2013/02/using-wai-aria-landmarks-2013/">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/">See also, ARIA landmark implementation notes</a> and examples on real sites (updated as of July 2011).</dd> + <dt><a href="/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> +</dl> + +<h2 id="ARIA_for_Scripted_Widgets">ARIA for Scripted Widgets</h2> + +<dl> + <dt><a href="/en-US/docs/Web/Accessibility/Keyboard-navigable_JavaScript_widgets">Writing keyboard-navigable JavaScript widgets</a></dt> + <dd>Built-in elements like <input>, <button> etc have built-in keyboard accessibility. If you 'fake' these with <div>s and ARIA, you must ensure your widgets are keyboard accessible.</dd> + <dt><a href="/en-US/docs/Accessibility/ARIA/ARIA_Live_Regions" title="Live Regions">Live regions</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">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. Live regions are also supported by NVDA with Firefox, and VoiceOver with Safari.</dd> +</dl> +</div> + +<div class="section"> +<h2 class="Tools" id="References">References</h2> + +<dl> + <dt><a href="/en-US/docs/Web/Accessibility/ARIA/Roles">ARIA Roles</a></dt> + <dd>Reference pages covering all the WAI-ARIA roles discussed on MDN.</dd> +</dl> + +<h2 class="Tools" id="Standardization_Efforts">Standardization Efforts</h2> + +<dl> + <dt><a class="external" href="https://www.w3.org/TR/wai-aria-1.1/">WAI-ARIA Specification</a></dt> + <dd>The W3C specification itself.</dd> + <dt><a class="external" href="https://www.w3.org/TR/wai-aria-practices-1.1/">WAI-ARIA Authoring Practices</a></dt> + <dd> + <p>The official best practices documents how best to ARIA-ify common widgets and interactions. An excellent resource.</p> + </dd> +</dl> + +<h2 id="Videos">Videos</h2> + +<p>Following talks are a great way to understand ARIA:</p> + +<p><a href="https://www.youtube.com/watch?v=qdB8SRhqvFc">ARIA, Accessibility APIs and coding like you give a damn! – Léonie Watson</a></p> + +<h2 id="Filing_Bugs">Filing Bugs</h2> + +<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> +</div> +</div> +</section> + +<h2 id="Related_Topics" name="Related_Topics">Related topics</h2> + +<p><a href="/en-US/docs/Accessibility">Accessibility</a>, <a href="/en-US/docs/AJAX">AJAX</a>, <a href="/en-US/docs/Web/JavaScript">JavaScript</a></p> + +<section id="Quick_Links"> +<ol> + <li><a href="/en-US/docs/Web/Guide" title="REDIRECT Web">Web Development</a></li> + <li><a href="/en-US/docs/Mozilla/Accessibility" title="Accessibility is the idea that software (among other things) should be designed to be usable and, as much as possible, convenient to use for people with disabilities. Mozilla strives to make its software accessible; the documents below cover the ways in which we do so.">Accessibility and Mozilla</a></li> +</ol> +</section> |