From 218d15c2cf2f11f1efc8c204cf41143b9906a1fb Mon Sep 17 00:00:00 2001
From: Daniel Zawadzki <hello@danielzawadzki.com>
Date: Mon, 25 Mar 2019 14:17:45 +0100
Subject: [PATCH 1/5] Translated 'Accessibility' docs page.

---
 content/docs/accessibility.md | 339 +++++++++++++++++-----------------
 1 file changed, 166 insertions(+), 173 deletions(-)

diff --git a/content/docs/accessibility.md b/content/docs/accessibility.md
index e6cacba3b..f96e743d9 100644
--- a/content/docs/accessibility.md
+++ b/content/docs/accessibility.md
@@ -1,32 +1,32 @@
 ---
 id: accessibility
-title: Accessibility
+title: Dostępność
 permalink: docs/accessibility.html
 ---
 
-## Why Accessibility? {#why-accessibility}
+## Czemu dostępność? {#why-accessibility}
 
-Web accessibility (also referred to as [**a11y**](https://en.wiktionary.org/wiki/a11y)) is the design and creation of websites that can be used by everyone. Accessibility support is necessary to allow assistive technology to interpret web pages.
+Pojęcie dostępności stron internetowych (określanej również [**a11y**](https://en.wiktionary.org/wiki/a11y)) zostało zaprojektowana i stworzone z myślą o internecie przystępnym dla wszystkich. Wspieranie dostępności jest niezbędne, aby umożliwić technologiom asystującym poprawną interpretację stron.
 
-React fully supports building accessible websites, often by using standard HTML techniques.
+React w pełni wspiera budowanie dostępnych dla wszystkich stron internetowych, często z wykorzystaniem standardowych technik HTML.
 
-## Standards and Guidelines {#standards-and-guidelines}
+## Standard oraz wytyczne {#standards-and-guidelines}
 
 ### WCAG {#wcag}
 
-The [Web Content Accessibility Guidelines](https://www.w3.org/WAI/intro/wcag) provides guidelines for creating accessible web sites.
+[Web Content Accessibility Guidelines](https://www.w3.org/WAI/intro/wcag) dostarcza zbiór wytycznych, jak tworzyć poprawne oraz dostępne dla wszystkich strony internetowe.
 
-The following WCAG checklists provide an overview:
+Poniższa lista kontrolna WCAG zawiera przegląd:
 
-- [WCAG checklist from Wuhcag](https://www.wuhcag.com/wcag-checklist/)
-- [WCAG checklist from WebAIM](https://webaim.org/standards/wcag/checklist)
-- [Checklist from The A11Y Project](https://a11yproject.com/checklist.html)
+- [Lista kontrolna WCAG stworzona przez Wuhcag](https://www.wuhcag.com/wcag-checklist/)
+- [Lista kontrolna WCAG stworzona przez WebAIM](https://webaim.org/standards/wcag/checklist)
+- [Lista kontrolna projektu A11Y](https://a11yproject.com/checklist.html)
 
 ### WAI-ARIA {#wai-aria}
 
-The [Web Accessibility Initiative - Accessible Rich Internet Applications](https://www.w3.org/WAI/intro/aria) document contains techniques for building fully accessible JavaScript widgets.
+Dokument [Web Accessibility Initiative - Accessible Rich Internet Applications](https://www.w3.org/WAI/intro/aria)  zawiera listę technik wyspecjalizowanych w bdowaniu w pełni dostępnych aplikacji JavaScript. 
 
-Note that all `aria-*` HTML attributes are fully supported in JSX. Whereas most DOM properties and attributes in React are camelCased, these attributes should be hyphen-cased (also known as kebab-case, lisp-case, etc) as they are in plain HTML:
+Warto zaznaczyć, że wszystkie atrybuty HTML `aria-*` są w pełni wspierane przez JSX. Mimo, że większość tagów oraz atrybutów DOM w Reakcie zapisujemy w formacie camelCase, te związane z dostępnością, powinny być zapisane z wykorzystaniem myślników (znanych również jako kebab-case, lisp-case itp.), ponieważ są one traktowane jak czysty HTML.
 
 ```javascript{3,4}
 <input
@@ -39,16 +39,16 @@ Note that all `aria-*` HTML attributes are fully supported in JSX. Whereas most
 />
 ```
 
-## Semantic HTML {#semantic-html}
-Semantic HTML is the foundation of accessibility in a web application. Using the various HTML elements to reinforce the meaning of information
-in our websites will often give us accessibility for free.
+## Semantyczny HTML {#semantic-html}
 
-- [MDN HTML elements reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Element)
+Semantyczny HTML jest podstawą dostępności aplikacji webowych. Wykorzystując różne elementy HTML, które wzmacniają znaczenie informacji na naszych stronach, bardzo często, możemy stworzyć w pełni dostępną stronę bez dodatkowych nakładów pracy.
 
-Sometimes we break HTML semantics when we add `<div>` elements to our JSX to make our React code work, especially when working with lists (`<ol>`, `<ul>` and `<dl>`) and the HTML `<table>`.
-In these cases we should rather use [React Fragments](/docs/fragments.html) to group together multiple elements.
+- [MDN elementy HTML](https://developer.mozilla.org/en-US/docs/Web/HTML/Element)
 
-For example,
+Czasem łamiemy zasady semantycznego HTMl, kiedy dodajemy dodatkowy element `div` do naszego JSX, aby uruchomić aplikację, zwłaszcza, kiedy pracujemy z listami (`<ol>`, `<ul>` and `<dl>`) oraz tabelami `<table>`.
+W takim przypadkach, powinniśmy wykorzystać [React Fragment](/docs/fragments.html), który pozwoli na zgrupowanie wielu elementów.
+
+Przykład:
 
 ```javascript{1,5,8}
 import React, { Fragment } from 'react';
@@ -73,7 +73,7 @@ function Glossary(props) {
 }
 ```
 
-You can map a collection of items to an array of fragments as you would any other type of element as well:
+Możesz mapować kolekcje elmentów do tablicy fragmentów, zupełnie jakby to był dowolnie inny typ elementów:
 
 ```javascript{6,9}
 function Glossary(props) {
@@ -91,7 +91,7 @@ function Glossary(props) {
 }
 ```
 
-When you don't need any props on the Fragment tag you can use the [short syntax](/docs/fragments.html#short-syntax), if your tooling supports it:
+Kiedy nie chcesz przekazywać żadnych dodatkowych właściwości do Fraguemntu, wówczas możesz użyć [skróconej składni](/docs/fragments.html#short-syntax). Upewnij się, że wspomniany zapis wspiera również Twój edytor.
 
 ```javascript{3,6}
 function ListItem({ item }) {
@@ -104,83 +104,81 @@ function ListItem({ item }) {
 }
 ```
 
-For more info, see [the Fragments documentation](/docs/fragments.html).
+Więcej znajdziesz w [dokumentacji Fragmentów](/docs/fragments.html).
 
-## Accessible Forms {#accessible-forms}
+## Dostępne Formularze {#accessible-forms}
 
-### Labeling {#labeling}
-Every HTML form control, such as `<input>` and `<textarea>`, needs to be labeled accessibly. We need to provide descriptive labels that are also exposed to screen readers.
+### Etykietowanie {#labeling}
+Każdy element kontrolujący formularz, taki jak `input` oraz `textarea`, powinien być etykietowany w dostępny sposób. Powinniśmy wykorzystać etykietę, która dobrze opisuję pole tekstowe oraz jest widoczne dla czytników ekranowych.
 
-The following resources show us how to do this:
+Poniższe zasoby opisują, jak zrobić to dobrze:
 
-- [The W3C shows us how to label elements](https://www.w3.org/WAI/tutorials/forms/labels/)
-- [WebAIM shows us how to label elements](https://webaim.org/techniques/forms/controls)
-- [The Paciello Group explains accessible names](https://www.paciellogroup.com/blog/2017/04/what-is-an-accessible-name/)
+- [W3C pokazuje jak etykietować elementy](https://www.w3.org/WAI/tutorials/forms/labels/)
+- [WebAim pokazuje jak etykietować elementy](https://webaim.org/techniques/forms/controls)
+- [Grupa Paciello wyjaśnia dostępność nazw](https://www.paciellogroup.com/blog/2017/04/what-is-an-accessible-name/)
 
-Although these standard HTML practices can be directly used in React, note that the `for` attribute is written as `htmlFor` in JSX:
+Chociaż te standardowe praktyki HTML mogą być bezpośrednio używane w Reakcie, zauważ, że atrybut `for` jest zapisany jako` htmlFor` w JSX:
 
 ```javascript{1}
 <label htmlFor="namedInput">Name:</label>
 <input id="namedInput" type="text" name="name"/>
 ```
 
-### Notifying the user of errors {#notifying-the-user-of-errors}
+### Powiadamianie użytkownika o błędach {#notifying-the-user-of-errors}
 
-Error situations need to be understood by all users. The following link shows us how to expose error texts to screen readers as well:
+W sytuacji zgłoszenia błędów, komunikaty muszą być zrozumiałe dla wszystkich użytkowników. Poniższe linki pokazują, jak wyświetlić błędy w sposób zrozumiały dla czytników ekranowych.
 
-- [The W3C demonstrates user notifications](https://www.w3.org/WAI/tutorials/forms/notifications/)
-- [WebAIM looks at form validation](https://webaim.org/techniques/formvalidation/)
+- [W3C - notyfikacja użytników](https://www.w3.org/WAI/tutorials/forms/notifications/)
+- [WebAIM - walidacja formularzy looks at form validation](https://webaim.org/techniques/formvalidation/)
 
-## Focus Control {#focus-control}
+## Kontrola ostości {#focus-control}
 
-Ensure that your web application can be fully operated with the keyboard only:
+Upewnij się, że Twoja aplikacja internetowa może być w pełni obsługiwana tylko za pomocą klawiatury:
 
-- [WebAIM talks about keyboard accessibility](https://webaim.org/techniques/keyboard/)
+- [WebAIM - dostępność z wykorzystaniem klawiatury](https://webaim.org/techniques/keyboard/)
 
-### Keyboard focus and focus outline {#keyboard-focus-and-focus-outline}
+### Klawiatura i kontur ostrości {#keyboard-focus-and-focus-outline}
 
-Keyboard focus refers to the current element in the DOM that is selected to accept input from the keyboard. We see it everywhere as a focus outline similar to that shown in the following image:
+Kontur ostości klawiatury odnosi się do bieżącego elementu w DOM, który został wybrany poprzez zdarzenia wywołany przez klawiaturę. Widzimy to wszędzie, jako kontur podobny do tego na poniższym obrazku:
 
-<img src="../images/docs/keyboard-focus.png" alt="Blue keyboard focus outline around a selected link." />
+<img src="../images/docs/keyboard-focus.png" alt="Niebieski kontury ostrości wokół wybranego linku." />
 
-Only ever use CSS that removes this outline, for example by setting `outline: 0`, if you are replacing it with another focus outline implementation.
+Upewnij się, że wykorzystujesz regułę CSS, która usuwa ten kontury, na przykład ustawiając `outline: 0`, wyłącznie jeśli zastępujesz go kolejną implementacją konturu.
 
-### Mechanisms to skip to desired content {#mechanisms-to-skip-to-desired-content}
+### Przejście do wybranej treści {#mechanisms-to-skip-to-desired-content}
 
-Provide a mechanism to allow users to skip past navigation sections in your application as this assists and speeds up keyboard navigation.
+Zapewnij mechanizm umożliwiający użytkownikom pominięcie poprzednich sekcji aplikacji, ponieważ ułątwia to i przyspiesza nawigację z wykorzystaniem klawiatury.
 
-Skiplinks or Skip Navigation Links are hidden navigation links that only become visible when keyboard users interact with the page. They are very easy to implement with
-internal page anchors and some styling:
+Łącza typu `Skiplink` lub `Skip Navigation Links` to ukryte linki nawigacyjne, które stają się widoczne tylko wtedy, gdy użytkownicy klawiatury wchodzą w interakcję ze stroną. Są bardzo łatwe w implementacji z wykorzystaniem wewnętrznych kotwic oraz niektórych styli:
 
 - [WebAIM - Skip Navigation Links](https://webaim.org/techniques/skipnav/)
 
-Also use landmark elements and roles, such as `<main>` and `<aside>`, to demarcate page regions as assistive technology allow the user to quickly navigate to these sections.
+Używaj również elementów i punktów orientacyjnych, takich jak `<main>` i `<aside>`, aby rozgraniczyć sekcje strony, ponieważ technologie wspierające pozwalają użytkownikowi szybkie przemieszczanie między nimi.
 
-Read more about the use of these elements to enhance accessibility here:
+Przeczytaj więcej o wykorzystaniu tych elementów w celu zwiększenia dostępności:
 
-- [Accessible Landmarks](https://www.scottohara.me/blog/2018/03/03/landmarks.html)
+- [Dostępne punkty orientacyjne](https://www.scottohara.me/blog/2018/03/03/landmarks.html)
 
-### Programmatically managing focus {#programmatically-managing-focus}
+### Programowo zarządzaj ostrością {#programmatically-managing-focus}
 
-Our React applications continuously modify the HTML DOM during runtime, sometimes leading to keyboard focus being lost or set to an unexpected element. In order to repair this,
-we need to programmatically nudge the keyboard focus in the right direction. For example, by resetting keyboard focus to a button that opened a modal window after that modal window is closed.
+Nasze aplikacje React nieustannie modyfikują HTML DOM w czasie wykonywania, co chwilami prowadzi do utraty konturu aktywnego elementu lub ustawienia go na nieoczekiwany element. W celu naprawy tego, musimy ręcznie ustawić ostrość we właściwym miejscu. Na przykład przez zresetowanie ostrości z przycisku, który otworzył okno modalne po jego zamknięciu.
 
-MDN Web Docs takes a look at this and describes how we can build [keyboard-navigable JavaScript widgets](https://developer.mozilla.org/en-US/docs/Web/Accessibility/Keyboard-navigable_JavaScript_widgets).
+Dokumentacja MDN opisuje dokłądniej, w jaki sposób możemy tworzyć [widgety JavaScript z obsługą klawiatury](https://developer.mozilla.org/en-US/docs/Web/Accessibility/Keyboard-navigable_JavaScript_widgets).
 
-To set focus in React, we can use [Refs to DOM elements](/docs/refs-and-the-dom.html).
+Aby ustawić ostrość w Reakcie, możemy posłużyć się mechanizmem [Referencji do elementów DOM](/docs/refs-and-the-dom.html).
 
-Using this, we first create a ref to an element in the JSX of a component class:
+Korzystając z tego, najpierw tworzymy ref do elementu w JSX:
 
 ```javascript{4-5,8-9,13}
 class CustomTextInput extends React.Component {
   constructor(props) {
     super(props);
-    // Create a ref to store the textInput DOM element
+    // Utwórz ref, aby zapisać wskaźnik na element DOM textInput
     this.textInput = React.createRef();
   }
   render() {
-  // Use the `ref` callback to store a reference to the text input DOM
-  // element in an instance field (for example, this.textInput).
+  // Użyj wywołania zwrotnego `ref`, aby zapisać odwołanie do wejścia
+  // pola tekstowego DOM w polu instancji (na przykład this.textInput).
     return (
       <input
         type="text"
@@ -191,18 +189,17 @@ class CustomTextInput extends React.Component {
 }
 ```
 
-Then we can focus it elsewhere in our component when needed:
+Wówczas, w razie potrzeby możemy przenieść ostrość gdzie indziej w naszym komponencie:
 
  ```javascript
  focus() {
-   // Explicitly focus the text input using the raw DOM API
-   // Note: we're accessing "current" to get the DOM node
+   // Jawne przeniesienie ostrości podczas wprowadzania tekstu za pomocą surowego API DOM
+   // Uwaga: uzyskujemy dostęp do "current", aby uzyskać węzeł DOM
    this.textInput.current.focus();
  }
  ```
 
-Sometimes a parent component needs to set focus to an element in a child component. We can do this by [exposing DOM refs to parent components](/docs/refs-and-the-dom.html#exposing-dom-refs-to-parent-components)
-through a special prop on the child component that forwards the parent's ref to the child's DOM node.
+Czasami komponent nadrzędny musi ustawić fokus na element komponentu podrzędnego. Możemy to zrobić poprzez [przesłanie referencji "w górę" do komponentu nadrzędnego](/docs/refs-and-the-dom.html#exposing-dom-refs-to-parent-components). Można zrobić to np. przez specjalną właściwość komponentu podrzędnego, która przekazuje rodzicowi ref do węzła DOM wewnątrz dziecka.
 
 ```javascript{4,12,16}
 function CustomTextInput(props) {
@@ -225,32 +222,32 @@ class Parent extends React.Component {
   }
 }
 
-// Now you can set focus when required.
+// Teraz, możesz ręcznie ustawić ostrość, kiedy to potrzebne.
 this.inputElement.current.focus();
 ```
 
-When using a HOC to extend components, it is recommended to [forward the ref](/docs/forwarding-refs.html) to the wrapped component using the `forwardRef` function of React. If a third party HOC
-does not implement ref forwarding, the above pattern can still be used as a fallback.
+Kiedy używasz HOC do rozszerzenia komponentów, zaleca się [przekazanie ref](/docs/forwarding-refs.html) do opakowanego komponentu przy użyciu funkcji `forwardRef`, która wbudowana jest w Reacta. Jeśli strona trzecia HOC
+nie implementuje przekierowania, powyższy wzorzec może być nadal używany jako rezerwowy.
+
+Doskonałym przykładem zarządzania ostrością jest [react-aria-modal] (https://github.com/davidtheclark/react-aria-modal). Jest to stosunkowo rzadki przykład w pełni dostępnego okna modalnego. Nie tylko ustawia początkową ostrość
+na przycisku zamykającym kontener modalny (uniemożliwiający użytkownikowi klawiatury przypadkowe aktywowanie akcji akceptującej) i zatrzymujący skupienie klawiatury wewnątrz modalu, a także po zamknięciu, przywracający ostrość z powrotem do elementu, który początkowo otworzył kontener modalny.
 
-A great focus management example is the [react-aria-modal](https://github.com/davidtheclark/react-aria-modal). This is a relatively rare example of a fully accessible modal window. Not only does it set initial focus on
-the cancel button (preventing the keyboard user from accidentally activating the success action) and trap keyboard focus inside the modal, it also resets focus back to the element that
-initially triggered the modal.
 
->Note:
+>Uwaga:
 >
->While this is a very important accessibility feature, it is also a technique that should be used judiciously. Use it to repair the keyboard focus flow when it is disturbed, not to try and anticipate how
->users want to use applications.
+> Chociaż jest to bardzo ważna funkcja dostępności, jest to również technika, którą należy rozsądnie stosować. Użyj jej, aby naprawić przepływ ostrości klawiatury, gdy jest zakłócony, a nie próbować przewidzieć, jak
+> użytkownicy chcą korzystać z aplikacji.
 
-## Mouse and pointer events {#mouse-and-pointer-events}
+## Zdarzenia myszy oraz wskażnika {#mouse-and-pointer-events}
 
-Ensure that all functionality exposed through a mouse or pointer event can also be accessed using the keyboard alone. Depending only on the pointer device will lead to many cases where
-keyboard users cannot use your application.
+Upewnij się, że wszystkie funkcje udostępniane korzystając z myszy lub wskaźnika można również uzyskać za pomocą samej klawiatury. Sama różnorodność wskaźników prowadzi często do wielu przypadków gdzie
+użytkownicy klawiatury nie mogą korzystać z aplikacji.
 
-To illustrate this, let's look at a prolific example of broken accessibility caused by click events. This is the outside click pattern, where a user can disable an opened popover by clicking outside the element.
+Aby to zilustrować, spójrzmy na doskonale obrazujący to przykład zepsutej dostępności spowodowanej wykorzystaniem zdarzenia kliknięcia. Jest to zewnętrzny wzorzec, w którym użytkownik może wyłączyć otwarty `popover`, klikając poza elementem.
 
-<img src="../images/docs/outerclick-with-mouse.gif" alt="A toggle button opening a popover list implemented with the click outside pattern and operated with a mouse showing that the close action works." />
+<img src="../images/docs/outerclick-with-mouse.gif" alt=" Przycisk przełączający widoczność listy popover za pomocą wzorca kliknięcia na zewnątrz i obsługiwany za pomocą myszy, pokazujący, że zamknięcie działa." />
 
-This is typically implemented by attaching a `click` event to the `window` object that closes the popover:
+Zazwyczaj jest to implementowane przez dołączenie zdarzenia `click` do obiektu` window`, który zamyka popover:
 
 ```javascript{12-14,26-30}
 class OuterClickExample extends React.Component {
@@ -301,12 +298,12 @@ constructor(props) {
 }
 ```
 
-This may work fine for users with pointer devices, such as a mouse, but operating this with the keyboard alone leads to broken functionality when tabbing to the next element
-as the `window` object never receives a `click` event. This can lead to obscured functionality which blocks users from using your application.
+Powyższy przykład działa poprawnie dla użytkowników krzystających ze wskaźników, takich jak np. mysz. Jednakże, obsługiwanie za pomocą samej klawiatury prowadzi do problemu przy przechodzeniu do następnego elementu listy. Jest tak, ponieważ obiekt `window` nigdy nie otrzymuje zdarzenia` click`. Może to prowadzić do uniemożliwienia użytkownikom korzystania z aplikacji.
 
-<img src="../images/docs/outerclick-with-keyboard.gif" alt="A toggle button opening a popover list implemented with the click outside pattern and operated with the keyboard showing the popover not being closed on blur and it obscuring other screen elements." />
 
-The same functionality can be achieved by using an appropriate event handlers instead, such as `onBlur` and `onFocus`:
+<img src="../images/docs/outerclick-with-keyboard.gif" alt="Przełącznik otwierający listę popover za pomocą wzorca kliknięcia na zewnątrz i obsługiwany za pomocą klawiatury pokazującej, że popover nie jest zamykany na onBlur i zasłania inne elementy ekranu." />
+
+Ta sama funkcjonalność może zostać osiągnięta poprzez użycie odpowiednich procedur obsługi zdarzeń, takich jak `onBlur` i` onFocus`:
 
 ```javascript{19-29,31-34,37-38,40-41}
 class BlurExample extends React.Component {
@@ -327,10 +324,11 @@ class BlurExample extends React.Component {
     }));
   }
 
-  // We close the popover on the next tick by using setTimeout.
-  // This is necessary because we need to first check if
-  // another child of the element has received focus as
-  // the blur event fires prior to the new focus event.
+  // Zamykamy popover na następnym tiku za pomocą setTimeout.
+  // Jest to konieczne, ponieważ musimy najpierw sprawdzić,
+  // czy inne dziecko elementu otrzymało ostrość jako, że
+  // zdarzenie onBlur wywołuje się wyłącznie przed nowym 
+  // zdarzeniem ustawienia ostrości.
   onBlurHandler() {
     this.timeOutId = setTimeout(() => {
       this.setState({
@@ -339,14 +337,14 @@ class BlurExample extends React.Component {
     });
   }
 
-  // If a child receives focus, do not close the popover.
+  // Jeśli dziecko otrzymuje ostrość, nie zamykaj elementu bedącego na wierzchu.
   onFocusHandler() {
     clearTimeout(this.timeOutId);
   }
 
   render() {
-    // React assists us by bubbling the blur and
-    // focus events to the parent.
+    // React wspiera nas w przesyłaniu ostrości
+    // do rodzica.
     return (
       <div onBlur={this.onBlurHandler}
            onFocus={this.onFocusHandler}>
@@ -368,86 +366,83 @@ class BlurExample extends React.Component {
 }
 ```
 
-This code exposes the functionality to both pointer device and keyboard users. Also note the added `aria-*` props to support screen-reader users. For simplicity's sake
-the keyboard events to enable `arrow key` interaction of the popover options have not been implemented.
+Ten kod udostępnia funkcje zarówno użytkownikom urządzeń wskaźnikowych, jak i klawiatury. Zwróć także uwagę na dodane wartości `aria- *` do obsługi użytkowników czytników ekranu. Dla uproszczenia zdarzenia klawiatury, aby włączyć interakcję klawiszy strzałek opcji popover, nie zostały zaimplementowane.
 
-<img src="../images/docs/blur-popover-close.gif" alt="A popover list correctly closing for both mouse and keyboard users." />
+<img src="../images/docs/blur-popover-close.gif" alt="Lista poprawnie zamykająca się zarówno dla użytkowników myszy, jak i klawiatury." />
 
-This is one example of many cases where depending on only pointer and mouse events will break functionality for keyboard users. Always testing with the keyboard will immediately
-highlight the problem areas which can then be fixed by using keyboard aware event handlers.
+Jest to tylko jeden przykład z wielu przypadków, w których w zależności tylko od zdarzeń wskaźnika i myszy możemy napotkać na problem w poruszaniu się użytkowników klawiaturowych.
+Stałe testowanie za pomocą klawiatury pozwala na szybkie reagowanie i odnotywowanie problemów, które można następnie naprawić korzystając ze zdarzeń mogących zostać wywołane nie tylko za pomocą wskaźników, ale również i innych sposobów nawigowania po aplikacji.
 
-## More Complex Widgets {#more-complex-widgets}
+## Bardziej złożone widgety {#more-complex-widgets}
 
-A more complex user experience should not mean a less accessible one. Whereas accessibility is most easily achieved by coding as close to HTML as possible,
-even the most complex widget can be coded accessibly.
+Bardziej złożone scenariusze użytkowania nie powinny oznaczać mniejszej przystępności. Dostępność jest najłatwiej osiągalna poprzez trzymanie się jak najbliżej wzorców znanych z natywnego HTML'a.
+Nawet najbardziej złożony widżet może być przygotowany w przystępny sposób.
 
-Here we require knowledge of [ARIA Roles](https://www.w3.org/TR/wai-aria/#roles) as well as [ARIA States and Properties](https://www.w3.org/TR/wai-aria/#states_and_properties).
-These are toolboxes filled with HTML attributes that are fully supported in JSX and enable us to construct fully accessible, highly functional React components.
+Wymagamy tutaj znajomości [ARIA Roles](https://www.w3.org/TR/wai-aria/#roles) oraz [stanów i właściwości ARIA](https://www.w3.org/TR/wai-aria/#states_and_properties).
+Są to skrzynki narzędziowe wypełnione atrybutami HTML, które są w pełni obsługiwane w JSX i umożliwiają nam tworzenie w pełni dostępnych, wysoce funkcjonalnych komponentów React.
 
-Each type of widget has a specific design pattern and is expected to function in a certain way by users and user agents alike:
+Każdy typ widżetu ma określone wzorce i oczekuje się, że będzie działał w określony sposób zarówno przez użytkowników, jak przeglądarki:
 
-- [WAI-ARIA Authoring Practices - Design Patterns and Widgets](https://www.w3.org/TR/wai-aria-practices/#aria_ex)
-- [Heydon Pickering - ARIA Examples](https://heydonworks.com/practical_aria_examples/)
+- [WAI-ARIA Authoring Practices - Wzorce projektowe i widżety](https://www.w3.org/TR/wai-aria-practices/#aria_ex)
+- [Heydon Pickering - ARIA Przykłady](https://heydonworks.com/practical_aria_examples/)
 - [Inclusive Components](https://inclusive-components.design/)
 
-## Other Points for Consideration {#other-points-for-consideration}
-
-### Setting the language {#setting-the-language}
+## Inne punkty do rozważenia {#other-points-for-consideration}
 
-Indicate the human language of page texts as screen reader software uses this to select the correct voice settings:
+### Ustawianie języka {#setting-the-language}
 
-- [WebAIM - Document Language](https://webaim.org/techniques/screenreader/#language)
+Jawnie wskaż ludzki język tekstów zamieszczonych na stronie, ponieważ oprogramowanie czytnika ekranu używa tego do wyboru prawidłowych ustawień głosu:
+- [WebAIM - Język dokumentu](https://webaim.org/techniques/screenreader/#language)
 
-### Setting the document title {#setting-the-document-title}
+### Ustawienie tytułu dokumentu {#setting-the-document-title}
 
-Set the document `<title>` to correctly describe the current page content as this ensures that the user remains aware of the current page context:
+Ustaw atrybut `<title>` dokumentu, aby poprawnie opisać bieżącą zawartość strony, ponieważ zapewnia to, że użytkownik pozostaje świadomy bieżącego kontekstu strony:
 
-- [WCAG - Understanding the Document Title Requirement](https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-title.html)
+- [WCAG - Zrozumienie wymogu tytułu dokumentu](https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-title.html)
 
-We can set this in React using the [React Document Title Component](https://github.com/gaearon/react-document-title).
+Możemy to ustawić w Reakcie używając [React Document Title Component](https://github.com/gaearon/react-document-title).
 
-### Color contrast {#color-contrast}
+### Kontrast kolorów {#color-contrast}
 
-Ensure that all readable text on your website has sufficient color contrast to remain maximally readable by users with low vision:
+Upewnij się, że wszystkie teksty na Twojej stronie mają wystarczający kontrast kolorów, aby pozostały maksymalnie czytelne dla użytkowników o słabym wzroku:
 
-- [WCAG - Understanding the Color Contrast Requirement](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html)
-- [Everything About Color Contrast And Why You Should Rethink It](https://www.smashingmagazine.com/2014/10/color-contrast-tips-and-tools-for-accessibility/)
-- [A11yProject - What is Color Contrast](https://a11yproject.com/posts/what-is-color-contrast/)
+- [WCAG - Zrozumienie wymogu kontrastu kolorów](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html)
+- [Wszystko o kontrastie kolorów i dlaczego warto to przemyśleć](https://www.smashingmagazine.com/2014/10/color-contrast-tips-and-tools-for-accessibility/)
+- [A11yProject - Czym jest kontrast kolorów](https://a11yproject.com/posts/what-is-color-contrast/)
 
-It can be tedious to manually calculate the proper color combinations for all cases in your website so instead, you can [calculate an entire accessible color palette with Colorable](https://jxnblk.com/colorable/).
+Ręczne obliczanie odpowiednich kombinacji kolorów dla wszystkich przypadków na swojej stronie internetowej może być nudne, więc zamiast tego [można prześledzić całą dostępną paletę kolorów za pomocą Colorable](https://jxnblk.com/colorable/).
 
-Both the aXe and WAVE tools mentioned below also include color contrast tests and will report on contrast errors.
+Wymienione poniżej narzędzia aXe i WAVE zawierają również testy kontrastu kolorów i będą zgłaszać błędy kontrastu.
 
-If you want to extend your contrast testing abilities you can use these tools:
+Jeśli chcesz rozszerzyć możliwości testowania kontrastu, możesz użyć następujących narzędzi:
 
-- [WebAIM - Color Contrast Checker](https://webaim.org/resources/contrastchecker/)
-- [The Paciello Group - Color Contrast Analyzer](https://www.paciellogroup.com/resources/contrastanalyser/)
+- [WebAIM - Sprawdzanie kontrastu kolorów](https://webaim.org/resources/contrastchecker/)
+- [The Paciello Group - Analizator kontrastu kolorów](https://www.paciellogroup.com/resources/contrastanalyser/)
 
-## Development and Testing Tools {#development-and-testing-tools}
+## Narzędzia do tworzenia oraz testowania {#development-and-testing-tools}
 
-There are a number of tools we can use to assist in the creation of accessible web applications.
+Istnieje wiele narzędzi, których możemy użyć, aby pomóc w tworzeniu przystępnych aplikacji internetowych.
 
-### The keyboard {#the-keyboard}
+### Klawiatura {#the-keyboard}
 
-By far the easiest and also one of the most important checks is to test if your entire website can be reached and used with the keyboard alone. Do this by:
+Zdecydowanie najłatwiejszą i jedną z najważniejszych kontroli jest sprawdzenie, czy poruszanie się po całej stronie jest możliwe z wykorzystaniem wyłącznie klawiatury. Instrukcja sprawdzenia aplikacji:
 
-1. Plugging out your mouse.
-1. Using `Tab` and `Shift+Tab` to browse.
-1. Using `Enter` to activate elements.
-1. Where required, using your keyboard arrow keys to interact with some elements, such as menus and dropdowns.
+1. Odłącz myszy.
+1. Używając wyłącznie `Tab` i` Shift + Tab` przeglądaj stronę.
+1. Używając `Enter` aktywuj elementy.
+1. W razie potrzeby, używając klawiszy strzałek klawiatury do interakcji z niektórymi elementami, takimi jak menu i listy rozwijane.
 
-### Development assistance {#development-assistance}
+### Pomoc przy tworzeniu {#development-assistance}
 
 We can check some accessibility features directly in our JSX code. Often intellisense checks are already provided in JSX aware IDE's for the ARIA roles, states and properties. We also
 have access to the following tool:
+Możemy sprawdzić niektóre elementy dostępności bezpośrednio w naszym kodzie JSX. Często kontrole dostępności dla ról, stanów i właściwości ARIA są wbudowane w IDE obsługujące JSX. Dodatkowo, my także mamy dostęp do następującego narzędzi:
 
 #### eslint-plugin-jsx-a11y {#eslint-plugin-jsx-a11y}
 
-The [eslint-plugin-jsx-a11y](https://github.com/evcohen/eslint-plugin-jsx-a11y) plugin for ESLint provides AST linting feedback regarding accessibility issues in your JSX. Many
-IDE's allow you to integrate these findings directly into code analysis and source code windows.
+Wtyczka [eslint-plugin-jsx-a11y] (https://github.com/evcohen/eslint-plugin-jsx-a11y) dla ESLint zapewnia informacje zwrotne AST dotyczące problemów z dostępnością w Twoim JSX. Wiele IDE umożliwiają integrację tych notyfikacji bezpośrednio z analizą kodu i oknami kodu źródłowego.
 
-[Create React App](https://github.com/facebookincubator/create-react-app) has this plugin with a subset of rules activated. If you want to enable even more accessibility rules,
-you can create an `.eslintrc` file in the root of your project with this content:
+[Create React App](https://github.com/facebookincubator/create-react-app) ma tę wtyczkę domyślnie zainstalowaną z podzbiorem dodatkowych reguł. Jeśli chcesz włączyć jeszcze więcej reguł dostępności, możesz utworzyć plik `.eslintrc` w katalogu głównym swojego projektu z tą treścią:
 
   ```json
   {
@@ -456,77 +451,75 @@ you can create an `.eslintrc` file in the root of your project with this content
   }
   ```
 
-### Testing accessibility in the browser {#testing-accessibility-in-the-browser}
+### testowanie dostępności w przeglądarce {#testing-accessibility-in-the-browser}
 
-A number of tools exist that can run accessibility audits on web pages in your browser. Please use them in combination with other accessibility checks mentioned here as they can only
-test the technical accessibility of your HTML.
+Istnieje wiele narzędzi, które umożliwiają przeprowadzanie kontroli dostępności na stronach internetowych bezpośrednio w przeglądarce. Używaj ich w połączeniu z innymi narzędziami wymienionymi tutaj, aby jak najlepiej przygotować swój kod HTML.
 
-#### aXe, aXe-core and react-axe {#axe-axe-core-and-react-axe}
+#### aXe, aXe-core oraz react-axe {#axe-axe-core-and-react-axe}
 
-Deque Systems offers [aXe-core](https://github.com/dequelabs/axe-core) for automated and end-to-end accessibility tests of your applications. This module includes integrations for Selenium.
+Deque Systems oferuje [aXe-core](https://github.com/dequelabs/axe-core) do automatycznych i kompleksowych testów dostępności aplikacji. Moduł ten obejmuje integracje z Selenium.
 
-[The Accessibility Engine](https://www.deque.com/products/axe/) or aXe, is an accessibility inspector browser extension built on `aXe-core`.
+[The Accessibility Engine](https://www.deque.com/products/axe/) lub ax, jest rozszerzeniem przeglądarki inspektora dostępności zbudowanym na bazie `ax-core`.
 
-You can also use the [react-axe](https://github.com/dylanb/react-axe) module to report these accessibility findings directly to the console while developing and debugging.
+Możesz również użyć modułu [react-ax](https://github.com/dylanb/react-axe), aby zgłosić luki dotyczące dostępności bezpośrednio do konsoli, podczas pracy i debugowania.
 
 #### WebAIM WAVE {#webaim-wave}
 
-The [Web Accessibility Evaluation Tool](https://wave.webaim.org/extension/) is another accessibility browser extension.
+[Web Accessibility Evaluation Tool](https://wave.webaim.org/extension/) jest kolejną wtyczką pomagającą w testowaniu dostępności.
 
 #### Accessibility inspectors and the Accessibility Tree {#accessibility-inspectors-and-the-accessibility-tree}
 
-[The Accessibility Tree](https://www.paciellogroup.com/blog/2015/01/the-browser-accessibility-tree/) is a subset of the DOM tree that contains accessible objects for every DOM element that should be exposed
-to assistive technology, such as screen readers.
+[The Accessibility Tree](https://www.paciellogroup.com/blog/2015/01/the-browser-accessibility-tree/) jest podzbiorem drzewa DOM, które zawiera dostępne obiekty dla każdego elementu DOM, który powinien zostać uwzględniony z myślą o technologiach wspomagających, takich jak czytniki ekranu.
 
-In some browsers we can easily view the accessibility information for each element in the accessibility tree:
+W niektórych przeglądarkach możemy łatwo wyświetlić informacje o dostępności dla każdego elementu w drzewie dostępności:
 
-- [Using the Accessibility Inspector in Firefox](https://developer.mozilla.org/en-US/docs/Tools/Accessibility_inspector)
-- [Activate the Accessibility Inspector in Chrome](https://gist.github.com/marcysutton/0a42f815878c159517a55e6652e3b23a)
-- [Using the Accessibility Inspector in OS X Safari](https://developer.apple.com/library/content/documentation/Accessibility/Conceptual/AccessibilityMacOSX/OSXAXTestingApps.html)
+- [Korzystanie z Inspektora dostępności w Firefoksie](https://developer.mozilla.org/en-US/docs/Tools/Accessibility_inspector)
+- [Korzystanie z Inspektora dostępności w Chromie](https://gist.github.com/marcysutton/0a42f815878c159517a55e6652e3b23a)
+- [Korzystanie z Inspektora dostępności w OS X Safari](https://developer.apple.com/library/content/documentation/Accessibility/Conceptual/AccessibilityMacOSX/OSXAXTestingApps.html)
 
-### Screen readers {#screen-readers}
+### Czytniki ekranowe {#screen-readers}
 
-Testing with a screen reader should form part of your accessibility tests.
+Testowanie za pomocą czytnika ekranu powinno stanowić część testów dostępności.
 
-Please note that browser / screen reader combinations matter. It is recommended that you test your application in the browser best suited to your screen reader of choice.
+Należy pamiętać, że kombinacje przeglądarki / czytnika ekranu mają znaczenie. Zaleca się przetestowanie aplikacji w przeglądarce najlepiej pasującej do wybranego czytnika ekranu.
 
-### Commonly Used Screen Readers {#commonly-used-screen-readers}
+### Często używane czytniki ekranu {#commonly-used-screen-readers}
 
-#### NVDA in Firefox {#nvda-in-firefox}
+#### NVDA w Firefoxie {#nvda-in-firefox}
 
-[NonVisual Desktop Access](https://www.nvaccess.org/) or NVDA is an open source Windows screen reader that is widely used.
+[NonVisual Desktop Access](https://www.nvaccess.org/) lub NVDA to czytnik ekranu systemu Windows o otwartym kodzie źródłowym, który jest szeroko stosowany.
 
-Refer to the following guides on how to best use NVDA:
+Zapoznaj się z następującymi poradnikami, jak najlepiej wykorzystać NVDA:
 
-- [WebAIM - Using NVDA to Evaluate Web Accessibility](https://webaim.org/articles/nvda/)
-- [Deque - NVDA Keyboard Shortcuts](https://dequeuniversity.com/screenreaders/nvda-keyboard-shortcuts)
+- [WebAIM - Korzystanie z NVDA do oceny dostępności sieci](https://webaim.org/articles/nvda/)
+- [Deque - NVDA Skróty Klawiszowe](https://dequeuniversity.com/screenreaders/nvda-keyboard-shortcuts)
 
-#### VoiceOver in Safari {#voiceover-in-safari}
+#### VoiceOver w Safari {#voiceover-in-safari}
 
-VoiceOver is an integrated screen reader on Apple devices.
+VoiceOver to zintegrowany czytnik ekranu na urządzeniach Apple.
 
-Refer to the following guides on how activate and use VoiceOver:
+Zapoznaj się z następującymi przewodnikami dotyczącymi aktywacji i korzystania z VoiceOver:
 
-- [WebAIM - Using VoiceOver to Evaluate Web Accessibility](https://webaim.org/articles/voiceover/)
-- [Deque - VoiceOver for OS X Keyboard Shortcuts](https://dequeuniversity.com/screenreaders/voiceover-keyboard-shortcuts)
-- [Deque - VoiceOver for iOS Shortcuts](https://dequeuniversity.com/screenreaders/voiceover-ios-shortcuts)
+- [WebAIM - Korzystanie z VoiceOver do oceny dostępności stron internetowych](https://webaim.org/articles/voiceover/)
+- [Deque - VoiceOver dla OS X Skróty Klawiaturowe](https://dequeuniversity.com/screenreaders/voiceover-keyboard-shortcuts)
+- [Deque - VoiceOver dla iOS Skróty](https://dequeuniversity.com/screenreaders/voiceover-ios-shortcuts)
 
-#### JAWS in Internet Explorer {#jaws-in-internet-explorer}
+#### JAWS w Internet Explorer {#jaws-in-internet-explorer}
 
-[Job Access With Speech](https://www.freedomscientific.com/Products/software/JAWS/) or JAWS, is a prolifically used screen reader on Windows.
+[Job Access With Speech](https://www.freedomscientific.com/Products/software/JAWS/)lub JAWS, jest popularnym czytnikiem ekranu w systemie Windows.
 
-Refer to the following guides on how to best use JAWS:
+Zapoznaj się z następującymi poradnikami, jak najlepiej korzystać z JAWS:
 
-- [WebAIM - Using JAWS to Evaluate Web Accessibility](https://webaim.org/articles/jaws/)
-- [Deque - JAWS Keyboard Shortcuts](https://dequeuniversity.com/screenreaders/jaws-keyboard-shortcuts)
+- [WebAIM - Korzystanie z JAWS do oceny dostępności stron internetowych](https://webaim.org/articles/jaws/)
+- [Deque - JAWS Skróty Klawiaturowe](https://dequeuniversity.com/screenreaders/jaws-keyboard-shortcuts)
 
-### Other Screen Readers {#other-screen-readers}
+### Inne Czytniki Ekranowe {#other-screen-readers}
 
-#### ChromeVox in Google Chrome {#chromevox-in-google-chrome}
+#### ChromeVox w Google Chrome {#chromevox-in-google-chrome}
 
-[ChromeVox](https://www.chromevox.com/) is an integrated screen reader on Chromebooks and is available [as an extension](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn?hl=en) for Google Chrome.
+[ChromeVox] (https://www.chromevox.com/) jest zintegrowanym czytnikiem ekranu na Chromebookach i jest dostępny [jako rozszerzenie] (https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn?hl = en) dla Google Chrome.
 
-Refer to the following guides on how best to use ChromeVox:
+Zapoznaj się z następującymi poradnikami, jak najlepiej korzystać z ChromeVox:
 
-- [Google Chromebook Help - Use the Built-in Screen Reader](https://support.google.com/chromebook/answer/7031755?hl=en)
-- [ChromeVox Classic Keyboard Shortcuts Reference](https://www.chromevox.com/keyboard_shortcuts.html)
+- [Google Chromebook Help - Użyj wbudowanego czytnika ekranu](https://support.google.com/chromebook/answer/7031755?hl=en)
+- [ChromeVox klasyczne Skróty Klawiaturowe](https://www.chromevox.com/keyboard_shortcuts.html)

From 73d84960a416e1b99dbd454f3da579e0a904ad8e Mon Sep 17 00:00:00 2001
From: Daniel Zawadzki <hello@danielzawadzki.com>
Date: Tue, 26 Mar 2019 15:14:33 +0100
Subject: [PATCH 2/5] Translated code snippets and made stylistic corrections.

---
 content/docs/accessibility.md | 219 +++++++++++++++++-----------------
 1 file changed, 108 insertions(+), 111 deletions(-)

diff --git a/content/docs/accessibility.md b/content/docs/accessibility.md
index f96e743d9..6a370998e 100644
--- a/content/docs/accessibility.md
+++ b/content/docs/accessibility.md
@@ -4,9 +4,9 @@ title: Dostępność
 permalink: docs/accessibility.html
 ---
 
-## Czemu dostępność? {#why-accessibility}
+## Czym jest dostępność? {#why-accessibility}
 
-Pojęcie dostępności stron internetowych (określanej również [**a11y**](https://en.wiktionary.org/wiki/a11y)) zostało zaprojektowana i stworzone z myślą o internecie przystępnym dla wszystkich. Wspieranie dostępności jest niezbędne, aby umożliwić technologiom asystującym poprawną interpretację stron.
+Pojęcie dostępności stron internetowych (określanej również [**a11y**](https://en.wiktionary.org/wiki/a11y)) zostało zaprojektowane i stworzone z myślą o internecie przystępnym dla wszystkich. Wspieranie dostępności jest niezbędne, aby umożliwić technologiom asystującym poprawną interpretację stron.
 
 React w pełni wspiera budowanie dostępnych dla wszystkich stron internetowych, często z wykorzystaniem standardowych technik HTML.
 
@@ -24,18 +24,18 @@ Poniższa lista kontrolna WCAG zawiera przegląd:
 
 ### WAI-ARIA {#wai-aria}
 
-Dokument [Web Accessibility Initiative - Accessible Rich Internet Applications](https://www.w3.org/WAI/intro/aria)  zawiera listę technik wyspecjalizowanych w bdowaniu w pełni dostępnych aplikacji JavaScript. 
+Dokument [Web Accessibility Initiative - Accessible Rich Internet Applications](https://www.w3.org/WAI/intro/aria)  zawiera listę technik wyspecjalizowanych w budowaniu w pełni dostępnych aplikacji JavaScript. 
 
 Warto zaznaczyć, że wszystkie atrybuty HTML `aria-*` są w pełni wspierane przez JSX. Mimo, że większość tagów oraz atrybutów DOM w Reakcie zapisujemy w formacie camelCase, te związane z dostępnością, powinny być zapisane z wykorzystaniem myślników (znanych również jako kebab-case, lisp-case itp.), ponieważ są one traktowane jak czysty HTML.
 
 ```javascript{3,4}
 <input
   type="text"
-  aria-label={labelText}
+  aria-label={etykieta}
   aria-required="true"
-  onChange={onchangeHandler}
-  value={inputValue}
-  name="name"
+  onChange={obserwatorZdarzenia}
+  value={wartoscPola}
+  name="imie"
 />
 ```
 
@@ -43,30 +43,30 @@ Warto zaznaczyć, że wszystkie atrybuty HTML `aria-*` są w pełni wspierane pr
 
 Semantyczny HTML jest podstawą dostępności aplikacji webowych. Wykorzystując różne elementy HTML, które wzmacniają znaczenie informacji na naszych stronach, bardzo często, możemy stworzyć w pełni dostępną stronę bez dodatkowych nakładów pracy.
 
-- [MDN elementy HTML](https://developer.mozilla.org/en-US/docs/Web/HTML/Element)
+- [MDN - elementy HTML](https://developer.mozilla.org/en-US/docs/Web/HTML/Element)
 
-Czasem łamiemy zasady semantycznego HTMl, kiedy dodajemy dodatkowy element `div` do naszego JSX, aby uruchomić aplikację, zwłaszcza, kiedy pracujemy z listami (`<ol>`, `<ul>` and `<dl>`) oraz tabelami `<table>`.
-W takim przypadkach, powinniśmy wykorzystać [React Fragment](/docs/fragments.html), który pozwoli na zgrupowanie wielu elementów.
+Czasem łamiemy zasady semantycznego HTMl, kiedy dodajemy dodatkowy element `div` do naszego JSX, aby uruchomić aplikację. Dzieje się tak, zwłaszcza, kiedy pracujemy z listami (`<ol>`, `<ul>` and `<dl>`) oraz tabelami `<table>`.
+W takim przypadkach, powinniśmy wykorzystać [React Fragment](/docs/fragments.html), który pozwola na grupowanie wielu elementów.
 
 Przykład:
 
 ```javascript{1,5,8}
 import React, { Fragment } from 'react';
 
-function ListItem({ item }) {
+function Slowo({ wpis }) {
   return (
     <Fragment>
-      <dt>{item.term}</dt>
-      <dd>{item.description}</dd>
+      <dt>{wpis.slowo}</dt>
+      <dd>{wpis.opis}</dd>
     </Fragment>
   );
 }
 
-function Glossary(props) {
+function Slownik(props) {
   return (
     <dl>
-      {props.items.map(item => (
-        <ListItem item={item} key={item.id} />
+      {props.slowa.map(slowo => (
+        <Slowo wpis={slowo} key={slowo.id} />
       ))}
     </dl>
   );
@@ -76,14 +76,14 @@ function Glossary(props) {
 Możesz mapować kolekcje elmentów do tablicy fragmentów, zupełnie jakby to był dowolnie inny typ elementów:
 
 ```javascript{6,9}
-function Glossary(props) {
+function Slownik(props) {
   return (
     <dl>
-      {props.items.map(item => (
-        // Fragments should also have a `key` prop when mapping collections
-        <Fragment key={item.id}>
-          <dt>{item.term}</dt>
-          <dd>{item.description}</dd>
+      {props.slowa.map(wpis => (
+        // Fragmenty zawsze powinny miec ustawioną wartość `key` podczas mapowania kolejkcji
+        <Fragment key={wpis.id}>
+          <dt>{wpis.slowo}</dt>
+          <dd>{wpis.opis}</dd>
         </Fragment>
       ))}
     </dl>
@@ -94,11 +94,11 @@ function Glossary(props) {
 Kiedy nie chcesz przekazywać żadnych dodatkowych właściwości do Fraguemntu, wówczas możesz użyć [skróconej składni](/docs/fragments.html#short-syntax). Upewnij się, że wspomniany zapis wspiera również Twój edytor.
 
 ```javascript{3,6}
-function ListItem({ item }) {
+function Lista({ wpis }) {
   return (
     <>
-      <dt>{item.term}</dt>
-      <dd>{item.description}</dd>
+      <dt>{wpis.slowo}</dt>
+      <dd>{wpis.opis}</dd>
     </>
   );
 }
@@ -109,29 +109,29 @@ Więcej znajdziesz w [dokumentacji Fragmentów](/docs/fragments.html).
 ## Dostępne Formularze {#accessible-forms}
 
 ### Etykietowanie {#labeling}
-Każdy element kontrolujący formularz, taki jak `input` oraz `textarea`, powinien być etykietowany w dostępny sposób. Powinniśmy wykorzystać etykietę, która dobrze opisuję pole tekstowe oraz jest widoczne dla czytników ekranowych.
+Każdy element kontrolujący formularz, taki jak `input` oraz `textarea`, powinien być etykietowany w przystępny sposób. Powinniśmy wykorzystać etykietę, która dobrze opisuję pole tekstowe oraz jest widoczne dla czytników ekranowych.
 
 Poniższe zasoby opisują, jak zrobić to dobrze:
 
-- [W3C pokazuje jak etykietować elementy](https://www.w3.org/WAI/tutorials/forms/labels/)
-- [WebAim pokazuje jak etykietować elementy](https://webaim.org/techniques/forms/controls)
-- [Grupa Paciello wyjaśnia dostępność nazw](https://www.paciellogroup.com/blog/2017/04/what-is-an-accessible-name/)
+- [W3C - etykietowanie elementów](https://www.w3.org/WAI/tutorials/forms/labels/)
+- [WebAim - etykietowanie elementów](https://webaim.org/techniques/forms/controls)
+- [Grupa Paciello wyjaśnia przystępność nazw](https://www.paciellogroup.com/blog/2017/04/what-is-an-accessible-name/)
 
-Chociaż te standardowe praktyki HTML mogą być bezpośrednio używane w Reakcie, zauważ, że atrybut `for` jest zapisany jako` htmlFor` w JSX:
+Chociaż te standardowe praktyki HTML mogą być bezpośrednio używane w Reakcie, zauważ, że atrybut `for` jest w JSX zapisany jako `htmlFor`:
 
 ```javascript{1}
-<label htmlFor="namedInput">Name:</label>
-<input id="namedInput" type="text" name="name"/>
+<label htmlFor="imiePoleTekstowe">Name:</label>
+<input id="imiePoleTekstowe" type="text" name="imie"/>
 ```
 
 ### Powiadamianie użytkownika o błędach {#notifying-the-user-of-errors}
 
 W sytuacji zgłoszenia błędów, komunikaty muszą być zrozumiałe dla wszystkich użytkowników. Poniższe linki pokazują, jak wyświetlić błędy w sposób zrozumiały dla czytników ekranowych.
 
-- [W3C - notyfikacja użytników](https://www.w3.org/WAI/tutorials/forms/notifications/)
-- [WebAIM - walidacja formularzy looks at form validation](https://webaim.org/techniques/formvalidation/)
+- [W3C - notyfikacja użytkowników](https://www.w3.org/WAI/tutorials/forms/notifications/)
+- [WebAIM - walidacja formularzy](https://webaim.org/techniques/formvalidation/)
 
-## Kontrola ostości {#focus-control}
+## Kontrola ostości (ang.focus control) {#focus-control}
 
 Upewnij się, że Twoja aplikacja internetowa może być w pełni obsługiwana tylko za pomocą klawiatury:
 
@@ -139,7 +139,7 @@ Upewnij się, że Twoja aplikacja internetowa może być w pełni obsługiwana t
 
 ### Klawiatura i kontur ostrości {#keyboard-focus-and-focus-outline}
 
-Kontur ostości klawiatury odnosi się do bieżącego elementu w DOM, który został wybrany poprzez zdarzenia wywołany przez klawiaturę. Widzimy to wszędzie, jako kontur podobny do tego na poniższym obrazku:
+Kontur ostości (ang. focus outline) klawiatury odnosi się do bieżącego elementu w DOM, który został wybrany poprzez zdarzenia wywołany przez klawiaturę. Widzimy to wszędzie, jako kontur podobny do tego na poniższym obrazku:
 
 <img src="../images/docs/keyboard-focus.png" alt="Niebieski kontury ostrości wokół wybranego linku." />
 
@@ -147,13 +147,13 @@ Upewnij się, że wykorzystujesz regułę CSS, która usuwa ten kontury, na przy
 
 ### Przejście do wybranej treści {#mechanisms-to-skip-to-desired-content}
 
-Zapewnij mechanizm umożliwiający użytkownikom pominięcie poprzednich sekcji aplikacji, ponieważ ułątwia to i przyspiesza nawigację z wykorzystaniem klawiatury.
+Zapewnij mechanizm umożliwiający użytkownikom pominięcie poprzednich sekcji aplikacji, ponieważ ułatwia to i przyspiesza nawigację z wykorzystaniem klawiatury.
 
 Łącza typu `Skiplink` lub `Skip Navigation Links` to ukryte linki nawigacyjne, które stają się widoczne tylko wtedy, gdy użytkownicy klawiatury wchodzą w interakcję ze stroną. Są bardzo łatwe w implementacji z wykorzystaniem wewnętrznych kotwic oraz niektórych styli:
 
 - [WebAIM - Skip Navigation Links](https://webaim.org/techniques/skipnav/)
 
-Używaj również elementów i punktów orientacyjnych, takich jak `<main>` i `<aside>`, aby rozgraniczyć sekcje strony, ponieważ technologie wspierające pozwalają użytkownikowi szybkie przemieszczanie między nimi.
+Używaj również elementów i punktów orientacyjnych, takich jak `<main>` i `<aside>`, aby rozgraniczyć sekcje strony, ponieważ technologie wspierające pozwalają użytkownikowi na szybkie przemieszczanie się między nimi.
 
 Przeczytaj więcej o wykorzystaniu tych elementów w celu zwiększenia dostępności:
 
@@ -163,33 +163,33 @@ Przeczytaj więcej o wykorzystaniu tych elementów w celu zwiększenia dostępno
 
 Nasze aplikacje React nieustannie modyfikują HTML DOM w czasie wykonywania, co chwilami prowadzi do utraty konturu aktywnego elementu lub ustawienia go na nieoczekiwany element. W celu naprawy tego, musimy ręcznie ustawić ostrość we właściwym miejscu. Na przykład przez zresetowanie ostrości z przycisku, który otworzył okno modalne po jego zamknięciu.
 
-Dokumentacja MDN opisuje dokłądniej, w jaki sposób możemy tworzyć [widgety JavaScript z obsługą klawiatury](https://developer.mozilla.org/en-US/docs/Web/Accessibility/Keyboard-navigable_JavaScript_widgets).
+Dokumentacja MDN opisuje dokładniej, w jaki sposób możemy tworzyć [widżety JavaScript z obsługą klawiatury](https://developer.mozilla.org/en-US/docs/Web/Accessibility/Keyboard-navigable_JavaScript_widgets).
 
 Aby ustawić ostrość w Reakcie, możemy posłużyć się mechanizmem [Referencji do elementów DOM](/docs/refs-and-the-dom.html).
 
 Korzystając z tego, najpierw tworzymy ref do elementu w JSX:
 
 ```javascript{4-5,8-9,13}
-class CustomTextInput extends React.Component {
+class NiestandardowePoleTekstowe extends React.Component {
   constructor(props) {
     super(props);
     // Utwórz ref, aby zapisać wskaźnik na element DOM textInput
-    this.textInput = React.createRef();
+    this.poleTekstowe = React.createRef();
   }
   render() {
   // Użyj wywołania zwrotnego `ref`, aby zapisać odwołanie do wejścia
-  // pola tekstowego DOM w polu instancji (na przykład this.textInput).
+  // pola tekstowego DOM w polu instancji (na przykład this.poleTekstowe).
     return (
       <input
         type="text"
-        ref={this.textInput}
+        ref={this.poleTekstowe}
       />
     );
   }
 }
 ```
 
-Wówczas, w razie potrzeby możemy przenieść ostrość gdzie indziej w naszym komponencie:
+Wówczas, w razie potrzeby możemy przenieść ostrość na inny element naszego komponentu:
 
  ```javascript
  focus() {
@@ -199,97 +199,96 @@ Wówczas, w razie potrzeby możemy przenieść ostrość gdzie indziej w naszym
  }
  ```
 
-Czasami komponent nadrzędny musi ustawić fokus na element komponentu podrzędnego. Możemy to zrobić poprzez [przesłanie referencji "w górę" do komponentu nadrzędnego](/docs/refs-and-the-dom.html#exposing-dom-refs-to-parent-components). Można zrobić to np. przez specjalną właściwość komponentu podrzędnego, która przekazuje rodzicowi ref do węzła DOM wewnątrz dziecka.
+Czasami komponent nadrzędny musi ustawić ostrość na element komponentu podrzędnego. Możemy to zrobić poprzez [przesłanie referencji "w górę" do komponentu nadrzędnego](/docs/refs-and-the-dom.html#exposing-dom-refs-to-parent-components). Można zrobić to np. przez specjalną właściwość komponentu podrzędnego, która przekazuje rodzicowi ref do węzła DOM wewnątrz dziecka.
 
 ```javascript{4,12,16}
-function CustomTextInput(props) {
+function NiestandardowePoleTekstowe(props) {
   return (
     <div>
-      <input ref={props.inputRef} />
+      <input ref={props.poleTekstowe} />
     </div>
   );
 }
 
-class Parent extends React.Component {
+class Rodzic extends React.Component {
   constructor(props) {
     super(props);
-    this.inputElement = React.createRef();
+    this.poleTekstowe = React.createRef();
   }
   render() {
     return (
-      <CustomTextInput inputRef={this.inputElement} />
+      <NiestandardowePoleTekstowe inputRef={this.poleTekstowe} />
     );
   }
 }
 
 // Teraz, możesz ręcznie ustawić ostrość, kiedy to potrzebne.
-this.inputElement.current.focus();
+this.poleTekstowe.current.focus();
 ```
 
-Kiedy używasz HOC do rozszerzenia komponentów, zaleca się [przekazanie ref](/docs/forwarding-refs.html) do opakowanego komponentu przy użyciu funkcji `forwardRef`, która wbudowana jest w Reacta. Jeśli strona trzecia HOC
+Kiedy używasz HOC (ang. higher order component) do rozszerzenia komponentów, zaleca się [przekazanie ref](/docs/forwarding-refs.html) do opakowanego komponentu przy użyciu funkcji `forwardRef`, która wbudowana jest w Reacta. Jeśli strona trzecia HOC
 nie implementuje przekierowania, powyższy wzorzec może być nadal używany jako rezerwowy.
 
 Doskonałym przykładem zarządzania ostrością jest [react-aria-modal] (https://github.com/davidtheclark/react-aria-modal). Jest to stosunkowo rzadki przykład w pełni dostępnego okna modalnego. Nie tylko ustawia początkową ostrość
-na przycisku zamykającym kontener modalny (uniemożliwiający użytkownikowi klawiatury przypadkowe aktywowanie akcji akceptującej) i zatrzymujący skupienie klawiatury wewnątrz modalu, a także po zamknięciu, przywracający ostrość z powrotem do elementu, który początkowo otworzył kontener modalny.
+na przycisku zamykającym kontener modalny (ang. modalbox) (uniemożliwiający użytkownikowi klawiatury przypadkowe aktywowanie akcji akceptującej) i zatrzymujący skupienie klawiatury wewnątrz modala, a także po zamknięciu, przywracający ostrość z powrotem do elementu, który początkowo otworzył kontener modalny.
 
 
 >Uwaga:
 >
-> Chociaż jest to bardzo ważna funkcja dostępności, jest to również technika, którą należy rozsądnie stosować. Użyj jej, aby naprawić przepływ ostrości klawiatury, gdy jest zakłócony, a nie próbować przewidzieć, jak
-> użytkownicy chcą korzystać z aplikacji.
+> Chociaż jest to bardzo ważna funkcja dostępności, jest to również technika, którą należy rozsądnie stosować. Użyj jej, aby naprawić przepływ ostrości, gdy jest zakłócony, ale nie próbuj przewidzieć, jak
+> użytkownicy chcą korzystać z aplikacji i nie wymuszaj własnego przeływu.
 
-## Zdarzenia myszy oraz wskażnika {#mouse-and-pointer-events}
+## Zdarzenia myszy oraz wskażnika (ang. mouse and pointer events) {#mouse-and-pointer-events}
 
-Upewnij się, że wszystkie funkcje udostępniane korzystając z myszy lub wskaźnika można również uzyskać za pomocą samej klawiatury. Sama różnorodność wskaźników prowadzi często do wielu przypadków gdzie
-użytkownicy klawiatury nie mogą korzystać z aplikacji.
+Upewnij się, że wszystkie funkcje udostępniane korzystając z myszy lub wskaźnika można również uzyskać za pomocą samej klawiatury. Różnorodność wskaźników prowadzi często do wielu przypadków gdzie użytkownicy klawiatury nie mogą korzystać z aplikacji.
 
-Aby to zilustrować, spójrzmy na doskonale obrazujący to przykład zepsutej dostępności spowodowanej wykorzystaniem zdarzenia kliknięcia. Jest to zewnętrzny wzorzec, w którym użytkownik może wyłączyć otwarty `popover`, klikając poza elementem.
+Aby to zilustrować, spójrzmy na przykład zepsutej dostępności spowodowanej wykorzystaniem zdarzenia kliknięcia (ang. click event). Jest to zewnętrzny wzorzec, w którym użytkownik może wyłączyć otwarty `popover`, klikając w miejscu poza elementem.
 
 <img src="../images/docs/outerclick-with-mouse.gif" alt=" Przycisk przełączający widoczność listy popover za pomocą wzorca kliknięcia na zewnątrz i obsługiwany za pomocą myszy, pokazujący, że zamknięcie działa." />
 
 Zazwyczaj jest to implementowane przez dołączenie zdarzenia `click` do obiektu` window`, który zamyka popover:
 
 ```javascript{12-14,26-30}
-class OuterClickExample extends React.Component {
+class PrzykladKliknięciaNaZewnątrz extends React.Component {
 constructor(props) {
     super(props);
 
-    this.state = { isOpen: false };
-    this.toggleContainer = React.createRef();
+    this.state = { otwarte: false };
+    this.kontener = React.createRef();
 
-    this.onClickHandler = this.onClickHandler.bind(this);
-    this.onClickOutsideHandler = this.onClickOutsideHandler.bind(this);
+    this.uchwytKliknięcie = this.uchwytKliknięcie.bind(this);
+    this.uchwytKliknięcieNaZewnątrz = this.uchwytKliknięcieNaZewnątrz.bind(this);
   }
 
   componentDidMount() {
-    window.addEventListener('click', this.onClickOutsideHandler);
+    window.addEventListener('click', this.uchwytKliknięcieNaZewnątrz);
   }
 
   componentWillUnmount() {
-    window.removeEventListener('click', this.onClickOutsideHandler);
+    window.removeEventListener('click', this.uchwytKliknięcieNaZewnątrz);
   }
 
-  onClickHandler() {
+  uchwytKliknięcie() {
     this.setState(currentState => ({
-      isOpen: !currentState.isOpen
+      otwarte: !currentState.otwarte
     }));
   }
 
-  onClickOutsideHandler(event) {
-    if (this.state.isOpen && !this.toggleContainer.current.contains(event.target)) {
-      this.setState({ isOpen: false });
+  uchwytKliknięcieNaZewnątrz(event) {
+    if (this.state.otwarte && !this.kontener.current.contains(event.target)) {
+      this.setState({ otwarte: false });
     }
   }
 
   render() {
     return (
-      <div ref={this.toggleContainer}>
-        <button onClick={this.onClickHandler}>Select an option</button>
-        {this.state.isOpen ? (
+      <div ref={this.kontener}>
+        <button onClick={this.uchwytKliknięcie}>Wybierz opcje</button>
+        {this.state.otwarte ? (
           <ul>
-            <li>Option 1</li>
-            <li>Option 2</li>
-            <li>Option 3</li>
+            <li>Opcja 1</li>
+            <li>Opcja 2</li>
+            <li>Opcja 3</li>
           </ul>
         ) : null}
       </div>
@@ -303,24 +302,24 @@ Powyższy przykład działa poprawnie dla użytkowników krzystających ze wska
 
 <img src="../images/docs/outerclick-with-keyboard.gif" alt="Przełącznik otwierający listę popover za pomocą wzorca kliknięcia na zewnątrz i obsługiwany za pomocą klawiatury pokazującej, że popover nie jest zamykany na onBlur i zasłania inne elementy ekranu." />
 
-Ta sama funkcjonalność może zostać osiągnięta poprzez użycie odpowiednich procedur obsługi zdarzeń, takich jak `onBlur` i` onFocus`:
+Ta sama funkcjonalność może zostać uzyskana poprzez użycie odpowiednich procedur obsługi zdarzeń, takich jak `onBlur` i` onFocus`:
 
 ```javascript{19-29,31-34,37-38,40-41}
-class BlurExample extends React.Component {
+class PrzykladBlur extends React.Component {
   constructor(props) {
     super(props);
 
-    this.state = { isOpen: false };
+    this.state = { otwarte: false };
     this.timeOutId = null;
 
-    this.onClickHandler = this.onClickHandler.bind(this);
-    this.onBlurHandler = this.onBlurHandler.bind(this);
-    this.onFocusHandler = this.onFocusHandler.bind(this);
+    this.uchwytKlikniecia = this.uchwytKlikniecia.bind(this);
+    this.uchwytBlur = this.onBlurHandler.bind(this);
+    this.uchwytFocus = this.uchwytFocus.bind(this);
   }
 
-  onClickHandler() {
+  uchwytKlikniecia() {
     this.setState(currentState => ({
-      isOpen: !currentState.isOpen
+      otwarte: !currentState.otwarte
     }));
   }
 
@@ -329,16 +328,16 @@ class BlurExample extends React.Component {
   // czy inne dziecko elementu otrzymało ostrość jako, że
   // zdarzenie onBlur wywołuje się wyłącznie przed nowym 
   // zdarzeniem ustawienia ostrości.
-  onBlurHandler() {
+  uchwytBlur() {
     this.timeOutId = setTimeout(() => {
       this.setState({
-        isOpen: false
+        otwarte: false
       });
     });
   }
 
   // Jeśli dziecko otrzymuje ostrość, nie zamykaj elementu bedącego na wierzchu.
-  onFocusHandler() {
+  uchwytFocus() {
     clearTimeout(this.timeOutId);
   }
 
@@ -346,18 +345,18 @@ class BlurExample extends React.Component {
     // React wspiera nas w przesyłaniu ostrości
     // do rodzica.
     return (
-      <div onBlur={this.onBlurHandler}
-           onFocus={this.onFocusHandler}>
-        <button onClick={this.onClickHandler}
+      <div onBlur={this.uchwytBlur}
+           onFocus={this.uchwytFocus}>
+        <button onClick={this.uchwytKlikniecia}
                 aria-haspopup="true"
-                aria-expanded={this.state.isOpen}>
-          Select an option
+                aria-expanded={this.state.otwarte}>
+          Wybierz opcję
         </button>
-        {this.state.isOpen ? (
+        {this.state.otwarte ? (
           <ul>
-            <li>Option 1</li>
-            <li>Option 2</li>
-            <li>Option 3</li>
+            <li>Opcja 1</li>
+            <li>Opcja 2</li>
+            <li>Opcja 3</li>
           </ul>
         ) : null}
       </div>
@@ -366,22 +365,22 @@ class BlurExample extends React.Component {
 }
 ```
 
-Ten kod udostępnia funkcje zarówno użytkownikom urządzeń wskaźnikowych, jak i klawiatury. Zwróć także uwagę na dodane wartości `aria- *` do obsługi użytkowników czytników ekranu. Dla uproszczenia zdarzenia klawiatury, aby włączyć interakcję klawiszy strzałek opcji popover, nie zostały zaimplementowane.
+Ten kod udostępnia funkcje zarówno użytkownikom urządzeń wskaźnikowych, jak i klawiatury. Zwróć także uwagę na dodane wartości `aria- *` do obsługi czytników ekranu. Dla uproszczenia zdarzenia klawiaturowych (ang. keyboard events), aby włączyć interakcję klawiszy strzałek opcji popover, nie zostały zaimplementowane.
 
 <img src="../images/docs/blur-popover-close.gif" alt="Lista poprawnie zamykająca się zarówno dla użytkowników myszy, jak i klawiatury." />
 
 Jest to tylko jeden przykład z wielu przypadków, w których w zależności tylko od zdarzeń wskaźnika i myszy możemy napotkać na problem w poruszaniu się użytkowników klawiaturowych.
-Stałe testowanie za pomocą klawiatury pozwala na szybkie reagowanie i odnotywowanie problemów, które można następnie naprawić korzystając ze zdarzeń mogących zostać wywołane nie tylko za pomocą wskaźników, ale również i innych sposobów nawigowania po aplikacji.
+Stałe testowanie za pomocą klawiatury pozwala na szybkie reagowanie i odnotywowanie problemów, które można następnie naprawić korzystając ze zdarzeń mogących zostać wywołane nie tylko za pomocą wskaźników, ale również i innych sposobów poruszania się po aplikacji.
 
-## Bardziej złożone widgety {#more-complex-widgets}
+## Bardziej złożone widżety {#more-complex-widgets}
 
-Bardziej złożone scenariusze użytkowania nie powinny oznaczać mniejszej przystępności. Dostępność jest najłatwiej osiągalna poprzez trzymanie się jak najbliżej wzorców znanych z natywnego HTML'a.
+Bardziej złożone scenariusze użytkowania nie powinny oznaczać ograniczania przystępności. Dostępność jest najłatwiej osiągalna poprzez trzymanie się jak najbliżej wzorców znanych z natywnego HTMLa.
 Nawet najbardziej złożony widżet może być przygotowany w przystępny sposób.
 
 Wymagamy tutaj znajomości [ARIA Roles](https://www.w3.org/TR/wai-aria/#roles) oraz [stanów i właściwości ARIA](https://www.w3.org/TR/wai-aria/#states_and_properties).
-Są to skrzynki narzędziowe wypełnione atrybutami HTML, które są w pełni obsługiwane w JSX i umożliwiają nam tworzenie w pełni dostępnych, wysoce funkcjonalnych komponentów React.
+Są to skrzynki narzędziowe wypełnione atrybutami HTML, które są w pełni obsługiwane przez JSX i umożliwiają nam tworzenie w pełni dostępnych, wysoce funkcjonalnych komponentów React.
 
-Każdy typ widżetu ma określone wzorce i oczekuje się, że będzie działał w określony sposób zarówno przez użytkowników, jak przeglądarki:
+Każdy typ widżetu ma określone wzorce i zarówno użytkownicy, jak i przeglądarki oczekują, że będzie działał w określny sposób.
 
 - [WAI-ARIA Authoring Practices - Wzorce projektowe i widżety](https://www.w3.org/TR/wai-aria-practices/#aria_ex)
 - [Heydon Pickering - ARIA Przykłady](https://heydonworks.com/practical_aria_examples/)
@@ -434,13 +433,11 @@ Zdecydowanie najłatwiejszą i jedną z najważniejszych kontroli jest sprawdzen
 
 ### Pomoc przy tworzeniu {#development-assistance}
 
-We can check some accessibility features directly in our JSX code. Often intellisense checks are already provided in JSX aware IDE's for the ARIA roles, states and properties. We also
-have access to the following tool:
-Możemy sprawdzić niektóre elementy dostępności bezpośrednio w naszym kodzie JSX. Często kontrole dostępności dla ról, stanów i właściwości ARIA są wbudowane w IDE obsługujące JSX. Dodatkowo, my także mamy dostęp do następującego narzędzi:
+Możemy sprawdzić niektóre elementy dostępności bezpośrednio w naszym kodzie JSX. Często kontrole dostępności dla ról, stanów i właściwości ARIA są wbudowane w IDE obsługujące JSX. Dodatkowo, mamy do dyspozycji również inne narzędzia:
 
 #### eslint-plugin-jsx-a11y {#eslint-plugin-jsx-a11y}
 
-Wtyczka [eslint-plugin-jsx-a11y] (https://github.com/evcohen/eslint-plugin-jsx-a11y) dla ESLint zapewnia informacje zwrotne AST dotyczące problemów z dostępnością w Twoim JSX. Wiele IDE umożliwiają integrację tych notyfikacji bezpośrednio z analizą kodu i oknami kodu źródłowego.
+Wtyczka [eslint-plugin-jsx-a11y] (https://github.com/evcohen/eslint-plugin-jsx-a11y) dla ESLint zapewnia informacje zwrotne AST dotyczące problemów z dostępnością w Twoim JSX. Wiele IDE umożliwiaja integrację notyfikacji o problemach z dostępnością, bezpośrednio z analizą kodu i oknami kodu źródłowego IDE.
 
 [Create React App](https://github.com/facebookincubator/create-react-app) ma tę wtyczkę domyślnie zainstalowaną z podzbiorem dodatkowych reguł. Jeśli chcesz włączyć jeszcze więcej reguł dostępności, możesz utworzyć plik `.eslintrc` w katalogu głównym swojego projektu z tą treścią:
 
@@ -459,7 +456,7 @@ Istnieje wiele narzędzi, które umożliwiają przeprowadzanie kontroli dostępn
 
 Deque Systems oferuje [aXe-core](https://github.com/dequelabs/axe-core) do automatycznych i kompleksowych testów dostępności aplikacji. Moduł ten obejmuje integracje z Selenium.
 
-[The Accessibility Engine](https://www.deque.com/products/axe/) lub ax, jest rozszerzeniem przeglądarki inspektora dostępności zbudowanym na bazie `ax-core`.
+[The Accessibility Engine](https://www.deque.com/products/axe/) lub ax, jest rozszerzeniem przeglądarkowego inspektora dostępności zbudowanym na bazie `ax-core`.
 
 Możesz również użyć modułu [react-ax](https://github.com/dylanb/react-axe), aby zgłosić luki dotyczące dostępności bezpośrednio do konsoli, podczas pracy i debugowania.
 
@@ -469,9 +466,9 @@ Możesz również użyć modułu [react-ax](https://github.com/dylanb/react-axe)
 
 #### Accessibility inspectors and the Accessibility Tree {#accessibility-inspectors-and-the-accessibility-tree}
 
-[The Accessibility Tree](https://www.paciellogroup.com/blog/2015/01/the-browser-accessibility-tree/) jest podzbiorem drzewa DOM, które zawiera dostępne obiekty dla każdego elementu DOM, który powinien zostać uwzględniony z myślą o technologiach wspomagających, takich jak czytniki ekranu.
+[The Accessibility Tree](https://www.paciellogroup.com/blog/2015/01/the-browser-accessibility-tree/) jest podzbiorem drzewa DOM. Zawiera wszystkie dostępne dla technologii wspomagających obiekty, odpowiadające każdemu elementowi DOMu.
 
-W niektórych przeglądarkach możemy łatwo wyświetlić informacje o dostępności dla każdego elementu w drzewie dostępności:
+W niektórych przeglądarkach możemy łatwo wyświetlić informacje o przystępności dla każdego elementu w drzewie DOM:
 
 - [Korzystanie z Inspektora dostępności w Firefoksie](https://developer.mozilla.org/en-US/docs/Tools/Accessibility_inspector)
 - [Korzystanie z Inspektora dostępności w Chromie](https://gist.github.com/marcysutton/0a42f815878c159517a55e6652e3b23a)
@@ -481,7 +478,7 @@ W niektórych przeglądarkach możemy łatwo wyświetlić informacje o dostępno
 
 Testowanie za pomocą czytnika ekranu powinno stanowić część testów dostępności.
 
-Należy pamiętać, że kombinacje przeglądarki / czytnika ekranu mają znaczenie. Zaleca się przetestowanie aplikacji w przeglądarce najlepiej pasującej do wybranego czytnika ekranu.
+Należy pamiętać, że kombinacje przeglądarka/czytnik ekranu mają bardzo duże naczenie. Zaleca się testowanie aplikacji w przeglądarce rekomendowanej do wybranego czytnika ekranu.
 
 ### Często używane czytniki ekranu {#commonly-used-screen-readers}
 

From 574177f9faada5dff47910f501337b8ba599e885 Mon Sep 17 00:00:00 2001
From: Daniel Zawadzki <hello@danielzawadzki.com>
Date: Wed, 27 Mar 2019 14:33:30 +0100
Subject: [PATCH 3/5] Removed polish characters from ccode snippets and
 improved the readability of the text.

---
 content/docs/accessibility.md | 38 +++++++++++++++++------------------
 1 file changed, 19 insertions(+), 19 deletions(-)

diff --git a/content/docs/accessibility.md b/content/docs/accessibility.md
index 6a370998e..68480876b 100644
--- a/content/docs/accessibility.md
+++ b/content/docs/accessibility.md
@@ -16,7 +16,7 @@ React w pełni wspiera budowanie dostępnych dla wszystkich stron internetowych,
 
 [Web Content Accessibility Guidelines](https://www.w3.org/WAI/intro/wcag) dostarcza zbiór wytycznych, jak tworzyć poprawne oraz dostępne dla wszystkich strony internetowe.
 
-Poniższa lista kontrolna WCAG zawiera przegląd:
+Poniższe listy kontrolne WCAG zawierają przegląd:
 
 - [Lista kontrolna WCAG stworzona przez Wuhcag](https://www.wuhcag.com/wcag-checklist/)
 - [Lista kontrolna WCAG stworzona przez WebAIM](https://webaim.org/standards/wcag/checklist)
@@ -26,7 +26,7 @@ Poniższa lista kontrolna WCAG zawiera przegląd:
 
 Dokument [Web Accessibility Initiative - Accessible Rich Internet Applications](https://www.w3.org/WAI/intro/aria)  zawiera listę technik wyspecjalizowanych w budowaniu w pełni dostępnych aplikacji JavaScript. 
 
-Warto zaznaczyć, że wszystkie atrybuty HTML `aria-*` są w pełni wspierane przez JSX. Mimo, że większość tagów oraz atrybutów DOM w Reakcie zapisujemy w formacie camelCase, te związane z dostępnością, powinny być zapisane z wykorzystaniem myślników (znanych również jako kebab-case, lisp-case itp.), ponieważ są one traktowane jak czysty HTML.
+Warto zaznaczyć, że wszystkie atrybuty HTML `aria-*` są w pełni wspierane przez JSX. Mimo, że większość tagów oraz atrybutów DOM w Reakcie zapisujemy w formacie camelCase, to te związane z dostępnością, powinny być zapisane z wykorzystaniem myślników (znanych również jako kebab-case, lisp-case itp.), ponieważ są one traktowane jak czysty HTML.
 
 ```javascript{3,4}
 <input
@@ -161,7 +161,7 @@ Przeczytaj więcej o wykorzystaniu tych elementów w celu zwiększenia dostępno
 
 ### Programowo zarządzaj ostrością {#programmatically-managing-focus}
 
-Nasze aplikacje React nieustannie modyfikują HTML DOM w czasie wykonywania, co chwilami prowadzi do utraty konturu aktywnego elementu lub ustawienia go na nieoczekiwany element. W celu naprawy tego, musimy ręcznie ustawić ostrość we właściwym miejscu. Na przykład przez zresetowanie ostrości z przycisku, który otworzył okno modalne po jego zamknięciu.
+Nasze aplikacje React nieustannie modyfikują HTML DOM w czasie wykonywania, co chwilami prowadzi do utraty konturu aktywnego elementu lub ustawienia go na nieoczekiwany element. W celu naprawy tego, musimy ręcznie ustawić ostrość we właściwym miejscu. Na przykład, przez zresetowanie ostrości z przycisku, który otworzył okno modalne po jego zamknięciu.
 
 Dokumentacja MDN opisuje dokładniej, w jaki sposób możemy tworzyć [widżety JavaScript z obsługą klawiatury](https://developer.mozilla.org/en-US/docs/Web/Accessibility/Keyboard-navigable_JavaScript_widgets).
 
@@ -199,7 +199,7 @@ Wówczas, w razie potrzeby możemy przenieść ostrość na inny element naszego
  }
  ```
 
-Czasami komponent nadrzędny musi ustawić ostrość na element komponentu podrzędnego. Możemy to zrobić poprzez [przesłanie referencji "w górę" do komponentu nadrzędnego](/docs/refs-and-the-dom.html#exposing-dom-refs-to-parent-components). Można zrobić to np. przez specjalną właściwość komponentu podrzędnego, która przekazuje rodzicowi ref do węzła DOM wewnątrz dziecka.
+Czasami komponent nadrzędny musi ustawić ostrość na element komponentu podrzędnego. Możemy to zrobić poprzez [przesłanie referencji "w górę" do komponentu nadrzędnego](/docs/refs-and-the-dom.html#exposing-dom-refs-to-parent-components). Można to również zrobić np. przez specjalną właściwość komponentu podrzędnego, która przekazuje rodzicowi ref do węzła DOM wewnątrz dziecka.
 
 ```javascript{4,12,16}
 function NiestandardowePoleTekstowe(props) {
@@ -229,7 +229,7 @@ this.poleTekstowe.current.focus();
 Kiedy używasz HOC (ang. higher order component) do rozszerzenia komponentów, zaleca się [przekazanie ref](/docs/forwarding-refs.html) do opakowanego komponentu przy użyciu funkcji `forwardRef`, która wbudowana jest w Reacta. Jeśli strona trzecia HOC
 nie implementuje przekierowania, powyższy wzorzec może być nadal używany jako rezerwowy.
 
-Doskonałym przykładem zarządzania ostrością jest [react-aria-modal] (https://github.com/davidtheclark/react-aria-modal). Jest to stosunkowo rzadki przykład w pełni dostępnego okna modalnego. Nie tylko ustawia początkową ostrość
+Doskonałym przykładem zarządzania ostrością jest [react-aria-modal](https://github.com/davidtheclark/react-aria-modal). Jest to stosunkowo rzadki przykład w pełni dostępnego okna modalnego. Nie tylko ustawia początkową ostrość
 na przycisku zamykającym kontener modalny (ang. modalbox) (uniemożliwiający użytkownikowi klawiatury przypadkowe aktywowanie akcji akceptującej) i zatrzymujący skupienie klawiatury wewnątrz modala, a także po zamknięciu, przywracający ostrość z powrotem do elementu, który początkowo otworzył kontener modalny.
 
 
@@ -240,7 +240,7 @@ na przycisku zamykającym kontener modalny (ang. modalbox) (uniemożliwiający u
 
 ## Zdarzenia myszy oraz wskażnika (ang. mouse and pointer events) {#mouse-and-pointer-events}
 
-Upewnij się, że wszystkie funkcje udostępniane korzystając z myszy lub wskaźnika można również uzyskać za pomocą samej klawiatury. Różnorodność wskaźników prowadzi często do wielu przypadków gdzie użytkownicy klawiatury nie mogą korzystać z aplikacji.
+Upewnij się, że wszystkie funkcje dostępne dla korzystając z myszy lub wskaźnika można również obsługiwalne wyłącznie za pomocą samej klawiatury. Różnorodność wskaźników prowadzi często do wielu przypadków, gdzie użytkownicy klawiatury nie mogą korzystać z aplikacji.
 
 Aby to zilustrować, spójrzmy na przykład zepsutej dostępności spowodowanej wykorzystaniem zdarzenia kliknięcia (ang. click event). Jest to zewnętrzny wzorzec, w którym użytkownik może wyłączyć otwarty `popover`, klikając w miejscu poza elementem.
 
@@ -249,32 +249,32 @@ Aby to zilustrować, spójrzmy na przykład zepsutej dostępności spowodowanej
 Zazwyczaj jest to implementowane przez dołączenie zdarzenia `click` do obiektu` window`, który zamyka popover:
 
 ```javascript{12-14,26-30}
-class PrzykladKliknięciaNaZewnątrz extends React.Component {
+class PrzykladKliknieciaNaZewnatrz extends React.Component {
 constructor(props) {
     super(props);
 
     this.state = { otwarte: false };
     this.kontener = React.createRef();
 
-    this.uchwytKliknięcie = this.uchwytKliknięcie.bind(this);
-    this.uchwytKliknięcieNaZewnątrz = this.uchwytKliknięcieNaZewnątrz.bind(this);
+    this.uchwytKlikniecie = this.uchwytKlikniecie.bind(this);
+    this.uchwytKlikniecieNaZewnatrz = this.uchwytKlikniecieNaZewnatrz.bind(this);
   }
 
   componentDidMount() {
-    window.addEventListener('click', this.uchwytKliknięcieNaZewnątrz);
+    window.addEventListener('click', this.uchwytKlikniecieNaZewnatrz);
   }
 
   componentWillUnmount() {
-    window.removeEventListener('click', this.uchwytKliknięcieNaZewnątrz);
+    window.removeEventListener('click', this.uchwytKlikniecieNaZewnatrz);
   }
 
-  uchwytKliknięcie() {
+  uchwytKlikniecie() {
     this.setState(currentState => ({
       otwarte: !currentState.otwarte
     }));
   }
 
-  uchwytKliknięcieNaZewnątrz(event) {
+  uchwytKlikniecieNaZewnatrz(event) {
     if (this.state.otwarte && !this.kontener.current.contains(event.target)) {
       this.setState({ otwarte: false });
     }
@@ -283,7 +283,7 @@ constructor(props) {
   render() {
     return (
       <div ref={this.kontener}>
-        <button onClick={this.uchwytKliknięcie}>Wybierz opcje</button>
+        <button onClick={this.uchwytKlikniecie}>Wybierz opcje</button>
         {this.state.otwarte ? (
           <ul>
             <li>Opcja 1</li>
@@ -395,7 +395,7 @@ Jawnie wskaż ludzki język tekstów zamieszczonych na stronie, ponieważ oprogr
 
 ### Ustawienie tytułu dokumentu {#setting-the-document-title}
 
-Ustaw atrybut `<title>` dokumentu, aby poprawnie opisać bieżącą zawartość strony, ponieważ zapewnia to, że użytkownik pozostaje świadomy bieżącego kontekstu strony:
+Ustaw atrybut `<title>` dokumentu, aby poprawnie opisać bieżącą zawartość strony, ponieważ ułatwia to użytkownikowi, zrozumienie bieżącego kontekstu strony.
 
 - [WCAG - Zrozumienie wymogu tytułu dokumentu](https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-title.html)
 
@@ -409,7 +409,7 @@ Upewnij się, że wszystkie teksty na Twojej stronie mają wystarczający kontra
 - [Wszystko o kontrastie kolorów i dlaczego warto to przemyśleć](https://www.smashingmagazine.com/2014/10/color-contrast-tips-and-tools-for-accessibility/)
 - [A11yProject - Czym jest kontrast kolorów](https://a11yproject.com/posts/what-is-color-contrast/)
 
-Ręczne obliczanie odpowiednich kombinacji kolorów dla wszystkich przypadków na swojej stronie internetowej może być nudne, więc zamiast tego [można prześledzić całą dostępną paletę kolorów za pomocą Colorable](https://jxnblk.com/colorable/).
+Ręczne obliczanie odpowiednich kombinacji kolorów dla wszystkich przypadków na swojej stronie internetowej może być nudne, więc zamiast tego [możliwe jest prześledzenie całej dostępnej palety kolorów za pomocą Colorable](https://jxnblk.com/colorable/).
 
 Wymienione poniżej narzędzia aXe i WAVE zawierają również testy kontrastu kolorów i będą zgłaszać błędy kontrastu.
 
@@ -424,7 +424,8 @@ Istnieje wiele narzędzi, których możemy użyć, aby pomóc w tworzeniu przyst
 
 ### Klawiatura {#the-keyboard}
 
-Zdecydowanie najłatwiejszą i jedną z najważniejszych kontroli jest sprawdzenie, czy poruszanie się po całej stronie jest możliwe z wykorzystaniem wyłącznie klawiatury. Instrukcja sprawdzenia aplikacji:
+Zdecydowanie najłatwiejszą i jedną z najważniejszych kontroli jest sprawdzenie, czy poruszanie się po całej stronie jest możliwe z wykorzystaniem wyłącznie klawiatury. 
+Instrukcja sprawdzenia aplikacji:
 
 1. Odłącz myszy.
 1. Używając wyłącznie `Tab` i` Shift + Tab` przeglądaj stronę.
@@ -433,7 +434,7 @@ Zdecydowanie najłatwiejszą i jedną z najważniejszych kontroli jest sprawdzen
 
 ### Pomoc przy tworzeniu {#development-assistance}
 
-Możemy sprawdzić niektóre elementy dostępności bezpośrednio w naszym kodzie JSX. Często kontrole dostępności dla ról, stanów i właściwości ARIA są wbudowane w IDE obsługujące JSX. Dodatkowo, mamy do dyspozycji również inne narzędzia:
+Część testów dostępności możemy wykonać bezpośrednio w naszym kodzie JSX. Często kontrole dostępności dla ról, stanów i właściwości ARIA są wbudowane w IDE obsługujące JSX. Dodatkowo, mamy do dyspozycji również inne narzędzia:
 
 #### eslint-plugin-jsx-a11y {#eslint-plugin-jsx-a11y}
 
@@ -477,7 +478,6 @@ W niektórych przeglądarkach możemy łatwo wyświetlić informacje o przystęp
 ### Czytniki ekranowe {#screen-readers}
 
 Testowanie za pomocą czytnika ekranu powinno stanowić część testów dostępności.
-
 Należy pamiętać, że kombinacje przeglądarka/czytnik ekranu mają bardzo duże naczenie. Zaleca się testowanie aplikacji w przeglądarce rekomendowanej do wybranego czytnika ekranu.
 
 ### Często używane czytniki ekranu {#commonly-used-screen-readers}

From 7fa24cc1babc9878d2f06eb0b056aa9eccb03832 Mon Sep 17 00:00:00 2001
From: jakubdrozdek <30927218+jakubdrozdek@users.noreply.github.com>
Date: Wed, 3 Apr 2019 15:25:23 +0200
Subject: [PATCH 4/5] Applied stylistic & grammatical suggestions from
 @jakubdrozdek code review. Co-Authored-By: danzawadzki
 <hello@danielzawadzki.com>

---
 content/docs/accessibility.md | 321 +++++++++++++++++-----------------
 1 file changed, 161 insertions(+), 160 deletions(-)

diff --git a/content/docs/accessibility.md b/content/docs/accessibility.md
index 68480876b..a818f8995 100644
--- a/content/docs/accessibility.md
+++ b/content/docs/accessibility.md
@@ -6,7 +6,7 @@ permalink: docs/accessibility.html
 
 ## Czym jest dostępność? {#why-accessibility}
 
-Pojęcie dostępności stron internetowych (określanej również [**a11y**](https://en.wiktionary.org/wiki/a11y)) zostało zaprojektowane i stworzone z myślą o internecie przystępnym dla wszystkich. Wspieranie dostępności jest niezbędne, aby umożliwić technologiom asystującym poprawną interpretację stron.
+Pojęcie dostępności stron internetowych (określanej również [**a11y**](https://en.wiktionary.org/wiki/a11y) od ang. *accessibility*) zostało zaprojektowane i stworzone z myślą o internecie przystępnym dla wszystkich. Wspieranie dostępności jest niezbędne, aby umożliwić technologiom asystującym poprawną interpretację stron.
 
 React w pełni wspiera budowanie dostępnych dla wszystkich stron internetowych, często z wykorzystaniem standardowych technik HTML.
 
@@ -24,9 +24,9 @@ Poniższe listy kontrolne WCAG zawierają przegląd:
 
 ### WAI-ARIA {#wai-aria}
 
-Dokument [Web Accessibility Initiative - Accessible Rich Internet Applications](https://www.w3.org/WAI/intro/aria)  zawiera listę technik wyspecjalizowanych w budowaniu w pełni dostępnych aplikacji JavaScript. 
+Dokument [Web Accessibility Initiative - Accessible Rich Internet Applications](https://www.w3.org/WAI/intro/aria)  zawiera listę technik pomagających w budowaniu w pełni dostępnych aplikacji javascriptowych. 
 
-Warto zaznaczyć, że wszystkie atrybuty HTML `aria-*` są w pełni wspierane przez JSX. Mimo, że większość tagów oraz atrybutów DOM w Reakcie zapisujemy w formacie camelCase, to te związane z dostępnością, powinny być zapisane z wykorzystaniem myślników (znanych również jako kebab-case, lisp-case itp.), ponieważ są one traktowane jak czysty HTML.
+Warto zaznaczyć, że wszystkie atrybuty HTML `aria-*` są w pełni wspierane przez JSX. Mimo że większość tagów oraz atrybutów DOM w Reakcie zapisujemy w notacji camelCase, to te związane z dostępnością powinny być zapisywane z wykorzystaniem myślników (znanych również jako kebab-case, lisp-case itp.), ponieważ są one traktowane jak zwykłe atrybuty HTML.
 
 ```javascript{3,4}
 <input
@@ -41,49 +41,49 @@ Warto zaznaczyć, że wszystkie atrybuty HTML `aria-*` są w pełni wspierane pr
 
 ## Semantyczny HTML {#semantic-html}
 
-Semantyczny HTML jest podstawą dostępności aplikacji webowych. Wykorzystując różne elementy HTML, które wzmacniają znaczenie informacji na naszych stronach, bardzo często, możemy stworzyć w pełni dostępną stronę bez dodatkowych nakładów pracy.
+Semantyczny HTML jest podstawą dostępności aplikacji webowych. Wykorzystując różne elementy HTML, które wzmacniają znaczenie informacji na naszych stronach, bardzo często możemy stworzyć w pełni dostępną stronę bez dodatkowego nakładu pracy.
 
-- [MDN - elementy HTML](https://developer.mozilla.org/en-US/docs/Web/HTML/Element)
+- [Dokumentacja elementów HTML na MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element)
 
-Czasem łamiemy zasady semantycznego HTMl, kiedy dodajemy dodatkowy element `div` do naszego JSX, aby uruchomić aplikację. Dzieje się tak, zwłaszcza, kiedy pracujemy z listami (`<ol>`, `<ul>` and `<dl>`) oraz tabelami `<table>`.
-W takim przypadkach, powinniśmy wykorzystać [React Fragment](/docs/fragments.html), który pozwola na grupowanie wielu elementów.
+Czasem łamiemy zasady semantycznego HTMl, kiedy dodajemy dodatkowy element `div` do naszego kodu JSX, aby uruchomić aplikację. Dzieje się tak zwłaszcza kiedy pracujemy z listami (`<ol>`, `<ul>` czy `<dl>`) oraz tabelami `<table>`.
+W takim przypadkach powinniśmy korzystać z [fragmentów reactowych](/docs/fragments.html), które pozwalają na grupowanie elementów.
 
 Przykład:
 
 ```javascript{1,5,8}
 import React, { Fragment } from 'react';
 
-function Slowo({ wpis }) {
+function ListItem({ item }) {
   return (
     <Fragment>
-      <dt>{wpis.slowo}</dt>
-      <dd>{wpis.opis}</dd>
+      <dt>{item.term}</dt>
+      <dd>{item.description}</dd>
     </Fragment>
   );
 }
 
-function Slownik(props) {
+function Glossary(props) {
   return (
     <dl>
-      {props.slowa.map(slowo => (
-        <Slowo wpis={slowo} key={slowo.id} />
+      {props.items.map(item => (
+        <ListItem item={item} key={item.id} />
       ))}
     </dl>
   );
 }
 ```
 
-Możesz mapować kolekcje elmentów do tablicy fragmentów, zupełnie jakby to był dowolnie inny typ elementów:
+Możesz mapować kolekcje elementów do tablicy fragmentów, zupełnie jak w przypadku innych typów elementów:
 
 ```javascript{6,9}
-function Slownik(props) {
+function Glossary(props) {
   return (
     <dl>
-      {props.slowa.map(wpis => (
-        // Fragmenty zawsze powinny miec ustawioną wartość `key` podczas mapowania kolejkcji
-        <Fragment key={wpis.id}>
-          <dt>{wpis.slowo}</dt>
-          <dd>{wpis.opis}</dd>
+      {props.items.map(item => (
+        // Fragmenty zawsze powinny mieć ustawioną wartość `key` podczas mapowania kolekcji
+        <Fragment key={item.id}>
+          <dt>{item.term}</dt>
+          <dd>{item.description}</dd>
         </Fragment>
       ))}
     </dl>
@@ -91,200 +91,200 @@ function Slownik(props) {
 }
 ```
 
-Kiedy nie chcesz przekazywać żadnych dodatkowych właściwości do Fraguemntu, wówczas możesz użyć [skróconej składni](/docs/fragments.html#short-syntax). Upewnij się, że wspomniany zapis wspiera również Twój edytor.
+Jeśli nie chcesz przekazywać żadnych dodatkowych właściwości do Fragmentu, wówczas możesz użyć [skróconej składni](/docs/fragments.html#short-syntax). Upewnij się, że wspomniany zapis jest wspierany przez używane przez ciebie środowisko.
 
 ```javascript{3,6}
-function Lista({ wpis }) {
+function ListItem({ item }) {
   return (
     <>
-      <dt>{wpis.slowo}</dt>
-      <dd>{wpis.opis}</dd>
+      <dt>{item.term}</dt>
+      <dd>{item.description}</dd>
     </>
   );
 }
 ```
 
-Więcej znajdziesz w [dokumentacji Fragmentów](/docs/fragments.html).
+Więcej informacji znajdziesz w [dokumentacji fragmentów](/docs/fragments.html).
 
-## Dostępne Formularze {#accessible-forms}
+## Dostępne formularze {#accessible-forms}
 
-### Etykietowanie {#labeling}
-Każdy element kontrolujący formularz, taki jak `input` oraz `textarea`, powinien być etykietowany w przystępny sposób. Powinniśmy wykorzystać etykietę, która dobrze opisuję pole tekstowe oraz jest widoczne dla czytników ekranowych.
+### Nadawanie etykiet {#labeling}
+Każdy element kontrolujący formularz, taki jak `input` czy `textarea`, powinien być etykietowany w przystępny sposób. Etykieta powinna dobrze opisywać pole tekstowe i być widoczna dla czytników ekranowych.
 
-Poniższe zasoby opisują, jak zrobić to dobrze:
+Poniższe zasoby opisują, jak robić to poprawnie:
 
 - [W3C - etykietowanie elementów](https://www.w3.org/WAI/tutorials/forms/labels/)
 - [WebAim - etykietowanie elementów](https://webaim.org/techniques/forms/controls)
 - [Grupa Paciello wyjaśnia przystępność nazw](https://www.paciellogroup.com/blog/2017/04/what-is-an-accessible-name/)
 
-Chociaż te standardowe praktyki HTML mogą być bezpośrednio używane w Reakcie, zauważ, że atrybut `for` jest w JSX zapisany jako `htmlFor`:
+Chociaż tych standardowych praktyk HTML-owych można używać bezpośrednio w Reakcie, zauważ, że atrybut `for` jest w składni JSX zapisywany jako `htmlFor`:
 
 ```javascript{1}
-<label htmlFor="imiePoleTekstowe">Name:</label>
+<label htmlFor="imiePoleTekstowe">Imię:</label>
 <input id="imiePoleTekstowe" type="text" name="imie"/>
 ```
 
 ### Powiadamianie użytkownika o błędach {#notifying-the-user-of-errors}
 
-W sytuacji zgłoszenia błędów, komunikaty muszą być zrozumiałe dla wszystkich użytkowników. Poniższe linki pokazują, jak wyświetlić błędy w sposób zrozumiały dla czytników ekranowych.
+W sytuacji zgłoszenia błędu, komunikaty muszą być zrozumiałe dla wszystkich użytkowników. Poniższe linki pokazują, jak wyświetlić błędy w sposób zrozumiały dla czytników ekranowych.
 
-- [W3C - notyfikacja użytkowników](https://www.w3.org/WAI/tutorials/forms/notifications/)
+- [W3C - notyfikowanie użytkowników](https://www.w3.org/WAI/tutorials/forms/notifications/)
 - [WebAIM - walidacja formularzy](https://webaim.org/techniques/formvalidation/)
 
-## Kontrola ostości (ang.focus control) {#focus-control}
+## Kontrola fokusa {#focus-control}
 
-Upewnij się, że Twoja aplikacja internetowa może być w pełni obsługiwana tylko za pomocą klawiatury:
+Upewnij się, że twoją aplikację internetową można w pełni obsługiwać za pomocą samej klawiatury:
 
 - [WebAIM - dostępność z wykorzystaniem klawiatury](https://webaim.org/techniques/keyboard/)
 
-### Klawiatura i kontur ostrości {#keyboard-focus-and-focus-outline}
+### Fokus klawiaturowy a kontur {#keyboard-focus-and-focus-outline}
 
-Kontur ostości (ang. focus outline) klawiatury odnosi się do bieżącego elementu w DOM, który został wybrany poprzez zdarzenia wywołany przez klawiaturę. Widzimy to wszędzie, jako kontur podobny do tego na poniższym obrazku:
+Fokus klawiaturowy odnosi się do bieżącego elementu w DOM, który został wybrany poprzez zdarzenia wywołane przez klawiaturę. Zazwyczaj oznaczany jest za pomocą konturu, podobnego do tego na obrazku poniżej:
 
-<img src="../images/docs/keyboard-focus.png" alt="Niebieski kontury ostrości wokół wybranego linku." />
+<img src="../images/docs/keyboard-focus.png" alt="Niebieski kontur fokusa wokół wybranego linku." />
 
-Upewnij się, że wykorzystujesz regułę CSS, która usuwa ten kontury, na przykład ustawiając `outline: 0`, wyłącznie jeśli zastępujesz go kolejną implementacją konturu.
+Jeśli decydujesz się na usunięcie konturu, np. ustawiając właściwość CSS `outline: 0`, nie zapomnij zastąpić go inną implementacją konturu.
 
-### Przejście do wybranej treści {#mechanisms-to-skip-to-desired-content}
+### Przejście do treści {#mechanisms-to-skip-to-desired-content}
 
-Zapewnij mechanizm umożliwiający użytkownikom pominięcie poprzednich sekcji aplikacji, ponieważ ułatwia to i przyspiesza nawigację z wykorzystaniem klawiatury.
+Zapewnij mechanizm umożliwiający użytkownikom pominięcie sekcji nawigacji na stronie, ponieważ ułatwia on i przyspiesza nawigowanie z wykorzystaniem klawiatury.
 
-Łącza typu `Skiplink` lub `Skip Navigation Links` to ukryte linki nawigacyjne, które stają się widoczne tylko wtedy, gdy użytkownicy klawiatury wchodzą w interakcję ze stroną. Są bardzo łatwe w implementacji z wykorzystaniem wewnętrznych kotwic oraz niektórych styli:
+Łącza typu "Przejdź do treści" lub "Pomiń nawigację" to specjalne, ukryte linki nawigacyjne, które stają się widoczne tylko wtedy, gdy użytkownicy klawiatury wchodzą w interakcję ze stroną. Są bardzo łatwe w implementacji z wykorzystaniem wewnętrznych kotwic oraz odrobiny stylowania:
 
-- [WebAIM - Skip Navigation Links](https://webaim.org/techniques/skipnav/)
+- [WebAIM - łącza pomijające nawigację](https://webaim.org/techniques/skipnav/)
 
-Używaj również elementów i punktów orientacyjnych, takich jak `<main>` i `<aside>`, aby rozgraniczyć sekcje strony, ponieważ technologie wspierające pozwalają użytkownikowi na szybkie przemieszczanie się między nimi.
+Używaj również elementów i punktów orientacyjnych, takich jak `<main>` i `<aside>`, aby rozgraniczyć sekcje strony. Dzięki nim technologie wspierające pozwalają użytkownikowi na szybkie przemieszczanie się między sekcjami.
 
 Przeczytaj więcej o wykorzystaniu tych elementów w celu zwiększenia dostępności:
 
 - [Dostępne punkty orientacyjne](https://www.scottohara.me/blog/2018/03/03/landmarks.html)
 
-### Programowo zarządzaj ostrością {#programmatically-managing-focus}
+### Programowe zarządzanie fokusem {#programmatically-managing-focus}
 
-Nasze aplikacje React nieustannie modyfikują HTML DOM w czasie wykonywania, co chwilami prowadzi do utraty konturu aktywnego elementu lub ustawienia go na nieoczekiwany element. W celu naprawy tego, musimy ręcznie ustawić ostrość we właściwym miejscu. Na przykład, przez zresetowanie ostrości z przycisku, który otworzył okno modalne po jego zamknięciu.
+Nasze aplikacje Reactowe nieustannie modyfikują HTML DOM w czasie działania, co chwilami prowadzi do utraty konturu aktywnego elementu lub ustawienia go na nieoczekiwany element. Aby to naprawić, musimy ręcznie ustawić fokus we właściwym miejscu. Przykładowo, jeśli użytkownik zamknie okno modalne, fokus mógłby zostać przeniesiony na przycisk, który to okno otworzył.
 
-Dokumentacja MDN opisuje dokładniej, w jaki sposób możemy tworzyć [widżety JavaScript z obsługą klawiatury](https://developer.mozilla.org/en-US/docs/Web/Accessibility/Keyboard-navigable_JavaScript_widgets).
+Dokumentacja MDN opisuje dokładniej, w jaki sposób możemy tworzyć [widżety javascriptowe z obsługą klawiatury](https://developer.mozilla.org/en-US/docs/Web/Accessibility/Keyboard-navigable_JavaScript_widgets).
 
-Aby ustawić ostrość w Reakcie, możemy posłużyć się mechanizmem [Referencji do elementów DOM](/docs/refs-and-the-dom.html).
+W Reakcie, aby ustawić fokus, możemy posłużyć się mechanizmem [referencji do elementu DOM](/docs/refs-and-the-dom.html).
 
-Korzystając z tego, najpierw tworzymy ref do elementu w JSX:
+Aby móc skorzystać z tego mechanizmu, w kodzie JSX wybranego komponentu tworzymy referencję `ref` do elementu :
 
 ```javascript{4-5,8-9,13}
-class NiestandardowePoleTekstowe extends React.Component {
+class CustomTextInput extends React.Component {
   constructor(props) {
     super(props);
-    // Utwórz ref, aby zapisać wskaźnik na element DOM textInput
+    // Stwórz referencję do elementu DOM
     this.poleTekstowe = React.createRef();
   }
   render() {
-  // Użyj wywołania zwrotnego `ref`, aby zapisać odwołanie do wejścia
-  // pola tekstowego DOM w polu instancji (na przykład this.poleTekstowe).
+  // Użyj funkcji zwrotnej `ref`, aby zapisać referencję do pola tekstowego
+  // we właściwości instancji komponentu (na przykład this.textInput).
     return (
       <input
         type="text"
-        ref={this.poleTekstowe}
+        ref={this.textInput}
       />
     );
   }
 }
 ```
 
-Wówczas, w razie potrzeby możemy przenieść ostrość na inny element naszego komponentu:
+Wówczas, w razie potrzeby, możemy przenieść fokus na inny element naszego komponentu:
 
  ```javascript
  focus() {
-   // Jawne przeniesienie ostrości podczas wprowadzania tekstu za pomocą surowego API DOM
-   // Uwaga: uzyskujemy dostęp do "current", aby uzyskać węzeł DOM
+   // Jawne przeniesienie fokusa na pole tekstowe przy użyciu natywnego interfejsu DOM
+   // Uwaga: korzystamy z "current", aby uzyskać dostęp do węzła DOM
    this.textInput.current.focus();
  }
  ```
 
-Czasami komponent nadrzędny musi ustawić ostrość na element komponentu podrzędnego. Możemy to zrobić poprzez [przesłanie referencji "w górę" do komponentu nadrzędnego](/docs/refs-and-the-dom.html#exposing-dom-refs-to-parent-components). Można to również zrobić np. przez specjalną właściwość komponentu podrzędnego, która przekazuje rodzicowi ref do węzła DOM wewnątrz dziecka.
+Czasami komponent nadrzędny musi ustawić fokus na element komponentu podrzędnego. Możemy to zrobić poprzez [przesłanie referencji "w górę" do komponentu nadrzędnego](/docs/refs-and-the-dom.html#exposing-dom-refs-to-parent-components) za pomocą specjalnej właściwości nadanej komponentowi podrzędnemu.
 
 ```javascript{4,12,16}
-function NiestandardowePoleTekstowe(props) {
+function CustomTextInput(props) {
   return (
     <div>
-      <input ref={props.poleTekstowe} />
+      <input ref={props.inputRef} />
     </div>
   );
 }
 
-class Rodzic extends React.Component {
+class Parent extends React.Component {
   constructor(props) {
     super(props);
-    this.poleTekstowe = React.createRef();
+    this.inputElement = React.createRef();
   }
   render() {
     return (
-      <NiestandardowePoleTekstowe inputRef={this.poleTekstowe} />
+      <CustomTextInput inputRef={this.inputElement} />
     );
   }
 }
 
-// Teraz, możesz ręcznie ustawić ostrość, kiedy to potrzebne.
-this.poleTekstowe.current.focus();
+// Teraz możesz ręcznie ustawiać fokus, kiedy to potrzebne.
+this.inputElement.current.focus();
 ```
 
-Kiedy używasz HOC (ang. higher order component) do rozszerzenia komponentów, zaleca się [przekazanie ref](/docs/forwarding-refs.html) do opakowanego komponentu przy użyciu funkcji `forwardRef`, która wbudowana jest w Reacta. Jeśli strona trzecia HOC
-nie implementuje przekierowania, powyższy wzorzec może być nadal używany jako rezerwowy.
+Kiedy używasz HOC-a (ang. higher order component) do rozszerzenia komponentów, zaleca się [przekazanie referencji](/docs/forwarding-refs.html) do opakowanego komponentu przy użyciu funkcji `forwardRef`, która wbudowana jest w Reacta. Jeśli wybrany HOC z którejś zewnętrznej biblioteki
+nie implementuje takiego przekierowania, można użyć powyższego wzorca jako wyjście awaryjne.
 
-Doskonałym przykładem zarządzania ostrością jest [react-aria-modal](https://github.com/davidtheclark/react-aria-modal). Jest to stosunkowo rzadki przykład w pełni dostępnego okna modalnego. Nie tylko ustawia początkową ostrość
-na przycisku zamykającym kontener modalny (ang. modalbox) (uniemożliwiający użytkownikowi klawiatury przypadkowe aktywowanie akcji akceptującej) i zatrzymujący skupienie klawiatury wewnątrz modala, a także po zamknięciu, przywracający ostrość z powrotem do elementu, który początkowo otworzył kontener modalny.
+Doskonałym przykładem zarządzania fokusem jest biblioteka [react-aria-modal](https://github.com/davidtheclark/react-aria-modal). Jest to stosunkowo rzadki przykład w pełni dostępnego okna modalnego. Nie tylko ustawia początkowy fokus
+na przycisku zamykającym okno (uniemożliwiając tym samym użytkownikowi klawiatury przypadkowe aktywowanie akcji akceptującej) i zatrzymuje fokus klawiaturowy wewnątrz okna, lecz dodatkowo po zamknięciu przywraca fokus z powrotem na element, który zainicjował otwarcie okna.
 
 
 >Uwaga:
 >
-> Chociaż jest to bardzo ważna funkcja dostępności, jest to również technika, którą należy rozsądnie stosować. Użyj jej, aby naprawić przepływ ostrości, gdy jest zakłócony, ale nie próbuj przewidzieć, jak
-> użytkownicy chcą korzystać z aplikacji i nie wymuszaj własnego przeływu.
+> Chociaż jest to bardzo ważna technika zapewniająca dostępność, należy stosować jej z umiarem. Użyj jej, aby skorygować naturalną "drogę" fokusa w aplikacji, ale nie próbuj przewidzieć, jak
+> użytkownicy będą chcieli korzystać z aplikacji i nie wymuszaj własnej "drogi".
 
-## Zdarzenia myszy oraz wskażnika (ang. mouse and pointer events) {#mouse-and-pointer-events}
+## Zdarzenia myszy i wskaźnika {#mouse-and-pointer-events}
 
-Upewnij się, że wszystkie funkcje dostępne dla korzystając z myszy lub wskaźnika można również obsługiwalne wyłącznie za pomocą samej klawiatury. Różnorodność wskaźników prowadzi często do wielu przypadków, gdzie użytkownicy klawiatury nie mogą korzystać z aplikacji.
+Upewnij się, że wszystkie funkcje dostępne dla korzystających z myszy lub wskaźnika są również osiągalne za pomocą samej klawiatury. Poleganie na samych urządzeniach wskazujących prowadzi często do sytuacji, w których użytkownicy klawiatury nie mogą w ogóle korzystać z aplikacji.
 
-Aby to zilustrować, spójrzmy na przykład zepsutej dostępności spowodowanej wykorzystaniem zdarzenia kliknięcia (ang. click event). Jest to zewnętrzny wzorzec, w którym użytkownik może wyłączyć otwarty `popover`, klikając w miejscu poza elementem.
+Aby to zilustrować, spójrzmy na przykład zepsutej dostępności spowodowanej obsługą wyłącznie zdarzenia kliknięcia. Dotyczy to sytuacji, w której użytkownik może zamknąć otwarty "dymek" poprzez kliknięcie gdzieś poza nim.
 
-<img src="../images/docs/outerclick-with-mouse.gif" alt=" Przycisk przełączający widoczność listy popover za pomocą wzorca kliknięcia na zewnątrz i obsługiwany za pomocą myszy, pokazujący, że zamknięcie działa." />
+<img src="../images/docs/outerclick-with-mouse.gif" alt="Przycisk pokazujący dymek z listą, ukrywany poprzez kliknięcie poza dymkiem. Obsługiwany i skutecznie zamknięty za pomocą myszy." />
 
-Zazwyczaj jest to implementowane przez dołączenie zdarzenia `click` do obiektu` window`, który zamyka popover:
+Zazwyczaj jest to implementowane poprzez nasłuchiwanie zdarzenia `click` w obiekcie `window`, które zamyka dymek:
 
 ```javascript{12-14,26-30}
-class PrzykladKliknieciaNaZewnatrz extends React.Component {
+class OuterClickExample extends React.Component {
 constructor(props) {
     super(props);
 
-    this.state = { otwarte: false };
-    this.kontener = React.createRef();
+    this.state = { isOpen: false };
+    this.toggleContainer = React.createRef();
 
-    this.uchwytKlikniecie = this.uchwytKlikniecie.bind(this);
-    this.uchwytKlikniecieNaZewnatrz = this.uchwytKlikniecieNaZewnatrz.bind(this);
+    this.onClickHandler = this.onClickHandler.bind(this);
+    this.onClickOutsideHandler = this.onClickOutsideHandler.bind(this);
   }
 
   componentDidMount() {
-    window.addEventListener('click', this.uchwytKlikniecieNaZewnatrz);
+    window.addEventListener('click', this.onClickOutsideHandler);
   }
 
   componentWillUnmount() {
-    window.removeEventListener('click', this.uchwytKlikniecieNaZewnatrz);
+    window.removeEventListener('click', this.onClickOutsideHandler);
   }
 
-  uchwytKlikniecie() {
+  onClickHandler() {
     this.setState(currentState => ({
-      otwarte: !currentState.otwarte
+      isOpen: !currentState.isOpen
     }));
   }
 
-  uchwytKlikniecieNaZewnatrz(event) {
-    if (this.state.otwarte && !this.kontener.current.contains(event.target)) {
-      this.setState({ otwarte: false });
+  onClickOutsideHandler(event) {
+    if (this.state.isOpen && !this.toggleContainer.current.contains(event.target)) {
+      this.setState({ isOpen: false });
     }
   }
 
   render() {
     return (
-      <div ref={this.kontener}>
-        <button onClick={this.uchwytKlikniecie}>Wybierz opcje</button>
-        {this.state.otwarte ? (
+      <div ref={this.toggleContainer}>
+        <button onClick={this.onClickHandler}>Wybierz opcję</button>
+        {this.state.isOpen ? (
           <ul>
             <li>Opcja 1</li>
             <li>Opcja 2</li>
@@ -297,62 +297,62 @@ constructor(props) {
 }
 ```
 
-Powyższy przykład działa poprawnie dla użytkowników krzystających ze wskaźników, takich jak np. mysz. Jednakże, obsługiwanie za pomocą samej klawiatury prowadzi do problemu przy przechodzeniu do następnego elementu listy. Jest tak, ponieważ obiekt `window` nigdy nie otrzymuje zdarzenia` click`. Może to prowadzić do uniemożliwienia użytkownikom korzystania z aplikacji.
+Powyższy przykład działa poprawnie dla użytkowników korzystających ze wskaźników, takich jak np. mysz. Jednakże, obsługiwanie za pomocą samej klawiatury prowadzi do problemu przy przechodzeniu do następnego elementu listy za pomocą tabulatora. Dzieje się tak, ponieważ obiekt `window` nigdy nie otrzymuje zdarzenia` click`. Może to doprowadzić do uniemożliwienia użytkownikom korzystania z aplikacji.
 
 
-<img src="../images/docs/outerclick-with-keyboard.gif" alt="Przełącznik otwierający listę popover za pomocą wzorca kliknięcia na zewnątrz i obsługiwany za pomocą klawiatury pokazującej, że popover nie jest zamykany na onBlur i zasłania inne elementy ekranu." />
+<img src="../images/docs/outerclick-with-keyboard.gif" alt="Przycisk pokazujący dymek z listą, ukrywany poprzez kliknięcie poza dymkiem. Obsługiwany za pomocą klawiatury, co skutkuje nie zamknięciem dymku po utracie fokusa, powodując trwałe przysłonięcie innych elementów interfejsu." />
 
 Ta sama funkcjonalność może zostać uzyskana poprzez użycie odpowiednich procedur obsługi zdarzeń, takich jak `onBlur` i` onFocus`:
 
 ```javascript{19-29,31-34,37-38,40-41}
-class PrzykladBlur extends React.Component {
+class BlurExample extends React.Component {
   constructor(props) {
     super(props);
 
-    this.state = { otwarte: false };
+    this.state = { isOpen: false };
     this.timeOutId = null;
 
-    this.uchwytKlikniecia = this.uchwytKlikniecia.bind(this);
-    this.uchwytBlur = this.onBlurHandler.bind(this);
-    this.uchwytFocus = this.uchwytFocus.bind(this);
+    this.onClickHandler = this.onClickHandler.bind(this);
+    this.onBlurHandler = this.onBlurHandler.bind(this);
+    this.onFocusHandler = this.onFocusHandler.bind(this);
   }
 
-  uchwytKlikniecia() {
+  onClickHandler() {
     this.setState(currentState => ({
-      otwarte: !currentState.otwarte
+      isOpen: !currentState.isOpen
     }));
   }
 
-  // Zamykamy popover na następnym tiku za pomocą setTimeout.
+  // Zamykamy dymek w następnym cyklu za pomocą funkcji setTimeout.
   // Jest to konieczne, ponieważ musimy najpierw sprawdzić,
-  // czy inne dziecko elementu otrzymało ostrość jako, że
-  // zdarzenie onBlur wywołuje się wyłącznie przed nowym 
-  // zdarzeniem ustawienia ostrości.
-  uchwytBlur() {
+  // czy inny potomek elementu otrzymał fokus, jako że
+  // zdarzenie onBlur wywołuje się przed ustawieniem fokusa
+  // na innym elemencie.
+  onBlurHandler() {
     this.timeOutId = setTimeout(() => {
       this.setState({
-        otwarte: false
+        isOpen: false
       });
     });
   }
 
-  // Jeśli dziecko otrzymuje ostrość, nie zamykaj elementu bedącego na wierzchu.
-  uchwytFocus() {
+  // Jeśli potomek otrzyma fokus, nie zamykaj dymku.
+  onFocusHandler() {
     clearTimeout(this.timeOutId);
   }
 
   render() {
-    // React wspiera nas w przesyłaniu ostrości
+    // React wspiera nas w przesyłaniu fokusa
     // do rodzica.
     return (
-      <div onBlur={this.uchwytBlur}
-           onFocus={this.uchwytFocus}>
-        <button onClick={this.uchwytKlikniecia}
+      <div onBlur={this.onBlurHandler}
+           onFocus={this.onFocusHandler}>
+        <button onClick={this.onClickHandler}
                 aria-haspopup="true"
-                aria-expanded={this.state.otwarte}>
+                aria-expanded={this.state.isOpen}>
           Wybierz opcję
         </button>
-        {this.state.otwarte ? (
+        {this.state.isOpen ? (
           <ul>
             <li>Opcja 1</li>
             <li>Opcja 2</li>
@@ -365,51 +365,51 @@ class PrzykladBlur extends React.Component {
 }
 ```
 
-Ten kod udostępnia funkcje zarówno użytkownikom urządzeń wskaźnikowych, jak i klawiatury. Zwróć także uwagę na dodane wartości `aria- *` do obsługi czytników ekranu. Dla uproszczenia zdarzenia klawiaturowych (ang. keyboard events), aby włączyć interakcję klawiszy strzałek opcji popover, nie zostały zaimplementowane.
+Ten kod udostępnia funkcje użytkownikom zarówno urządzeń wskaźnikowych, jak i klawiatury. Zwróć także uwagę na właściwości `aria- *` dodane w celu obsłużenia czytników ekranu. Dla uproszczenia kodu nie zostały zaimplementowane zdarzenia klawiaturowe pozwalające na interakcję z dymkiem za pomocą klawiszy strzałek.
 
 <img src="../images/docs/blur-popover-close.gif" alt="Lista poprawnie zamykająca się zarówno dla użytkowników myszy, jak i klawiatury." />
 
-Jest to tylko jeden przykład z wielu przypadków, w których w zależności tylko od zdarzeń wskaźnika i myszy możemy napotkać na problem w poruszaniu się użytkowników klawiaturowych.
-Stałe testowanie za pomocą klawiatury pozwala na szybkie reagowanie i odnotywowanie problemów, które można następnie naprawić korzystając ze zdarzeń mogących zostać wywołane nie tylko za pomocą wskaźników, ale również i innych sposobów poruszania się po aplikacji.
+Jest to tylko jeden przykład z wielu przypadków, w których poleganie jedynie na zdarzeniach wskaźnika i myszy możemy uniemożliwić poruszanie się po aplikacji użytkownikom korzystającym z samej klawiatury.
+Każdorazowe testowanie aplikacji za pomocą klawiatury pozwala na sprawne wyszukiwanie problemów, którym można zaradzić poprzez dodanie obsługi zdarzeń klawiaturowych.
 
 ## Bardziej złożone widżety {#more-complex-widgets}
 
-Bardziej złożone scenariusze użytkowania nie powinny oznaczać ograniczania przystępności. Dostępność jest najłatwiej osiągalna poprzez trzymanie się jak najbliżej wzorców znanych z natywnego HTMLa.
-Nawet najbardziej złożony widżet może być przygotowany w przystępny sposób.
+Bardziej złożone scenariusze niekoniecznie muszą być mniej dostępne dla użytkowników. Dostępność najłatwiej osiągnąć poprzez trzymanie się jak najbliżej wzorców znanych z natywnego HTML-a.
+Nawet najbardziej złożony widżet może być przyjazny dla użytkownika.
 
-Wymagamy tutaj znajomości [ARIA Roles](https://www.w3.org/TR/wai-aria/#roles) oraz [stanów i właściwości ARIA](https://www.w3.org/TR/wai-aria/#states_and_properties).
-Są to skrzynki narzędziowe wypełnione atrybutami HTML, które są w pełni obsługiwane przez JSX i umożliwiają nam tworzenie w pełni dostępnych, wysoce funkcjonalnych komponentów React.
+Wymagamy tutaj znajomości standardu ARIA, m.in. [ról](https://www.w3.org/TR/wai-aria/#roles) oraz [stanów i właściwości](https://www.w3.org/TR/wai-aria/#states_and_properties).
+Są to "skrzynki narzędziowe" wypełnione atrybutami HTML, które są w pełni obsługiwane przez JSX i umożliwiają nam tworzenie w pełni dostępnych, wysoce funkcjonalnych komponentów reactowych.
 
-Każdy typ widżetu ma określone wzorce i zarówno użytkownicy, jak i przeglądarki oczekują, że będzie działał w określny sposób.
+Każdy typ widżetu ma określone wzorce i zarówno użytkownicy, jak i przeglądarki oczekują, że będzie działał w określony sposób.
 
-- [WAI-ARIA Authoring Practices - Wzorce projektowe i widżety](https://www.w3.org/TR/wai-aria-practices/#aria_ex)
-- [Heydon Pickering - ARIA Przykłady](https://heydonworks.com/practical_aria_examples/)
+- [Dobre praktyki WAI-ARIA - Wzorce projektowe i widżety](https://www.w3.org/TR/wai-aria-practices/#aria_ex)
+- [Heydon Pickering - ARIA w praktyce](https://heydonworks.com/practical_aria_examples/)
 - [Inclusive Components](https://inclusive-components.design/)
 
 ## Inne punkty do rozważenia {#other-points-for-consideration}
 
 ### Ustawianie języka {#setting-the-language}
 
-Jawnie wskaż ludzki język tekstów zamieszczonych na stronie, ponieważ oprogramowanie czytnika ekranu używa tego do wyboru prawidłowych ustawień głosu:
+Jawnie wskaż ludzki język tekstów zamieszczonych na stronie, ponieważ oprogramowanie czytnika ekranu używa go do wyboru prawidłowych ustawień głosu:
 - [WebAIM - Język dokumentu](https://webaim.org/techniques/screenreader/#language)
 
 ### Ustawienie tytułu dokumentu {#setting-the-document-title}
 
-Ustaw atrybut `<title>` dokumentu, aby poprawnie opisać bieżącą zawartość strony, ponieważ ułatwia to użytkownikowi, zrozumienie bieżącego kontekstu strony.
+Ustaw znacznik `<title>` dokumentu tak, by poprawnie opisywał zawartość strony. Ułatwia to użytkownikowi zrozumienie bieżącego kontekstu strony.
 
-- [WCAG - Zrozumienie wymogu tytułu dokumentu](https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-title.html)
+- [WCAG - Dlaczego tytuł dokumentu jest wymagany](https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-title.html)
 
-Możemy to ustawić w Reakcie używając [React Document Title Component](https://github.com/gaearon/react-document-title).
+W Reakcie tytuł dokumentu możemy ustawić za pomocą [reactowego komponentu tytułu dokumentu](https://github.com/gaearon/react-document-title).
 
 ### Kontrast kolorów {#color-contrast}
 
-Upewnij się, że wszystkie teksty na Twojej stronie mają wystarczający kontrast kolorów, aby pozostały maksymalnie czytelne dla użytkowników o słabym wzroku:
+Upewnij się, że wszystkie teksty na twojej stronie mają wystarczający kontrast kolorów, aby pozostały maksymalnie czytelne dla użytkowników o słabym wzroku:
 
-- [WCAG - Zrozumienie wymogu kontrastu kolorów](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html)
-- [Wszystko o kontrastie kolorów i dlaczego warto to przemyśleć](https://www.smashingmagazine.com/2014/10/color-contrast-tips-and-tools-for-accessibility/)
+- [WCAG - Dlaczego wymagane jest zachowanie kontrastu kolorów](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html)
+- [Wszystko o kontraście kolorów i dlaczego warto się nad nim zastanowić](https://www.smashingmagazine.com/2014/10/color-contrast-tips-and-tools-for-accessibility/)
 - [A11yProject - Czym jest kontrast kolorów](https://a11yproject.com/posts/what-is-color-contrast/)
 
-Ręczne obliczanie odpowiednich kombinacji kolorów dla wszystkich przypadków na swojej stronie internetowej może być nudne, więc zamiast tego [możliwe jest prześledzenie całej dostępnej palety kolorów za pomocą Colorable](https://jxnblk.com/colorable/).
+Ręczne obliczanie odpowiednich kombinacji kolorów dla wszystkich przypadków na swojej stronie internetowej może być nudne. Zamiast tego możesz użyć [Colorable do przeliczenia całej palety kolorów dla zachowania dobrej dostępności aplikacji](https://jxnblk.com/colorable/).
 
 Wymienione poniżej narzędzia aXe i WAVE zawierają również testy kontrastu kolorów i będą zgłaszać błędy kontrastu.
 
@@ -420,27 +420,28 @@ Jeśli chcesz rozszerzyć możliwości testowania kontrastu, możesz użyć nast
 
 ## Narzędzia do tworzenia oraz testowania {#development-and-testing-tools}
 
-Istnieje wiele narzędzi, których możemy użyć, aby pomóc w tworzeniu przystępnych aplikacji internetowych.
+Istnieje wiele narzędzi, których możemy użyć, aby pomóc sobie przy tworzeniu przystępnych aplikacji internetowych.
 
 ### Klawiatura {#the-keyboard}
 
 Zdecydowanie najłatwiejszą i jedną z najważniejszych kontroli jest sprawdzenie, czy poruszanie się po całej stronie jest możliwe z wykorzystaniem wyłącznie klawiatury. 
 Instrukcja sprawdzenia aplikacji:
 
-1. Odłącz myszy.
-1. Używając wyłącznie `Tab` i` Shift + Tab` przeglądaj stronę.
-1. Używając `Enter` aktywuj elementy.
-1. W razie potrzeby, używając klawiszy strzałek klawiatury do interakcji z niektórymi elementami, takimi jak menu i listy rozwijane.
+1. Odłącz mysz od komputera.
+2. Używaj wyłącznie klawiszy `Tab` oraz `Shift + Tab` do przeglądania strony.
+3. Używaj klawisza `Enter` do aktywowania elementów.
+4. W razie potrzeby używaj klawiszy strzałek do interakcji z niektórymi elementami, takimi jak menu i listy rozwijane.
 
 ### Pomoc przy tworzeniu {#development-assistance}
 
-Część testów dostępności możemy wykonać bezpośrednio w naszym kodzie JSX. Często kontrole dostępności dla ról, stanów i właściwości ARIA są wbudowane w IDE obsługujące JSX. Dodatkowo, mamy do dyspozycji również inne narzędzia:
+Część testów dostępności możemy wykonać bezpośrednio w naszym kodzie JSX. Często kontrole dostępności dla ról, stanów i właściwości ARIA są wbudowane w środowisko IDE obsługujące JSX. Dodatkowo, mamy do dyspozycji również inne narzędzia:
 
 #### eslint-plugin-jsx-a11y {#eslint-plugin-jsx-a11y}
 
-Wtyczka [eslint-plugin-jsx-a11y] (https://github.com/evcohen/eslint-plugin-jsx-a11y) dla ESLint zapewnia informacje zwrotne AST dotyczące problemów z dostępnością w Twoim JSX. Wiele IDE umożliwiaja integrację notyfikacji o problemach z dostępnością, bezpośrednio z analizą kodu i oknami kodu źródłowego IDE.
+Wtyczka [eslint-plugin-jsx-a11y] (https://github.com/evcohen/eslint-plugin-jsx-a11y) dla narzędzia ESLint informuje o problemach z dostępnością w twoim kodzie JSX. Wiele środowisk IDE umożliwia integrację ostrzeżeń o zgłaszanych 
+ problemach z dostępnością bezpośrednio z narzędziami do analizy kodu i oknami edytorów.
 
-[Create React App](https://github.com/facebookincubator/create-react-app) ma tę wtyczkę domyślnie zainstalowaną z podzbiorem dodatkowych reguł. Jeśli chcesz włączyć jeszcze więcej reguł dostępności, możesz utworzyć plik `.eslintrc` w katalogu głównym swojego projektu z tą treścią:
+[Create React App](https://github.com/facebookincubator/create-react-app) ma tę wtyczkę domyślnie zainstalowaną z aktywnymi niektórymi regułami. Jeśli chcesz włączyć dodatkowe reguły dotyczące dostępności, możesz utworzyć plik `.eslintrc` w katalogu głównym swojego projektu z następującą zawartością:
 
   ```json
   {
@@ -449,7 +450,7 @@ Wtyczka [eslint-plugin-jsx-a11y] (https://github.com/evcohen/eslint-plugin-jsx-a
   }
   ```
 
-### testowanie dostępności w przeglądarce {#testing-accessibility-in-the-browser}
+### Testowanie dostępności w przeglądarce {#testing-accessibility-in-the-browser}
 
 Istnieje wiele narzędzi, które umożliwiają przeprowadzanie kontroli dostępności na stronach internetowych bezpośrednio w przeglądarce. Używaj ich w połączeniu z innymi narzędziami wymienionymi tutaj, aby jak najlepiej przygotować swój kod HTML.
 
@@ -457,19 +458,19 @@ Istnieje wiele narzędzi, które umożliwiają przeprowadzanie kontroli dostępn
 
 Deque Systems oferuje [aXe-core](https://github.com/dequelabs/axe-core) do automatycznych i kompleksowych testów dostępności aplikacji. Moduł ten obejmuje integracje z Selenium.
 
-[The Accessibility Engine](https://www.deque.com/products/axe/) lub ax, jest rozszerzeniem przeglądarkowego inspektora dostępności zbudowanym na bazie `ax-core`.
+[The Accessibility Engine](https://www.deque.com/products/axe/) (lub inaczej aXe) jest rozszerzeniem przeglądarkowego inspektora dostępności, zbudowanym na bazie `aXe-core`.
 
-Możesz również użyć modułu [react-ax](https://github.com/dylanb/react-axe), aby zgłosić luki dotyczące dostępności bezpośrednio do konsoli, podczas pracy i debugowania.
+Możesz również użyć modułu [react-axe](https://github.com/dylanb/react-axe), aby zgłosić luki dotyczące dostępności bezpośrednio do konsoli, podczas rozwoju aplikacji i debugowania.
 
 #### WebAIM WAVE {#webaim-wave}
 
 [Web Accessibility Evaluation Tool](https://wave.webaim.org/extension/) jest kolejną wtyczką pomagającą w testowaniu dostępności.
 
-#### Accessibility inspectors and the Accessibility Tree {#accessibility-inspectors-and-the-accessibility-tree}
+#### Inspektory dostępności i Accessibility Tree {#accessibility-inspectors-and-the-accessibility-tree}
 
-[The Accessibility Tree](https://www.paciellogroup.com/blog/2015/01/the-browser-accessibility-tree/) jest podzbiorem drzewa DOM. Zawiera wszystkie dostępne dla technologii wspomagających obiekty, odpowiadające każdemu elementowi DOMu.
+[The Accessibility Tree](https://www.paciellogroup.com/blog/2015/01/the-browser-accessibility-tree/) jest podzbiorem drzewa DOM. Zawiera wszystkie dostępne dla technologii wspomagających obiekty, odpowiadające każdemu elementowi modelu DOM.
 
-W niektórych przeglądarkach możemy łatwo wyświetlić informacje o przystępności dla każdego elementu w drzewie DOM:
+W niektórych przeglądarkach możemy łatwo wyświetlić informacje o dostępności dla każdego elementu w drzewie DOM:
 
 - [Korzystanie z Inspektora dostępności w Firefoksie](https://developer.mozilla.org/en-US/docs/Tools/Accessibility_inspector)
 - [Korzystanie z Inspektora dostępności w Chromie](https://gist.github.com/marcysutton/0a42f815878c159517a55e6652e3b23a)
@@ -478,18 +479,18 @@ W niektórych przeglądarkach możemy łatwo wyświetlić informacje o przystęp
 ### Czytniki ekranowe {#screen-readers}
 
 Testowanie za pomocą czytnika ekranu powinno stanowić część testów dostępności.
-Należy pamiętać, że kombinacje przeglądarka/czytnik ekranu mają bardzo duże naczenie. Zaleca się testowanie aplikacji w przeglądarce rekomendowanej do wybranego czytnika ekranu.
+Należy pamiętać, że kombinacje przeglądarka/czytnik ekranu mają bardzo duże znaczenie. Zaleca się testowanie aplikacji w przeglądarce rekomendowanej do wybranego czytnika ekranu.
 
 ### Często używane czytniki ekranu {#commonly-used-screen-readers}
 
 #### NVDA w Firefoxie {#nvda-in-firefox}
 
-[NonVisual Desktop Access](https://www.nvaccess.org/) lub NVDA to czytnik ekranu systemu Windows o otwartym kodzie źródłowym, który jest szeroko stosowany.
+[NonVisual Desktop Access](https://www.nvaccess.org/) (lub NVDA) to czytnik ekranu systemu Windows o otwartym kodzie źródłowym, który jest szeroko stosowany.
 
-Zapoznaj się z następującymi poradnikami, jak najlepiej wykorzystać NVDA:
+Zapoznaj się z następującymi poradnikami opisującymi, jak najlepiej wykorzystać NVDA:
 
-- [WebAIM - Korzystanie z NVDA do oceny dostępności sieci](https://webaim.org/articles/nvda/)
-- [Deque - NVDA Skróty Klawiszowe](https://dequeuniversity.com/screenreaders/nvda-keyboard-shortcuts)
+- [WebAIM - Korzystanie z NVDA do oceny dostępności strony](https://webaim.org/articles/nvda/)
+- [Deque - NVDA: Skróty klawiszowe](https://dequeuniversity.com/screenreaders/nvda-keyboard-shortcuts)
 
 #### VoiceOver w Safari {#voiceover-in-safari}
 
@@ -498,25 +499,25 @@ VoiceOver to zintegrowany czytnik ekranu na urządzeniach Apple.
 Zapoznaj się z następującymi przewodnikami dotyczącymi aktywacji i korzystania z VoiceOver:
 
 - [WebAIM - Korzystanie z VoiceOver do oceny dostępności stron internetowych](https://webaim.org/articles/voiceover/)
-- [Deque - VoiceOver dla OS X Skróty Klawiaturowe](https://dequeuniversity.com/screenreaders/voiceover-keyboard-shortcuts)
-- [Deque - VoiceOver dla iOS Skróty](https://dequeuniversity.com/screenreaders/voiceover-ios-shortcuts)
+- [Deque - VoiceOver dla OS X: Skróty klawiszowe](https://dequeuniversity.com/screenreaders/voiceover-keyboard-shortcuts)
+- [Deque - VoiceOver dla iOS: Skróty](https://dequeuniversity.com/screenreaders/voiceover-ios-shortcuts)
 
 #### JAWS w Internet Explorer {#jaws-in-internet-explorer}
 
-[Job Access With Speech](https://www.freedomscientific.com/Products/software/JAWS/)lub JAWS, jest popularnym czytnikiem ekranu w systemie Windows.
+[Job Access With Speech](https://www.freedomscientific.com/Products/software/JAWS/) (lub JAWS) jest popularnym czytnikiem ekranu w systemie Windows.
 
 Zapoznaj się z następującymi poradnikami, jak najlepiej korzystać z JAWS:
 
 - [WebAIM - Korzystanie z JAWS do oceny dostępności stron internetowych](https://webaim.org/articles/jaws/)
-- [Deque - JAWS Skróty Klawiaturowe](https://dequeuniversity.com/screenreaders/jaws-keyboard-shortcuts)
+- [Deque - JAWS: Skróty klawiszowe](https://dequeuniversity.com/screenreaders/jaws-keyboard-shortcuts)
 
-### Inne Czytniki Ekranowe {#other-screen-readers}
+### Inne czytniki ekranowe {#other-screen-readers}
 
 #### ChromeVox w Google Chrome {#chromevox-in-google-chrome}
 
-[ChromeVox] (https://www.chromevox.com/) jest zintegrowanym czytnikiem ekranu na Chromebookach i jest dostępny [jako rozszerzenie] (https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn?hl = en) dla Google Chrome.
+[ChromeVox] (https://www.chromevox.com/) jest zintegrowanym czytnikiem ekranu na Chromebookach i jest dostępny [jako rozszerzenie] (https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn?hl=pl) dla Google Chrome.
 
-Zapoznaj się z następującymi poradnikami, jak najlepiej korzystać z ChromeVox:
+Zapoznaj się z następującymi poradnikami opisującymi, jak najlepiej korzystać z ChromeVox:
 
-- [Google Chromebook Help - Użyj wbudowanego czytnika ekranu](https://support.google.com/chromebook/answer/7031755?hl=en)
-- [ChromeVox klasyczne Skróty Klawiaturowe](https://www.chromevox.com/keyboard_shortcuts.html)
+- [System operacyjny Chrome - Pomoc: Korzystanie z wbudowanego czytnika ekranu](https://support.google.com/chromebook/answer/7031755?hl=pl)
+- [ChromeVox - klasyczne skróty klawiszowe](https://www.chromevox.com/keyboard_shortcuts.html)

From 4821ec9163dfc9457ec1e8afd165971f8d48a1e0 Mon Sep 17 00:00:00 2001
From: jakubdrozdek <30927218+jakubdrozdek@users.noreply.github.com>
Date: Mon, 8 Apr 2019 14:28:45 +0200
Subject: [PATCH 5/5] Update content/docs/accessibility.md

Co-Authored-By: danzawadzki <hello@danielzawadzki.com>
---
 content/docs/accessibility.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/accessibility.md b/content/docs/accessibility.md
index a818f8995..4f1f46cb6 100644
--- a/content/docs/accessibility.md
+++ b/content/docs/accessibility.md
@@ -174,7 +174,7 @@ class CustomTextInput extends React.Component {
   constructor(props) {
     super(props);
     // Stwórz referencję do elementu DOM
-    this.poleTekstowe = React.createRef();
+    this.textInput= React.createRef();
   }
   render() {
   // Użyj funkcji zwrotnej `ref`, aby zapisać referencję do pola tekstowego