unslug pl: move

4 files changed, 430 insertions, 0 deletions

diff --git a/files/pl/web/accessibility/an_overview_of_accessible_web_applications_and_widgets/index.html b/files/pl/web/accessibility/an_overview_of_accessible_web_applications_and_widgets/index.html
new file mode 100644
index 0000000000..06d9978f8a
--- /dev/null
+++ b/files/pl/web/accessibility/an_overview_of_accessible_web_applications_and_widgets/index.html
@@ -0,0 +1,165 @@
+---
+title: An overview of accessible web applications and widgets
+slug: Web/Dostępność/An_overview_of_accessible_web_applications_and_widgets
+translation_of: Web/Accessibility/An_overview_of_accessible_web_applications_and_widgets
+---
+<p><span id="result_box" lang="pl"><span>Sieć się zmienia.</span> <span>Statyczne witryny oparte na stronach są coraz częściej zastępowane dynamicznymi aplikacjami internetowymi w stylu aplikacji pulpitowych, które intensywnie wykorzystują JavaScript i AJAX.</span> <span>Projektanci tworzą niesamowite nowe widżety i kontrolki całkowicie za pomocą kombinacji JavaScript, HTML i CSS.</span> <span>Ta zmiana może znacznie poprawić responsywność i użyteczność internetu, ale wielu użytkowników jest zagrożonych wykluczeniem z powodu luk w dostępności.</span> <span>JavaScript tradycyjnie cieszy się reputacją niedostępności dla użytkowników technologii pomocniczych, takich jak czytniki ekranu, ale istnieją teraz sposoby na tworzenie dynamicznych interfejsów internetowych, które są dostępne dla szerokiego grona użytkowników.</span></span></p>
+
+<h2 id="Problem">Problem</h2>
+
+<p><span id="result_box" lang="pl"><span>Większość zestawów narzędzi JavaScript oferuje bibliotekę widżetów po stronie klienta, które naśladują zachowanie znanych interfejsów pulpitu.</span> <span>Suwaki, paski menu, widoki list plików i wiele więcej można zbudować za pomocą kombinacji JavaScript, CSS i HTML.</span> <span>Ponieważ specyfikacja HTML 4 nie zapewnia wbudowanych znaczników, które semantycznie opisują tego rodzaju widżety, programiści zazwyczaj używają ogólnych elementów, takich jak &lt;div&gt; i &lt;span&gt;.</span> <span>Skutkuje to widżetem, który wygląda jak jego odpowiednik na pulpicie, jednak zwykle nie ma wystarczającej ilości znaczników semantycznych do wykorzystania przez technologię wspomagającą.</span> <span>Dynamiczne treści na stronie internetowej mogą być szczególnie problematyczne dla użytkowników, którzy z jakiegoś powodu nie są w stanie wyświetlić ekranu.</span> <span>Informacje giełdowe, aktualizacje kanałów live twitter, wskaźniki postępu i podobne treści modyfikują DOM w taki sposób, że technologia wspomagająca (AT) może nie być świadoma.</span> <span>Wtedy z pomocą wkracza ARIA.</span></span></p>
+
+<p><span id="result_box" lang="pl"><span>Przykład 1: Znaczniki dla widżetów kart zbudowanych bez etykietowania ARIA.</span> <span>W znacznikach nie ma informacji opisujących formę i funkcję widżetu.</span></span></p>
+
+<pre class="brush: html">&lt;!-- To jest widget zakładek. Jak możesz to rozpoznać, patrząc tylko na znaczniki? --&gt;
+&lt;ol&gt;
+  &lt;li id="ch1Tab"&gt;
+    &lt;a href="#cz1Panel"&gt;Część 1&lt;/a&gt;
+  &lt;/li&gt;
+  &lt;li id="ch2Tab"&gt;
+    &lt;a href="#cz2Panel"&gt;Część 2&lt;/a&gt;
+  &lt;/li&gt;
+  &lt;li id="quizTab"&gt;
+    &lt;a href="#quizPanel"&gt;Quiz&lt;/a&gt;
+  &lt;/li&gt;
+&lt;/ol&gt;
+
+&lt;div&gt;
+  &lt;div id="ch1Panel"&gt;Zawartość części nr 1 &lt;/div&gt;
+  &lt;div id="ch2Panel"&gt;Zawartość częśći nr 2&lt;/div&gt;
+  &lt;div id="quizPanel"&gt;Zawartość Quizu&lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<p><span id="result_box" lang="pl"><span>Przykład 2: Sposób wizualnego przedstawienia widżetów karty.</span> <span>Użytkownicy mogą rozpoznać to wizualnie, jednak nie ma semantyki do odczytu maszynowego dla technologii wspomagającej.</span></span><br>
+ <img alt="Screenshot of the tabs widget" class="default internal" src="/@api/deki/files/4926/=Tabs_Widget.png"></p>
+
+<h2 id="ARIA">ARIA</h2>
+
+<p><a class="external" href="http://www.w3.org/WAI/intro/aria.php" title="http://www.w3.org/WAI/intro/aria.php">WAI-ARIA</a>, <strong>Accessible Rich Internet Applications</strong> specyfikacja wywodząca się od W3C <a class="external" href="http://www.w3.org/WAI/" title="http://www.w3.org/WAI/">Web Accessibility Initiative</a>, <span id="result_box" lang="pl"><span>umożliwia dodanie brakującej semantyki potrzebnej w przypadku technologii pomocniczych, takich jak czytniki ekranu.</span> <span>ARIA umożliwia programiście bardziej szczegółowe opisywanie tych widżetów poprzez dodawanie specjalnych atrybutów do znaczników.</span> <span>Zaprojektowany, aby wypełnić lukę pomiędzy standardowymi znacznikami HTML a formantami w stylu pulpitu znajdującymi się w dynamicznych aplikacjach internetowych, ARIA udostępnia role i stany, które opisują zachowanie najbardziej znanych widgetów interfejsu użytkownika.</span></span></p>
+
+<p><span id="result_box" lang="pl"><span>Specyfikacja ARIA jest podzielona na trzy różne typy atrybutów: role, stany i właściwości.</span> <span>Role opisują widżety, które nie są w inny sposób dostępne w HTML 4, takie jak suwaki, paski menu, karty i okna dialogowe.</span> <span>Właściwości opisują charakterystykę tych widgetów, na przykład, czy są one przeciągalne, mają wymagany element lub czy powiązane jest z nim wyskakujące okienko.</span> <span>Stany opisują bieżący stan interakcji elementu, informując technologię asystującą, jeśli jest zajęta, wyłączona, wybrana lub ukryta.</span></span></p>
+
+<p><span id="result_box" lang="pl"><span>Atrybuty ARIA mają być interpretowane automatycznie przez przeglądarkę i tłumaczone na natywne API systemu operacyjnego.</span> <span>Kiedy ARIA jest obecna, technologie asystujące są w stanie rozpoznać i sterować niestandardowymi kontrolkami JavaScript w taki sam sposób, jak robią to z odpowiednikami komputerów.</span> <span>Może to zapewnić znacznie bardziej spójny interfejs użytkownika, niż było to możliwe w poprzedniej generacji aplikacji internetowych, ponieważ użytkownicy technologii pomocniczych mogą wykorzystać całą swoją wiedzę na temat działania aplikacji komputerowych podczas korzystania z aplikacji internetowych.</span></span></p>
+
+<p><span id="result_box" lang="pl"><span>Przykład 3: Znaczniki dla widżetów kart z dodanymi atrybutami ARIA.</span></span></p>
+
+<pre class="brush: html">&lt;!-- Dodaliśmy atrybut "role" aby opisać listę kart i poszczególne karty. --&gt;
+&lt;ol role="tablist"&gt;
+  &lt;li id="ch1Tab" role="tab"&gt;
+    &lt;a href="#ch1Panel"&gt;Część 1&lt;/a&gt;
+  &lt;/li&gt;
+  &lt;li id="ch2Tab" role="tab"&gt;
+    &lt;a href="#ch2Panel"&gt;Część 2&lt;/a&gt;
+  &lt;/li&gt;
+  &lt;li id="quizTab" role="tab"&gt;
+    &lt;a href="#quizPanel"&gt;Quiz&lt;/a&gt;
+  &lt;/li&gt;
+&lt;/ol&gt;
+
+&lt;div&gt;
+  &lt;!-- <span id="result_box" lang="pl"><span>Zwróć uwagę na rolę i atrybuty "aria-labelledby", które dodaliśmy do opisu tych paneli.</span></span> --&gt;
+  &lt;div id="ch1Panel" role="tabpanel" aria-labelledby="ch1Tab"&gt;Zawartość części nr 1&lt;/div&gt;
+  &lt;div id="ch2Panel" role="tabpanel" aria-labelledby="ch2Tab"&gt;Zawartość części nr 2&lt;/div&gt;
+  &lt;div id="quizPanel" role="tabpanel" aria-labelledby="quizTab"&gt;Zawartość Quizu&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p><span id="result_box" lang="pl"><span>ARIA jest obsługiwana w najnowszych wersjach wszystkich głównych przeglądarek, w tym Firefox, Safari, Opera, Chrome i Internet Explorer.</span> <span>Wiele technologii wspomagających, takich jak open source NVDA i czytniki ekranu Orca, również obsługuje ARIA.</span> <span>Coraz częściej biblioteki widgetów JavaScript, takie jak jQuery UI, YUI, Google Closure i Dojo Dijit, również zawierają znaczniki ARIA.</span></span></p>
+
+<h3 id="Zmiany_prezentacyjne">Zmiany prezentacyjne</h3>
+
+<p><span id="result_box" lang="pl"><span>Dynamiczne zmiany prezentacyjne obejmują używanie CSS do zmiany wyglądu treści (np. Czerwone obramowanie wokół nieprawidłowych danych lub zmiana koloru tła zaznaczonego pola wyboru), a także pokazywanie lub ukrywanie treści.</span></span></p>
+
+<h4 id="Zmiany_stanu">Zmiany stanu</h4>
+
+<p><span id="result_box" lang="pl"><span>ARIA udostępnia atrybuty do deklarowania bieżącego stanu widgetu interfejsu użytkownika.</span> <span>Przykłady obejmują (ale z pewnością nie są ograniczone do):</span></span></p>
+
+<ul>
+ <li><strong><code>aria-checked</code></strong>: <span class="short_text" id="result_box" lang="pl"><span>wskazuje stan pola wyboru lub przycisku opcji</span></span></li>
+ <li><strong><code>aria-disabled</code></strong>: <span id="result_box" lang="pl"><span>wskazuje, że element jest widoczny, ale nie można go edytować lub użyć w inny sposób</span></span></li>
+ <li><strong><code>aria-grabbed</code></strong>: <span id="result_box" lang="pl"><span>wskazuje stan "chwycony" obiektu w operacji przeciągania i upuszczania</span></span></li>
+</ul>
+
+<p>(Pełna lista stanów:<a class="external" href="https://www.w3.org/TR/wai-aria-1.1/#introstates" title="http://www.w3.org/TR/wai-aria/states_and_properties"> ARIA list of states and properties</a>.)</p>
+
+<p><span id="result_box" lang="pl"><span>Programiści powinni używać stanów ARIA do wskazania stanu elementów widgetu interfejsu użytkownika i używać selektorów atrybutów CSS do zmiany wyglądu wizualnego na podstawie zmian stanu (zamiast używania skryptu do zmiany nazwy klasy na elemencie).</span></span></p>
+
+<h4 id="Zmiany_widoczności">Zmiany widoczności</h4>
+
+<p><span id="result_box" lang="pl"><span>Gdy zmieni się widoczność zawartości (tzn. Element jest ukryty lub pokazany), programiści powinni zmienić</span></span> wartość właściwości <strong><code>aria-hidden</code></strong>. <span id="result_box" lang="pl"><span>Opisane powyżej techniki powinny być używane do deklarowania CSS do wizualnego ukrywania elementu za pomocą</span></span> <code>display:none</code>.</p>
+
+<p>Przykład przedstawia prosty formularz internetowy z etykietami narzędzi zawierającymi instrukcje powiązane z polami wprowadzania.</p>
+
+<p>Przykład kodu HTML z atrybutem <strong><code>aria-hidden</code></strong> ustawionym na wartość <code>true</code>.</p>
+
+<pre class="brush: html">&lt;div class="text"&gt;
+    &lt;label id="tp1-label" for="first"&gt;Pierwsze imię:&lt;/label&gt;
+    &lt;input type="text" id="first" name="first" size="20"
+           aria-labelledby="tp1-label"
+           aria-describedby="tp1"
+           aria-required="false" /&gt;
+    &lt;div id="tp1" class="tooltip"
+         role="tooltip"
+         aria-hidden="true"&gt;Twoje pierwsze imię jest opcjonalne&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>Poniżej kod CSS dla powyższego przykładu.<br>
+ Zwróć uwagę na to że nie użyto typowego selektora klasy, lecz selektora atrybutu  <strong><code>aria-hidden</code></strong> ustawionego na wartość "true".</p>
+
+<pre class="brush: css">div.tooltip[aria-hidden="true"] {
+  display: none;
+}
+</pre>
+
+<p>Kod JavaScript dla powyższego przykładu, aktualizujący atrybut  <strong><code>aria-hidden</code></strong>.</p>
+
+<pre class="brush: javascript">var showTip = function(el) {
+  el.setAttribute('aria-hidden', 'false');
+}</pre>
+
+<h3 id="Zmiany_ról">Zmiany ról</h3>
+
+<div class="note">W budowie</div>
+
+<p>ARIA pozwala programistom zadeklarować rolę semantyczną dla elementu, który w przeciwnym razie oferuje niepoprawną lub brak semantyki. Na przykład, gdy do utworzenia menu jest używana lista nie numerowana {{ HTMLElement("ul") }} powinien otrzymać atrybut <strong><code>role</code></strong> zdefiniowany jako <code>menubar</code> a każdy element listy {{ HTMLElement("li") }} powinien otrzymać atrybut <strong><code>role</code></strong> o wartości <code>menuitem</code>.</p>
+
+<p>Atrybut <strong><code>role</code></strong> nie powinien być zmieniany. <span class="tlid-translation translation"><span title="">Zamiast tego usuń oryginalny element i zastąp go elementem z nową wartością atrybutu</span></span> <strong><code>role</code></strong>.</p>
+
+<p>Rozważmy przykład widgetu "edycji bezpośredniej": komponent <span class="tlid-translation translation"><span title="">który pozwala użytkownikom edytować fragment tekstu na miejscu, bez przełączania kontekstów</span></span> . Ten komponent ma tryb "widok", gdzie tekst nie jest edytowalny, ale można go aktywować, oraz tryb "edycja", w którym tekst jest edytowalny. Deweloper może ulec pokusie, aby zaimplementować tryb "widok" używając elementu  {{ HTMLElement("input") }} tylko do odczytu, i ustawić jego ARIA atrybut <strong><code>role</code></strong> na wartość <code>button</code>, następnie po przęłączeniu w tryb "edycja" uczynić element zapisywalnym i usunąć atrybut w tym trybie atrybut <strong><code>role</code></strong> (ponieważ element {{ HTMLElement("input") }} ma własną semantykę ról).</p>
+
+<p>Nie rób tego. Zaimplementuj tryb widoku przy użyciu zupełnie innego elementu, takiego jak {{ HTMLElement("div") }} albo {{ HTMLElement("span") }} z atrybutem <strong><code>role</code></strong> o wartości <code>button</code>, a tryb « edycja »  z użyciem elementu  {{ HTMLElement("input") }}.</p>
+
+<h3 id="Asynchroniczna_zmiana_trści">Asynchroniczna zmiana trści</h3>
+
+<div class="note">W budowie. Zobacz też <a href="/en/ARIA/Live_Regions" title="Live Regions">Live Regions</a></div>
+
+<h2 id="Nawigacja_klawiaturą">Nawigacja klawiaturą</h2>
+
+<p><span id="result_box" lang="pl"><span>Często programiści pomijają obsługę klawiatury podczas tworzenia niestandardowych widżetów.</span> <span>Aby być dostępnym dla wielu użytkowników, wszystkie funkcje aplikacji internetowej lub widżetu powinny być sterowane za pomocą klawiatury, bez potrzeby korzystania z myszy.</span> <span>W praktyce zwykle wiąże się to z konwencjami obsługiwanymi przez podobne widżety na pulpicie, w pełni korzystając z klawiszy Tab, Enter, Spacja i klawiszy strzałek.</span></span></p>
+
+<p><span id="result_box" lang="pl"><span>Tradycyjnie nawigacja po klawiaturze w sieci została ograniczona do klawisza Tab.</span> <span>Użytkownik naciśnie klawisz Tab, aby skupić się na każdym łączu, przycisku lub formularzu na stronie w liniowej kolejności, używając Shift-Tab, aby nawigować wstecz.</span> <span>Jest to jednowymiarowa forma nawigacji do przodu i do tyłu, jeden element na raz.</span> <span>Na dość gęstych stronach użytkownik klawiatury często musi kilkakrotnie nacisnąć klawisz Tab przed uzyskaniem dostępu do potrzebnej sekcji.</span> <span>Wdrożenie konwencji klawiatury w stylu komputera w Internecie może znacząco przyspieszyć nawigację dla wielu użytkowników.</span></span></p>
+
+<p><span id="result_box" lang="pl"><span>Oto podsumowanie, jak powinna działać nawigacja klawiaturowa w aplikacji internetowej obsługującej ARIA</span></span>:</p>
+
+<ul>
+ <li><span id="result_box" lang="pl"><span>Klawisz Tab powinien skupić się na widżecie jako całości.</span> <span>Na przykład, przechodzenie do paska menu powinno skupiać się na pierwszym elemencie menu.</span></span></li>
+ <li><span id="result_box" lang="pl"><span>Klawisze strzałek powinny umożliwiać wybór lub nawigację w widgecie.</span> <span>Na przykład za pomocą klawiszy strzałek w lewo i w prawo należy ustawić wybór na poprzednie i następne pozycje menu.</span></span></li>
+ <li><span id="result_box" lang="pl"><span>Gdy widget nie znajduje się w formularzu, klawisze Enter i Spacja powinny wybrać lub aktywować kontrolkę.</span></span></li>
+ <li><span id="result_box" lang="pl"><span>W formularzu klawisz Spacji powinien wybrać lub aktywować kontrolkę, natomiast klawisz Enter powinien przesłać domyślną akcję formularza</span></span>.</li>
+ <li><span id="result_box" lang="pl"><span>W razie wątpliwości naśladuj standardowe zachowanie pulpitu kontrolki, którą tworzysz</span></span>.</li>
+</ul>
+
+<p><span id="result_box" lang="pl"><span>Tak więc, dla przykładu widżetów zakładki powyżej, użytkownik powinien móc nawigować do kontenera widgetu (&lt;ol&gt; w naszym znaczniku) i wychodzić za pomocą klawiszy Tab i Shift-Tab.</span> <span>Po ustawieniu nawigacji klawiaturą w kontenerze klawisze strzałek powinny umożliwiać użytkownikowi nawigację między kartami (elementy &lt;li&gt;)</span></span>. <span id="result_box" lang="pl"><span>Konwencje różnią się w zależności od platformy.</span> <span>W systemie Windows następna karta powinna być automatycznie aktywowana, gdy użytkownik naciśnie klawisze strzałek.</span> <span>W systemie Mac OS X użytkownik może nacisnąć klawisz Enter lub klawisz spacji, aby aktywować następną kartę</span></span>. <span id="result_box" lang="pl"><span>Szczegółowy samouczek do tworzenia</span></span> <a href="/en/Accessibility/Keyboard-navigable_JavaScript_widgets" title="en/Accessibility/Keyboard-navigable JavaScript widgets">Keyboard-navigable JavaScript widgets</a> <span id="result_box" lang="pl"><span>opisuje sposób implementacji tego zachowania za pomocą JavaScript</span></span>.</p>
+
+<p><span id="result_box" lang="pl"><span>Aby uzyskać więcej informacji na temat konwencji nawigacyjnych na klawiaturze w stylu komputerowym, należy zapoznać się z obszernym opisem</span></span> <a class="external" href="http://karlgroves-sandbox.com/CheatSheets/DHTML-Style-Guide.html" title="http://dev.aol.com/dhtml_style_guide">DHTML style guide</a>. <span id="result_box" lang="pl"><span>Opis zawiera przegląd nawigacji klawiaturowej dla każdego typu widżetu obsługiwanego przez ARIA.</span> <span>W3C oferuje również pomocne</span></span> <a class="external" href="http://www.w3.org/WAI/PF/aria-practices/Overview.html" title="http://www.w3.org/WAI/PF/aria-practices/Overview.html">ARIA Best Practices</a> <span id="result_box" lang="pl"><span>dokument zawiera nawigację klawiaturową i konwencje skrótów dla różnych widżetów</span></span>. </p>
+
+<h2 id="Zobacz_także">Zobacz także</h2>
+
+<ul>
+ <li><a href="/en/ARIA" title="ARIA">ARIA</a></li>
+ <li><a href="/en/Accessibility/Web_applications_and_ARIA_FAQ" title="Web applications and ARIA FAQ">Web applications and ARIA FAQ</a></li>
+ <li><a class="external" href="http://www.w3.org/TR/wai-aria/" title="http://www.w3.org/TR/wai-aria/">WAI-ARIA Specification</a></li>
+ <li><a class="external" href="http://www.w3.org/WAI/PF/aria-practices/Overview.html" title="http://www.w3.org/WAI/PF/aria-practices/Overview.html">WAI-ARIA Best Practices</a></li>
+ <li><a class="external" href="http://access.aol.com/dhtml-style-guide-working-group/" title="http://dev.aol.com/dhtml_style_guide">DHTML Style Guide</a></li>
+</ul>
diff --git a/files/pl/web/accessibility/aria/aplikacje_internetowe_i_aria_faq/index.html b/files/pl/web/accessibility/aria/web_applications_and_aria_faq/index.html
index 35510946d6..35510946d6 100644
--- a/files/pl/web/accessibility/aria/aplikacje_internetowe_i_aria_faq/index.html
+++ b/files/pl/web/accessibility/aria/web_applications_and_aria_faq/index.html
diff --git a/files/pl/web/accessibility/index.html b/files/pl/web/accessibility/index.html
new file mode 100644
index 0000000000..801f0d62ac
--- /dev/null
+++ b/files/pl/web/accessibility/index.html
@@ -0,0 +1,94 @@
+---
+title: Dostępność
+slug: Web/Dostępność
+tags:
+  - Dostępność
+translation_of: Web/Accessibility
+---
+<div>
+<p>"<strong>Dostępność</strong> (ang. accessibility) - nauka oraz zbiór standardów opisujących metody i wytyczne tworzenia serwisów WWW w sposób umożliwiający wygodny dostęp jak najszerszemu gronu odbiorców. Dostępne serwisy mogą być bez trudu wykorzystywane przez osoby niewidzące, niedowidzące, użytkowników mniej popularnych wyszukiwarek czy platform mobilnych." <small><a class="external" href="http://pl.wikipedia.org/wiki/Dostępność">Artykuł o Dostępności na Wikipedii</a></small></p>
+</div>
+
+<table class="topicpage-table">
+ <tbody>
+  <tr>
+   <td>
+    <h4 id="Dokumentacja" name="Dokumentacja"><a>Przewodniki</a></h4>
+
+    <dl>
+     <dt><a class="external" href="https://developer.mozilla.org/pl/docs/Learn/Accessibility/What_is_accessibility">Czym jest dostępność?</a></dt>
+     <dd><small>Niniejszy artykuł stanowi wstęp do modułu i jednocześnie obszerną odpowiedź na pytanie, czym właściwie jest dostępność - w tym jakie grupy ludzi powinniśmy brać pod uwagę i dlaczego, jakich narzędzi używają oni do interakcji z siecią oraz jak uczynić dostęność częścią naszej organizacji zadań.</small></dd>
+    </dl>
+
+    <h4 id="Dokumentacja" name="Dokumentacja"><a>Dokumentacja</a></h4>
+
+    <dl>
+     <dt><a class="external" href="http://www.kursusability.pl">Kurs Usability</a></dt>
+     <dd><small>Materiały opisujące zagadnienia związane z użytecznością, dostępnością oraz efektywnością serwisów WWW. </small></dd>
+    </dl>
+
+    <dl>
+     <dt><a class="external" href="http://mimas.ceti.pl/dia/">W głąb dostępności</a></dt>
+     <dd><small>Niniejsza książka odpowiada na dwa pytania. Pierwsze brzmi: "Dlaczego powinienem uczynić swoją stronę WWW bardziej dostępną?" Jeżeli nie masz strony w sieci, ta książka nie jest dla Ciebie. Drugie pytanie to "Jak mogę uczynić moją stronę bardziej dostępną?" Jeżeli nie zostaniesz przekonany przez odpowiedź na pierwsze pytanie, nie będziesz zainteresowany odpowiedzią na drugie.</small></dd>
+    </dl>
+
+    <dl>
+     <dt><a class="external" href="http://dwww.pl/">Web Accessibility po polsku</a></dt>
+     <dd><small>Dostępność w projektowaniu stron internetowych oznacza tworzenie takich dokumentów, które są czytelne i funkcjonalne dla wszystkich użytkowników niezależnie od ich fizycznych ograniczeń, sytuacji w jakiej się znajdują, a także używanego oprogramowania oraz sprzętu.</small></dd>
+    </dl>
+
+    <dl>
+     <dt><a class="external" href="http://www.mozilla.org/access/today">Software Accessibility Today</a></dt>
+     <dd><small>The accessibility of computer software has seen drastic improvements over the past two decades. This article reviews the progress and technology as it has developed.</small></dd>
+    </dl>
+
+    <dl>
+     <dt><a class="external" href="http://www.mozilla.org/access/keyboard/tabindex.html">Key-navigable custom DHTML widgets, in Mozilla and IE</a></dt>
+     <dd><small>Until now, web developers who want to make their styled <code>&lt;div&gt;</code> and <code>&lt;span&gt;</code> based widgets keyboard accessible have lacked the proper techniques. Keyboard accessibility is part of the minimum accessibility requirements of which any web developer should be aware.</small></dd>
+    </dl>
+
+    <dl>
+     <dt><a class="external" href="http://www-306.ibm.com/able/guidelines/web/accessweb.html">Accessible Web Page Authoring</a></dt>
+     <dd><small>A handy web accessibility checklist, from IBM.</small></dd>
+    </dl>
+
+    <p><br>
+     <span class="alllinks"><a>Pokaż wszystkie...</a></span></p>
+   </td>
+   <td>
+    <h4 id="Spo.C5.82eczno.C5.9B.C4.87" name="Spo.C5.82eczno.C5.9B.C4.87">Społeczność</h4>
+
+    <ul>
+     <li>Obejrzyj fora Mozilli...</li>
+     <li><a class="external" href="http://www.w3.org/WAI/IG/">WAI Interest Group</a></li>
+     <li><a href="pl/Dost%c4%99pno%c5%9b%c4%87/Spo%c5%82eczno%c5%9b%c4%87">Inne społeczności...</a></li>
+    </ul>
+
+    <h4 id="Narz.C4.99dzia" name="Narz.C4.99dzia">Narzędzia</h4>
+
+    <ul>
+     <li><a class="external" href="http://www.mozilla.org/quality/embed/plans/accessibility/nsIAccessibleTestPlan.html">Automated Accessibility Tests</a></li>
+     <li><a class="external" href="http://www.standards-schmandards.com/index.php?show/fangs">Fangs Screen Reader Emulator</a></li>
+    </ul>
+
+    <p><span class="alllinks"><a>Pokaż wszystkie...</a></span></p>
+
+    <h4 id="Powi.C4.85zane_tematy" name="Powi.C4.85zane_tematy">Powiązane tematy</h4>
+
+    <dl>
+     <dd><a href="pl/Programowanie_WWW">Programowanie WWW</a>, <a href="pl/Standardy_WWW">Standardy WWW</a>, <a href="pl/XUL">XUL</a></dd>
+    </dl>
+
+
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p><small> </small></p>
+
+<p>
+ </p><p><span class="comment">Categories</span></p>
+
+
+<p><span class="comment">Interwiki Language Links</span></p>
diff --git a/files/pl/web/accessibility/keyboard-navigable_javascript_widgets/index.html b/files/pl/web/accessibility/keyboard-navigable_javascript_widgets/index.html
new file mode 100644
index 0000000000..3dd7d0f983
--- /dev/null
+++ b/files/pl/web/accessibility/keyboard-navigable_javascript_widgets/index.html
@@ -0,0 +1,171 @@
+---
+title: Keyboard-navigable JavaScript widgets
+slug: Web/Dostępność/Keyboard-navigable_JavaScript_widgets
+tags:
+  - Accessibility
+  - DOM
+  - Navigation
+translation_of: Web/Accessibility/Keyboard-navigable_JavaScript_widgets
+---
+<h3 id="Overview">Overview</h3>
+
+<p>Web applications often use JavaScript to mimic desktop widgets such as menus, tree views, rich text fields, and tab panels. These widgets are typically composed of {{ HTMLElement("div") }} and {{ HTMLElement("span") }} elements that do not, by nature, offer the same keyboard functionality that their desktop counterparts do. This document describes techniques to make JavaScript widgets accessible with the keyboard.</p>
+
+<h3 id="Using_tabindex">Using tabindex</h3>
+
+<p>By default, when people use the tab key to browse a webpage, only interactive elements (like links, form controls) get focused. With the <code>tabindex</code> <a href="/en-US/docs/Web/HTML/Global_attributes">global attribute</a>, authors can make other elements focusable, too. When set to <code>0</code>, the element becomes focusable by keyboard and script. When set to <code>-1</code>, the element becomes focusable by script, but it does not become part of the keyboard focus order.</p>
+
+<p>The order in which elements gain focus when using a keyboard, is the source order by default. In exceptional circumstances, authors may want to redefine the order. To do this, authors can set <code>tabindex</code> to any positive number.</p>
+
+<div class="warning">
+<p><strong>Warning:</strong> avoid using positive values for <code>tabindex</code>.  Elements with a positive <code>tabindex</code> are put before the default interactive elements on the page, which means page authors will have to set (and maintain) <code>tabindex</code> values for all focusable elements on the page whenever they use one or more positive values for <code>tabindex</code>.</p>
+</div>
+
+<p>The following table describes <code>tabindex</code> behavior in modern browsers:</p>
+
+<table class="fullwidth-table" style="width: 75% !important;">
+ <tbody>
+  <tr>
+   <th><code>tabindex</code> attribute</th>
+   <th>Focusable with mouse or JavaScript via <code>element.focus()</code></th>
+   <th>Tab navigable</th>
+  </tr>
+  <tr>
+   <td>not present</td>
+   <td>Follows the platform convention of the element (yes for form controls, links, etc.).</td>
+   <td>Follows the platform convention of the element.</td>
+  </tr>
+  <tr>
+   <td>Negative (i.e. <code>tabindex="-1"</code>)</td>
+   <td>Yes</td>
+   <td>No; author must focus the element with <code><a class="external text" href="../../../../En/DOM/Element.focus" rel="nofollow" title="https://developer.mozilla.org/En/DOM/Element.focus">focus()</a></code> in response to arrow or other key presses.</td>
+  </tr>
+  <tr>
+   <td>Zero (i.e. <code>tabindex="0"</code>)</td>
+   <td>Yes</td>
+   <td>In tab order relative to element's position in document (note that interactive elements like {{ HTMLElement("a") }} have this behavior by default, they don't need the attribute).</td>
+  </tr>
+  <tr>
+   <td>Positive (e.g. <code>tabindex="33"</code>)</td>
+   <td>Yes</td>
+   <td><code>tabindex</code> value determines where this element is positioned in the tab order: smaller values will position elements earlier in the tab order than larger values (for example, <code>tabindex="7"</code> will be positioned before <code>tabindex="11"</code>).</td>
+  </tr>
+ </tbody>
+</table>
+
+<h4 id="Non-native_controls">Non-native controls</h4>
+
+<p>Native HTML elements that are interactive, like {{ HTMLElement("a") }}, {{ HTMLElement("input") }} and {{ HTMLElement("select") }}, are already accessible by keyboards, so to use one of them is the fastest path to make components work with keyboards.</p>
+
+<p>Authors can also make a {{ HTMLElement("div") }} or {{ HTMLElement("span") }} keyboard accessible by adding a <code>tabindex</code> of <code>0</code>. This is particularly useful for components that use interactive elements that do not exist in HTML.</p>
+
+<h4 id="Grouping_controls">Grouping controls</h4>
+
+<p>For grouping widgets such as menus, tablists, grids, or tree views, the parent element should be in the tab order (<code>tabindex="0"</code>), and each descendent choice/tab/cell/row should be removed from the tab order (<code>tabindex="-1"</code>). Users should be able to navigate the descendent elements using arrow keys. (For a full description of the keyboard support that is normally expected for typical widgets, see the <a class="external text" href="https://www.w3.org/TR/wai-aria-practices-1.1/" rel="nofollow" title="https://www.w3.org/TR/wai-aria-practices-1.1/">WAI-ARIA Authoring Practices</a>.)</p>
+
+<p>The example below shows this technique used with a nested menu control. Once keyboard focus lands on the containing {{ HTMLElement("ul") }} element, the JavaScript developer must programmatically manage focus and respond to arrow keys. For techniques for managing focus within widgets, see "Managing focus inside groups" below.</p>
+
+<p><em>Example 2: A menu control using tabindex to control keyboard access</em></p>
+
+<pre class="brush: html">&lt;ul id="mb1" tabindex="0"&gt;
+  &lt;li id="mb1_menu1" tabindex="-1"&gt; Font
+    &lt;ul id="fontMenu" title="Font" tabindex="-1"&gt;
+      &lt;li id="sans-serif" tabindex="-1"&gt;Sans-serif&lt;/li&gt;
+      &lt;li id="serif" tabindex="-1"&gt;Serif&lt;/li&gt;
+      &lt;li id="monospace" tabindex="-1"&gt;Monospace&lt;/li&gt;
+      &lt;li id="fantasy" tabindex="-1"&gt;Fantasy&lt;/li&gt;
+    &lt;/ul&gt;
+  &lt;/li&gt;
+  &lt;li id="mb1_menu2" tabindex="-1"&gt; Style
+    &lt;ul id="styleMenu" title="Style" tabindex="-1"&gt;
+      &lt;li id="italic" tabindex="-1"&gt;Italics&lt;/li&gt;
+      &lt;li id="bold" tabindex="-1"&gt;Bold&lt;/li&gt;
+      &lt;li id="underline" tabindex="-1"&gt;Underlined&lt;/li&gt;
+    &lt;/ul&gt;
+  &lt;/li&gt;
+  &lt;li id="mb1_menu3" tabindex="-1"&gt; Justification
+    &lt;ul id="justificationMenu" title="Justication" tabindex="-1"&gt;
+      &lt;li id="left" tabindex="-1"&gt;Left&lt;/li&gt;
+      &lt;li id="center" tabindex="-1"&gt;Centered&lt;/li&gt;
+      &lt;li id="right" tabindex="-1"&gt;Right&lt;/li&gt;
+      &lt;li id="justify" tabindex="-1"&gt;Justify&lt;/li&gt;
+    &lt;/ul&gt;
+  &lt;/li&gt;
+&lt;/ul&gt;</pre>
+
+<h4 id="Disabled_controls">Disabled controls</h4>
+
+<p>When a custom control becomes disabled, remove it from the tab order by setting <code>tabindex="-1"</code>. Note that disabled items within a grouped widget (such as menu items in a menu) should remain navigable using arrow keys.</p>
+
+<h3 id="Managing_focus_inside_groups">Managing focus inside groups</h3>
+
+<p>When a user tabs away from a widget and returns, focus should return to the specific element that had focus, for example, the tree item or grid cell. There are two techniques for accomplishing this:</p>
+
+<ol>
+ <li>Roving <code>tabindex</code>: programmatically moving focus</li>
+ <li><code>aria-activedescendant</code>: managing a 'virtual' focus</li>
+</ol>
+
+<h4 id="Technique_1_Roving_tabindex">Technique 1: Roving tabindex</h4>
+
+<p>Setting the <code>tabindex</code> of the focused element to "0" ensures that if the user tabs away from the widget and then returns, the selected item within the group retains focus. Note that updating the <code>tabindex</code> to "0" requires also updating the previously selected item to <code>tabindex="-1"</code>. This technique involves programmatically moving focus in response to key events and updating the <code>tabindex</code> to reflect the currently focused item. To do this:</p>
+
+<p>Bind a key down handler to each element in the group, and when an arrow key is used to move to another element:</p>
+
+<ol>
+ <li>programmatically apply focus to the new element,</li>
+ <li>update the <code>tabindex</code> of the focused element to "0", and</li>
+ <li>update the <code>tabindex</code> of the previously focused element to "-1".</li>
+</ol>
+
+<p>Here's an example of a <a class="external text" href="https://files.paciellogroup.com/training/WWW2012/samples/Samples/aria/tree/index.html" rel="nofollow" title="Paciello Group Tree View example">WAI-ARIA tree view</a> using this technique.</p>
+
+<h5 id="Tips">Tips</h5>
+
+<h6 id="Use_element.focus_to_set_focus">Use element.focus() to set focus</h6>
+
+<p>Do not use <code>createEvent()</code>, <code>initEvent()</code> and <code>dispatchEvent()</code> to send focus to an element. DOM focus events are considered informational only: generated by the system after something is focused, but not actually used to set focus. Use <code>element.focus()</code> instead.</p>
+
+<h6 id="Use_onfocus_to_track_the_current_focus">Use onfocus to track the current focus</h6>
+
+<p>Don't assume that all focus changes will come via key and mouse events: assistive technologies such as screen readers can set the focus to any focusable element. Track focus using <code>onfocus</code> and <code>onblur</code> instead.</p>
+
+<p><code>onfocus</code> and <code>onblur</code> can now be used with every element. There is no standard DOM interface to get the current document focus. If you want to track the focus status, you can use the <a href="/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement">document.activeElement</a> to get the active element. You can also use <a href="/en-US/docs/Web/API/Document/hasFocus">document.hasFocus</a> to make sure if the current document focus. </p>
+
+<h4 id="Technique_2_aria-activedescendant">Technique 2: aria-activedescendant</h4>
+
+<p>This technique involves binding a single event handler to the container widget and using the <code>aria-activedescendant</code> to track a "virtual" focus. (For more information about ARIA, see this <a class="external text" href="../../../../An_Overview_of_Accessible_Web_Applications_and_Widgets" rel="nofollow" title="https://developer.mozilla.org/An_Overview_of_Accessible_Web_Applications_and_Widgets">overview of accessible web applications and widgets</a>.)</p>
+
+<p>The <code>aria-activedescendant</code> property identifies the ID of the descendent element that currently has the virtual focus. The event handler on the container must respond to key and mouse events by updating the value of <code>aria-activedescendant</code> and ensuring that the current item is styled appropriately (for example, with a border or background color). See the source code of this <a class="external text" href="http://www.oaa-accessibility.org/example/28/" rel="nofollow" title="http://www.oaa-accessibility.org/example/28/">ARIA radiogroup example</a> for a direct illustration of how this works.</p>
+
+<h3 id="General_Guidelines">General Guidelines</h3>
+
+<h4 id="Use_onkeydown_to_trap_key_events_not_onkeypress">Use onkeydown to trap key events, not onkeypress</h4>
+
+<p>IE will not fire <code>keypress</code> events for non-alphanumeric keys. Use <code>onkeydown</code> instead.</p>
+
+<h4 id="Ensure_that_keyboard_and_mouse_produce_the_same_experience">Ensure that keyboard and mouse produce the same experience</h4>
+
+<p>To ensure that the user experience is consistent regardless of input device, keyboard and mouse event handlers should share code where appropriate. For example, the code that updates the <code>tabindex</code> or the styling when users navigate using the arrow keys should also be used by mouse click handlers to produce the same changes.</p>
+
+<h4 id="Ensure_that_the_keyboard_can_be_used_to_activate_element">Ensure that the keyboard can be used to activate element</h4>
+
+<p>To ensure that the keyboard can be used to activate elements, any handlers bound to mouse events should also be bound to keyboard events. For example, to ensure that the Enter key will activate an element, if you have an <code>onclick="doSomething()"</code>, you should bind <code>doSomething()</code> to the key down event as well: <code>onkeydown="return event.keyCode != 13 || doSomething();"</code>.</p>
+
+<h4 id="Always_draw_the_focus_for_tabindex-1_items_and_elements_that_receive_focus_programatically">Always draw the focus for tabindex="-1" items and elements that receive focus programatically</h4>
+
+<p>IE will not automatically draw the focus outline for items that programatically receive focus. Choose between changing the background color via something like <code>this.style.backgroundColor = "gray";</code> or add a dotted border via <code>this.style.border = "1px dotted invert"</code>. In the dotted border case you will need to make sure those elements have an invisible 1px border to start with, so that the element doesn't grow when the border style is applied (borders take up space, and IE doesn't implement CSS outlines).</p>
+
+<h4 id="Prevent_used_key_events_from_performing_browser_functions">Prevent used key events from performing browser functions</h4>
+
+<p>If your widget handles a key event, prevent the browser from also handling it (for example, scrolling in response to the arrow keys) by using your event handler's return code. If your event handler returns <code>false</code>, the event will not be propagated beyond your handler.</p>
+
+<p>For example:</p>
+
+<pre class="brush: html">&lt;span tabindex="-1" onkeydown="return handleKeyDown();"&gt;</pre>
+
+<p>If <code>handleKeyDown()</code> returns <code>false</code>, the event will be consumed, preventing the browser from performing any action based on the keystroke.</p>
+
+<h4 id="Dont_rely_on_consistent_behavior_for_key_repeat_at_this_point">Don't rely on consistent behavior for key repeat, at this point</h4>
+
+<p>Unfortunately <code>onkeydown</code> may or may not repeat depending on what browser and OS you're running on.</p>