{"componentChunkName":"component---src-templates-blog-post-js","path":"/blog/meeting-web-accessibility-guidelines-kurs-pluralsight","result":{"data":{"markdownRemark":{"html":"<p>Notatki do <a href=\"https://app.pluralsight.com/courses/4fd6f17e-022e-4461-9b82-c8a9c05c02b4/table-of-contents\">kursu Pluralsight o dostępności stron internetowych</a> pn. \"Meeting Web Accessibility Guidelines (Section 508/ WCAG 2.1)\"</p>\n<h1>Wybór \"kodeksu\"</h1>\n<p>Istnieją w branży pewne \"kodeksy\" (<em>conformance guidelines</em>), określające zasady dostosowania stron internetowych dla osób z niepełnosprawnościami.</p>\n<p>Jakie są korzyści z ich zastosowania?</p>\n<ul>\n<li>dostępność dla OzN</li>\n<li>zabezpiecza przed pozwami sądowymi (tak, w Stanach firma może być pozwana np. za to, że jej strona nie jest dostępna dla osób niewidomych)</li>\n<li>poprawa SEO</li>\n<li>ogólnie lepsze <em>usability</em></li>\n<li>kiedy się zestarzejesz, łatwiej Ci będzie z tej aplikacji korzystać - bo z wiekiem i Ty będziesz mieć problemy np. ze wzrokiem</li>\n</ul>\n<p>Najbardziej znane \"kodeksy\" (z perspektywy amerykańskiej):</p>\n<ul>\n<li>Section 508</li>\n<li>WCAG 2.1</li>\n</ul>\n<h2>Section 508</h2>\n<ul>\n<li>uchwalona w 1986 r. poprawka do <em>Rehabilitation Act</em> z 1973 r., zaktualizowana też w 2017 r.</li>\n<li>dotyczy stron rządowych albo takich, które za rządowe środki powstały</li>\n<li>w przeciwieństwie do ogólnoświatowego WCAG, Section 508 jest używana głównie w USA</li>\n</ul>\n<h2>WCAG (Web Conformance Accessiblity Guideline)</h2>\n<ul>\n<li>tworzone przez grupę, która jest częścią W3C (<em>industry standard</em>)</li>\n<li>\n<p>oparte na czterech zasadach (POUR):</p>\n<ul>\n<li><em>perceivable</em> - każdy użytkownik jest w stanie \"odebrać\" informację</li>\n<li><em>operable</em> - każdy użytkownik jest w stanie operować na stronie, bez względu na to, czy używa myszki, czy klawiatury</li>\n<li><em>understandable</em> - informacja na stronie jest zrozumiała, a interakcje przewidywalne (logiczne)</li>\n<li><em>robust</em> - strona musi działać z różnymi technologiami asystującymi</li>\n</ul>\n</li>\n<li>poziomy: A, AA, AAA (im więcej A, tym bardziej \"restrykcyjne\" reguły)</li>\n<li><a href=\"https://www.w3.org/TR/WCAG21/\">strona WCAG</a> zawiera dokładnie rozpisanie kilkudziesięciu wskazówek</li>\n<li>podstawowa rekomendacja - osiągnąć WCAG 2.1 AA (co przy okazji wypełnia w 100% Section 508)</li>\n</ul>\n<h1>HTML</h1>\n<h2>Struktura strony</h2>\n<ul>\n<li>\n<p>ściśle poprawny HTML:</p>\n<ul>\n<li><code class=\"language-text\">&lt;!doctype html></code> - wymagane przez WCAG!</li>\n<li>brak zduplikowanych albo niedomkniętych tagów</li>\n</ul>\n</li>\n<li>określić język strony (WCAG A 3.1.1) - atrybut <code class=\"language-text\">lang</code> na elemencie <code class=\"language-text\">&lt;html></code>; jeśli jakieś fragmenty są w innym języku - nawet kawałki <code class=\"language-text\">span</code> - tam też należy użyć atrybutu <code class=\"language-text\">lang</code>, żeby zmienić \"lokalnie\" język (WCAG AA 3.1.2)</li>\n<li>tytuł strony (WCAG A 2.4.2), inny dla każdej strony (żeby ułatwić orientację)</li>\n<li>\n<p>poprawne skalowanie (WCAG AA 1.4.4):</p>\n<ul>\n<li><code class=\"language-text\">&lt;meta name=\"viewport\"></code> - nie stosować <code class=\"language-text\">user-scalable=no</code> ani <code class=\"language-text\">maximum-scale=1</code> (bo to wyłącza powiększenie)</li>\n<li>używaj w CSS <em>relative units</em>, tzn. <code class=\"language-text\">rem</code> lub <code class=\"language-text\">em</code> do określania rozmiarów (bo WCAG AA 1.4.1 wymaga, żeby dało się korzystać ze strony powiększonej o 200%)</li>\n<li>strona musi działać i wyglądać, nawet jeśli użytkownik powiększy interlinię (do 1.5), odstęp po akapicie (do 2-krotności czcionki), kerning (do 1/8 rozmiaru czcionki) lub odstęp między wyrazami (do 1/6 rozmariu czcionki) - WCAG AA 1.4.12</li>\n</ul>\n</li>\n<li>\n<p>używaj tagów z HTML5, tj. <code class=\"language-text\">header</code>, <code class=\"language-text\">nav</code>, <code class=\"language-text\">main</code>, <code class=\"language-text\">footer</code>, <code class=\"language-text\">aside</code> (WCAG A 1.3.1, WCAG A 2.4.1) - bo ujawniają strukturę treści oraz ułatwiają nawigację</p>\n<ul>\n<li>jeśli jest kilka elementów <code class=\"language-text\">nav</code> na stronie - np. na górze, powtórka w stopce oraz oddzielny na bocznym pasku, to mozna je odróżnić nazwami, podanymi w atrybucie <code class=\"language-text\">aria-label</code></li>\n<li><code class=\"language-text\">main</code> może być tylko jeden na stronie</li>\n</ul>\n</li>\n<li>\n<p>używaj nagłówków (WCAG A 2.4.6)</p>\n<ul>\n<li><code class=\"language-text\">h1</code> może być tylko jeden na stronie</li>\n<li>nagłówki powinny iść po kolei, bez przeskakiwania, np. z <code class=\"language-text\">h1</code> od razu do <code class=\"language-text\">h5</code></li>\n</ul>\n</li>\n<li>stosuj listy (<code class=\"language-text\">li</code>, <code class=\"language-text\">ul</code>) zamiast grupy <code class=\"language-text\">div</code>-ów - screen reader dzięki temu może rozpoznać, jaki to jest typ listy, ile ona zawiera elementów oraz poinformować, który element z listy jest aktywny (WCAG A 1.3.1)</li>\n</ul>\n<h2>Nawigacja</h2>\n<ul>\n<li>użyj tekstu zamiast obrazka z tekstem, np. w linkach (WCAG AA 1.4.5)</li>\n<li>linki nawigacyjne na różnych stronach poiwnny być w tej samej kolejności na wszystkich stronach (WCAG AA 3.2.3)</li>\n<li>spójna identyfikacja - jeśli na stronie jest np. wyszukiwarka na pasku, to przycisk \"submit\" powinien być wszędzie opisany tak samo (WCAG AA 3.2.4)</li>\n<li>\n<p>linki powinny opisywać to, dokąd prowadzą - nie używaj czegoś w stylu: <code class=\"language-text\">&lt;p>Kliknij &lt;a>tutaj&lt;/a>, żeby złożyć zamówienie&lt;/p></code> (WCAG A 2.4.4)</p>\n<ul>\n<li>\n<p>unikaj samego \"czytaj więcej\" w opisie linku - jeśli użytkownik będzie iterował po samych linkach, to będzie miał tylko listę wielu \"czytaj więcej\" (np. na stronie głównej bloga) i nie będzie wiedział, dokąd one prowadzą; pewnym kompromisem jest mieć coś takiego:</p>\n<div class=\"gatsby-highlight\" data-language=\"html\"><pre style=\"counter-reset: linenumber NaN\" class=\"language-html line-numbers\"><code class=\"language-html\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>a</span> <span class=\"token attr-name\">href</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>/strona<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>\nCzytaj więcej <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>span</span> <span class=\"token attr-name\">class</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>hidden<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>o nowościach w .NET<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>span</span><span class=\"token punctuation\">></span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>a</span><span class=\"token punctuation\">></span></span></code><span aria-hidden=\"true\" class=\"line-numbers-rows\" style=\"white-space: normal; width: auto; left: 0;\"><span></span><span></span><span></span></span></pre></div>\n<p>wówczas wystarczy dopowiednio ostylować CSS-ową klasę <code class=\"language-text\">hidden</code> tak, aby była niewiodczna - czytnik ekranu jednak ten tekst odczyta</p>\n</li>\n</ul>\n</li>\n<li>\n<p><em>bypass blocks</em> (WCAG A 2.4.1) - czyli mechanizm do omijania np. nagłówka z linkami; taki <em>skip link</em> powinien:</p>\n<ul>\n<li>być pierwszym elementem na stronie</li>\n<li>ostylowany tak, aby występował poza ekranem, chyba, że jest na nim fokus, np. tak:</li>\n</ul>\n<div class=\"gatsby-highlight\" data-language=\"css\"><pre style=\"counter-reset: linenumber NaN\" class=\"language-css line-numbers\"><code class=\"language-css\"><span class=\"token selector\">.skip-link</span> <span class=\"token punctuation\">{</span>\n<span class=\"token property\">left</span><span class=\"token punctuation\">:</span> -100%<span class=\"token punctuation\">;</span>\n<span class=\"token property\">position</span><span class=\"token punctuation\">:</span> absolute<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n\n<span class=\"token selector\">.skip-link:focus</span> <span class=\"token punctuation\">{</span>\n<span class=\"token property\">left</span><span class=\"token punctuation\">:</span> 50%<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span></code><span aria-hidden=\"true\" class=\"line-numbers-rows\" style=\"white-space: normal; width: auto; left: 0;\"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></pre></div>\n<ul>\n<li>jeśli robimy \"skok\" robimy za pomocą fokusa, to:</li>\n<li>docelowy element (ten, do którego <em>skip link</em> ma nawigować) powienien mieć atrybut <em>tabindex</em> ustawiony na <code class=\"language-text\">-1</code></li>\n<li>na <code class=\"language-text\">onclick</code> tego skip linka, powinniśmy sfokusować docelowy element</li>\n</ul>\n</li>\n</ul>\n<h2>Tabele</h2>\n<blockquote>\n<p>Table should not be used for layout! It is not 1999.</p>\n</blockquote>\n<ul>\n<li>tytuł tabeli, poprzedzający ją, powienien być w tagu <code class=\"language-text\">caption</code> (pierwszy \"child\" elementu <code class=\"language-text\">table</code>)</li>\n<li>nagłówek: użyj <code class=\"language-text\">th</code> zamiast <code class=\"language-text\">td</code> i użyj atrybutu <code class=\"language-text\">scope=\"col\"</code> (bo tam jest \"tytuł\" dla kolumny)</li>\n<li>wiersz: jeśli w tabeli są grupy (wiersza z <code class=\"language-text\">colspan</code>, będące nagłówkami grupy), to to tam użyj <code class=\"language-text\">th</code>, ale <code class=\"language-text\">scope=\"colgroup\"</code></li>\n<li>jeśli nadasz nagłówkom <code class=\"language-text\">th</code> (dla kolumn i grup) unikalne identyfikatory, możesz ich użyć w komórkach <code class=\"language-text\">td</code> atrybutu <code class=\"language-text\">headers</code> z wartością będącą listą id-ków nagłówków (coś w stylu współrzędnych)</li>\n<li>za pomocą ukrywania CSS-em (tak jak było to z \"read more\") możesz w tagu <code class=\"language-text\">caption</code> dać szerszy opis, jak dane są ustrykturyzowane, zwłaszcza jeśli tabela jest bardziej złożona, ma podgrupy itp.</li>\n<li>dzięki strukturze tabeli (zamiast <code class=\"language-text\">div</code>-ów) VoiceOver będzie poprawnie opisywał komórki oraz umożliwi nawigację pomiędzy wierszami/kolumnami za pomocą skrótów klawiszowych</li>\n<li>ogólnie lepiej złożone tabele rozbijać na kilka mniejszych, bo to ułatwi zadanie czytnikowi ekranu</li>\n<li>tag <code class=\"language-text\">tfoot</code> powinen być przed tagiem <code class=\"language-text\">tbody</code></li>\n</ul>\n<h2>Formularze</h2>\n<ul>\n<li>odpowiednie opisy i etykiety do pól (WCAG A 1.3.1, WCAG A 3.3.2, WCAG AA 2.4.6)</li>\n<li>na inputach label musi się zgadzać z widocznym opisem pola (WCAG A 2.5.3)</li>\n<li>zgrupuj pola, które dotyczą logicznej całości (np. kilka inputów dla adresu: miasto, ulica etc.) - używaj <code class=\"language-text\">fieldset</code>, <code class=\"language-text\">legend</code></li>\n<li>walidacja, stan pola itp. nie mogą być wyróżnione tylko w sposób wizualny (WCAG 1.3.3)</li>\n<li>jeśli input jest niestandardowy, zadbaj o to, by się poprawnie fokusował, inaczej osoba korzystająca tylko z klawiatury, nie będzie w stanie \"doscrollować się\" do niego i go zobaczyć (WCAG A 2.1.1)</li>\n<li><em>no keyboard traps</em> (WCAG A 2.1.2)</li>\n<li>jeśli obiekt jest fokusowalny, to stan <em>focus</em> i zwykły muszą być wizualnie rozróżnialne (AA 2.4.7)</li>\n<li>błędy muszą być opisane tekstem (a nie tylko np. obrazkiem wykrzyknika) - WCAG A 3.3.; jeśli jest możliwe zasugerować, jak poprawić błąd (np. data podróży \"tam\" nie może być późniejsza niż podróż powrotna), to powinno być to przedstawione użytkownikowi (WCAG AA 3.3.3)</li>\n<li>element <code class=\"language-text\">form</code> powinien mieć atrybut <code class=\"language-text\">novalidate</code>, bo przeglądarkowe \"tooltipy\" takiej walidacji nie są dostępne</li>\n<li><code class=\"language-text\">label</code>: albo za pomocą atrybutu <code class=\"language-text\">for</code> (wtedy <code class=\"language-text\">label</code> jest rodzeństwem opisywanego inputu), albo poprzez opakowanie (wówczas <code class=\"language-text\">label</code> jest rodzicem)</li>\n<li><code class=\"language-text\">tabindex</code> - dwie dozwolone wartości: <code class=\"language-text\">-1</code> (wyłączamy z naturalnej kolejności focusowania, ale możemy sfocusować za pomocą JS) oraz <code class=\"language-text\">0</code> (po prostu zmienia element niefokusowalny w fokusowalny)</li>\n<li>jeśli formularz ma konsekwencje w \"realnym życiu\" (np. zakup) albo w bazie danych (np. zapis edytowanego rekordu), końcowa akcja musi być zatwierdzana (WCAG AA 3.3.4)</li>\n<li>jeśli istnieje jakiś limit czasowy (np. automatyczne zakończenie sesji), użytkownik musi mieć co najmniej 20 sekund na podjęcie decyzji, czy chce przesunąć ten limit czasowy (WCAG A 2.2.1); oczywiście to nie dotyczy tych ograniczeń czasowych, które wynikają z \"reguł biznesowych\", np. ograniczonej w czasie rezerwacji miejsca podczas zakupu biletu</li>\n<li>kontrast dla tekstu powinien być co najmniej 4,5:1 (WCAG AA 1.4.3)</li>\n<li>elementy interfejsu i grafiki powinny mieć kontrast co najmniej 3:1 (WCAG 1.4.11)</li>\n</ul>\n<h1>Obrazy, dźwięki i filmy</h1>\n<h2>Obrazy</h2>\n<ul>\n<li>nie wolno używać obrazków z tekstem zamiast zwykłego tekstu (WCAG AA 1.4.5)</li>\n<li>podstawowa zasada - WCAG A 1.1.1 - nietekstowe treści powinny być zaprezentowane w jakiejś alternatywnej, tekstowej formie</li>\n<li>\n<p><strong>wszystkie</strong> obrazki powinny mieć atrybut <code class=\"language-text\">alt</code>; jeśli dany obrazek jest tylko dekoracją, to powinny mieć pusty atrybut <code class=\"language-text\">alt</code> (inaczej czytnik ekranu będzie czytał nazwę pliku...)</p>\n<ul>\n<li>opis w atrybucie <code class=\"language-text\">alt</code> wcale nie musi być literalnym opisem tego, co jest na obrazku</li>\n<li>nie używaj fraz typu \"obrazek przedstawia...\", bo czytnik ekranu już sam informuje, że dany element jest obrazem</li>\n<li>opisz znaczenie lub cel obrazu, a jeśli zawiera tekst, który ma znaczenie, to powinien on być też w atrybucie <code class=\"language-text\">alt</code></li>\n</ul>\n</li>\n<li>jeśli obraz jest ustawiony jako tło w CSS (częsty przykład z ikonami, robiony po to, by poprawić wydajność strony), należy po prostu dodać ukryty tekst, który opisuje ikonę (skoro nie ma tagu <code class=\"language-text\">img</code>, nie możemy użyć <code class=\"language-text\">alt</code>)</li>\n<li>\n<p>obrazek wektorowy (SVG) - należy dodać:</p>\n<ul>\n<li><code class=\"language-text\">role=\"img\"</code>, żeby czytnik ekranu wiedział, że to jest obrazek</li>\n<li>wewnątrz tagu <code class=\"language-text\">svg</code> - tag <code class=\"language-text\">title</code>; opcjonalnie, jeśli chcemy szerzej opisać obrazek, można dodać też tag <code class=\"language-text\">desc</code></li>\n<li>żeby zapewnić kompatybilność z różnymi przeglądarkami, należy za pomocą <code class=\"language-text\">aria-labelledby</code> zrobić odnośnik do tagu <code class=\"language-text\">title</code> (i analogicznie atrybutem <code class=\"language-text\">aria-describedby</code>, jeśli używamy tagu <code class=\"language-text\">desc</code>)</li>\n</ul>\n</li>\n</ul>\n<h2>Dźwięk</h2>\n<ul>\n<li>\n<p>każde nagranie audio, które nie jest \"na żywo\" (i.e. zostało nagrane wcześniej) powinno mieć reprezentację tekstową, która prezentuje tę samą treść (transkrypcję) - WCAG A 1.2.1</p>\n<ul>\n<li>Google Docs Voice Typing albo Windows Speech Recognition - narzędzia, które mogą zapewnić półautomatyczną transkrypcję (pewnie tylko lub głównie po angielsku...)</li>\n<li>w transkrypcji podaj imiona (nazwiska) rozmawiających oraz opisz też \"pozawerbalne\" dźwięki (śmiech, inny ton)</li>\n</ul>\n</li>\n<li>jeśli na stronie automatycznie włącza się jakiś dźwięk na dłużej niż 3 sekundy, musi być mechanizm, żeby ten dźwięk wyłączyć lub zapauzować lub dostosować jego głośność niezależnie od poziomu głośności urządzenia (WCAG A 1.4.2) - (na marginesie: ja bym tu też dodał: Żadna strona nie powinna na dzień dobry atakować użytkownika dźwiękami. Nie jesteśmy w roku 1999. ;) )</li>\n<li>analogicznie, jeśli jakaś treść, która się automatycznie przesuwa, zmienia lub pulsuje (czyli nie tylko filmy, ale np. \"karuzele\") - musi być mechanizm, żeby taką treść zatrzymać lub ukryć (WCAG A 2.2.2)</li>\n<li>jeśli cokolwiek błyska/pulsuje, minimalna częstotliwość to 3 Hz - chodzi o uniknięcie napadów epilepsji (inna sprawa, że migające strony to znowu wygląda jak rok 1999...)</li>\n</ul>\n<h2>Filmy</h2>\n<ul>\n<li>po pierwsze - transkrypcja wypowiedzi (tak, jakby to było samo audio)</li>\n<li>\n<p>po drugie: napisy do filmu; WCAG A 1.2.1 wymaga tylko dla filmów uprzednio nagranych, natomiast WCAG AA 1.2.4 - także dla nagrań na żywo</p>\n<ul>\n<li>dwa rodzaje:</li>\n<li>\"open\" - zawsze widoczne, \"wgrane\" do filmu</li>\n<li>\"closed\" - pokazywane tylko na życzenie użytkownika, jako nakładka na film</li>\n</ul>\n</li>\n<li>po trzecie: audiodeskrypcja (słowny opis tego, co widać i co się dzieje na filmie oraz odłgosów lub muzyki, budującej nastrój) - WCAG AA 1.2.5</li>\n</ul>\n<h1><em>Responsive Web Design</em></h1>\n<blockquote>\n<p><em>Visual order must match DOM order</em></p>\n</blockquote>\n<p>Czyli kolejność fokusów musi być sensowna i taka, jak to jest widoczne, bez przeskakiwania np. do stopki, żeby potem wrócić do głównej treści (WCAG A 1.3.2, WCAG A 2.4.3).</p>\n<ul>\n<li>strona musi działać niezależnie, jak obrócony jest telefon (portret/krajobraz) - WCAG AA 1.3.4</li>\n<li>jeśli operacja jest dostępna za pomocą gestów (np. zoom dwoma palcami), to musi być też ścieżka za pomocą pojdenyczego wskazania (np. przyciski +/-) (WCAG A 2.5.1)</li>\n<li>akcje powinny być podpięte pod eventy typu <code class=\"language-text\">click</code>/<code class=\"language-text\">touch</code>, a nie pod <code class=\"language-text\">keydown</code>/<code class=\"language-text\">touchdown</code> - tak aby można było wycofać się z akcji poprzez przesunięcie się (myszką, palcem) poza element (WCAG A 2.5.2)</li>\n<li>jeśli operacja jest wyzwalana poruszaniem urządzenia, powinna być też opcja, żeby wykonać ją za pomocą \"zwykłego\" UI (WCAG A 2.5.4)</li>\n<li>\n<p>jak ukryć element?</p>\n<ul>\n<li><code class=\"language-text\">display: none</code> lub <code class=\"language-text\">visibility:hidden</code> w CSS-ie - niewidoczy dla wzorku, ale i czytnika ekranu</li>\n<li><code class=\"language-text\">aria-hidden=\"true\"</code> - ukrywa tylko przed czytnikiem ekranu</li>\n<li>\n<p>wypozycjonowanie poza ekran - niewidoczny dla wzroku, ale widoczny dla czytnika - np. takim CSS-em:</p>\n<div class=\"gatsby-highlight\" data-language=\"css\"><pre style=\"counter-reset: linenumber NaN\" class=\"language-css line-numbers\"><code class=\"language-css\"><span class=\"token selector\">.hidden</span> <span class=\"token punctuation\">{</span>\n<span class=\"token property\">position</span><span class=\"token punctuation\">:</span> absolute<span class=\"token punctuation\">;</span>\n<span class=\"token property\">left</span><span class=\"token punctuation\">:</span> -10000px<span class=\"token punctuation\">;</span>\n<span class=\"token property\">top</span><span class=\"token punctuation\">:</span> auto<span class=\"token punctuation\">;</span>\n<span class=\"token property\">width</span><span class=\"token punctuation\">:</span> 1px<span class=\"token punctuation\">;</span>\n<span class=\"token property\">height</span><span class=\"token punctuation\">:</span> 1px<span class=\"token punctuation\">;</span>\n<span class=\"token property\">overflow</span><span class=\"token punctuation\">:</span> hidden<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span></code><span aria-hidden=\"true\" class=\"line-numbers-rows\" style=\"white-space: normal; width: auto; left: 0;\"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></pre></div>\n</li>\n</ul>\n</li>\n</ul>","excerpt":"Notatki do kursu Pluralsight o dostępności stron internetowych pn. \"Meeting Web Accessibility Guidelines (Section 508/ WCAG 2.1)\" Wybór \"kodeksu\" Istnieją w…","frontmatter":{"date":"10 May, 2020","path":"/blog/meeting-web-accessibility-guidelines-kurs-pluralsight","title":"Meeting Web Accessibility Guidelines - kurs Pluralsight"},"fields":{"readingTime":{"text":"10 min read"}}}},"pageContext":{}},"staticQueryHashes":["3649515864","63159454"]}