aboutsummaryrefslogtreecommitdiff
path: root/files/pl/web/accessibility
diff options
context:
space:
mode:
authorPeter Bengtsson <mail@peterbe.com>2020-12-08 14:42:52 -0500
committerPeter Bengtsson <mail@peterbe.com>2020-12-08 14:42:52 -0500
commit074785cea106179cb3305637055ab0a009ca74f2 (patch)
treee6ae371cccd642aa2b67f39752a2cdf1fd4eb040 /files/pl/web/accessibility
parentda78a9e329e272dedb2400b79a3bdeebff387d47 (diff)
downloadtranslated-content-074785cea106179cb3305637055ab0a009ca74f2.tar.gz
translated-content-074785cea106179cb3305637055ab0a009ca74f2.tar.bz2
translated-content-074785cea106179cb3305637055ab0a009ca74f2.zip
initial commit
Diffstat (limited to 'files/pl/web/accessibility')
-rw-r--r--files/pl/web/accessibility/aria/aplikacje_internetowe_i_aria_faq/index.html299
-rw-r--r--files/pl/web/accessibility/aria/index.html127
2 files changed, 426 insertions, 0 deletions
diff --git a/files/pl/web/accessibility/aria/aplikacje_internetowe_i_aria_faq/index.html b/files/pl/web/accessibility/aria/aplikacje_internetowe_i_aria_faq/index.html
new file mode 100644
index 0000000000..35510946d6
--- /dev/null
+++ b/files/pl/web/accessibility/aria/aplikacje_internetowe_i_aria_faq/index.html
@@ -0,0 +1,299 @@
+---
+title: Aplikacje internetowe i ARIA FAQ
+slug: Web/Accessibility/ARIA/Aplikacje_internetowe_i_ARIA_FAQ
+tags:
+ - ARIA
+translation_of: Web/Accessibility/ARIA/Web_applications_and_ARIA_FAQ
+---
+<h2 id="Czym_jest_ARIA">Czym jest ARIA?</h2>
+
+<p>WAI-ARIA z angielskiego <a class="external" href="http://www.w3.org/WAI/intro/aria.php" title="http://www.w3.org/WAI/intro/aria.php">Accessible Rich Internet Applications (ARIA)</a> dokumentacja stworzona przez <a class="external" href="http://www.w3.org/WAI/" title="http://www.w3.org/WAI/">Web Accessibility Initiative (WAI)</a> z inicjatywy <a class="external" href="http://www.w3.org/" title="http://www.w3.org/">W3C</a>. ARIA dostarcza sposób aby tworzyć aplikacje internetowe, lepiej dostępne dla osób zmagającymi się z różnorakimi problemami, włącznie z tymi, którzy muszą korzystać z dodatkowych narzędzi, które umożliwiają im użytkowanie stron internetowych takich jak: czytniki ekranowe czy szkła powiększające.</p>
+
+<p>ARIA dostarcza semantykę opisującą role (eng. roles), statusy (eng. states) oraz funkcjonalności dla wielu komponentów stron internetowych takich jak: nawigacje (menu), slajdery, okna dialogowe czy drzewa rozwijane (częściej występujące w aplikacjach desktopowych). Dostarcza również informacje strukturalne, które pomagają twórcom identyfikować odpowiednie komponenty. ARIA pozwala dynamicznym aplikacjom internetowym opartym o JavaScript na interpolację z technologiami pochodzenia desktopowego.</p>
+
+<p>Po więcej informacji na temat ARIA, przejdź do: <a href="/en/Accessibility/An_overview_of_accessible_web_applications_and_widgets" title="en/Accessibility/An overview of accessible web applications and widgets">Overview of accessible web applications and widgets</a>. (TBD Polish translation).</p>
+
+<h2 id="Wsparcie_dla_ARIA">Wsparcie dla ARIA</h2>
+
+<p>ARIA jest relatywnie młodą specyfikacją ale jest coraz lepiej wspierana. Posiada wsparcie głównych przeglądarek, technologii wspomagających, narzędzi JavaScript oraz aplikacji. Jednakże część użytkowników może wciąż używać starszych wersji tych narzędzi czy aplikacji. W takim przypadku możesz rozważyć implementację ARIA ulepszając swoją aplikację progresywnie, na przykład przy użyciu JavaScript, zamiast znaczników HTML w celu lepszego wsparcia dla użytkowników wciąż kożystających ze starych technologii.</p>
+
+<h3 id="Przeglądarki">Przeglądarki</h3>
+
+<p>ARIA posiada wsparcie następujacych przeglądarek:</p>
+
+<table class="standard-table">
+ <tbody>
+ <tr>
+ <th>Nazwa</th>
+ <th>Wersja minimum</th>
+ <th>Informacja dodatkowa</th>
+ </tr>
+ <tr>
+ <td>Firefox</td>
+ <td>3.0+</td>
+ <td>Działa z NVDA, JAWS 10+ i Orca</td>
+ </tr>
+ <tr>
+ <td><a class="external" href="http://dev.chromium.org/developers/design-documents/accessibility#TOC-WAI-ARIA-Support" title="http://dev.chromium.org/developers/design-documents/accessibility#TOC-WAI-ARIA-Support">Chrome</a></td>
+ <td>15+</td>
+ <td>Czytniki ekranowe mogą mieć problem z Chrome 15 i starszymi</td>
+ </tr>
+ <tr>
+ <td>Safari</td>
+ <td>4+</td>
+ <td>Działa z VoiceOver od iOS5 oraz OS X Lion</td>
+ </tr>
+ <tr>
+ <td><a class="external" href="http://www.opera.com/docs/specs/presto28/wai-aria/roleattributes/" title="http://www.opera.com/docs/specs/presto28/wai-aria/roleattributes/">Opera</a></td>
+ <td>9.5+</td>
+ <td>Wymaga VoiceOver na OS X w początkowych wersjach</td>
+ </tr>
+ <tr>
+ <td><a class="external" href="http://msdn.microsoft.com/en-us/library/cc891505%28v=vs.85%29.aspx" title="http://msdn.microsoft.com/en-us/library/cc891505(v=vs.85).aspx">Internet Explorer</a></td>
+ <td>8+</td>
+ <td>Działa z JAWS 10+ i NVDA.</td>
+ </tr>
+ </tbody>
+</table>
+
+<p>W niektórych przypadkach, we wczesnych wersjach przeglądarek, wsparcie ARIA może być ograniczone, po bardziej dokładne informacje udaj się na:</p>
+
+<ul>
+ <li><a class="external" href="http://caniuse.com/wai-aria" title="http://caniuse.com/wai-aria">caniuse.com</a></li>
+ <li><a class="external" href="http://www.paciellogroup.com/blog/2012/02/rough-guide-browsers-operating-systems-and-screen-reader-support/" title="http://www.paciellogroup.com/blog/2012/02/rough-guide-browsers-operating-systems-and-screen-reader-support/">The Paciello Group</a></li>
+</ul>
+
+<h3 id="Technologie_wspomagające">Technologie wspomagające</h3>
+
+<p>Technologie wspomagające coraz częściej wspierają ARIA. Między innymi:</p>
+
+<table class="standard-table">
+ <tbody>
+ <tr>
+ <th>Nazwa Technologii</th>
+ <th>Wersja minimum, podstawowe wsparcie ARIA</th>
+ <th>Wersja minimum dla live region i alert support</th>
+ </tr>
+ <tr>
+ <td>NVDA</td>
+ <td>2010.2<br>
+ (NVDA is always a free upgrade)</td>
+ <td>2011.1 dla Firefox, brak wsparcia live region dla IE z dniem 2011.2.</td>
+ </tr>
+ <tr>
+ <td>Orca</td>
+ <td>? (TBD)</td>
+ <td>? (TBD)</td>
+ </tr>
+ <tr>
+ <td>VoiceOver</td>
+ <td>OSX 10.5,<br>
+ iOS 4</td>
+ <td>OS X 10.7<br>
+ iOS 5</td>
+ </tr>
+ <tr>
+ <td>JAWS</td>
+ <td>8</td>
+ <td>10</td>
+ </tr>
+ <tr>
+ <td>Window-Eyes</td>
+ <td>7</td>
+ <td>? (TBD)</td>
+ </tr>
+ <tr>
+ <td>ZoomText</td>
+ <td>?</td>
+ <td>? (TBD)</td>
+ </tr>
+ </tbody>
+</table>
+
+<p>Wczesne wersje tych narzędzi często mają częściową implementację ARIA lub zawierającą błędy.</p>
+
+<p>Na temat wsparcia JAWS dla ARIA, przeczytaj artykuł Paciello Group: <a class="external" href="http://www.paciellogroup.com/blog/2010/10/jaws-support-for-aria/" title="http://www.paciellogroup.com/blog/2010/10/jaws-support-for-aria/">JAWS Support for ARIA</a>.</p>
+
+<h3 id="Narzędzia_JavaScript">Narzędzia JavaScript</h3>
+
+<p>Role (roles), statusy (states), właściwości (properties) zostały dodane do wielu popularnych narzędzi JavaScript do tworzenia komponentów webowych, między innymi:</p>
+
+<ul>
+ <li>Dojo/Dijit</li>
+ <li>jQuery UI</li>
+ <li>Fluid Infusion</li>
+ <li>Google Closure</li>
+ <li>Google Web Toolkit</li>
+ <li>BBC Glow</li>
+ <li>Yahoo! User Interface Library (YUI)</li>
+</ul>
+
+<p>Po więcej informacji na temat dostępności ARIA w narzędziach JavaScript, przeczytaj:</p>
+
+<ul>
+ <li>Steve Faulkner's <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/">WAI-ARIA Implementation in JavaScript UI Libraries</a></li>
+</ul>
+
+<h2 id="ARIA_w_akcji">ARIA w akcji</h2>
+
+<p><a id="aria-w-akcji" name="aria-w-akcji">Przykład atrybutu ARIA dla paska postępu:</a></p>
+
+<pre class="brush:html;">&lt;div id="percent-loaded" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" /&gt;</pre>
+
+<p>Ten pasek postępu jest zbudowany z &lt;div&gt; z atrybutami ARIA określającymi role i właściwości. W tym przykładzie role="progressbar" daje informację przeglądarce, że działanie paska postępu jest sterowane w JavaScript. Atrybuty aria-valuemin oraz aria-valuemax określają minimalną i maksymalną wartość dla paska postępu, a aria-valuenow opisuje aktualny jego status.</p>
+
+<p>Atrybuty ARIA umieszczone wewnątrz tagu HTML mogą być dodawane i aktualizowane w JavaScript, kod poniżej:</p>
+
+<pre class="brush: javascript" id="line96">// Szukam elementu &lt;div&gt; w DOM.
+var progressBar = document.getElementById("percent-loaded");
+
+// Ustawiam role i statusy ARIA, aby technologie pomocnicze miały informację na temat komponentu.
+progressBar.setAttribute("role", "progressbar");
+progressBar.setAttribute("aria-valuemin", 0);
+progressBar.setAttribute("aria-valuemax", 100);
+
+// Tworzę funkcję aktualizującą pasek postępu,
+// którą następnie wywołam w odpowiednim miejscu aby zaktualizować pasek postępu
+function updateProgress(percentComplete) {
+ progressBar.setAttribute("aria-valuenow", percentComplete);
+}</pre>
+
+<h2 id="Czy_ARIA_zmieni_styl_mojej_strony_lub_działanie" style="line-height: 23px;">Czy ARIA zmieni styl mojej strony lub działanie?</h2>
+
+<p>Nie. ARIA jest przeznaczona tylko dla API technologi pomocniczych (assistive technologies), nie ma wpływu na DOM czy style. ARIA jest tylko dodatawanym do elementu HTML przez developera atrybutem, który ma wspomóc AT API (assistive technologi API). Mimo, że sama ARIA nie zmienia stylów to w połączeniu z atrybutem HTML, możemy odpowiednio stylować elementy ARIA w CSS:</p>
+
+<pre class="brush: css">.tab-panel[aria-hidden="true"] {
+  display: none;
+  }
+
+.tab-panel[aria-hidden="false"] {
+  display: block;
+  }
+</pre>
+
+<p><strong style="font-family: georgia,times,times new roman,serif; font-size: 1.628em; font-weight: 700; letter-spacing: -1px; line-height: 23px;">Co z walidacją?</strong></p>
+
+<p>Nowe atrybuty ARIA, jak <strong>role</strong> czy prefiks <strong>aria-</strong> nie są oficjalnie częścią specyfikacji HTML 4 czy XHTML 4. Przez co mogą nie przechodzić walidacji W3C: <a class="external" href="http://validator.w3.org/" title="http://validator.w3.org/">W3C's Markup Validator</a>.</p>
+
+<p>Jednym z rozwiązań tego problemu jest umieszczenie roli i statusów ARIA przy pomocy JavaScript jak zostało pokazane w powyższym przykładzie <a href="/#aria-w-akcji" title="#aria-in-action">ARIA w akcji</a>. Strona teoretycznie będzie niezgodna ze standardem ale przejdzie walidację.</p>
+
+<p>Problem rozwiązuje się w HTML5, który zawiera wbudowane wsparcie dla ARIA. Walidator W3C's HTML5 znajdzie nawet nieprawidłowe użycie ARIA na stronie HTML5.</p>
+
+<h2 id="Co_w_związku_z_HTML5_i_ARIA">Co w związku z HTML5 i ARIA?</h2>
+
+<p>HTML5 przedstawia wiele nowych tagów. Kilka z nich dotyczy bezpośrednio roli ARIA, jak na przykład nowy element &lt;progress&gt;. W przypadkach gdy przeglądarka wspiera tag HTML5 to również dotyczy ARIA, w takich przypadkach zazwyczaj nie ma potrzeby dodawania ról i statusów do elementu. ARIA zawiera jednak wiele ról, statusów i właściwości, które nie są dostępne w HTML5. W takim przypadku developer HTML5 może z nich korzystać. Po więcej informacji można się udać do artykułu Steve'a Faulkner'a <a class="external" href="http://www.paciellogroup.com/blog/2010/04/html5-and-the-myth-of-wai-aria-redundance/" title="http://www.paciellogroup.com/blog/2010/04/html5-and-the-myth-of-wai-aria-redundance/">o relacji HTML5 i ARIA</a>.</p>
+
+<h4 id="Łagodne_zejście_z_HTML5_do_ARIA">Łagodne zejście z HTML5 do ARIA</h4>
+
+<p>Przy tworzeniu aplikacji kompatybilnej HTML5 możesz zastosować w swoim kodzie łagodne zejście do ARIA w przypadku braku wsparcia dla przeglądarku. Używając przykładu z paskiem postępu, zastosować łagodne zejście, gdy tag &lt;progressbar&gt; nie jest wspierany.</p>
+
+<p>Przykład markupu HTML5 dla paska postępu:</p>
+
+<pre class="brush: html" id="line96">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+ &lt;head&gt;&lt;title&gt;Gracefully degrading progress bar&lt;/title&gt;&lt;/head&gt;
+ &lt;body&gt;
+ &lt;progress id="progress-bar" value="0" max="100"&gt;0% complete&lt;/progress&gt;
+ &lt;button id="update-button"&gt;Update&lt;/button&gt;
+ &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<p>... i kod JavaScript zapewniający wsparcie dla starszych przeglądarek:</p>
+
+<pre class="brush: javascript" id="line96">var progressBar = document.getElementById("progress-bar");
+
+// Sprawdza wsparcie tagu &lt;progress&gt; dla przeglądarki.
+var supportsHTML5Progress = (typeof (HTMLProgressElement) !== "undefined");
+
+function setupProgress() {
+ if (!supportsHTML5Progress) {
+ // HTML5 &lt;progress&gt; nie jest wspierany więc dodaje.
+ // ARIA role i statusy do elementu.
+ progressBar.setAttribute("role", "progressbar");
+ progressBar.setAttribute("aria-valuemin", 0);
+ progressBar.setAttribute("aria-valuemax", 100);
+ }
+}
+
+function updateProgress(percentComplete) {
+ if (!supportsHTML5Progress) {
+ // HTML5 &lt;progress&gt; nie jest wspierany przez przeglądarkę,
+ // więc musimy zaktualizować aria-valuenow atrybut
+ progressBar.setAttribute("aria-valuenow", percentComplete);
+ } else {
+ // HTML5 &lt;progress&gt; jest wspierany, więc aktualizujemy atrybut value.
+ progressBar.setAttribute("value", percentComplete);
+ }
+
+ progressBar.textContent = percentComplete + "% complete";
+}
+
+function initDemo() {
+  setupProgress(); // Instalacja paska postępu.
+
+ // Dodajemy click handler do przycisku, który zaktualizuje pasek postępu do 75%.
+ document.getElementById("update-button").addEventListener("click", function (e) {
+ updateProgress(75);
+ e.preventDefault();
+ }, false);
+}
+initDemo();
+</pre>
+
+<h2 id="Jak_działają_technologie_pomocnicze_(assistive_technologies)">Jak działają technologie pomocnicze (assistive technologies)?</h2>
+
+<p>Technologie pomocnicze używają używają API wbudowane w każdy system operacyjny, zaprojektowane tak aby opisywać role, statusy oraz strukturę interfejsu użytkownika. Na przykład: czytnik ekranu używa API do czytania interfejsu użytkownika przy pomocy silnika text-to-speech (tekst do mowy), a szkło powiększające używa go do uwyraźnienia  ważnych elementów na ekranie,  klawiatura ekranowa może używać API aby dostosować się do aktualnego kontekstu lub interfejsu. Technologie pomocnicze często korzystają z DOM przez API, aby najlepiej zrozumieć semantykę i atrybuty na stronie.</p>
+
+<p>ARIA jest mostem pomiędzy DOM a desktopem. Przeglądarki wskazują elementy ARIA do API technologii pomocniczych aby wyglądały jak komponenty natywne. W rezultacie użytkownik dostaje bardziej zwarty UX, gdzie komponenty JavaScript można porównywać do odpowiedników desktopowych.</p>
+
+<h2 id="Jak_można_przetestować_ARIA_Są_do_tego_darmowe_narzędzia">Jak można przetestować ARIA? Są do tego darmowe narzędzia?</h2>
+
+<p>Istnieją narzędzia do sprawdzania i debugowania ARIA:</p>
+
+<ul>
+ <li>Object Inspector dla Windows</li>
+ <li>Accessibility Inspector dla OS X</li>
+ <li>AccProbe dla Linux</li>
+ <li>Firebug's DOM Inspector</li>
+ <li><a class="external" href="http://code.google.com/p/ainspector/" title="http://code.google.com/p/ainspector/">Accessibility Inspector for Firebug</a></li>
+ <li><a href="https://chrome.google.com/webstore/detail/accessibility-developer-t/fpkknkljclfencbdbgkenhalefipecmb">Accessibility Developer Tools</a> dla Chrome</li>
+</ul>
+
+<p>Są również darmowe open source'owe czytniki ekranu, które mogą być użyte do testowania ARIA:</p>
+
+<ul>
+ <li><a class="external" href="http://live.gnome.org/Orca" title="http://live.gnome.org/Orca">Orca</a> dla Linux</li>
+ <li><a class="external" href="http://www.nvda-project.org/" title="http://www.nvda-project.org/">NVDA</a> dla Windows</li>
+ <li><a class="external" href="http://www.apple.com/accessibility/voiceover/" title="http://www.apple.com/accessibility/voiceover/">VoiceOver</a> wbudowany w OS X</li>
+</ul>
+
+<p>Kiedy testujesz ARIA pamiętaj:</p>
+
+<ol>
+ <li>Nieformalne testowanie przy pomocy czytników ekranu, nigdy nie zastąpi informacji zwrotnej, testowania i pomocy prawdziwych użytkowników</li>
+ <li>Czytniki ekranu to nie wszystko. Spróbuj testować przy pomocy różnych metod użyczyteczności i dostępności.</li>
+</ol>
+
+<p>Inne pomocne narzędzia i techniki testowania ARIA:</p>
+
+<ul>
+ <li><a class="external" href="http://yaccessibilityblog.com/library/test-aria-focus-bookmarklets.html" title="http://yaccessibilityblog.com/library/test-aria-focus-bookmarklets.html">Yahoo!'s ARIA bookmarklets</a></li>
+ <li>Fluid Project: <a class="external" href="http://wiki.fluidproject.org/display/fluid/Simple+Accessibility+Review+Protocol" title="http://wiki.fluidproject.org/display/fluid/Simple+Accessibility+Review+Protocol">simple accessibility evaluation techniques</a></li>
+</ul>
+
+<h2 id="Gdzie_można_pogadać_i_dopytać_o_ARIA">Gdzie można pogadać i dopytać o ARIA?</h2>
+
+<ul>
+ <li><a class="external" href="http://lists.w3.org/Archives/Public/wai-xtech/" title="http://lists.w3.org/Archives/Public/wai-xtech/">Wai-xtech mailing list</a> -- dyskusja na temat specyfikacji.</li>
+ <li><a class="external" href="http://groups.google.com/group/free-aria" title="http://groups.google.com/group/free-aria">Free-ARIA google group</a> -- dla developerów i użytkowników darmowych narzędzi i źródeł.</li>
+</ul>
+
+<h2 id="Gdzie_się_więcej_dowiem_o_ARIA">Gdzie się więcej dowiem o ARIA?</h2>
+
+<ul>
+ <li><a href="/en/Accessibility/An_overview_of_accessible_web_applications_and_widgets" title="en/Accessibility/An overview of accessible web applications and widgets">An overview of accessible web applications and widgets</a></li>
+ <li><a href="/en/Accessibility/Accessible_forms" title="en/Accessibility/Accessible forms">Accessible forms</a></li>
+ <li>The W3C's <a class="external" href="http://www.w3.org/WAI/aria/faq" title="http://www.w3.org/WAI/aria/faq">WAI-ARIA Frequently Asked Questions</a></li>
+ <li>WebAIM's <a class="external" href="http://webaim.org/techniques/aria/" title="http://webaim.org/techniques/aria/">Accessibility of Rich Internet Applications</a></li>
+</ul>
diff --git a/files/pl/web/accessibility/aria/index.html b/files/pl/web/accessibility/aria/index.html
new file mode 100644
index 0000000000..55e431478e
--- /dev/null
+++ b/files/pl/web/accessibility/aria/index.html
@@ -0,0 +1,127 @@
+---
+title: ARIA
+slug: Web/Accessibility/ARIA
+tags:
+ - ARIA
+ - Accessibility
+ - NeedsTranslation
+ - TopicStub
+ - Web
+translation_of: Web/Accessibility/ARIA
+---
+<p class="summary"><span class="seoSummary">Accessible Rich Internet Applications <strong>(ARIA)</strong> jest zbiorem atrybutów, które umożliwiają rozwój aplikacji webowych (szczególnie tych, które wykorzystują AJAX, Javascript itp.) w taki sposób, iż są one przyjaźniejsze ludziom z niepełnosprawnościami.  Dla przykładu, ARIA umożliwia bezproblemową nawigację po stronie, pomoce przy typowaniu, przyjazne użytkownikowi aktualizacje treści, i wiele, wiele więcej. </span></p>
+
+<p>ARIA jest zbiorem specjalnych atrybutów poprawiajacych dostępność aplikacji, które mogą zostać dodane do dowolnego języka znaczników. Jednakże atrybuty te są przystosowane głównie pod HTML, co powoduje, iż są one wyłącznie tam stosowane.<br>
+ Atrybut <code>role</code> definiuje specjalne role dla obiektów (takich jak <code>article</code> , <code>alert</code> , <code>slider</code> , czy <code>button</code> ). Dodatkowo atrubuty ARIA dostarczają inne przydatne opcje, takie jak opis do <code>form</code> , albo właściwą długość pasku postępu (np. instalacji, aktualizacji lub innego działania). Atrybuty aria moga także zostać użyte w celu aktywacji, deaktywacji, czy ustalenia innego stanu obiektów (np. stanu <code>button</code>)<br>
+  </p>
+
+<p>ARIA jest zaimplementowana w najbardziej popularnych przeglądarkach i czytnikach ekranowych. Jednakże, implementacje różnią się między sobą i starsze technologie mogą takich atrybutów dobrze nie wspierać. Oczywiście jeśli w ogóle wspierają.</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>
+
+<div class="row topicpage-table">
+<div class="section">
+<h3 id="Zacznij_z_ARIĄ">Zacznij z ARIĄ</h3>
+
+<dl>
+ <dt>Instrukcje do ARI</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 href="/en-US/docs/Accessibility/ARIA/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/">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="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="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>
+ <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">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>
+
+<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">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/">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/">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">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>
+</dl>
+</div>
+
+<div class="section">
+<h3 id="Mailing_List">Mailing List</h3>
+
+<dl>
+ <dt><a class="link-https" href="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="Blogs">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="https://www.paciellogroup.com/blog/archive/">Paciello Group</a></p>
+
+<p><a class="external" href="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">ARIA Examples Library</a></dt>
+ <dd>A set of barebones example files which are easy to learn from.</dd>
+ <dt>Accessible JS Widget Library Demos</dt>
+ <dd><a class="external" href="http://hanshillen.github.com/jqtest/">jQuery</a>, <a class="external" href="http://yuilibrary.com/gallery/">YUI</a></dd>
+ <dt><a class="external" href="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/">review of Yahoo! Mail</a> by screen reader Marco Zehe says, "Keep up the good work!".</dd>
+ <dt><a class="external" href="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/">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">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/">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/">WAI-ARIA Authoring Practices</a></dt>
+ <dd>
+ <p>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.</p>
+
+ <p>For now, web developers implementing ARIA should maximize compatibility. Use best practices docs and examples based on current implementations.</p>
+ </dd>
+ <dt><a class="external" href="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 important when regulations or policies are based on WCAG.</dd>
+</dl>
+</div>
+</div>
+
+<h3 id="Related_Topics" name="Related_Topics">Related Topics</h3>
+
+<p><a href="/en-US/docs/Accessibility">Accessibility</a>, <a href="/en-US/docs/AJAX">AJAX</a>, <a href="/en-US/docs/JavaScript">JavaScript</a></p>