{"id":32469,"date":"2025-12-03T05:00:00","date_gmt":"2025-12-03T04:00:00","guid":{"rendered":"https:\/\/sii.pl\/blog\/?p=32469"},"modified":"2026-05-07T13:54:08","modified_gmt":"2026-05-07T11:54:08","slug":"wcag-2-2-kompleksowy-przewodnik-po-dostepnosci-cyfrowej","status":"publish","type":"post","link":"https:\/\/sii.pl\/blog\/wcag-2-2-kompleksowy-przewodnik-po-dostepnosci-cyfrowej\/","title":{"rendered":"WCAG 2.2: Kompleksowy przewodnik po dost\u0119pno\u015bci cyfrowej"},"content":{"rendered":"\n<p>Artyku\u0142 stanowi przegl\u0105d wytycznych dost\u0119pno\u015bci tre\u015bci internetowych WCAG 2.2. Zawiera praktyczne aspekty implementacji standard\u00f3w inkluzywno\u015bci cyfrowej, w tym m.in.: regu\u0142y nawigacji strukturalnej, wykorzystanie narz\u0119dzi i czytnik\u00f3w ekranowych, a tak\u017ce tworzenie dost\u0119pnych dokument\u00f3w w pakiecie Microsoft Office. Szczeg\u00f3ln\u0105 uwag\u0119 zwr\u00f3ci\u0142em na przyk\u0142ady implementacji dost\u0119pno\u015bci w kodzie HTML z wykorzystaniem specyfikacji WAI-ARIA.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Wprowadzenie<\/strong><\/h2>\n\n\n\n<p>Web Content Accessibility Guidelines (WCAG) to mi\u0119dzynarodowy standard opracowany przez World Wide Web Consortium (W3C), kt\u00f3ry definiuje sposoby tworzenia tre\u015bci internetowych dost\u0119pnych dla os\u00f3b z niepe\u0142nosprawno\u015bciami<a><\/a>.<a><\/a><sup>[1, 2]<\/sup> Standard ten ewoluowa\u0142 przez lata, od wersji WCAG 1.0 wydanej w 1999 roku, przez WCAG 2.0 (2008), WCAG 2.1 (2018), a\u017c do najnowszej wersji WCAG 2.2 wydanej w pa\u017adzierniku 2023 roku<a><\/a>.<sup>[3\u2013<\/sup><sup>6]<\/sup><\/p>\n\n\n\n<p>WCAG opiera si\u0119 na czterech fundamentalnych zasadach, znanych jako POUR:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Perceivable<\/strong> (postrzegalno\u015b\u0107),<\/li>\n\n\n\n<li><strong>Operable<\/strong> (funkcjonalno\u015b\u0107),<\/li>\n\n\n\n<li><strong>Understandable<\/strong> (zrozumia\u0142o\u015b\u0107),<\/li>\n\n\n\n<li><strong>Robust<\/strong> (solidno\u015b\u0107).<sup>[1, 7, 8]<\/sup><\/li>\n<\/ul>\n\n\n\n<p>Standard definiuje trzy poziomy zgodno\u015bci:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>A (minimalny),<\/li>\n\n\n\n<li>AA (akceptowalny),<\/li>\n\n\n\n<li>AAA (optymalny).<sup>[3, 9]<\/sup><\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full is-resized\"><img decoding=\"async\" width=\"1024\" height=\"1024\" src=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2025\/11\/Rys.-1.png\" alt=\"Wizualna reprezentacja czterech zasad WCAG \u2013 POUR\" class=\"wp-image-32470\" style=\"width:476px;height:auto\" srcset=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2025\/11\/Rys.-1.png 1024w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2025\/11\/Rys.-1-300x300.png 300w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2025\/11\/Rys.-1-150x150.png 150w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2025\/11\/Rys.-1-768x768.png 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Ryc. 1 Wizualna reprezentacja czterech zasad WCAG \u2013 POUR<\/figcaption><\/figure>\n\n\n\n<p>Poziom AA obejmuje podmioty publiczne, tj.: organy administracji publicznej, jednostki samorz\u0105du terytorialnego, instytucje kultury, szko\u0142y i uczelnie publiczne oraz s\u0105dy i inne instytucje wykonuj\u0105ce zadania publiczne.<sup>[10]<\/sup> Natomiast od 28 czerwca 2025, poziom AA obejmuje r\u00f3wnie\u017c podmioty prywatne w ca\u0142ej Unii Europejskiej, w tym m.in.: e-commerce, banki i dostawc\u00f3w us\u0142ug p\u0142atniczych, producent\u00f3w, importer\u00f3w, dystrybutor\u00f3w, us\u0142ugi transportu pasa\u017cerskiego online, operator\u00f3w telefonii i komunikator\u00f3w.<sup>[10, 11]<\/sup> Nie podlegaj\u0105 temu mikroprzedsi\u0119biorstwa.<sup>[11]<\/sup> Obowi\u0105zek ten wynika z implementacji Europejskiego Aktu o Dost\u0119pno\u015bci (EAA), kt\u00f3ry rozszerza dost\u0119pno\u015b\u0107 cyfrow\u0105 na sektor prywatny obok sektora publicznego.<sup>[10, 11]<\/sup><\/p>\n\n\n\n<p>Znaczenie dost\u0119pno\u015bci cyfrowej stale ro\u015bnie \u2013 wed\u0142ug \u015awiatowej Organizacji Zdrowia ponad 2,2 mld ludzi na \u015bwiecie ma jak\u0105\u015b form\u0119 niepe\u0142nosprawno\u015bci wzroku.<sup>[12, 13]<\/sup> Natomiast ok. 36 mln ludzi jest niewidomych.<sup>[14]<\/sup> W zwi\u0105zku z tym, coraz wi\u0119cej kraj\u00f3w wprowadza przepisy prawne wymagaj\u0105ce zgodno\u015bci z WCAG, jak na przyk\u0142ad nowe przepisy ADA Title II w Stanach Zjednoczonych, kt\u00f3re wejd\u0105 w \u017cycie w 2026 roku.<sup>[15, 16]<\/sup><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Czytniki ekranowe i skr\u00f3ty klawiaturowe<\/strong><\/h2>\n\n\n\n<p>Czytniki ekranowe to kluczowe narz\u0119dzia asystuj\u0105ce, kt\u00f3re konwertuj\u0105 tre\u015b\u0107 cyfrow\u0105 na mow\u0119 syntetyczn\u0105 lub wy\u015bwietlacz brajlowski, umo\u017cliwiaj\u0105c osobom niewidomym i s\u0142abowidz\u0105cym nawigacj\u0119 po stronach internetowych i dokumentach. Najpopularniejsze czytniki ekranowe<sup>[17, 18] <\/sup>to:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>NVDA (darmowy, dla Windows),<sup>[19]<\/sup><\/li>\n\n\n\n<li>JAWS (komercyjny, dla Windows),<sup>[20]<\/sup><\/li>\n\n\n\n<li>TalkBack (wbudowany w Android),<sup>[21]<\/sup><\/li>\n\n\n\n<li>VoiceOver (wbudowany w macOS).<sup>[22]<\/sup><\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Podstawowe zasady nawigacji<\/strong><\/h3>\n\n\n\n<p>Czytniki ekranowe wykorzystuj\u0105 struktur\u0119 semantyczn\u0105 dokument\u00f3w do nawigacji. U\u017cytkownicy mog\u0105 porusza\u0107 si\u0119 mi\u0119dzy r\u00f3\u017cnymi elementami strony, u\u017cywaj\u0105c dedykowanych skr\u00f3t\u00f3w klawiaturowych, kt\u00f3re pozwalaj\u0105 na szybkie przechodzenie mi\u0119dzy nag\u0142\u00f3wkami, linkami, formularzami lub tabelami (wi\u0119cej na ten temat znajdziesz w rozdziale: Wa\u017cniejsze skr\u00f3ty klawiaturowe).<sup>[23, 24]<\/sup><\/p>\n\n\n\n<p>Czytniki umo\u017cliwiaj\u0105 r\u00f3wnie\u017c nawigowanie po landmarkach, czyli specjalnie oznaczonych, semantycznych obszarach b\u0119d\u0105cych punktami nawigacyjnymi. S\u0105 nimi m.in.: <code>&lt;header&gt;<\/code>, <code>&lt;nav&gt;<\/code>, &lt;main&gt;, <code>&lt;aside&gt;<\/code> i <code>&lt;footer&gt;<\/code>. Korzystanie z landmark\u00f3w pomaga szybko przechodzi\u0107 do najwa\u017cniejszych sekcji witryny bez konieczno\u015bci liniowego przegl\u0105dania ca\u0142ej tre\u015bci (wi\u0119cej na ten temat znajdziesz w rozdziale: Skip linki).<sup>[25, 26]<\/sup><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Wa\u017cniejsze skr\u00f3ty klawiaturowe<\/strong><\/h3>\n\n\n\n<p>Efektywna nawigacja za pomoc\u0105 czytnika ekranowego opiera si\u0119 na znajomo\u015bci podstawowych skr\u00f3t\u00f3w klawiaturowych. Wi\u0119kszo\u015b\u0107 komend jest uniwersalna mi\u0119dzy r\u00f3\u017cnymi czytnikami.<sup>[23, 24]<\/sup> Kluczowe jest zrozumienie, \u017ce czytniki ekranowe odczytuj\u0105 tylko semantycznie poprawny kod HTML. Przyk\u0142adowo, je\u017celi nag\u0142\u00f3wki s\u0105 utworzone jedynie poprzez zwi\u0119kszenie rozmiaru tekstu i pogrubienie, a nie za pomoc\u0105 odpowiednich znacznik\u00f3w od <code>&lt;h1&gt;<\/code> do <code>&lt;h6&gt;<\/code>, czytnik nie b\u0119dzie w stanie ich rozpozna\u0107 jako struktury nawigacyjnej.<sup>[27]<\/sup><\/p>\n\n\n\n<p><strong>Skr\u00f3t klawiaturowy:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>F<\/code> \u2013 odszukuje najbli\u017cszy\/kolejny formularz.<\/li>\n\n\n\n<li><code>E<\/code> \u2013 pole edycji.<\/li>\n\n\n\n<li><code>X<\/code> \u2013 pole wyboru.<\/li>\n\n\n\n<li><code>C<\/code> \u2013 pole rozwijane.<\/li>\n\n\n\n<li><code>R<\/code> \u2013 pole opcji (radio).<\/li>\n\n\n\n<li><code>B<\/code> \u2013 przyciski.<\/li>\n\n\n\n<li><code>H<\/code> \u2013 nag\u0142\u00f3wki (w po\u0142\u0105czeniu z klawiszami<code> 1\u20136<\/code> mo\u017cna wskaza\u0107 nag\u0142\u00f3wek konkretnego poziomu).<\/li>\n\n\n\n<li><code>G<\/code> \u2013 grafiki.<\/li>\n\n\n\n<li><code>K<\/code> \u2013 linki (<code>U<\/code> \u2013 nieodwiedzone, <code>V<\/code> \u2013 odwiedzone).<\/li>\n\n\n\n<li><code>L<\/code> \u2013 listy (<code>I <\/code>\u2013 elementy wewn\u0105trz danej listy).<\/li>\n\n\n\n<li><code>D<\/code> \u2013 landmarki.<\/li>\n<\/ul>\n\n\n\n<p>Nawigacja bez znajomo\u015bci skr\u00f3t\u00f3w klawiaturowych r\u00f3wnie\u017c jest mo\u017cliwa. Klawisze:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>Tab<\/code> i <code>Shift+Tab<\/code> \u2013 pozwalaj\u0105 trawersowa\u0107 (przechodzi\u0107) po interaktywnych elementach, takich jak m.in.: kontrolki, linki i przyciski.<sup>[28]<\/sup><\/li>\n\n\n\n<li>Strza\u0142ki <code>\u2191<\/code> \/ <code>\u2193<\/code> \u2013 s\u0142u\u017c\u0105 do odczytywania kolejno poprzednich\/nast\u0119pnych element\u00f3w strony.<sup>[25]<\/sup><\/li>\n\n\n\n<li>Strza\u0142ki <code>\u2190 <\/code>\/ <code>\u2192<\/code> \u2013 odczytuj\u0105 pojedyncze znaki w wybranym elemencie (np. w polach edycyjnych).<sup>[29]<\/sup><\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Warto\u015bci kontrast\u00f3w w WCAG<\/strong><\/h2>\n\n\n\n<p>Kontrast kolor\u00f3w jest jednym z najwa\u017cniejszych aspekt\u00f3w dost\u0119pno\u015bci wizualnej. Odpowiedni kontrast mi\u0119dzy tekstem a t\u0142em zapewnia czytelno\u015b\u0107 tre\u015bci dla os\u00f3b z r\u00f3\u017cnymi rodzajami niepe\u0142nosprawno\u015bci wzroku, w tym daltonizmem i s\u0142abowidzeniem.<sup>[30, 31]<\/sup> Niestety, zbyt niski kontrast nadal stanowi powszechnie wyst\u0119puj\u0105cy problem.<sup>[32]<\/sup> W przypadku element\u00f3w nietekstowych jakimi s\u0105 np. elementy interfejsu, grafiki lub wykresy, wsp\u00f3\u0142czynnik kontrastu oblicza si\u0119, por\u00f3wnuj\u0105c kolor badanego elementu z kolorem przylegaj\u0105cym do tego elementu.<sup>[33]<\/sup><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Wymagania kontrastowe wed\u0142ug poziom\u00f3w WCAG<\/strong><\/h3>\n\n\n\n<p>WCAG definiuje precyzyjne wymagania dotycz\u0105ce wsp\u00f3\u0142czynnik\u00f3w kontrastu (Ryc. 2).<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large\"><img decoding=\"async\" width=\"1024\" height=\"768\" src=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2025\/11\/Rys.-2-1024x768.jpeg\" alt=\"Wymagania WCAG dotycz\u0105ce wsp\u00f3\u0142czynnika kontrastu na r\u00f3\u017cnych poziomach zgodno\u015bci dla zwyk\u0142ego i du\u017cego tekstu. Tekst du\u017cy stanowi 18 pt lub 14 pt, gdy jest pogrubiony\" class=\"wp-image-32472\" srcset=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2025\/11\/Rys.-2-1024x768.jpeg 1024w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2025\/11\/Rys.-2-300x225.jpeg 300w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2025\/11\/Rys.-2-768x576.jpeg 768w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2025\/11\/Rys.-2-1536x1152.jpeg 1536w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2025\/11\/Rys.-2.jpeg 1600w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Ryc. 2 Wymagania WCAG dotycz\u0105ce wsp\u00f3\u0142czynnika kontrastu na r\u00f3\u017cnych poziomach zgodno\u015bci dla zwyk\u0142ego i du\u017cego tekstu. Tekst du\u017cy stanowi 18 pt lub 14 pt, gdy jest pogrubiony<\/figcaption><\/figure>\n\n\n\n<p><strong>Poziom AA (wymagany standard):<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Tekst normalny: minimum 4,5:1.<\/li>\n\n\n\n<li>Tekst du\u017cy (18 pt lub 14 pt pogrubiony): minimum 3:1.<\/li>\n\n\n\n<li>Elementy interfejsu i grafika: minimum 3:1.<\/li>\n<\/ul>\n\n\n\n<p><strong>Poziom AAA (wzmocniony standard):<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Tekst normalny: minimum 7:1.<\/li>\n\n\n\n<li>Tekst du\u017cy: minimum 4,5:1.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Narz\u0119dzia do sprawdzania kontrastu<\/strong><\/h3>\n\n\n\n<p>W celu analizy kontrastu mo\u017cna wykorzysta\u0107 darmowe narz\u0119dzia tj.: Colour Contrast Analyser,<sup>[34]<\/sup> WebAIM Contrast Checker,<sup>[30]<\/sup> Color Contrast Checker<sup>[35]<\/sup> lub wbudowane w przegl\u0105darki narz\u0119dzia deweloperskie.<sup>[36, 37]<\/sup> Warto zaznaczy\u0107, \u017ce zasady kontrastu nie dotycz\u0105 element\u00f3w nieaktywnych (np. wyszarzonych przycisk\u00f3w) oraz logotyp\u00f3w.<sup>[31, 38]<\/sup><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Dost\u0119pne dokumenty Word<\/strong><\/h2>\n\n\n\n<p>Microsoft Word oferuje szereg funkcji umo\u017cliwiaj\u0105cych tworzenie dokument\u00f3w zgodnych z WCAG. Kluczowe jest wykorzystanie wbudowanych narz\u0119dzi dost\u0119pno\u015bci oraz odpowiedniej struktury dokumentu.<sup>[39, 40]<\/sup><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Podstawowe zasady tworzenia dost\u0119pnych dokument\u00f3w Word<\/strong><\/h3>\n\n\n\n<p><strong>Sprawdzanie dost\u0119pno\u015bci:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Narz\u0119dzie \u201eCheck Accessibility\u201d w zak\u0142adce \u201eReview\u201d automatycznie identyfikuje problemy z dost\u0119pno\u015bci\u0105 i sugeruje rozwi\u0105zania.<sup>[40, 41]<\/sup><\/li>\n<\/ul>\n\n\n\n<p><strong>Struktura dokumentu:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>U\u017cywanie predefiniowanych styl\u00f3w nag\u0142\u00f3wk\u00f3w (Heading 1\u20136) zamiast r\u0119cznego formatowania.<sup>[39\u201341]<\/sup><\/li>\n\n\n\n<li>Logiczny porz\u0105dek nag\u0142\u00f3wk\u00f3w bez pomijania poziom\u00f3w.<sup>[39\u201341]<\/sup><\/li>\n\n\n\n<li>Jeden nag\u0142\u00f3wek g\u0142\u00f3wny (Heading 1) na dokument.<sup>[39, 41]<\/sup><\/li>\n\n\n\n<li>Ustawienie tytu\u0142u dokumentu we w\u0142a\u015bciwo\u015bciach pliku (to inny tytu\u0142 ni\u017c ten z obszaru roboczego dokumentu).<sup>[41]<\/sup><\/li>\n<\/ul>\n\n\n\n<p><strong>Formatowanie tekstu:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Unikanie centrowania i justowania tekstu.<sup>[39\u201341]<\/sup><\/li>\n\n\n\n<li>Rezygnacja z dzielenia wyraz\u00f3w.<sup>[41]<\/sup><\/li>\n\n\n\n<li>U\u017cywanie odst\u0119p\u00f3w i interlinii zamiast \u201eenter\u00f3w\u201d do tworzenia przestrzeni w pionie (puste linie s\u0105 czytane przez czytniki).<sup>[39\u201341]<\/sup><\/li>\n\n\n\n<li>Je\u017celi tre\u015b\u0107 ma by\u0107 u\u0142o\u017cona w kolumnach, nale\u017cy zastosowa\u0107 pionow\u0105 lini\u0119, kt\u00f3ra wizualnie je oddzieli.<sup>[42]<\/sup><\/li>\n<\/ul>\n\n\n\n<p><strong>Elementy graficzne:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Dodawanie tekstu alternatywnego do wszystkich obraz\u00f3w.<sup>[39\u201341]<\/sup><\/li>\n\n\n\n<li>Oznaczanie obraz\u00f3w dekoracyjnych jako \u201edecorative\u201d.<sup>[39\u201341]<\/sup><\/li>\n\n\n\n<li>Opisywanie z\u0142o\u017conych grafik w tek\u015bcie dokumentu.<sup>[40, 41]<\/sup><\/li>\n<\/ul>\n\n\n\n<p><strong>Tabele:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Definiowanie wierszy nag\u0142\u00f3wkowych (z wybraniem opcji, kt\u00f3ra umo\u017cliwia powielenie wiersza, gdy tabela przejdzie na nast\u0119pn\u0105 stron\u0119).<sup>[39\u201341]<\/sup><\/li>\n\n\n\n<li>Unikanie \u0142\u0105czenia i dzielenia kom\u00f3rek.<sup>[40]<\/sup><\/li>\n\n\n\n<li>Dodawanie opis\u00f3w dla z\u0142o\u017conych tabel.<sup>[43]<\/sup><\/li>\n<\/ul>\n\n\n\n<p><strong>Nag\u0142\u00f3wki\/Stopki:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Informacje zawarte w nag\u0142\u00f3wku i stopce traktowane s\u0105 jako ozdobniki.<\/li>\n\n\n\n<li>Je\u017celi nag\u0142\u00f3wek\/stopka zawiera wa\u017cn\u0105 informacj\u0119 (np. dane teleadresowe), nale\u017cy skopiowa\u0107 j\u0105 do tre\u015bci dokumentu.<sup>[39\u201341]<\/sup><\/li>\n<\/ul>\n\n\n\n<p><strong>Eksport do PDF:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Podczas eksportowania nale\u017cy wybra\u0107 opcje: \u201eW\u0142a\u015bciwo\u015bci dokumentu\u201d oraz \u201eTagi struktury dokumentu dla u\u0142atwie\u0144 dost\u0119pu\u201d<sup>[44]<\/sup> wraz z zaznaczeniem zgodno\u015bci PDF\/A.<sup>[45]<\/sup><\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Dost\u0119pne arkusze Excel<\/strong><\/h2>\n\n\n\n<p>Excel wymaga szczeg\u00f3lnej uwagi przy tworzeniu dost\u0119pnych arkuszy kalkulacyjnych ze wzgl\u0119du na z\u0142o\u017cono\u015b\u0107 danych i funkcji.<sup>[46, 47]<\/sup><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Podstawowe zasady tworzenia dost\u0119pnych arkuszy Excel<\/strong><\/h3>\n\n\n\n<p><strong>Struktura arkusza:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Umieszczanie opisu lub tytu\u0142u w kom\u00f3rce A1.<sup>[46, 47]<\/sup><\/li>\n\n\n\n<li>Nadawanie opisowych nazw arkuszom.<sup>[46]<\/sup><\/li>\n\n\n\n<li>Usuwanie pustych arkuszy.<sup>[46]<\/sup><\/li>\n\n\n\n<li>Ustawienie tytu\u0142u we w\u0142a\u015bciwo\u015bciach pliku (to inny tytu\u0142 ni\u017c ten z obszaru roboczego arkusza).<sup>[48]<\/sup><\/li>\n<\/ul>\n\n\n\n<p><strong>Tabele danych:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>U\u017cywanie funkcji \u201eFormat as Table\u201d zamiast r\u0119cznego formatowania.<sup>[46\u201348]<\/sup><\/li>\n\n\n\n<li>Definiowanie nag\u0142\u00f3wk\u00f3w kolumn.<sup>[46\u201348]<\/sup><\/li>\n\n\n\n<li>Nadawanie opisowych nazw tabelom.<sup>[46, 48]<\/sup><\/li>\n\n\n\n<li>Unikanie pustych wierszy i kolumn.<sup>[46, 48]<\/sup><\/li>\n<\/ul>\n\n\n\n<p><strong>Wykresy i grafika:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Dodawanie tekstu alternatywnego do wykres\u00f3w z og\u00f3lnym opisem.<sup>[46\u201348]<\/sup><\/li>\n\n\n\n<li>Przedstawianie szczeg\u00f3\u0142owych danych w formie tabeli (alternatywny spos\u00f3b prezentacji wykresu).<sup>[46\u201348]<\/sup><\/li>\n\n\n\n<li>Unikanie identyfikacji informacji wy\u0142\u0105cznie kolorem.<sup>[46\u201348]<\/sup><\/li>\n\n\n\n<li>Ka\u017cda dana (linia na wykresie) powinna by\u0107 opatrzona etykiet\u0105 z opisem zgodnym z tym w legendzie.<sup>[46, 48]<\/sup><\/li>\n\n\n\n<li>Alternatyw\u0105 dla etykiety mo\u017ce by\u0107 u\u017cycie:\n<ul class=\"wp-block-list\">\n<li>znacznika \u2013 np. kwadrat lub tr\u00f3jk\u0105t reprezentuj\u0105cy pojedynczy punkt tworz\u0105cy wykres<sup>[46, 48]<\/sup><\/li>\n\n\n\n<li>lub desenia \u2013 rodzaj wype\u0142nienia, kt\u00f3ry pozwala odr\u00f3\u017cni\u0107 poszczeg\u00f3lne elementy wykresu za pomoc\u0105 powtarzalnych wzor\u00f3w, tj.: pask\u00f3w, kropek lub kratek.<sup>[48]<\/sup><\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Zapewnienie odpowiedniego kontrastu kolor\u00f3w. W celu poprawy kontrastu mo\u017cna np. zastosowa\u0107 obramowanie, aby wyr\u00f3\u017cni\u0107 dan\u0105 wzgl\u0119dem t\u0142a.<sup>[46\u201348]<\/sup><\/li>\n<\/ul>\n\n\n\n<p><strong>Formu\u0142y i zakresy:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Nadawanie nazw kom\u00f3rkom i zakresom w celu u\u0142atwienia nawigacji.<sup>[46\u201348]<\/sup><\/li>\n\n\n\n<li>U\u017cywanie opisowych nazw dla funkcji.<sup>[46\u201348]<\/sup><\/li>\n<\/ul>\n\n\n\n<p><strong>Eksport do PDF<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Analogicznie jak w cz\u0119\u015bci dot. Worda.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Dost\u0119pne prezentacje PowerPoint<\/strong><\/h2>\n\n\n\n<p>PowerPoint oferuje specjalne funkcje u\u0142atwiaj\u0105ce tworzenie prezentacji dost\u0119pnych dla wszystkich u\u017cytkownik\u00f3w.<sup>[49]<\/sup><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Podstawowe zasady tworzenia dost\u0119pnych prezentacji<\/strong><\/h3>\n\n\n\n<p><strong>Struktura slajd\u00f3w:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Ka\u017cdy slajd musi mie\u0107 unikalny nag\u0142\u00f3wek.<sup>[49]<\/sup>\n<ul class=\"wp-block-list\">\n<li>Przej\u015bcie w \u201eWidok konspektu\u201d pozwala wy\u015bwietli\u0107 panel z miniaturami slajd\u00f3w wraz z przypisanymi do nich nag\u0142\u00f3wkami. Bezpo\u015brednio w tym widoku mo\u017cna uzupe\u0142ni\u0107 brakuj\u0105ce nag\u0142\u00f3wki.<\/li>\n\n\n\n<li>Je\u017celi dany slajd nie zawiera tre\u015bci, nag\u0142\u00f3wek takiego slajdu nale\u017cy przenie\u015b\u0107 poza obszar slajdu (na obszar roboczy). W\u00f3wczas nag\u0142\u00f3wek b\u0119dzie ukryty.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>U\u017cywanie layout\u00f3w zamiast pustych slajd\u00f3w z polami tekstowymi.<sup>[49]<\/sup><\/li>\n\n\n\n<li>Numerowanie slajd\u00f3w w celu u\u0142atwienia nawigacji.<sup>[49]<\/sup><\/li>\n\n\n\n<li>Ustawienie tytu\u0142u we w\u0142a\u015bciwo\u015bciach pliku (to inny tytu\u0142 ni\u017c ten z obszaru roboczego prezentacji).<sup>[50]<\/sup><\/li>\n<\/ul>\n\n\n\n<p><strong>Formatowanie tekstu:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Czcionka sans-serif (np. Arial, Verdana) w rozmiarze minimum 28 pt dla tekstu g\u0142\u00f3wnego.<sup>[49]<\/sup><\/li>\n\n\n\n<li>Nag\u0142\u00f3wki w rozmiarze 30\u201344 pt.<sup>[49]<\/sup><\/li>\n\n\n\n<li>Unikanie kursywy i nadmiernej ilo\u015bci tekstu na slajdzie.<sup>[49]<\/sup><\/li>\n<\/ul>\n\n\n\n<p><strong>Kolejno\u015b\u0107 odczytu:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Sprawdzanie i dostosowywanie kolejno\u015bci odczytu element\u00f3w za pomoc\u0105 \u201eReading Order Pane\u201d.<sup>[51]<\/sup><\/li>\n<\/ul>\n\n\n\n<p><strong>Multimedia\/Elementy graficzne:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Dodawanie tekstu alternatywnego do obraz\u00f3w.<sup>[49, 50]<\/sup><\/li>\n\n\n\n<li>Oznaczanie grafik dekoracyjnych.<sup>[49, 50]<\/sup><\/li>\n\n\n\n<li>Dodawanie napis\u00f3w do film\u00f3w.<sup>[52]<\/sup><\/li>\n\n\n\n<li>Unikanie automatycznego odtwarzania d\u017awi\u0119ku.<sup>[53]<\/sup><\/li>\n<\/ul>\n\n\n\n<p><strong>Dost\u0119pno\u015b\u0107 wizualna:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Zapewnienie silnego kontrastu mi\u0119dzy tekstem a t\u0142em.<sup>[49\u201353]<\/sup><\/li>\n\n\n\n<li>Unikanie bazowania wy\u0142\u0105cznie na kolorze przy przekazywaniu informacji.<sup>[49]<\/sup><\/li>\n\n\n\n<li>U\u017cywanie \u0142agodnych przej\u015b\u0107 mi\u0119dzy slajdami.<sup>[54]<\/sup><\/li>\n<\/ul>\n\n\n\n<p><strong>Udost\u0119pnianie:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Analogicznie jak w cz\u0119\u015bci dot. Worda. <\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>WCAG w aspekcie HTML<\/strong><\/h2>\n\n\n\n<p>Semantyczny HTML stanowi fundament dost\u0119pno\u015bci internetowej. Odpowiednie u\u017cycie element\u00f3w HTML sprawia, \u017ce tre\u015b\u0107 jest zrozumia\u0142a zar\u00f3wno dla u\u017cytkownik\u00f3w, jak i technologii asystuj\u0105cych.<sup>[55, 56]<\/sup><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Semantyczne elementy HTML5<\/strong><\/h3>\n\n\n\n<p><strong>Landmarki strukturalne:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>&lt;header&gt;<\/code> \u2013 nag\u0142\u00f3wek strony lub sekcji.<\/li>\n\n\n\n<li><code>&lt;nav&gt;<\/code> \u2013 nawigacja g\u0142\u00f3wna.<\/li>\n\n\n\n<li><code>&lt;main&gt;<\/code> \u2013 g\u0142\u00f3wna tre\u015b\u0107 strony.<\/li>\n\n\n\n<li><code>&lt;aside&gt;<\/code> \u2013 tre\u015b\u0107 dodatkowa\/sidebar.<\/li>\n\n\n\n<li><code>&lt;footer&gt;<\/code> \u2013 stopka dokumentu.<\/li>\n\n\n\n<li><code>&lt;section&gt;<\/code> \u2013 logiczne sekcje tre\u015bci.<\/li>\n\n\n\n<li><code>&lt;article&gt;<\/code> \u2013 samodzielne artyku\u0142y.<\/li>\n<\/ul>\n\n\n\n<p><strong>Nag\u0142\u00f3wki i struktura:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Hierarchiczne u\u017cycie <code>&lt;h1&gt;<\/code> do <code>&lt;h6&gt;<\/code>.<\/li>\n\n\n\n<li>Jeden <code>&lt;h1&gt;<\/code> na stron\u0119.<\/li>\n\n\n\n<li>Niepomijanie poziom\u00f3w nag\u0142\u00f3wk\u00f3w.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Responsywna typografia<\/strong><\/h3>\n\n\n\n<p>Opieranie si\u0119 wy\u0142\u0105cznie na jednostkach viewport (vw\/vh) mo\u017ce nie spe\u0142nia\u0107 kryteri\u00f3w WCAG dotycz\u0105cych powi\u0119kszania tekstu do 200% bez wykorzystania technologii asystuj\u0105cych. Wskazanym podej\u015bciem jest kombinacja jednostek rem i vw, kt\u00f3ra zachowuje responsywno\u015b\u0107 rozmiaru tekstu wzgl\u0119dem szeroko\u015bci ekranu oraz preferencje powi\u0119kszenia.<sup>[57]<\/sup><\/p>\n\n\n\n<p>Warto w tym miejscu wspomnie\u0107, \u017ce zaleca si\u0119 u\u017cywanie czcionek bezszeryfowych, poniewa\u017c ich prosta, nieozdobiona forma jest bardziej czytelna dla os\u00f3b z wadami wzroku. Do takich font\u00f3w nale\u017c\u0105 m.in.: Arial, Tahoma, Helvetica i Verdana.<sup>[58]<\/sup><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Dost\u0119pne formularze<\/strong><\/h3>\n\n\n\n<p>Formularze wymagaj\u0105 szczeg\u00f3lnej uwagi ze wzgl\u0119du na interaktywno\u015b\u0107:<\/p>\n\n\n\n<p><strong>Etykiety i pola z adnotacj\u0105 o wymagalno\u015bci:<\/strong><\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: xml; title: ; notranslate\" title=\"\">\n&lt;label for=&quot;email&quot;&gt; \n  Adres e-mail \n  &lt;span class=&quot;sr-only&quot;&gt;wymagane&lt;\/span&gt; \n  &lt;span aria-hidden=&quot;true&quot;&gt;*&lt;\/span&gt; \n&lt;\/label&gt; \n&lt;input type=&quot;email&quot; id=&quot;email&quot; required \/&gt; \n<\/pre><\/div>\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: xml; title: ; notranslate\" title=\"\">\n.sr-only {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  overflow: hidden;\n  clip: rect(0 0 0 0);\n  white-space: nowrap;\n  border: 0;\n}\n<\/pre><\/div>\n\n\n<ul class=\"wp-block-list\">\n<li>Atrybut <code>for=\"email\"<\/code> w <code>&lt;label&gt;<\/code> odpowiada <code>id=\"email\"<\/code> w <code>&lt;input&gt;<\/code>, umo\u017cliwiaj\u0105c technologiom wspomagaj\u0105cym skojarzy\u0107, \u017ce etykieta \u201eAdres e-mail\u201d dotyczy tego konkretnego pola.<\/li>\n\n\n\n<li>Typ pola \u201eemail\u201d wymusza poprawny format adresu e-mail.<\/li>\n\n\n\n<li>Pierwszy element <code>&lt;span&gt;<\/code> jest niewidoczny, ale jest odczytywany przez czytnik, informuj\u0105c o tym, \u017ce pole jest wymagane.<\/li>\n\n\n\n<li>Drugi element <code>&lt;span&gt;<\/code> jest widoczny, jednak jest on ignorowany przez technologie asystuj\u0105ce.<\/li>\n<\/ul>\n\n\n\n<p><strong>Grupy p\u00f3l:<\/strong><\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: xml; title: ; notranslate\" title=\"\">\n&lt;fieldset&gt;\n  &lt;legend&gt;Dane osobowe&lt;\/legend&gt;\n  &lt;!-- pola formularza --&gt;\n&lt;\/fieldset&gt;\n<\/pre><\/div>\n\n\n<ul class=\"wp-block-list\">\n<li><code>&lt;fieldset&gt;<\/code> grupuje powi\u0105zane pola formularza w logiczn\u0105 ca\u0142o\u015b\u0107. Z kolei, <code>&lt;legend&gt;<\/code> opisuje, czego dotyczy dana grupa p\u00f3l.<\/li>\n\n\n\n<li>Czytniki anonsuj\u0105 <code>&lt;legend&gt;<\/code> jako nag\u0142\u00f3wek grupy p\u00f3l, dzi\u0119ki czemu u\u017cytkownicy maj\u0105 lepszy kontekst, do czego dane pole nale\u017cy.<\/li>\n<\/ul>\n\n\n\n<p><strong>Komunikaty b\u0142\u0119d\u00f3w:<\/strong><\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: xml; title: ; notranslate\" title=\"\">\n&lt;input type=&quot;email&quot; id=&quot;email&quot; required aria-describedby=&quot;error-email&quot; \/&gt;\n&lt;div role=&quot;alert&quot; id=&quot;error-email&quot;&gt;\n  Prosz\u0119 poda\u0107 prawid\u0142owy adres e-mail\n&lt;\/div&gt;\n<\/pre><\/div>\n\n\n<ul class=\"wp-block-list\">\n<li><code>role=\"alert\"<\/code> to rola ARIA (opisana szerzej w rozdziale WAI-ARIA), kt\u00f3ra powoduje automatyczne wywo\u0142anie komunikatu przez czytnik bez potrzeby interakcji u\u017cytkownika.<\/li>\n\n\n\n<li>Komunikat \u201eProsz\u0119 poda\u0107 prawid\u0142owy adres e-mail\u201d jest zrozumia\u0142y i odnosi si\u0119 bezpo\u015brednio do b\u0142\u0119du.<\/li>\n\n\n\n<li>Tag z tre\u015bci\u0105 alertu powinien by\u0107 powi\u0105zany z polem wywo\u0142uj\u0105cym alert za po\u015brednictwem <code>aria-describedby.<\/code><\/li>\n<\/ul>\n\n\n\n<p><strong>Autouzupe\u0142nianie dla danych osobowych:<\/strong><\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: xml; title: ; notranslate\" title=\"\">\n&lt;label for=&quot;first-name&quot;&gt;Imi\u0119&lt;\/label&gt;\n&lt;input id=&quot;first-name&quot; type=&quot;text&quot; autocomplete=&quot;given-name&quot; \/&gt;\n\n&lt;label for=&quot;last-name&quot;&gt;Nazwisko&lt;\/label&gt;\n&lt;input id=&quot;last-name&quot; type=&quot;text&quot; autocomplete=&quot;family-name&quot; \/&gt;\n\n&lt;label for=&quot;email&quot;&gt;E-mail&lt;\/label&gt;\n&lt;input id=&quot;email&quot; type=&quot;email&quot; autocomplete=&quot;email&quot; \/&gt;\n\n&lt;label for=&quot;phone&quot;&gt;Telefon&lt;\/label&gt;\n&lt;input id=&quot;phone&quot; type=&quot;tel&quot; autocomplete=&quot;tel&quot; \/&gt;\n<\/pre><\/div>\n\n\n<ul class=\"wp-block-list\">\n<li>Atrybut <code>autocomplete<\/code> pozwala automatycznie wype\u0142ni\u0107 dane.<\/li>\n<\/ul>\n\n\n\n<p><strong>Informacje o formatach:<\/strong><\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: xml; title: ; notranslate\" title=\"\">\n&lt;label for=&quot;phone&quot;&gt;\n  Numer telefonu\n  &lt;span aria-hidden=&quot;true&quot;&gt;xxx xxx xxx&lt;\/span&gt;\n  &lt;span class=&quot;sr-only&quot;&gt;trzy cyfry spacja trzy cyfry spacja trzy cyfry&lt;\/span&gt;\n&lt;\/label&gt;\n<\/pre><\/div>\n\n\n<ul class=\"wp-block-list\">\n<li>Pierwszy element <code>&lt;span&gt;<\/code> stanowi sugesti\u0119 formatu dla u\u017cytkownik\u00f3w widz\u0105cych. Atrybut <code>aria-hidden=\"true\"<\/code> ukrywa ten tekst przed czytnikiem.<\/li>\n\n\n\n<li>Drugi element <code>&lt;span&gt;<\/code> zawiera alternatywny opis formatu przeznaczony dla u\u017cytkownik\u00f3w niewidomych.<\/li>\n\n\n\n<li>Klasa \u201esr-only\u201d sprawia, \u017ce tekst jest niewidoczny, ale odczytywany przez aplikacje asystuj\u0105ce (wi\u0119cej na ten temat znajdziesz w rozdziale: Etykiety i pola z adnotacj\u0105 o wymagalno\u015bci).<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Dost\u0119pne linki<\/strong><\/h3>\n\n\n\n<p><strong>Opisowe teksty link\u00f3w:<\/strong><\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: xml; title: ; notranslate\" title=\"\">\n&lt;!-- \u0179le --&gt;\n&lt;a href=&quot;raport.pdf&quot;&gt;Kliknij tutaj&lt;\/a&gt;\n\n&lt;!-- Dobrze --&gt;\n&lt;a href=&quot;raport.pdf&quot;&gt;Pobierz roczny raport finansowy (PDF, 2MB)&lt;\/a&gt;\n<\/pre><\/div>\n\n\n<ul class=\"wp-block-list\">\n<li>Opis linku jest jasny oraz informuje o formacie i rozmiarze pliku.<\/li>\n<\/ul>\n\n\n\n<p><strong>Informowanie o otwarciu w nowym oknie:<\/strong><\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: xml; title: ; notranslate\" title=\"\">\n&lt;a href=&quot;...&quot; target=&quot;_blank&quot; title=&quot;Otwarcie w nowym oknie&quot;&gt;...&lt;\/a&gt;\n<\/pre><\/div>\n\n\n<ul class=\"wp-block-list\">\n<li>Nale\u017cy poinformowa\u0107 u\u017cytkownika, \u017ce przej\u015bcie w podany link nast\u0105pi w nowym oknie.<\/li>\n\n\n\n<li>Nie dubluje si\u0119 informacji z podlinkowanego tekstu w atrybucie <code>title.<\/code><\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Skip linki<\/strong><\/h3>\n\n\n\n<p>Za\u0142\u00f3\u017cmy, \u017ce strona sk\u0142ada si\u0119 z rozbudowanego menu, lewego panelu z wyszukiwark\u0105 oraz cz\u0119\u015bci centralnej zawieraj\u0105cej g\u0142\u00f3wn\u0105 tre\u015b\u0107. W celu przej\u015bcia do g\u0142\u00f3wnej tre\u015bci konieczne jest kilkudziesi\u0119tne u\u017cycie klawisza <code>Tab<\/code>. Problem ten rozwi\u0105zuj\u0105 skip linki.<sup>[59]<\/sup> Domy\u015blnie s\u0105 one ukryte. Oznacza to, \u017ce pojawiaj\u0105 si\u0119 dopiero w momencie u\u017cycia klawiatury i umo\u017cliwiaj\u0105 bezpo\u015brednie przej\u015bcie (w opisanym przypadku) do panelu lub cz\u0119\u015bci centralnej, pomijaj\u0105c rozbudowane menu.<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: xml; title: ; notranslate\" title=\"\">\n&lt;a href=&quot;#main-content&quot; class=&quot;skip-link&quot;&gt;\n  Przejd\u017a do g\u0142\u00f3wnej tre\u015bci\n&lt;\/a&gt;\n<\/pre><\/div>\n\n\n<p>Skip link jest domy\u015blnie przesuni\u0119ty poza obszar widzialny, np.: <code>left: -999em;<\/code>, <code>position: absolute;<\/code> oraz ma ustawion\u0105 pe\u0142n\u0105 przezroczysto\u015b\u0107. Stan zaznaczenia (fokus) dostosowuje style w celu wy\u015bwietlenia skip linku.<sup>[59]<\/sup><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Dost\u0119pne przyciski<\/strong><\/h3>\n\n\n\n<p><strong>Podstawowy przycisk:<\/strong><\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: xml; title: ; notranslate\" title=\"\">\n&lt;button type=&quot;button&quot;&gt;Zapisz&lt;\/button&gt;\n\n&lt;button aria-label=&quot;Wyszukaj na stronie&quot;&gt;Wyszukaj&lt;\/button&gt;\n<\/pre><\/div>\n\n\n<ul class=\"wp-block-list\">\n<li>Etykieta tekstowa powinna by\u0107 czytelna i jednoznacznie okre\u015bla\u0107 dzia\u0142anie przycisku.<\/li>\n\n\n\n<li>Zaleca si\u0119, aby przyciski by\u0142y wystarczaj\u0105co du\u017ce \u2013 minimum 44&#215;44 px \u2013 oraz oddzielone od siebie odst\u0119pem wynosz\u0105cym minimum 8 px.<sup>[60]<\/sup><\/li>\n\n\n\n<li>U\u017cycie <code>aria-label<\/code> sprawia, \u017ce czytnik pomija widoczn\u0105 etykiet\u0119 tekstow\u0105 (przeczyta tylko \u201eWyszukaj na stronie\u201d).\n<ul class=\"wp-block-list\">\n<li>Z tego powodu, zawarto\u015b\u0107 <code>aria-label<\/code> musi zaczyna\u0107 si\u0119 od s\u0142owa, kt\u00f3re jest widoczne na przycisku.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<p><strong>Przycisk b\u0119d\u0105cy linkiem:<\/strong><\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: xml; title: ; notranslate\" title=\"\">\n&lt;a href=&quot;...&quot;&gt;\n  &lt;span class=&quot;sr-only&quot;&gt;Czytaj&lt;\/span&gt;\n  &lt;span&gt;Wi\u0119cej&lt;\/span&gt;\n  &lt;span class=&quot;sr-only&quot;&gt;o: Najciekawsze miejsca na \u015bwiecie&lt;\/span&gt;\n&lt;\/a&gt;\n<\/pre><\/div>\n\n\n<ul class=\"wp-block-list\">\n<li>Je\u017celi etykieta tekstowa jest ma\u0142o precyzyjna, mo\u017cna j\u0105 wzbogaci\u0107 za pomoc\u0105 dodatkowych fraz widocznych tylko dla technologii asystuj\u0105cych.<\/li>\n\n\n\n<li>Dla powy\u017cszego przyk\u0142adu:\n<ul class=\"wp-block-list\">\n<li>widoczny b\u0119dzie wy\u0142\u0105cznie napis \u201eWi\u0119cej\u201d,<\/li>\n\n\n\n<li>natomiast czytnik wypowie \u201eCzytaj wi\u0119cej o najciekawsze miejsca na \u015bwiecie\u201d.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Klasa \u201esr-only\u201d sprawia, \u017ce tekst jest niewidoczny, ale odczytywany przez aplikacje asystuj\u0105ce (wi\u0119cej na ten temat znajdziesz w rozdziale: Etykiety i pola z adnotacj\u0105 o wymagalno\u015bci).<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Dost\u0119pne obrazy<\/strong><\/h3>\n\n\n\n<p><strong>Obraz informacyjny:<\/strong><\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: xml; title: ; notranslate\" title=\"\">\n&lt;img src=&quot;wykres.png&quot; alt=&quot;Sprzeda\u017c wzros\u0142a o 25% w 2023 roku&quot; \/&gt;\n<\/pre><\/div>\n\n\n<ul class=\"wp-block-list\">\n<li>Obraz przedstawiaj\u0105cy istotn\u0105 informacj\u0119 musi posiada\u0107 tekst alternatywny zawieraj\u0105cy kr\u00f3tkie, zrozumia\u0142e podsumowanie prezentowanych tre\u015bci.<\/li>\n\n\n\n<li>Szczeg\u00f3\u0142owe informacje (w przypadku mapy lub wykresu) nale\u017cy zawrze\u0107 pod grafik\u0105 w formie tabeli lub s\u0142ownie w tek\u015bcie dla prostej tre\u015bci.<\/li>\n<\/ul>\n\n\n\n<p><strong>Obraz dekoracyjny:<\/strong><\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: xml; title: ; notranslate\" title=\"\">\n&lt;img src=&quot;dekoracja.png&quot; alt=&quot;&quot; role=&quot;presentation&quot; \/&gt;\n<\/pre><\/div>\n\n\n<ul class=\"wp-block-list\">\n<li>Obraz, kt\u00f3ry nie wnosi \u017cadnej istotnej informacji, nale\u017cy oznaczy\u0107 jako dekoracyjny, ustawiaj\u0105c przynajmniej pusty atrybut <code>alt.<\/code><\/li>\n<\/ul>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: xml; title: ; notranslate\" title=\"\">\n&lt;div aria-hidden=&quot;true&quot;&gt;\n  &lt;svg&gt;...&lt;\/svg&gt;\n&lt;\/div&gt;\n<\/pre><\/div>\n\n\n<ul class=\"wp-block-list\">\n<li>Elementy <code>&lt;svg&gt;<\/code> dobrze jest ukry\u0107 przed aplikacjami asystuj\u0105cymi.<\/li>\n<\/ul>\n\n\n\n<p><strong>Obraz b\u0119d\u0105cy linkiem:<\/strong><\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: xml; title: ; notranslate\" title=\"\">\n&lt;a href=&quot;...&quot;&gt;\n  &lt;img src=&quot;...&quot; alt=&quot;Nasz profil na YouTube&quot; \/&gt;\n&lt;\/a&gt;\n<\/pre><\/div>\n\n\n<ul class=\"wp-block-list\">\n<li>Obraz pe\u0142ni\u0105cy rol\u0119 linku (np. logo prowadz\u0105ce na konkretn\u0105 stron\u0119) powinien zawiera\u0107 adekwatny tekst alternatywny, kt\u00f3ry nie b\u0119dzie opisywa\u0107 zawarto\u015bci obrazu.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Dost\u0119pne ikony<\/strong><\/h3>\n\n\n\n<p><strong>Ikona w stopce b\u0119d\u0105ca linkiem:<\/strong><\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: xml; title: ; notranslate\" title=\"\">\n&lt;a href=&quot;...&quot;&gt;\n  &lt;span class=&quot;sr-only&quot;&gt;Nasz profil na Facebook&lt;\/span&gt;\n  &lt;i class=&quot;...&quot; aria-hidden=&quot;true&quot;&gt;...&lt;\/i&gt;\n&lt;\/a&gt;\n<\/pre><\/div>\n\n\n<ul class=\"wp-block-list\">\n<li>Ikona jest opatrzona etykiet\u0105 widoczn\u0105 tylko dla czytnika.<\/li>\n\n\n\n<li>Klasa \u201esr-only\u201d sprawia, \u017ce tekst jest niewidoczny, ale odczytywany przez aplikacje asystuj\u0105ce (wi\u0119cej na ten temat znajdziesz w rozdziale: Etykiety i pola z adnotacj\u0105 o wymagalno\u015bci).<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Dost\u0119pne tooltipy<\/strong><\/h3>\n\n\n\n<p>Po umieszczeniu kursora na tooltipie, pojawia si\u0119 podpowied\u017a w postaci \u201edymku\u201d zawieraj\u0105cego tekst. Tooltip mo\u017cna uzna\u0107 za dost\u0119pny:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>gdy po przesuni\u0119ciu kursora z tooltipa na podpowied\u017a, podpowied\u017a jest nadal wy\u015bwietlana<\/li>\n\n\n\n<li>oraz gdy po naci\u015bni\u0119ciu klawisza <code>Esc<\/code>, podpowied\u017a znika.<sup>[61]<\/sup><\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Dost\u0119pne slidery<\/strong><\/h3>\n\n\n\n<p>Sliderem (lub karuzel\u0105) nazywa si\u0119 komponent UI, kt\u00f3ry umo\u017cliwia przegl\u0105danie wielu zdj\u0119\u0107 lub tre\u015bci w obr\u0119bie jednego widocznego obszaru. Dost\u0119pny slider:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>umo\u017cliwia przesuwanie zawarto\u015bci gestem przesuni\u0119cia (swipe)<\/li>\n\n\n\n<li>oraz posiada przyciski odpowiedzialne za przesuwanie.<sup>[62]<\/sup><\/li>\n<\/ul>\n\n\n\n<p>Je\u017celi slider posiada funkcj\u0119 automatycznego przesuwania, powinna by\u0107 wprowadzona mo\u017cliwo\u015b\u0107 zatrzymania tej funkcji.<sup>[63]<\/sup><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Dost\u0119pne materia\u0142y audio<\/strong><\/h3>\n\n\n\n<p>Materia\u0142y audio powinny posiada\u0107 transkrypcj\u0119 tekstow\u0105 (napisy) w postaci np.: osobnej podstrony lub sekcji z transkrypcj\u0105 lub osobnego dokumentu.<sup>[64]<\/sup><\/p>\n\n\n\n<p>Nie nale\u017cy wprowadza\u0107 funkcji automatycznego odtwarzania, poniewa\u017c spowoduje to na\u0142o\u017cenie si\u0119 d\u017awi\u0119ku na syntezator mowy czytnika.<sup>[65]<\/sup><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Dost\u0119pne materia\u0142y wideo<\/strong><\/h3>\n\n\n\n<p>Materia\u0142y wideo powinny zawiera\u0107:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>napisy rozszerzone, czyli:\n<ul class=\"wp-block-list\">\n<li>transkrypcj\u0119 tekstow\u0105 wraz z informacjami wa\u017cnymi dla zrozumienia fabu\u0142y<\/li>\n\n\n\n<li>oraz audiodeskrypcj\u0119 \u2013 lektor opisuje, co si\u0119 dzieje w danej chwili na ekranie<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>lub dokument tekstowy z audiodeskrypcj\u0105<\/li>\n\n\n\n<li>lub transkrypcj\u0119 tekstow\u0105 \u2013 tak\u0105 jak w przypadku materia\u0142\u00f3w audio.<sup>[66]<\/sup><\/li>\n<\/ul>\n\n\n\n<p>Je\u017celi zawarto\u015b\u0107 materia\u0142u wideo zosta\u0142a opisana w tek\u015bcie (np. w artykule opisuj\u0105cym udost\u0119pniony materia\u0142 wideo), w\u00f3wczas zapewnienie powy\u017cszych alternatyw nie jest konieczne.<sup>[67]<\/sup><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Zmiana odczytywanego j\u0119zyka<\/strong><\/h3>\n\n\n\n<p><strong>Dla pojedynczego s\u0142owa:<\/strong><\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: xml; title: ; notranslate\" title=\"\">\n&lt;p&gt;... u\u017cywamy plik\u00f3w &lt;span lang=&quot;en&quot;&gt;cookies&lt;\/span&gt;.&lt;\/p&gt;\n<\/pre><\/div>\n\n\n<ul class=\"wp-block-list\">\n<li>Zak\u0142adaj\u0105c, \u017ce strona ma ustawiony j\u0119zyk polski za pomoc\u0105 <code>&lt;html lang=\"pl\"&gt;<\/code>, s\u0142owo \u201ecookies\u201d zostanie przeczytane z poprawn\u0105 angielsk\u0105 wymow\u0105. Natomiast reszta zdania \u2013 po polsku.<\/li>\n<\/ul>\n\n\n\n<p><strong>Dla wskazanego obszaru:<\/strong><\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: xml; title: ; notranslate\" title=\"\">\n&lt;a lang=&quot;en&quot; href=&quot;...&quot;&gt;\n  &lt;img alt=&quot;English version&quot; src=&quot;...&quot; \/&gt;\n&lt;\/a&gt;\n\n&lt;blockquote lang=&quot;en&quot;&gt;\n  &lt;p&gt;...&lt;\/p&gt;\n&lt;\/blockquote&gt;\n<\/pre><\/div>\n\n\n<ul class=\"wp-block-list\">\n<li>Podobnie jak w poprzednim przyk\u0142adzie, wn\u0119trze tag\u00f3w z atrybutem <code>lang=\"en\"<\/code> zostanie przeczytane z angielsk\u0105 wymow\u0105.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>WAI-ARIA<\/strong><\/h2>\n\n\n\n<p>WAI-ARIA (Web Accessibility Initiative \u2013 Accessible Rich Internet Applications) to specyfikacja W3C, kt\u00f3ra rozszerza mo\u017cliwo\u015bci HTML o dodatkowe role, w\u0142a\u015bciwo\u015bci i stany, umo\u017cliwiaj\u0105c tworzenie bardziej dost\u0119pnych aplikacji internetowych.<sup>[68, 69]<\/sup><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Podstawowe zasady ARIA<\/strong><\/h3>\n\n\n\n<p><strong>Pi\u0119\u0107 g\u0142\u00f3wnych zasad ARIA:<\/strong><sup>[68, 69]<\/sup><\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Nie u\u017cywaj ARIA, je\u015bli mo\u017cna osi\u0105gn\u0105\u0107 to samo natywnym HTML.<\/li>\n\n\n\n<li>Nie zmieniaj semantyki natywnych element\u00f3w HTML.<\/li>\n\n\n\n<li>Wszystkie interaktywne elementy ARIA musz\u0105 by\u0107 dost\u0119pne z poziomu klawiatury.<\/li>\n\n\n\n<li>Nie ukrywaj element\u00f3w fokusowalnych.<\/li>\n\n\n\n<li>Wszystkie interaktywne elementy musz\u0105 mie\u0107 dost\u0119pn\u0105 nazw\u0119.<\/li>\n<\/ol>\n\n\n\n<p>W\u0142a\u015bciwo\u015b\u0107 \u201edost\u0119pnej nazwy\u201d mo\u017cna zilustrowa\u0107 na przyk\u0142adzie przycisku \u201eOK\u201d. Tekst \u201eOK\u201d jest dost\u0119pn\u0105 nazw\u0105. Gdy na przycisku znajdzie si\u0119 fokus, technologie asystuj\u0105ce mog\u0105 po\u0142\u0105czy\u0107 opis roli z dost\u0119pn\u0105 nazw\u0105. W\u00f3wczas czytnik ekranowy mo\u017ce wypowiedzie\u0107 \u201eprzycisk OK\u201d lub \u201eOK przycisk\u201d. Kolejno\u015b\u0107 \u0142\u0105czenia oraz szczeg\u00f3\u0142y roli s\u0105 okre\u015blane przez technologie asystuj\u0105ce.<sup>[69]<\/sup><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Role, w\u0142a\u015bciwo\u015bci i statusy<\/strong><\/h3>\n\n\n\n<p><strong>Wybrane role ARIA:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>role=\"alert\"<\/code> \u2013 rola ostrze\u017cenia (wi\u0119cej w rozdziale: Komunikat b\u0142\u0119du).<\/li>\n\n\n\n<li><code>role=\"status\"<\/code> \u2013 rola komunikatu (wi\u0119cej w rozdziale: Komunikat powodzenia).<\/li>\n\n\n\n<li><code>role=\"button\"<\/code> \u2013 rola przycisku (to zapewnia u\u017cycie tagu HTML <code>&lt;button&gt;<\/code>).<\/li>\n\n\n\n<li><code>role=\"checkbox\"<\/code> \u2013 rola checkboxa (to zapewnia u\u017cycie tagu HTML <code>&lt;input type=\"checkbox\" \/&gt;<\/code>, wi\u0119cej w rozdziale: Niestandardowy checkbox).<\/li>\n\n\n\n<li><code>role=\"dialog\"<\/code> \u2013 rola okna dialogowego (wi\u0119cej w rozdziale: Okno dialogowe\/Modal).<\/li>\n\n\n\n<li><code>role=\"progressbar\"<\/code> \u2013 rola paska post\u0119pu (wi\u0119cej w rozdziale: Pasek post\u0119pu).<\/li>\n\n\n\n<li><code>role=\"slider\"<\/code> \u2013 rola suwaka (to zapewnia u\u017cycie tagu HTML <code>&lt;input type=\"range\" \/&gt;<\/code>, wi\u0119cej w rozdziale: Niestandardowy suwak).<\/li>\n\n\n\n<li><code>role=\"tablist\"<\/code>, <code>role=\"tab\"<\/code>, <code>role=\"tabpanel\"<\/code> \u2013 rola zak\u0142adki (wi\u0119cej w rozdziale: Zak\u0142adki).<\/li>\n\n\n\n<li>r<code>ole=\"banner\"<\/code> \u2013 rola baneru (to zapewnia u\u017cycie tagu HTML <code>&lt;header \/&gt;<\/code>).<\/li>\n\n\n\n<li><code>role=\"complementary\"<\/code> \u2013 rola panelu bocznego (to zapewnia u\u017cycie tagu HTML <code>&lt;aside \/&gt;<\/code>).<\/li>\n\n\n\n<li><code>role=\"contentinfo\"<\/code> \u2013 rola stopki (to zapewnia u\u017cycie tagu HTML <code>&lt;footer \/&gt;<\/code>).<\/li>\n\n\n\n<li><code>role=\"form\" <\/code>\u2013 rola formularza (to zapewnia u\u017cycie tagu HTML <code>&lt;form \/&gt;<\/code>).<\/li>\n\n\n\n<li><code>role=\"main\"<\/code> \u2013 rola zawarto\u015bci g\u0142\u00f3wnej (to zapewnia u\u017cycie tagu HTML <code>&lt;main \/&gt;<\/code>).<\/li>\n\n\n\n<li><code>role=\"navigation\"<\/code> \u2013 rola nawigacji (to zapewnia u\u017cycie tagu HTML <code>&lt;nav \/&gt;<\/code>).<\/li>\n\n\n\n<li><code>role=\"menu\" <\/code>\u2013 rola menu (wi\u0119cej w rozdziale: Rozwijane menu).<\/li>\n\n\n\n<li><code>role=\"search\" <\/code>\u2013 rola wyszukiwarki (wi\u0119cej w rozdziale: Wyszukiwarka).<\/li>\n\n\n\n<li><code>role=\"application\"<\/code> \u2013 ta rola oznacza, \u017ce w danym obszarze b\u0119d\u0105 obowi\u0105zywa\u0107 skr\u00f3ty klawiaturowe zdefiniowane przez autor\u00f3w strony\/aplikacji (wi\u0119cej w rozdziale: Tryb aplikacji).<\/li>\n<\/ul>\n\n\n\n<p><strong>Wybrane w\u0142a\u015bciwo\u015bci ARIA:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>aria-labelledby=\"...\"<\/code> \u2013 w\u0142a\u015bciwo\u015b\u0107 s\u0142u\u017c\u0105ca do skojarzenia tre\u015bci ze wskazanym elementem (wi\u0119cej w rozdziale: Okno dialogowe\/Modal).<\/li>\n\n\n\n<li><code>aria-describedby=\"...\"<\/code> \u2013 w\u0142a\u015bciwo\u015b\u0107 pozwalaj\u0105ca na powi\u0105zanie dodatkowego opisu (wi\u0119cej w rozdziale: Podpi\u0119cie informacji dotycz\u0105cej pola edycji).<\/li>\n\n\n\n<li><code>aria-label=\"...\"<\/code> \u2013 w\u0142a\u015bciwo\u015b\u0107 dla etykiety tekstowej (wi\u0119cej w rozdziale: Przycisk zamykania).<\/li>\n\n\n\n<li><code>aria-haspopup=\"...\" <\/code>\u2013 w\u0142a\u015bciwo\u015b\u0107 informuj\u0105ca o tym, czy element jest rozwijany (wi\u0119cej w rozdziale: Rozwijane menu).<\/li>\n\n\n\n<li><code>aria-controls=\"...\"<\/code> \u2013 w\u0142a\u015bciwo\u015b\u0107 wskazuj\u0105ca, kt\u00f3ry element jest sterowany przez jaki element (wi\u0119cej w rozdziale: Zak\u0142adki).<\/li>\n\n\n\n<li><code>aria-atomic=\"...\"<\/code> \u2013 w\u0142a\u015bciwo\u015b\u0107 dotycz\u0105ca sposobu og\u0142aszania zmian tre\u015bci dynamicznej \u2013 szczeg\u00f3lnie w kontek\u015bcie <code>aria-live<\/code> (wi\u0119cej w rozdziale: Dynamiczny obszar).<\/li>\n\n\n\n<li><code>aria-live=\"...\"<\/code> \u2013 w\u0142a\u015bciwo\u015b\u0107 pozwalaj\u0105ca nas\u0142uchiwa\u0107 na zmian\u0119 zawarto\u015bci elementu (wi\u0119cej w rozdziale: Dynamiczny obszar).<\/li>\n\n\n\n<li><code>aria-setsize=\"...\"<\/code> \u2013 w\u0142a\u015bciwo\u015b\u0107 okre\u015blaj\u0105ca ca\u0142kowit\u0105 liczb\u0119 element\u00f3w w zestawie (wi\u0119cej w rozdziale: Dynamiczna lista).<\/li>\n\n\n\n<li><code>aria-posinset=\"...\"<\/code> \u2013 w\u0142a\u015bciwo\u015b\u0107 informuj\u0105ca o pozycji konkretnego elementu wzgl\u0119dem ca\u0142ego zbioru (wi\u0119cej w rozdziale: Dynamiczna lista).<\/li>\n\n\n\n<li><code>aria-sort=\"...\"<\/code> \u2013 w\u0142a\u015bciwo\u015b\u0107 informuj\u0105ca o sposobie sortowania \u2013 zazwyczaj danych w kolumnie tabeli (wi\u0119cej w rozdziale: Tabela sortowalna).<\/li>\n<\/ul>\n\n\n\n<p><strong>Wybrane stany ARIA:<\/strong><\/p>\n\n\n\n<p>W odr\u00f3\u017cnieniu od w\u0142a\u015bciwo\u015bci ARIA, stany mog\u0105 przyj\u0105\u0107 wy\u0142\u0105cznie warto\u015bci <code>true<\/code> lub <code>false<\/code>:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>aria-checked=\"...\"<\/code> \u2013 stan informuj\u0105cy o zaznaczeniu (to zapewnia u\u017cycie tagu HTML <code>&lt;input type=\"checkbox\" \/&gt;<\/code>).<\/li>\n\n\n\n<li><code>aria-selected=\"...\"<\/code> \u2013 stan pozwalaj\u0105cy wskaza\u0107, czy dany element w zbiorze opcji jest wybrany (wi\u0119cej w rozdziale: Zak\u0142adki).<\/li>\n\n\n\n<li><code>aria-expanded=\"...\"<\/code> \u2013 stan pozwalaj\u0105cy wskaza\u0107, czy element jest aktualnie zwini\u0119ty lub rozwini\u0119ty (wi\u0119cej w rozdziale: Rozwijane menu).<\/li>\n\n\n\n<li><code>aria-hidden=\"...\"<\/code> \u2013 stan ukrywaj\u0105cy element przed technologi\u0105 asystuj\u0105c\u0105 (wi\u0119cej w rozdziale: Tre\u015bci dekoracyjne).<\/li>\n\n\n\n<li><code>aria-invalid=\"...\"<\/code> \u2013 stan informuj\u0105cy, czy warto\u015b\u0107 pola formularza jest b\u0142\u0119dna lub nie przechodzi walidacji (wi\u0119cej w rozdziale: Komunikat b\u0142\u0119du).<\/li>\n\n\n\n<li><code>aria-modal=\"...\"<\/code> \u2013 stan okre\u015blaj\u0105cy, czy okno dialogowe jest modalne (wi\u0119cej w rozdziale: Okno dialogowe\/Modal).<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Przyk\u0142ady u\u017cycia WAI-ARIA<\/strong><\/h3>\n\n\n\n<p>W niniejszej sekcji zaprezentuj\u0119 praktyczne przyk\u0142ady wykorzystania atrybut\u00f3w ARIA w celu poprawy dost\u0119pno\u015bci dynamicznych komponent\u00f3w interfejsu u\u017cytkownika.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Komunikat b\u0142\u0119du<\/strong><\/h4>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: xml; title: ; notranslate\" title=\"\">\n&lt;div role=&quot;alert&quot;&gt;\n  Formularz zawiera b\u0142\u0119dy!\n&lt;\/div&gt;\n<\/pre><\/div>\n\n\n<p>Powy\u017cszy fragment kodu dotyczy ostrze\u017cenia zbiorczego. Je\u017celi natomiast przej\u015bcie do nast\u0119pnego pola edycji powoduje wywo\u0142anie walidacji na polu poprzednim, warto zastosowa\u0107 ostrze\u017cenie dla pojedynczego pola edycji oraz powi\u0105za\u0107 to ostrze\u017cenie z odpowiednim polem za pomoc\u0105 <code>aria-describedby<\/code> oraz sterowa\u0107 warto\u015bci\u0105 atrybutu <code>aria-invalid<\/code> (kod poni\u017cej).<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: xml; title: ; notranslate\" title=\"\">\n&lt;label for=&quot;email&quot;&gt;Adres e-mail&lt;\/label&gt;\n&lt;input\n  type=&quot;email&quot;\n  id=&quot;email&quot;\n  required\n  aria-describedby=&quot;error email&quot;\n  aria-invalid=&quot;true&quot;\n\/&gt;\n&lt;div role=&quot;alert&quot; id=&quot;error-email&quot;&gt;\n  Prosz\u0119 poda\u0107 prawid\u0142owy adres e-mail\n&lt;\/div&gt;\n<\/pre><\/div>\n\n\n<h4 class=\"wp-block-heading\"><strong>Komunikat powodzenia<\/strong><\/h4>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: xml; title: ; notranslate\" title=\"\">\n&lt;div role=&quot;status&quot;&gt;\n  Konto zosta\u0142o za\u0142o\u017cone\n&lt;\/div&gt;\n<\/pre><\/div>\n\n\n<p>Tre\u015b\u0107 umieszczona wewn\u0105trz takiego elementu zostanie odczytana automatycznie, je\u017celi zosta\u0142a dodana dynamicznie po za\u0142adowaniu strony.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Okno dialogowe\/Modal<\/strong><\/h4>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: xml; title: ; notranslate\" title=\"\">\n&lt;div\n  ...\n  tabindex=&quot;-1&quot;\n  role=&quot;dialog&quot;\n  aria-labelledby=&quot;dialog-label&quot;\n  aria-describedby=&quot;dialog-desc&quot;\n  aria-modal=&quot;true&quot;\n&gt;\n  ...\n  &lt;h2 id=&quot;dialog-label&quot;&gt;...&lt;\/h2&gt;\n  ...\n  &lt;div id=&quot;dialog-desc&quot;&gt;...&lt;\/div&gt;\n&lt;\/div&gt;\n<\/pre><\/div>\n\n\n<p>Najpierw zostanie przeczytana zawarto\u015b\u0107 tagu wskazanego w <code>aria-labelledby<\/code>, a potem \u2013 z <code>aria-describedby<\/code>. Warto podkre\u015bli\u0107, \u017ce nie nale\u017cy stosowa\u0107 <code>aria-describedby<\/code>, je\u017celi w oknie dialogowym znajduje si\u0119 bardziej z\u0142o\u017cona zawarto\u015b\u0107 ni\u017c tekst (np. formularz).<sup>[70]<\/sup><\/p>\n\n\n\n<p>Atrybut <code>aria-modal<\/code> okre\u015bla, czy okno jest modalne, czyli czy wymaga interakcji u\u017cytkownika, gdy ten chce wr\u00f3ci\u0107 do reszty interfejsu, oraz czy reszta strony jest niedost\u0119pna w czasie wy\u015bwietlania takiego okna. Dodatkowo nale\u017cy zapewni\u0107 blokad\u0119 fokusu za pomoc\u0105 kodu JavaScript przed przej\u015bciem \u201epod\u201d okno modalne.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Pasek post\u0119pu<\/strong><\/h4>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: xml; title: ; notranslate\" title=\"\">\n&lt;!-- Wariant z sygna\u0142ami d\u017awi\u0119kowymi z czytnika --&gt;\n&lt;p ... id=&quot;pb-label&quot; role=&quot;alert&quot;&gt;&lt;\/p&gt;\n&lt;div\n  class=&quot;...&quot;\n  role=&quot;progressbar&quot;\n  aria-labelledby=&quot;pb-label&quot;\n  aria-valuenow=&quot;0&quot;\n  aria-valuemin=&quot;0&quot;\n  aria-valuemax=&quot;100&quot;\n&gt;\n  ...\n&lt;\/div&gt;\n<\/pre><\/div>\n\n\n<p>Kod JavaScript powinien:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>umieszcza\u0107 wewn\u0105trz paragrafu opatrzonego <code>role=\"alert\"<\/code> tre\u015b\u0107 stosown\u0105 do sytuacji, np.: (1) Trwa \u0142adowanie, (2) \u0141adowanie zatrzymane, (3) \u0141adowanie sko\u0144czone<\/li>\n\n\n\n<li>oraz aktualizowa\u0107 warto\u015b\u0107 <code>aria-valuenow<\/code>, aby informowa\u0107 czytnik o aktualnej warto\u015bci post\u0119pu, na podstawie kt\u00f3rej czytnik b\u0119dzie dobiera\u0107 odpowiedni\u0105 cz\u0119stotliwo\u015b\u0107 d\u017awi\u0119ku.<\/li>\n<\/ul>\n\n\n\n<p>Nie nale\u017cy stosowa\u0107 sygna\u0142\u00f3w d\u017awi\u0119kowych, je\u017celi pask\u00f3w post\u0119pu jest wi\u0119cej ni\u017c jeden, aby nie wprowadzi\u0107 chaosu.<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: xml; title: ; notranslate\" title=\"\">\n&lt;!-- Wariant bez sygna\u0142\u00f3w d\u017awi\u0119kowych z czytnika --&gt;\n&lt;p ... role=&quot;alert&quot;&gt;&lt;\/p&gt;\n&lt;div class=&quot;...&quot;&gt;...&lt;\/div&gt;\n<\/pre><\/div>\n\n\n<h4 class=\"wp-block-heading\"><strong>Niestandardowy suwak<\/strong><\/h4>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: xml; title: ; notranslate\" title=\"\">\n&lt;label id=&quot;volume-label&quot;&gt;G\u0142o\u015bno\u015b\u0107&lt;\/label&gt;\n&lt;div\n  ...\n  aria-labelledby=&quot;volume-label&quot;\n  tabindex=&quot;0&quot;\n  role=&quot;slider&quot;\n  aria-valuenow=&quot;50&quot;\n  aria-valuetext=&quot;50%&quot;\n  aria-valuemin=&quot;0&quot;\n  aria-valuemax=&quot;100&quot;\n&gt;\n  &lt;div class=&quot;...&quot; \/&gt;\n&lt;\/div&gt;\n<\/pre><\/div>\n\n\n<p>Ten niestandardowy suwak g\u0142o\u015bno\u015bci implementuje atrybuty <code>aria-value<\/code> wyja\u015bnione na przyk\u0142adzie rozdzia\u0142u Pasek post\u0119pu. Wa\u017cnym atrybutem jest tutaj <code>tabindex<\/code>, kt\u00f3ry nadaje mo\u017cliwo\u015b\u0107 obs\u0142ugi za pomoc\u0105 klawiatury. Implementacj\u0119 standardowego suwaka zapewnia <code>&lt;input type=\"range\" \/&gt;<\/code>.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Zak\u0142adki<\/strong><\/h4>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: xml; title: ; notranslate\" title=\"\">\n&lt;div ... role=&quot;tablist&quot; aria-label=&quot;Sekcje produktu&quot;&gt;\n  &lt;button ... role=&quot;tab&quot; aria-selected=&quot;true&quot; aria-controls=&quot;nav-desc&quot; id=&quot;nav-desc-tab&quot; tabindex=&quot;0&quot;&gt;\n    Opis\n  &lt;\/button&gt;\n  &lt;button ... role=&quot;tab&quot; aria-selected=&quot;false&quot; aria-controls=&quot;nav-spec&quot; id=&quot;nav-spec-tab&quot; tabindex=&quot;-1&quot;&gt;\n    Specyfikacja\n  &lt;\/button&gt;\n&lt;\/div&gt;\n&lt;div&gt;\n  &lt;div role=&quot;tabpanel&quot; id=&quot;nav-desc&quot; aria-labelledby=&quot;nav-desc-tab&quot; tabindex=&quot;0&quot;&gt;\n    Zawarto\u015b\u0107 opisu...\n  &lt;\/div&gt;\n  &lt;div role=&quot;tabpanel&quot; id=&quot;nav-spec&quot; aria-labelledby=&quot;nav-spec-tab&quot; tabindex=&quot;0&quot;&gt;\n    Zawarto\u015b\u0107 specyfikacji...\n  &lt;\/div&gt;\n&lt;\/div&gt;\n<\/pre><\/div>\n\n\n<p>W strukturze HTML zak\u0142adki (<code>role=\"tab\"<\/code>) musz\u0105 by\u0107:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>bezpo\u015brednimi s\u0105siadami, aby czytnik m\u00f3g\u0142 anonsowa\u0107 liczb\u0119 zak\u0142adek,<\/li>\n\n\n\n<li>bezpo\u015brednimi dzie\u0107mi elementu z atrybutem <code>role=\"tablist\"<\/code>.<\/li>\n<\/ul>\n\n\n\n<p>Warto\u015bci dla <code>tabindex<\/code> oraz <code>aria-selected<\/code> s\u0105 ustawiane dynamicznie.<\/p>\n\n\n\n<p>W przypadku zak\u0142adek (<code>role=\"tab\"<\/code>), warto\u015b\u0107 <code>tabindex=\"-1\"<\/code> sprawia, \u017ce kolejne u\u017cycie klawisza <code>Tab<\/code> spowoduje przej\u015bcie do zawarto\u015bci tej zak\u0142adki (<code>role=\"tabpanel\"<\/code>) zamiast do kolejnej zak\u0142adki (<code>role=\"tab\"<\/code>).<\/p>\n\n\n\n<p>Na poziomie kodu JavaScript nale\u017cy zapewni\u0107 mo\u017cliwo\u015b\u0107 nawigacji pomi\u0119dzy zak\u0142adkami za pomoc\u0105 klawiszy <code>\u2190<\/code> \/ <code>\u2192<\/code> oraz <code>Home<\/code> i <code>End<\/code>.<\/p>\n\n\n\n<p>Atrybut <code>aria-controls<\/code> wskazuje id panelu, w kt\u00f3rym znajduje si\u0119 tre\u015b\u0107 dla konkretnej zak\u0142adki. Panele dla pozosta\u0142ych zak\u0142adek powinny zosta\u0107 ukryte (np. <code>display: none;<\/code>).<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Wyszukiwarka<\/strong><\/h4>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: xml; title: ; notranslate\" title=\"\">\n&lt;form ... role=&quot;search&quot; aria-label=&quot;Wyszukiwanie w serwisie&quot;&gt;\n  &lt;label for=&quot;search-input&quot;&gt;Wyszukaj fraz\u0119:&lt;\/label&gt;\n  &lt;input type=&quot;search&quot; id=&quot;search-input&quot; ... \/&gt;\n  &lt;button type=&quot;submit&quot;&gt;Szukaj&lt;\/button&gt;\n&lt;\/form&gt;\n<\/pre><\/div>\n\n\n<p>Technologie asystuj\u0105ce rozpoznaj\u0105 <code>&lt;form&gt;<\/code> zawieraj\u0105cy <code>type=\"search\"<\/code> jako mechanizm wyszukiwania. Kontekst zawarty w <code>aria-label<\/code> dobrze opisuje cel wyszukiwania, z kolei przycisk ma widoczny tekst.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Niestandardowy checkbox<\/strong><\/h3>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: xml; title: ; notranslate\" title=\"\">\n&lt;div role=&quot;checkbox&quot; aria-checked=&quot;true&quot; tabindex=&quot;0&quot;&gt;\n  Zgadzam si\u0119 z regulaminem\n&lt;\/div&gt;\n<\/pre><\/div>\n\n\n<p>Za\u0142\u00f3\u017cmy, \u017ce chcemy sprosta\u0107 niestandardowym wymaganiom polegaj\u0105cym na implementacji animowanych zaznacze\u0144 i odznacze\u0144 na bazie pseudoelement\u00f3w CSS (::before i ::after), kt\u00f3re s\u0105 nieosi\u0105galne na natywnym elemencie &lt;input \/&gt;. W\u00f3wczas u\u017cywamy autorskiego checkboxa (np. pochodz\u0105cego z biblioteki), kt\u00f3ry jest renderowany w postaci &lt;div&gt;&#8230;&lt;\/div&gt; (zamiast <code>&lt;input type=\"checkbox\" \/&gt;<\/code>). W takiej sytuacji nale\u017cy na nim zastosowa\u0107 wskazane atrybuty ARIA. Warto\u015b\u0107 atrybutu <code>aria-checked<\/code> jest dobierana dynamicznie.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Podpi\u0119cie informacji dotycz\u0105cej pola edycji<\/strong><\/h4>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: xml; title: ; notranslate\" title=\"\">\n&lt;label for=&quot;email&quot;&gt;Adres e-mail&lt;\/label&gt;\n&lt;input id=&quot;email&quot; aria-describedby=&quot;email-help&quot; ... \/&gt;\n&lt;small id=&quot;email-help&quot;&gt;Nikomu nie podamy twojego e-maila.&lt;\/small&gt;\n<\/pre><\/div>\n\n\n<p>Tre\u015b\u0107 zawarta w <code>&lt;small&gt;<\/code> dostarcza dodatkowe informacje u\u017cytkownikom korzystaj\u0105cym z czytnik\u00f3w ekranu, kt\u00f3re przeczytaj\u0105 zar\u00f3wno etykiet\u0119 (<code>&lt;label&gt;<\/code>), jak i dodatkowy opis.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Przycisk zamykania<\/strong><\/h4>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: xml; title: ; notranslate\" title=\"\">\n&lt;button aria-label=&quot;Zamknij okno dialogowe&quot; class=&quot;...&quot;&gt;\n  &lt;i class=&quot;icon-close&quot;&gt;...&lt;\/i&gt;\n&lt;\/button&gt;\n<\/pre><\/div>\n\n\n<p>U\u017cycie atrybutu <code>aria-label<\/code> sprawia, \u017ce czytnik nie przejdzie do zawarto\u015bci elementu. Alternatywny zapis jest przedstawiony poni\u017cej (zawarto\u015b\u0107 klasy \u201esr-only\u201d znajdziesz w przyk\u0142adzie Etykiety i pola z adnotacj\u0105 o wymagalno\u015bci).<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: xml; title: ; notranslate\" title=\"\">\n&lt;button class=&quot;...&quot;&gt;\n  &lt;i class=&quot;icon-close&quot; aria-hidden=&quot;true&quot;&gt;...&lt;\/i&gt;\n  &lt;span class=&quot;sr-only&quot;&gt;Zamknij&lt;\/span&gt;\n&lt;\/button&gt;\n<\/pre><\/div>\n\n\n<h4 class=\"wp-block-heading\"><strong>Rozwijane menu<\/strong><\/h4>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: xml; title: ; notranslate\" title=\"\">\n&lt;button\n  ...\n  aria-haspopup=&quot;true&quot;\n  aria-expanded=&quot;false&quot;\n  aria-controls=&quot;dropdown-menu&quot;\n&gt;\n  Opcje\n&lt;\/button&gt;\n\n&lt;ul id=&quot;dropdown-menu&quot; role=&quot;menu&quot; hidden&gt;\n  &lt;li role=&quot;menuitem&quot;&gt;...&lt;\/li&gt;\n  &lt;li role=&quot;menuitem&quot;&gt;...&lt;\/li&gt;\n  ...\n&lt;\/ul&gt;\n<\/pre><\/div>\n\n\n<p>Atrybut <code>role=\"menu\"<\/code> informuje czytnik, \u017ce element stanowi rozwijane menu. Widoczno\u015b\u0107 menu jest odzwierciedlana za pomoc\u0105 warto\u015bci <code>aria-expanded<\/code>. Natomiast atrybut <code>aria-haspopup<\/code> oznacza element otwieraj\u0105cy menu. Z kolei <code>aria-controls<\/code> wskazuje, \u017ce przycisk steruje widoczno\u015bci\u0105 menu.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Dynamiczny obszar<\/strong><\/h4>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: xml; title: ; notranslate\" title=\"\">\n&lt;div aria-live=&quot;polite&quot; aria-atomic=&quot;true&quot;&gt;\n  &lt;div class=&quot;...&quot;&gt;Wynik wynosi:&lt;\/div&gt;\n  &lt;span id=&quot;result&quot;&gt;Twoja rata wyniesie: 300 z\u0142&lt;\/span&gt;\n&lt;\/div&gt;\n<\/pre><\/div>\n\n\n<p>Za\u0142\u00f3\u017cmy, \u017ce powy\u017cszy obszar cz\u0119sto ulega modyfikacji wskutek zmiany danej wej\u015bciowej. Obecno\u015b\u0107 atrybutu <code>aria-live<\/code> sprawia, \u017ce element jest pod nas\u0142uchem. Oznacza to, \u017ce ka\u017cdorazowa zmiana zawarto\u015bci zostanie odczytana przez technologi\u0119 asystuj\u0105c\u0105. Je\u017celi warto\u015b\u0107 atrybutu stanowi:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>polite<\/code> \u2013 odczytanie nast\u0105pi, gdy u\u017cytkownik przestanie wykonywa\u0107 trwaj\u0105c\u0105 operacj\u0119,<\/li>\n\n\n\n<li><code>assertive<\/code> \u2013 odczytanie nast\u0105pi natychmiast.<\/li>\n<\/ul>\n\n\n\n<p>Atrybut <code>aria-atomic<\/code> z kolei okre\u015bla, czy ca\u0142a zawarto\u015b\u0107 ma by\u0107 og\u0142aszana, gdy nast\u0105pi zmiana. Je\u017celi warto\u015b\u0107 atrybutu jest ustawiona na:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>true<\/code> \u2013 odczytana zostanie ca\u0142a zawarto\u015b\u0107 kontenera opatrzonego atrybutem <code>aria-live<\/code> (\u201eWarto\u015b\u0107 wynosi 300 z\u0142\u201d),<\/li>\n\n\n\n<li><code>false<\/code> \u2013 odczytana zostanie tylko informacja, kt\u00f3ra uleg\u0142a zmianie (\u201e300 z\u0142\u201d).<\/li>\n<\/ul>\n\n\n\n<p>Element z <code>aria-live<\/code> musi wyst\u0119powa\u0107 w DOM od pocz\u0105tku wyrenderowania widoku. W przeciwnym razie, czytnik nie b\u0119dzie nas\u0142uchiwa\u0107 na taki element.<sup>[71]<\/sup><\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Dynamiczna lista<\/strong><\/h4>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: xml; title: ; notranslate\" title=\"\">\n&lt;ul role=&quot;listbox&quot;&gt;\n  &lt;li role=&quot;option&quot; aria-posinset=&quot;1&quot; aria-setsize=&quot;3&quot;&gt;Zdj\u0119cie 1&lt;\/li&gt;\n  &lt;li role=&quot;option&quot; aria-posinset=&quot;2&quot; aria-setsize=&quot;3&quot;&gt;Zdj\u0119cie 2&lt;\/li&gt;\n  &lt;li role=&quot;option&quot; aria-posinset=&quot;3&quot; aria-setsize=&quot;3&quot;&gt;Zdj\u0119cie 3&lt;\/li&gt;\n&lt;\/ul&gt;\n<\/pre><\/div>\n\n\n<p>W dynamicznych interfejsach (np. wirtualne listy, lazy loading), tylko cz\u0119\u015b\u0107 element\u00f3w mo\u017ce by\u0107 obecna w DOM. Jednak czytnik ekranu powinien zosta\u0107 poinformowany za pomoc\u0105 <code>aria-setsize<\/code> i <code>aria-posinset<\/code> kolejno o tym, jak du\u017cy jest ca\u0142y zbi\u00f3r oraz na kt\u00f3rym z element\u00f3w aktualnie jeste\u015bmy.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Tabela sortowalna<\/strong><\/h4>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: xml; title: ; notranslate\" title=\"\">\n&lt;table&gt;\n  &lt;thead&gt;\n    &lt;tr&gt;\n      &lt;th scope=&quot;col&quot; aria-sort=&quot;ascending&quot;&gt;Nazwa&lt;\/th&gt;\n      &lt;th scope=&quot;col&quot;&gt;Data&lt;\/th&gt;\n      &lt;th scope=&quot;col&quot;&gt;Cena&lt;\/th&gt;\n    &lt;\/tr&gt;\n  &lt;\/thead&gt;\n  &lt;tbody&gt;\n    &lt;tr&gt;\n      &lt;td&gt;Produkt A&lt;\/td&gt;\n      &lt;td&gt;2023-01-01&lt;\/td&gt;\n      &lt;td&gt;10 z\u0142&lt;\/td&gt;\n    &lt;\/tr&gt;\n    ...\n  &lt;\/tbody&gt;\n&lt;\/table&gt;\n<\/pre><\/div>\n\n\n<p>Atrybut <code>aria-sort<\/code> okre\u015bla spos\u00f3b sortowania elementu w zbiorze danych:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>none<\/code> \u2013 brak sortowania,<\/li>\n\n\n\n<li><code>ascending<\/code> \u2013 sortowanie rosn\u0105ce (1\u2013100),<\/li>\n\n\n\n<li><code>descending<\/code> \u2013 sortowanie malej\u0105ce (100\u20131),<\/li>\n\n\n\n<li><code>other<\/code> \u2013 niestandardowe sortowanie.<\/li>\n<\/ul>\n\n\n\n<p>Gdy u\u017cytkownik kliknie nag\u0142\u00f3wek kolumny, a sortowanie si\u0119 zmienia, nale\u017cy zaktualizowa\u0107 warto\u015b\u0107 <code>aria-sort<\/code> oraz wizualny wska\u017anik sortowania (np. strza\u0142k\u0119).<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Tryb aplikacji<\/strong><\/h4>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: xml; title: ; notranslate\" title=\"\">\n&lt;div role=&quot;application&quot; aria-label=&quot;Kalkulator&quot;&gt;\n  &lt;h2 ...&gt;Kalkulator&lt;\/h2&gt;\n  &lt;div role=&quot;group&quot; aria-labelledby=&quot;calc-label&quot;&gt;\n    &lt;label for=&quot;input1&quot;&gt;Liczba 1&lt;\/label&gt;\n    &lt;input id=&quot;input1&quot; type=&quot;number&quot; \/&gt;\n    &lt;label for=&quot;input2&quot;&gt;Liczba 2&lt;\/label&gt;\n    &lt;input id=&quot;input2&quot; type=&quot;number&quot; \/&gt;\n    &lt;button ...&gt;Dodaj&lt;\/button&gt;\n    &lt;div role=&quot;status&quot; aria-live=&quot;polite&quot; id=&quot;result&quot;&gt;&lt;\/div&gt;\n  &lt;\/div&gt;\n&lt;\/div&gt;\n<\/pre><\/div>\n\n\n<p>Za\u0142\u00f3\u017cmy, \u017ce posiadamy aplikacj\u0119 webow\u0105 z dynamicznym interfejsem graficznym i chcemy zapewni\u0107 pe\u0142ne sterowanie klawiatur\u0105. Atrybut <code>role=\"application\"<\/code> sprawia, \u017ce zawarto\u015b\u0107 elementu jest odczytywana przez technologi\u0119 asystuj\u0105c\u0105 w odmienny spos\u00f3b, czyli:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>nawigacja strukturalna jest wy\u0142\u0105czona (ignorowanie landmark\u00f3w, nag\u0142\u00f3wk\u00f3w itp.),<\/li>\n\n\n\n<li>u\u017cytkownik korzysta z aplikacji jak z programu desktopowego \u2013 klawiszami strza\u0142ek, skr\u00f3tami, interakcj\u0105 bez czytnika.<\/li>\n<\/ul>\n\n\n\n<p>Oznacza to, \u017ce u\u017cytkownik musi zna\u0107 obs\u0142ug\u0119 klawiatury danej aplikacji, poniewa\u017c typowa nawigacja przestaje dzia\u0142a\u0107. <strong>To podej\u015bcie wymaga bardzo dobrej implementacji ARIA<\/strong>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Narz\u0119dzia do testowania dost\u0119pno\u015bci<\/strong><\/h2>\n\n\n\n<p>Skuteczne testowanie dost\u0119pno\u015bci wymaga kombinacji narz\u0119dzi automatycznych oraz test\u00f3w manualnych. Automatyczne narz\u0119dzia mog\u0105 wykry\u0107 oko\u0142o 30\u201340% problem\u00f3w z dost\u0119pno\u015bci\u0105, pozosta\u0142e wymagaj\u0105 test\u00f3w manualnych.<sup>[72, 73]<\/sup><\/p>\n\n\n\n<p><strong>Najwa\u017cniejsze kategorie narz\u0119dzi:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Automatyczne skanery:<\/strong> WAVE,<sup>[74]<\/sup> axe DevTools,<sup>[75]<\/sup> Lighthouse<sup>[76]<\/sup> \u2013 szybko identyfikuj\u0105 podstawowe problemy.<\/li>\n\n\n\n<li><strong>Czytniki ekranowe:<\/strong> NVDA<sup>[19]<\/sup> lub JAWS,<sup>[20]<\/sup> TalkBack,<sup>[21]<\/sup> VoiceOver<sup>[22]<\/sup> \u2013 niezb\u0119dne do test\u00f3w manualnych.<\/li>\n\n\n\n<li><strong>Analizatory kontrastu:<\/strong> Colour Contrast Analyser,<sup>[34]<\/sup> WebAIM Contrast Checker,<sup>[30]<\/sup> Color Contrast Checker<sup>[35]<\/sup> \u2013 sprawdzaj\u0105 wsp\u00f3\u0142czynniki kontrastu.<\/li>\n\n\n\n<li><strong>Platformy testowe:<\/strong> BrowserStack Accessibility,<sup>[77]<\/sup> Mabl<sup>[78]<\/sup> \u2013 testowanie na wielu urz\u0105dzeniach i przegl\u0105darkach.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>AI w kontek\u015bcie dost\u0119pno\u015bci cyfrowej<\/strong><\/h3>\n\n\n\n<p>Sztuczna inteligencja mo\u017ce znacz\u0105co wspom\u00f3c proces zapewniania dost\u0119pno\u015bci cyfrowej. ChatGPT mo\u017ce generowa\u0107 kod HTML zgodny z WCAG, tworzy\u0107 opisy alternatywne dla obraz\u00f3w oraz przypadki testowe uwzgl\u0119dniaj\u0105ce potrzeby u\u017cytkownik\u00f3w z niepe\u0142nosprawno\u015bciami.<sup>[79\u201381]<\/sup> Nale\u017cy jednak pami\u0119ta\u0107 o ograniczeniach AI i ka\u017cdorazowo weryfikowa\u0107 uzyskiwane dane.<sup>[81]<\/sup><\/p>\n\n\n\n<p>Technologie AI oferuj\u0105 r\u00f3wnie\u017c inne konkretne rozwi\u0105zania wspieraj\u0105ce dost\u0119pno\u015b\u0107:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>automatyczne generowanie napis\u00f3w do film\u00f3w,<\/li>\n\n\n\n<li>opisywanie obraz\u00f3w dla os\u00f3b niewidomych,<\/li>\n\n\n\n<li>rozpoznawanie nietypowych wzorc\u00f3w mowy,<\/li>\n\n\n\n<li>automatyczna transkrypcja rozm\u00f3w telefonicznych,<\/li>\n\n\n\n<li>t\u0142umaczenie na j\u0119zyk migowy w czasie rzeczywistym,<\/li>\n\n\n\n<li>asystenci g\u0142osowi,<\/li>\n\n\n\n<li>inteligentne systemy nawigacji dla os\u00f3b niewidomych.<sup>[80]<\/sup><\/li>\n<\/ul>\n\n\n<div class=\"nsw-o-blogersii-banner\">\n            <picture>\n            <source srcset=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2026\/04\/Blog-Microsoft-Desktop.jpg\" media=\"(min-width: 992px)\" >\n            <source srcset=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2026\/04\/Blog-Microsoft-Mob_.jpg\" media=\"(min-width: 300px)\" >            <img decoding=\"async\" src=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2026\/04\/Blog-Microsoft-Desktop.jpg\" alt=\"\"  class=\"\"  >\n        <\/picture>\n        <div class=\"cnt\">\n                    <div class=\"nsw-m-title-block -h3 -invert  -has-title-margin-bottom-0 -has-title-font-weight-bold\">\n                                <h2 class=\"nsw-m-title-block__title\">Sii x Microsoft<\/h2>\n                <\/div>\n                            <p class=\"has-nsw-p-4-font-size has-invert-color\">\n                Jako partner Microsoft Cloud oferujemy rozwi\u0105zania, kt\u00f3re optymalizuj\u0105 procesy, usprawniaj\u0105 wsp\u00f3\u0142prac\u0119 i umo\u017cliwiaj\u0105 osi\u0105gni\u0119cie zwinno\u015bci biznesowej z wykorzystaniem AI.\n            <\/p>\n                            <a  href=\"https:\/\/sii.pl\/oferta\/enterprise-platforms\/microsoft\/\" class=\"nsw-a-button -ghost -banner-button\"   >\n        <span>Oferta Microsoft<\/span>\n    <\/a>\n            <\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Podsumowanie<\/strong><\/h2>\n\n\n\n<p><strong>Dost\u0119pno\u015b\u0107 cyfrowa zgodna z WCAG to nie tylko wym\u00f3g prawny, ale przede wszystkim kwestia r\u00f3wno\u015bci i inkluzywno\u015bci<\/strong>. Implementacja standard\u00f3w WCAG 2.2 na poziomie AA zapewnia dost\u0119p do tre\u015bci cyfrowych dla ponad 2 miliard\u00f3w os\u00f3b z niepe\u0142nosprawno\u015bciami na ca\u0142ym \u015bwiecie.<\/p>\n\n\n\n<p>Kluczowe elementy sukcesu w implementacji dost\u0119pno\u015bci to:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Semantyczny kod HTML<\/strong> jako fundament dost\u0119pno\u015bci.<\/li>\n\n\n\n<li><strong>Odpowiednie kontrasty kolor\u00f3w<\/strong> zapewniaj\u0105ce czytelno\u015b\u0107.<\/li>\n\n\n\n<li><strong>Dost\u0119pne dokumenty<\/strong> w formatach Office z odpowiedni\u0105 struktur\u0105.<\/li>\n\n\n\n<li><strong>W\u0142a\u015bciwe u\u017cycie ARIA<\/strong> do wzbogacenia semantyki HTML.<\/li>\n\n\n\n<li><strong>Regularne testowanie<\/strong> przy u\u017cyciu zr\u00f3\u017cnicowanych narz\u0119dzi.<\/li>\n\n\n\n<li><strong>Edukacja zespo\u0142u<\/strong> w zakresie zasad dost\u0119pno\u015bci.<\/li>\n<\/ol>\n\n\n\n<p>Warto pami\u0119ta\u0107, \u017ce <strong>dost\u0119pno\u015b\u0107 to proces ci\u0105g\u0142y, a nie jednorazowe dzia\u0142anie<\/strong>. Rozw\u00f3j technologii oraz nadchodz\u0105cy <strong>WCAG 3.0 b\u0119d\u0105 wymaga\u0107 sta\u0142ego aktualizowania wiedzy i praktyk<\/strong>. Jednak inwestycja w dost\u0119pno\u015b\u0107 przynosi korzy\u015bci wszystkim u\u017cytkownikom, poprawiaj\u0105c og\u00f3ln\u0105 jako\u015b\u0107 produkt\u00f3w cyfrowych.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Literatura<\/strong><\/h2>\n\n\n\n<p>[1]&nbsp;&nbsp; Mozilla Developer Network. (2025) <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/Accessibility\/Guides\/Understanding_WCAG\" target=\"_blank\" rel=\"noopener\" title=\"\" rel=\"nofollow\" >Understanding the Web Content Accessibility Guidelines<\/a> (WCAG)<\/p>\n\n\n\n<p>[2]&nbsp;&nbsp; Wikipedia. (2006) <a href=\"https:\/\/en.wikipedia.org\/wiki\/Web_Content_Accessibility_Guidelines\" target=\"_blank\" rel=\"noopener\" title=\"\" rel=\"nofollow\" >Web Content Accessibility Guidelines<\/a><\/p>\n\n\n\n<p>[3]&nbsp;&nbsp; Accessible Metrics. (2019) <a href=\"https:\/\/www.accessiblemetrics.com\/blog\/what-are-the-levels-of-wcag-compliance\/\" target=\"_blank\" rel=\"noopener\" title=\"\" rel=\"nofollow\" >What are the levels of WCAG compliance?<\/a><\/p>\n\n\n\n<p>[4]&nbsp;&nbsp; W3C. (2025) <a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/\" target=\"_blank\" rel=\"noopener\" title=\"\" rel=\"nofollow\" >Web Content Accessibility Guidelines<\/a> (WCAG) 2.1<\/p>\n\n\n\n<p>[5]&nbsp;&nbsp; Web Usability. (2023) <a href=\"https:\/\/www.webusability.co.uk\/blog\/wcag-2-2-is-here\/\" target=\"_blank\" rel=\"noopener\" title=\"\" rel=\"nofollow\" >WCAG 2.2 is here<\/a><\/p>\n\n\n\n<p>[6]&nbsp;&nbsp; AudioEye. (2024) <a href=\"https:\/\/www.audioeye.com\/post\/wcag-22\/\" target=\"_blank\" rel=\"noopener\" title=\"\" rel=\"nofollow\" >What&#8217;s new in WCAG 2.2: Changes and updates from WCAG 2.1<\/a><\/p>\n\n\n\n<p>[7]&nbsp;&nbsp; GOV.UK. (2024) <a href=\"https:\/\/www.gov.uk\/service-manual\/helping-people-to-use-your-service\/understanding-wcag\" target=\"_blank\" rel=\"noopener\" title=\"\" rel=\"nofollow\" >Understanding WCAG 2.2 \u2013 service manual<\/a><\/p>\n\n\n\n<p>[8]&nbsp;&nbsp; WCAG. (2024) <a href=\"https:\/\/www.wcag.com\/resource\/what-is-wcag\/\" target=\"_blank\" rel=\"noopener\" title=\"\" rel=\"nofollow\" >WCAG 101: Understanding the Web Content Accessibility Guidelines<\/a><\/p>\n\n\n\n<p>[9]&nbsp;&nbsp; My Accessible Website. (2023) <a href=\"https:\/\/myaccessible.website\/blog\/wcaglevels\/wcag-levels-a-aa-aaa-difference\" target=\"_blank\" rel=\"noopener\" title=\"\" rel=\"nofollow\" >WCAG levels: Level A, AA and AAA compliance<\/a><\/p>\n\n\n\n<p>[10] MDL Kancelaria Prawna. (2025) <a href=\"https:\/\/mdl-kancelariaprawna.pl\/porady-prawne\/kogo-i-w-jakim-zakresie-obowiazuja-wytyczne-wcag\/\" title=\"\" rel=\"nofollow\" >Kogo i w jakim zakresie obowi\u0105zuj\u0105 wytyczne WCAG?<\/a><\/p>\n\n\n\n<p>[11] Semidea. (2025) <a href=\"https:\/\/semidea.pl\/europejski-akt-o-dostepnosci-eaa-przygotuj-swoj-biznes-na-zmiany-od-28-czerwca-2025\/\" rel=\"nofollow\" >Europejski<\/a><a href=\"https:\/\/semidea.pl\/europejski-akt-o-dostepnosci-eaa-przygotuj-swoj-biznes-na-zmiany-od-28-czerwca-2025\/\" target=\"_blank\" rel=\"noopener\" title=\"\" rel=\"nofollow\" > <\/a><a href=\"https:\/\/semidea.pl\/europejski-akt-o-dostepnosci-eaa-przygotuj-swoj-biznes-na-zmiany-od-28-czerwca-2025\/\" rel=\"nofollow\" >Akt o Dost\u0119pno\u015bci (EAA): Przygotuj sw\u00f3j biznes na zmiany od 28 czerwca 2025!<\/a> &nbsp;<\/p>\n\n\n\n<p>[12] World Health Organization. (2023) <a href=\"https:\/\/www.who.int\/news-room\/fact-sheets\/detail\/blindness-and-visual-impairment\" target=\"_blank\" rel=\"noopener\" title=\"\" rel=\"nofollow\" >Blindness and vision impairment<\/a><\/p>\n\n\n\n<p>[13] World Health Organization. (2019) <a href=\"https:\/\/www.who.int\/publications\/i\/item\/world-report-on-vision\" target=\"_blank\" rel=\"noopener\" title=\"\" rel=\"nofollow\" >World report on vision<\/a><\/p>\n\n\n\n<p>[14] BlogerSii. (2023) <a href=\"https:\/\/sii.pl\/blog\/digital-world-accessibility-czyli-dostepnosc-cyfrowa-w-dzisiejszym-swiecie\/\" target=\"_blank\" rel=\"noopener\" title=\"\">Digital world &amp; accessibility, czyli dost\u0119pno\u015b\u0107 cyfrowa w dzisiejszym \u015bwiecie<\/a><\/p>\n\n\n\n<p>[15] Equidox. (2025) <a href=\"https:\/\/equidox.co\/blog\/digital-accessibility-law-updates-a-look-back-at-2024\/\" target=\"_blank\" rel=\"noopener\" title=\"\" rel=\"nofollow\" >Digital accessibility law updates: A look back at 2024<\/a><\/p>\n\n\n\n<p>[16] Accessibility.works. (2025) <a href=\"https:\/\/www.accessibility.works\/blog\/ada-title-ii-2-compliance-standards-requirements-states-cities-towns\/\" target=\"_blank\" rel=\"noopener\" title=\"\" rel=\"nofollow\" >New ADA Title II web accessibility requirements hit April 24, 2026<\/a><\/p>\n\n\n\n<p>[17] Orange. (2024) <a href=\"https:\/\/a11y-guidelines.orange.com\/en\/web\/toolbox\/methods-and-test-tools\/navigating-with-a-screen-reader\/\" target=\"_blank\" rel=\"noopener\" title=\"\" rel=\"nofollow\" >Navigating with a screen reader<\/a><\/p>\n\n\n\n<p>[18] WebAIM. (2024) <a href=\"https:\/\/webaim.org\/projects\/screenreadersurvey10\/\" target=\"_blank\" rel=\"noopener\" title=\"\" rel=\"nofollow\" >Screen reader user survey #10 Results<\/a><\/p>\n\n\n\n<p>[19] NVAccess. (2025) <a href=\"https:\/\/www.nvaccess.org\/download\/\" target=\"_blank\" rel=\"noopener\" title=\"\" rel=\"nofollow\" >NVDA version 2025.1.2<\/a><\/p>\n\n\n\n<p>[20] Freedom Scientific. (2025) <a href=\"https:\/\/www.freedomscientific.com\/products\/software\/jaws\/\" target=\"_blank\" rel=\"noopener\" title=\"\" rel=\"nofollow\" >JAWS<\/a><\/p>\n\n\n\n<p>[21] Android Accessibility Help. (2025) <a href=\"https:\/\/support.google.com\/accessibility\/android\/answer\/6007100\" target=\"_blank\" rel=\"noopener\" title=\"\" rel=\"nofollow\" >Turn on TalkBack<\/a><\/p>\n\n\n\n<p>[22] Apple Support. (2025) <a href=\"https:\/\/support.apple.com\/pl-pl\/guide\/voiceover\/welcome\/mac\" target=\"_blank\" rel=\"noopener\" title=\"\" rel=\"nofollow\" >Podr\u0119cznik u\u017cytkownika VoiceOver<\/a><\/p>\n\n\n\n<p>[23] 247 Accessible Documents. (2018) <a href=\"https:\/\/247accessibledocuments.com\/cheat-sheet-screen-reader-commands-for-jaws-nvda-pdf\/\" rel=\"nofollow\" >Chea<\/a><a href=\"https:\/\/247accessibledocuments.com\/cheat-sheet-screen-reader-commands-for-jaws-nvda-pdf\/\" target=\"_blank\" rel=\"noopener\" title=\"\" rel=\"nofollow\" >t<\/a><a href=\"https:\/\/247accessibledocuments.com\/cheat-sheet-screen-reader-commands-for-jaws-nvda-pdf\/\" rel=\"nofollow\" > sheet \u2013 screen reader commands for JAWS, NVDA \u2013 PDF<\/a><\/p>\n\n\n\n<p>[24] Second Sense. (2024) <a href=\"https:\/\/www.second-sense.org\/screen-reader-keyboard-commands\/\" target=\"_blank\" rel=\"noopener\" title=\"\" rel=\"nofollow\" >Screen-reader keyboard commands<\/a><\/p>\n\n\n\n<p>[25] Frontlive.pl. (2020) <a href=\"https:\/\/frontlive.pl\/blog\/dostepnosc-czytniki-ekranowe\" target=\"_blank\" rel=\"noopener\" title=\"\" rel=\"nofollow\" >Dost\u0119pno\u015b\u0107 \u2013 czytniki ekranowe i testowanie<\/a><\/p>\n\n\n\n<p>[26] Strony Internetowe UK. (2024) <a href=\"https:\/\/stronyinternetowe.uk\/landmarki-aria-ulatwienie-orientacji-i-nawigacji-na-stronie\/\" target=\"_blank\" rel=\"noopener\" title=\"\" rel=\"nofollow\" >Landmarki ARIA \u2013 u\u0142atwienie orientacji i nawigacji na stronie<\/a><\/p>\n\n\n\n<p>[27] Carnegie Museums of Pittsburgh. (2025) <a href=\"http:\/\/web-accessibility.carnegiemuseums.org\/foundations\/semantic\/\" target=\"_blank\" rel=\"noopener\" title=\"\" rel=\"nofollow\" >Web accessibility guidelines v1.0<\/a><\/p>\n\n\n\n<p>[28] Learn Microsoft. (2023) <a href=\"https:\/\/learn.microsoft.com\/pl-pl\/power-apps\/user\/screen-reader\" target=\"_blank\" rel=\"noopener\" title=\"\" rel=\"nofollow\" >U\u017cywanie czytnika zawarto\u015bci ekranu<\/a><\/p>\n\n\n\n<p>[29] VitalSource. (2023) <a href=\"https:\/\/accessibility.vitalsource.com\/hc\/en-us\/articles\/16793164986391-Android-Talkback-Keyboard-Commands\" target=\"_blank\" rel=\"noopener\" title=\"\" rel=\"nofollow\" >Android TalkBack keyboard commands<\/a><\/p>\n\n\n\n<p>[30] WebAIM. (2025) <a href=\"https:\/\/webaim.org\/resources\/contrastchecker\/\" target=\"_blank\" rel=\"noopener\" title=\"\" rel=\"nofollow\" >Contrast Checker<\/a><\/p>\n\n\n\n<p>[31] W3C. (2011) <a href=\"https:\/\/www.w3.org\/WAI\/WCAG22\/Understanding\/contrast-minimum\" target=\"_blank\" rel=\"noopener\" title=\"\" rel=\"nofollow\" >Understanding success criterion 1.4.3: Contrast (minimum)<\/a><\/p>\n\n\n\n<p>[32] BlogerSii. (2022) <a href=\"https:\/\/sii.pl\/blog\/przyklady-niezrozumienia-potrzeb-osob-z-niepelnosprawnoscia-i-jak-im-zaradzic-czesc-ii\/\" target=\"_blank\" rel=\"noopener\" title=\"\">Przyk\u0142ady niezrozumienia potrzeb os\u00f3b z niepe\u0142nosprawno\u015bci\u0105 i jak im zaradzi\u0107. Cz\u0119\u015b\u0107 II<\/a><\/p>\n\n\n\n<p>[33] Politechnika Rzeszowska. (2025) <a href=\"https:\/\/dostepnosc.prz.edu.pl\/dostepnosc-cyfrowa\/kontrast\" rel=\"nofollow\" >Ko<\/a><a href=\"https:\/\/dostepnosc.prz.edu.pl\/dostepnosc-cyfrowa\/kontrast\" target=\"_blank\" rel=\"noopener\" title=\"\" rel=\"nofollow\" >n<\/a><a href=\"https:\/\/dostepnosc.prz.edu.pl\/dostepnosc-cyfrowa\/kontrast\" rel=\"nofollow\" >trast<\/a><\/p>\n\n\n\n<p>[34] TPGi. (2025) <a href=\"https:\/\/developer.paciellogroup.com\/color-contrast-checker\/\" target=\"_blank\" rel=\"noopener\" title=\"\" rel=\"nofollow\" >Colour Contrast Analyser (CCA)<\/a><\/p>\n\n\n\n<p>[35] AudioEye. (2024) <a href=\"https:\/\/www.audioeye.com\/color-contrast-checker\/\" target=\"_blank\" rel=\"noopener\" title=\"\" rel=\"nofollow\" >Color Contrast Checker<\/a><\/p>\n\n\n\n<p>[36] Web.dev. (2022) <a href=\"https:\/\/web.dev\/articles\/testing-web-design-color-contrast\" target=\"_blank\" rel=\"noopener\" title=\"\" rel=\"nofollow\" >Testing web design color contrast<\/a><\/p>\n\n\n\n<p>[37] Medium. (2018) <a href=\"https:\/\/uxdesign.cc\/chrome-devtools-accessible-colors-300ec462a63c\" target=\"_blank\" rel=\"noopener\" title=\"\" rel=\"nofollow\" >Chrome DevTools: Accessible colors<\/a><\/p>\n\n\n\n<p>[38] Oregon. (2018) <a href=\"https:\/\/www.oregon.gov\/ode\/accessibility\/checklist\/pages\/contrast.aspx\" target=\"_blank\" rel=\"noopener\" title=\"\" rel=\"nofollow\" >Color contrast \u2013 WCAG 2.0 Ref 1.4.3<\/a><\/p>\n\n\n\n<p>[39] Accessibility Easy Ltd. (2025) <a href=\"https:\/\/www.accessibilityeasy.com\/blog\/making-word-documents-accessible\" target=\"_blank\" rel=\"noopener\" title=\"\" rel=\"nofollow\" >Making Word documents accessible<\/a><\/p>\n\n\n\n<p>[40] Jim Byrne Accessible Digital Specialist. (2022) <a href=\"https:\/\/jimbyrne.co.uk\/accessibility-testing-auditing\/accessible-documents\/creating-accessible-word-documents\/\" target=\"_blank\" rel=\"noopener\" title=\"\" rel=\"nofollow\" >Creating accessible Word documents<\/a><\/p>\n\n\n\n<p>[41] Microsoft Support. (2025) <a href=\"https:\/\/support.microsoft.com\/en-us\/office\/accessibility-tools-for-microsoft-365-b5087b20-1387-4686-a0a5-8e11c5f46cdf\" target=\"_blank\" rel=\"noopener\" title=\"\" rel=\"nofollow\" >Accessibility tools for Microsoft 365<\/a><\/p>\n\n\n\n<p>[42] Royal New Zealand Foundation of the Blind. (2016) <a href=\"https:\/\/cdn.fld.nz\/uploads\/sites\/artsaccess\/files\/images\/1_2017\/files\/Blind_Foundation_Accessible_Document_Guidelines.pdf\" target=\"_blank\" rel=\"noopener\" title=\"\" rel=\"nofollow\" >Accessible document guidelines<\/a><\/p>\n\n\n\n<p>[43] Stanford University. (2025) <a href=\"https:\/\/uit.stanford.edu\/accessibility\/concepts\/tables\/creating-accessible-data-tables\" target=\"_blank\" rel=\"noopener\" title=\"\" rel=\"nofollow\" >Creating accessible data tables<\/a><\/p>\n\n\n\n<p>[44] EPAD. (2025) <a href=\"https:\/\/e-pad.pl\/dostepne-pdf-krok-po-kroku-jak-tworzyc-i-naprawiac-dokumenty-word-pdf-prezentacje-aby-byly-zgodne-z-wcag\/#Sekcja_31_Idealny_Scenariusz_%E2%80%93_Eksport_Dostepnego_PDF_z_Programu_Word\" target=\"_blank\" rel=\"noopener\" title=\"\" rel=\"nofollow\" >Dost\u0119pne PDF krok po kroku. Jak tworzy\u0107 i naprawia\u0107 dokumenty (Word, PDF, Prezentacje), aby by\u0142y zgodne z WCAG?<\/a> <\/p>\n\n\n\n<p>[45]&nbsp;Universit\u00e4t Wien. (2023) <a href=\"https:\/\/zid.univie.ac.at\/en\/computer-rooms\/user-guides\/creating-pdfa\/\" target=\"_blank\" rel=\"noopener\" title=\"\" rel=\"nofollow\" >Creating PDF\/A<\/a><\/p>\n\n\n\n<p>[46] Microsoft Support. (2025) <a href=\"https:\/\/support.microsoft.com\/en-us\/office\/accessibility-best-practices-with-excel-spreadsheets-6cc05fc5-1314-48b5-8eb3-683e49b3e593\" target=\"_blank\" rel=\"noopener\" title=\"\" rel=\"nofollow\" >Accessibility best practices with Excel spreadsheets<\/a><\/p>\n\n\n\n<p>[47] Rick Hansen Foundation. (2025) <a href=\"https:\/\/www.rickhansen.com\/news-stories\/blog\/creating-accessible-spreadsheets-best-practices\" target=\"_blank\" rel=\"noopener\" title=\"\" rel=\"nofollow\" >Creating accessible spreadsheets: Best practices<\/a><\/p>\n\n\n\n<p>[48] WebAIM. (2021) <a href=\"https:\/\/webaim.org\/techniques\/excel\/\" target=\"_blank\" rel=\"noopener\" title=\"\" rel=\"nofollow\" >Microsoft Excel. Optimizing spreadsheet accessibility<\/a><\/p>\n\n\n\n<p>[49] University of Oxford. (2004) <a href=\"https:\/\/www.ctl.ox.ac.uk\/creating-accessible-powerpoint-presentations\" rel=\"nofollow\" >Crea<\/a><a href=\"https:\/\/www.ctl.ox.ac.uk\/creating-accessible-powerpoint-presentations\" target=\"_blank\" rel=\"noopener\" title=\"\" rel=\"nofollow\" >t<\/a><a href=\"https:\/\/www.ctl.ox.ac.uk\/creating-accessible-powerpoint-presentations\" rel=\"nofollow\" >ing accessible PowerPoint presentations<\/a><\/p>\n\n\n\n<p>[50] Duke University. (2025) <a href=\"https:\/\/web.accessibility.duke.edu\/8-tips-more-accessible-microsoft-powerpoint-document\/\" rel=\"nofollow\" >8 tips <\/a><a href=\"https:\/\/web.accessibility.duke.edu\/8-tips-more-accessible-microsoft-powerpoint-document\/\" target=\"_blank\" rel=\"noopener\" title=\"\" rel=\"nofollow\" >t<\/a><a href=\"https:\/\/web.accessibility.duke.edu\/8-tips-more-accessible-microsoft-powerpoint-document\/\" rel=\"nofollow\" >o a more accessible Microsoft PowerPoint document<\/a><\/p>\n\n\n\n<p>[51] Microsoft Support. (2025) <a href=\"https:\/\/support.microsoft.com\/en-us\/office\/make-slides-easier-to-read-by-using-the-reading-order-pane-863b5c1c-4f19-45ec-96e6-93a6457f5e1c\" target=\"_blank\" rel=\"noopener\" title=\"\" rel=\"nofollow\" >Make slides easier to read by using the Reading Order pane<\/a><\/p>\n\n\n\n<p>[52] Microsoft Support. (2025) <a href=\"https:\/\/support.microsoft.com\/en-us\/office\/add-closed-captions-or-subtitles-to-media-in-powerpoint-df091537-fb22-4507-898f-2358ddc0df18\" rel=\"nofollow\" >Add closed<\/a><a href=\"https:\/\/support.microsoft.com\/en-us\/office\/add-closed-captions-or-subtitles-to-media-in-powerpoint-df091537-fb22-4507-898f-2358ddc0df18\" target=\"_blank\" rel=\"noopener\" title=\"\" rel=\"nofollow\" > <\/a><a href=\"https:\/\/support.microsoft.com\/en-us\/office\/add-closed-captions-or-subtitles-to-media-in-powerpoint-df091537-fb22-4507-898f-2358ddc0df18\" rel=\"nofollow\" >captions or subtitles to media in PowerPoint<\/a><\/p>\n\n\n\n<p>[53] Government of Canada. (2025) <a href=\"https:\/\/bati-itao.github.io\/resources\/best-practices-powerpoint-en.html\" target=\"_blank\" rel=\"noopener\" title=\"\" rel=\"nofollow\" >Accessibility requirements and best practices for PowerPoint<\/a><\/p>\n\n\n\n<p>[54] Microsoft Support. (2025) <a href=\"https:\/\/support.microsoft.com\/en-us\/office\/make-your-powerpoint-presentations-accessible-to-people-with-disabilities-6f7772b2-2f33-4bd2-8ca7-dae3b2b3ef25?ui=en-us&amp;rs=en-us&amp;ad=us#picktab=windows\" target=\"_blank\" rel=\"noopener\" title=\"\" rel=\"nofollow\" >Make your PowerPoint presentations accessible to people with disabilities<\/a><\/p>\n\n\n\n<p>[55] A11Y Collective. (2024) <a href=\"https:\/\/www.a11y-collective.com\/blog\/html-accessibility-programming-with-an-inclusive-perspective\/\" target=\"_blank\" rel=\"noopener\" title=\"\" rel=\"nofollow\" >HTML accessibility: Programming with an inclusive perspective<\/a><\/p>\n\n\n\n<p>[56] Mozilla Developer Network. (2025) <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Learn_web_development\/Core\/Accessibility\/HTML\" rel=\"nofollow\" >H<\/a><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Learn_web_development\/Core\/Accessibility\/HTML\" target=\"_blank\" rel=\"noopener\" title=\"\" rel=\"nofollow\" >T<\/a><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Learn_web_development\/Core\/Accessibility\/HTML\" rel=\"nofollow\" >ML: A good basis for accessibility<\/a><\/p>\n\n\n\n<p>[57] BlogerSii. (2024) <a href=\"https:\/\/sii.pl\/blog\/responsywny-design-precyzyjna-kontrola-typografii\/\" target=\"_blank\" rel=\"noopener\" title=\"\">Responsywny design: precyzyjna kontrola typografii<\/a><\/p>\n\n\n\n<p>[58] Fundacja Widzialni. (2016) <a href=\"https:\/\/wcag20.widzialni.org\/czcionki,m,mg,162\" target=\"_blank\" rel=\"noopener\" title=\"\" rel=\"nofollow\" >Czcionki<\/a><\/p>\n\n\n\n<p>[59] Make Things Accessible. (2023) <a href=\"https:\/\/www.makethingsaccessible.com\/guides\/creating-a-skip-to-content-link\/\" target=\"_blank\" rel=\"noopener\" title=\"\" rel=\"nofollow\" >Create a skip to content link<\/a><\/p>\n\n\n\n<p>[60] W3C. (2025) <a href=\"https:\/\/www.w3.org\/WAI\/WCAG22\/Understanding\/target-size-minimum.html\" target=\"_blank\" rel=\"noopener\" title=\"\" rel=\"nofollow\" >Target size (minimum) (level AA)<\/a><\/p>\n\n\n\n<p>[61] W3C. (2025) <a href=\"https:\/\/www.w3.org\/WAI\/ARIA\/apg\/patterns\/tooltip\/\" target=\"_blank\" rel=\"noopener\" title=\"\" rel=\"nofollow\" >Tooltip pattern<\/a><\/p>\n\n\n\n<p>[62] Digital Policy Office. (2025) <a href=\"https:\/\/www.digitalpolicy.gov.hk\/en\/our_work\/digital_government\/digital_inclusion\/accessibility\/promulgating_resources\/handbook\/wcag2a\/8_20_pointer_gestures.html\" target=\"_blank\" rel=\"noopener\" title=\"\" rel=\"nofollow\" >8.20 WCAG 2.2 success criterion 2.5.1 \u2013 pointer gestures<\/a><\/p>\n\n\n\n<p>[63] The Pennsylvania State University. (2023) <a href=\"https:\/\/accessibility.psu.edu\/guidelines\/wcaglist\/\" target=\"_blank\" rel=\"noopener\" title=\"\" rel=\"nofollow\" >WCAG 2.2 guidelines<\/a><\/p>\n\n\n\n<p>[64] University of Bath. (2025) <a href=\"https:\/\/www.bath.ac.uk\/guides\/making-accessible-video-and-audio-content\/\" target=\"_blank\" rel=\"noopener\" title=\"\" rel=\"nofollow\" >Making accessible video and audio content<\/a><\/p>\n\n\n\n<p>[65] Testing Bot. (2025) <a href=\"https:\/\/testingbot.com\/support\/accessibility\/web\/rules\/no-autoplay-audio\" target=\"_blank\" rel=\"noopener\" title=\"\" rel=\"nofollow\" >Ensure &lt;video&gt; or &lt;audio&gt; elements do not autoplay audio for more than 3 seconds without a control mechanism to stop or mute the audio<\/a><\/p>\n\n\n\n<p>[66] The University of Chicago. (2025) <a href=\"https:\/\/digitalaccessibility.uchicago.edu\/resources\/content-creators\/captions\/\" target=\"_blank\" rel=\"noopener\" title=\"\" rel=\"nofollow\" >Captions, transcripts, and audio description<\/a><\/p>\n\n\n\n<p>[67] Bureau of Internet Accessibility. (2024) <a href=\"https:\/\/www.boia.org\/blog\/do-i-really-need-audio-descriptions-for-ada-compliance\" target=\"_blank\" rel=\"noopener\" title=\"\" rel=\"nofollow\" >Do I really need audio descriptions for ADA compliance?<\/a><\/p>\n\n\n\n<p>[68] Mozilla Developer Network. (2025) <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/Accessibility\/ARIA\/Guides\/Techniques\" target=\"_blank\" rel=\"noopener\" title=\"\" rel=\"nofollow\" >Using ARIA: Roles, states, and properties<\/a><\/p>\n\n\n\n<p>[69] Wikipedia. (2008) <a href=\"https:\/\/en.wikipedia.org\/wiki\/WAI-ARIA\" target=\"_blank\" rel=\"noopener\" title=\"\" rel=\"nofollow\" >WAI-ARIA<\/a><\/p>\n\n\n\n<p>[70] W3C. (2025) <a href=\"https:\/\/www.w3.org\/WAI\/ARIA\/apg\/patterns\/dialog-modal\/\" target=\"_blank\" rel=\"noopener\" title=\"\" rel=\"nofollow\" >Dialog (modal) pattern<\/a><\/p>\n\n\n\n<p>[71] Web.dev. (2016) <a href=\"https:\/\/web.dev\/articles\/hiding-and-updating-content\" target=\"_blank\" rel=\"noopener\" title=\"\" rel=\"nofollow\" >Hiding and updating content<\/a><\/p>\n\n\n\n<p>[72] W3C. (2025) <a href=\"https:\/\/www.w3.org\/WAI\/test-evaluate\/\" target=\"_blank\" rel=\"noopener\" title=\"\" rel=\"nofollow\" >Evaluating web accessibility overview<\/a><\/p>\n\n\n\n<p>[73] NSW Government. (2025) <a href=\"https:\/\/www.digital.nsw.gov.au\/delivery\/accessibility-and-inclusivity-toolkit\/testing\/accessibility-testing\" target=\"_blank\" rel=\"noopener\" title=\"\" rel=\"nofollow\" >Accessibility testing<\/a><\/p>\n\n\n\n<p>[74] WAVE. (2025) <a href=\"https:\/\/wave.webaim.org\" target=\"_blank\" rel=\"noopener\" title=\"\" rel=\"nofollow\" >WAVE web accessibility evaluation tools<\/a><\/p>\n\n\n\n<p>[75] Deque Systems. (2025) <a href=\"https:\/\/www.deque.com\/axe\/\" target=\"_blank\" rel=\"noopener\" title=\"\" rel=\"nofollow\" >Accessibility testing tools &amp; software: Axe<\/a><\/p>\n\n\n\n<p>[76] Sparkbox. (2020) <a href=\"https:\/\/sparkbox.com\/foundry\/lighthouse_chrome_website_accessibility_audit_website_accessibility_checker\" target=\"_blank\" rel=\"noopener\" title=\"\" rel=\"nofollow\" >Google Lighthouse review<\/a><\/p>\n\n\n\n<p>[77] BrowserStack. (2025) <a href=\"https:\/\/www.browserstack.com\/docs\/accessibility\/overview\/launch-browser-extension\" target=\"_blank\" rel=\"noopener\" title=\"\" rel=\"nofollow\" >Launch BrowserStack accessibility toolkit<\/a><\/p>\n\n\n\n<p>[78] BlogerSii. (2024) <a href=\"https:\/\/sii.pl\/blog\/mabl-low-codeowe-narzedzie-pomocne-w-automatyzacji-testow-dostepnosci\/\" target=\"_blank\" rel=\"noopener\" title=\"\">Mabl \u2013 low-code&#8217;owe narz\u0119dzie pomocne w automatyzacji test\u00f3w dost\u0119pno\u015bci<\/a><\/p>\n\n\n\n<p>[79] BlogerSii. (2023) <a href=\"https:\/\/sii.pl\/blog\/czy-chatgpt-moze-pomoc-w-zapewnieniu-dostepnosci\/\" target=\"_blank\" rel=\"noopener\" title=\"\">Czy ChatGPT mo\u017ce pom\u00f3c w zapewnieniu dost\u0119pno\u015bci?<\/a><\/p>\n\n\n\n<p>[80] BlogerSii. (2024) <a href=\"https:\/\/sii.pl\/blog\/dostepnosc-a-sztuczna-inteligencja-nowe-technologie-wspierajace-tworzenie-bardziej-inkluzywnych-doswiadczen\/\" target=\"_blank\" rel=\"noopener\" title=\"\">Dost\u0119pno\u015b\u0107 a sztuczna inteligencja: Nowe technologie wspieraj\u0105ce tworzenie bardziej inkluzywnych do\u015bwiadcze\u0144<\/a><\/p>\n\n\n\n<p>[81]&nbsp;BlogerSii. (2023) <a href=\"https:\/\/sii.pl\/blog\/czy-ai-chatgpt-moze-byc-pomocna-w-testowaniu\/\" target=\"_blank\" rel=\"noopener\" title=\"\">Czy AI (ChatGPT) mo\u017ce by\u0107 pomocna w testowaniu?<\/a><\/p>\n\n\n<div class=\"kk-star-ratings kksr-auto kksr-align-left kksr-valign-bottom\"\n    data-payload='{&quot;align&quot;:&quot;left&quot;,&quot;id&quot;:&quot;32469&quot;,&quot;slug&quot;:&quot;default&quot;,&quot;valign&quot;:&quot;bottom&quot;,&quot;ignore&quot;:&quot;&quot;,&quot;reference&quot;:&quot;auto&quot;,&quot;class&quot;:&quot;&quot;,&quot;count&quot;:&quot;5&quot;,&quot;legendonly&quot;:&quot;&quot;,&quot;readonly&quot;:&quot;&quot;,&quot;score&quot;:&quot;5&quot;,&quot;starsonly&quot;:&quot;&quot;,&quot;best&quot;:&quot;5&quot;,&quot;gap&quot;:&quot;2&quot;,&quot;greet&quot;:&quot;&quot;,&quot;legend&quot;:&quot;5\\\/5&quot;,&quot;size&quot;:&quot;30&quot;,&quot;title&quot;:&quot;WCAG 2.2: Kompleksowy przewodnik po dost\u0119pno\u015bci cyfrowej&quot;,&quot;width&quot;:&quot;159&quot;,&quot;_legend&quot;:&quot;{score}\\\/5&quot;,&quot;font_factor&quot;:&quot;1.25&quot;}'>\n            \n<div class=\"kksr-stars\">\n    \n<div class=\"kksr-stars-inactive\">\n            <div class=\"kksr-star\" data-star=\"1\" style=\"padding-right: 2px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 30px; height: 30px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" data-star=\"2\" style=\"padding-right: 2px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 30px; height: 30px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" data-star=\"3\" style=\"padding-right: 2px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 30px; height: 30px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" data-star=\"4\" style=\"padding-right: 2px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 30px; height: 30px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" data-star=\"5\" style=\"padding-right: 2px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 30px; height: 30px;\"><\/div>\n        <\/div>\n    <\/div>\n    \n<div class=\"kksr-stars-active\" style=\"width: 159px;\">\n            <div class=\"kksr-star\" style=\"padding-right: 2px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 30px; height: 30px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" style=\"padding-right: 2px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 30px; height: 30px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" style=\"padding-right: 2px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 30px; height: 30px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" style=\"padding-right: 2px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 30px; height: 30px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" style=\"padding-right: 2px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 30px; height: 30px;\"><\/div>\n        <\/div>\n    <\/div>\n<\/div>\n                \n\n<div class=\"kksr-legend\" style=\"font-size: 24px;\">\n            5\/5    <\/div>\n    <\/div>\n","protected":false},"excerpt":{"rendered":"<p>Artyku\u0142 stanowi przegl\u0105d wytycznych dost\u0119pno\u015bci tre\u015bci internetowych WCAG 2.2. Zawiera praktyczne aspekty implementacji standard\u00f3w inkluzywno\u015bci cyfrowej, w tym m.in.: regu\u0142y &hellip; <a class=\"continued-btn\" href=\"https:\/\/sii.pl\/blog\/wcag-2-2-kompleksowy-przewodnik-po-dostepnosci-cyfrowej\/\">Continued<\/a><\/p>\n","protected":false},"author":752,"featured_media":32477,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_editorskit_title_hidden":false,"_editorskit_reading_time":0,"_editorskit_is_block_options_detached":false,"_editorskit_block_options_position":"{}","inline_featured_image":false,"footnotes":""},"categories":[1314],"tags":[7144,2193,1839,1609,1512,1117,1118],"class_list":["post-32469","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-development-na-twardo","tag-mba","tag-mabl","tag-powerpoint","tag-chatgpt","tag-poradnik","tag-dostepnosc","tag-wcag"],"acf":[],"aioseo_notices":[],"republish_history":[],"featured_media_url":"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2025\/11\/Ideas-2.jpg","category_names":["Development na twardo"],"_links":{"self":[{"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/posts\/32469"}],"collection":[{"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/users\/752"}],"replies":[{"embeddable":true,"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/comments?post=32469"}],"version-history":[{"count":3,"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/posts\/32469\/revisions"}],"predecessor-version":[{"id":33817,"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/posts\/32469\/revisions\/33817"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/media\/32477"}],"wp:attachment":[{"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/media?parent=32469"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/categories?post=32469"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/tags?post=32469"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}