Podsumowanie
Dostępna strona internetowa to taka, która zapewnia pełną czytelność i nawigowalność dla wszystkich użytkowników – zarówno korzystających z myszy, jak i klawiatury czy technologii wspomagających. Kluczowe elementy to semantyczna i hierarchiczna struktura nagłówków (jedno h1, następujące po nim h2–h6), zgodność URL–</code>–<code data-start="729" data-end="733">h1</code>, właściwie opisane obrazy (<code data-start="761" data-end="766">alt</code> i responsywne <code data-start="781" data-end="789">srcset</code>), odpowiednio uzupełniane atrybuty <code data-start="825" data-end="832">title</code> przy linkach (szczególnie przy linkach graficznych), łatwa nawigacja klawiaturą (w tym link „Skip to content”), przejrzyste menu (5–9 pozycji) oznaczone rolami ARIA, responsywność z uwzględnieniem orientacji ekranu oraz zgodne z prawem i przystępne banery cookies. Dodatkowo ważna jest mapa strony jako alternatywna forma nawigacji.</p>
<hr class="" data-start="1169" data-end="1172">
<div class="article-border">
<p style="text-align: center;">Dalszą część artykułu przeczytasz poniżej - pod formularzem.</p>
<div>
<div class="row">
<div class="col-12 cited" id="4oapenwyule4mdm9"><div>
<div class="text-center"></div>
<div class="mx-auto custom-forms-container" data-custom-form="formularz-konsultacji" data-clear-form-after-submit>
<div class="custom-forms-overlay"></div>
<form
method="POST"
enctype="application/x-www-form-urlencoded"
name="form-16-1"
action="/_action_module/CustomForms/submit/eyJ0ZW1wbGF0ZSI6ImtyYWt3ZWIiLCJpbml0aWF0b3IiOiJcL25handhem5pZWpzemUtemFzYWR5LXByb2pla3Rvd2FuaWEtZG9zdGVwbnljaC1zdHJvbi1pbnRlcm5ldG93eWNoIiwicmVkaXJlY3RfdG8iOiIifQ==?form_id=16&step=1"
data-recaptcha-key="6LekmJsjAAAAANUMDi2grMDiyW3SmOtxWVlwmviD"
id="form_form-16-1"
class=""
>
<div class="row g-3">
<div class="row">
<div class="col-12"
>
<div class="fw-bold"><h3>Umów się na darmową konsultację</h3></div>
</div>
</div>
<div
class=" input-field-text"
>
<label
for="form-16-1_field-70"
class="form-label "
>
Imię, nazwisko
<span style="color: red">*</span>
</label>
<input
type="text"
class="form-control "
id="form-16-1_field-70"
name="field-70"
required aria-required="true" placeholder="Podaj co najmniej swoje imię dla ułatwienia kontaktu"
value=""
/>
<small id="form-16-1_field-70_help" class="field-help" style="display: block; font-style: italic; font-size: 90%; margin-top: 5px">
</small>
</div>
<div
class=" input-field-email"
>
<label
for="form-16-1_field-71"
class="form-label "
>
Adres e-mail
<span style="color: red">*</span>
</label>
<input
type="email"
class="form-control "
id="form-16-1_field-71"
name="field-71"
required aria-required="true" placeholder="Podaj swój główny mail firmowy / do komunikacji"
value=""
/>
<small id="form-16-1_field-71_help" class="field-help" style="display: block; font-style: italic; font-size: 90%; margin-top: 5px">
</small>
</div>
<div
class=" input-field-text"
>
<label
for="form-16-1_field-585"
class="form-label "
>
Temat konsultacji
</label>
<input
type="text"
class="form-control "
id="form-16-1_field-585"
name="field-585"
placeholder="np. branża, opis projektu, zakres w którym potrzebujesz pomocy"
value=""
/>
<small id="form-16-1_field-585_help" class="field-help" style="display: block; font-style: italic; font-size: 90%; margin-top: 5px">
</small>
</div>
<div
class=" input-field-datetime_picker"
>
<label
for="form-16-1_field-77"
class="form-label "
>
Data i godzina konsultacji
</label>
<input data-picker-id="aldjtywgsqsjgaqp" type="text" class="form-control " id="form-16-1_field-77"
name="field-77"
placeholder="Zaproponuj najlepszy dla Ciebie termin spotkania online" value="">
<script>
window.addEventListener('DOMContentLoaded', () => {
const picker = document.querySelector('[data-picker-id="aldjtywgsqsjgaqp"]');
flatpickr(picker, {
locale: Flatpickr.l10ns.pl,
minDate: 'today',
...{"enableTime":true,"time_24hr":true},
});
})
</script>
<small id="form-16-1_field-77_help" class="field-help" style="display: block; font-style: italic; font-size: 90%; margin-top: 5px">
</small>
</div>
<div
class=" input-field-text"
>
<label
for="form-16-1_field-587"
class="form-label "
>
Numer telefonu
<span style="color: red">*</span>
</label>
<input
type="text"
class="form-control "
id="form-16-1_field-587"
name="field-587"
required aria-required="true" placeholder=""
value=""
/>
<small id="form-16-1_field-587_help" class="field-help" style="display: block; font-style: italic; font-size: 90%; margin-top: 5px">
</small>
</div>
<input type="text" id="form-16-1_honeypot"
name="honeypot"
class="iceberg-wall" aria-label="honeypot"/>
<script src="https://www.google.com/recaptcha/api.js?render=6LekmJsjAAAAANUMDi2grMDiyW3SmOtxWVlwmviD" async defer></script>
<div class="submit-row
d-flex justify-content-end ">
<input
type="submit"
class="btn btn-primary"
id="form-16-1_submita4e5ee47"
name="submita4e5ee47"
value="Wyślij"
/>
</div>
</div>
</form>
</div>
</div></div>
</div>
</div>
</div>
</div>
<div class=" ice-section section-index-2" data-content-type="articles" id="ppnvgdnkbhpbx1cb" >
<h2 class="article-section-header no-sygnet level-1">Hierarchia i semantyka nagłówków</h2>
<p class="" data-start="1211" data-end="1697">Semantyczna struktura nagłówków jest fundamentem dostępnej treści – każde <code data-start="1285" data-end="1289">h1</code>–<code data-start="1290" data-end="1294">h6</code> oznacza kolejne poziomy ważności informacji. Nagłówki <strong data-start="1349" data-end="1391">należy zagnieżdżać zgodnie z ich rangą</strong>: <code data-start="1393" data-end="1397">h1</code> najważniejszy (po jednym na stronę), <code data-start="1435" data-end="1439">h2</code> rozpoczyna nowe sekcje, a niższe poziomy (<code data-start="1482" data-end="1486">h3</code>–<code data-start="1487" data-end="1491">h6</code>) tworzą podsekcje <span class="ms-1 inline-flex max-w-full items-center relative top-[-0.094rem] animate-[show_150ms_ease-in]"><a href="https://www.w3.org/WAI/tutorials/page-structure/headings/" rel="noopener" target="_blank" class="flex h-6 overflow-hidden rounded-xl px-2.5 text-[0.5625em] font-medium text-token-text-secondary! bg-[#F4F4F4]! dark:bg-[#303030]! transition-colors duration-150 ease-in-out"><span class="relative start-0 bottom-0 flex h-full w-full items-center"><span class="flex h-4 w-full items-center justify-between overflow-hidden"><span class="max-w-full grow truncate overflow-hidden text-center">W3C</span></span></span></a></span>. Właściwe użycie hierarchii nagłówków pomaga zarówno czytnikom ekranu zrozumieć strukturę dokumentu, jak i wyszukiwarkom prawidłowo indeksować treść.</p>
<p class="" data-start="1699" data-end="1967">Ponadto, wyłącznie <strong data-start="1718" data-end="1741">jeden nagłówek <code data-start="1735" data-end="1739">h1</code></strong> na stronie sygnalizuje najważniejszy tytuł. Pozostałe sekcje powinny rozpoczynać się od kolejnych poziomów (<code data-start="1850" data-end="1854">h2</code>, <code data-start="1856" data-end="1860">h3</code> itd.), co utrzymuje porządek semantyczny i ułatwia orientację użytkownikowi oraz automatom wyszukiwawczym.</p>
<hr class="" data-start="1969" data-end="1972">
<h2 class="" data-start="1974" data-end="2007">Zgodność URL, <code data-start="1991" data-end="2000"><title></code> i <code data-start="2003" data-end="2007">h1</code>
</h2>
<p class="" data-start="2009" data-end="2413">Optymalizacja SEO i dostępność idą w parze: <strong data-start="2053" data-end="2066">adres URL</strong>, zawartość tagu <code data-start="2083" data-end="2092"><title></code> (wyświetlanego w karcie przeglądarki) oraz widoczny na stronie <code data-start="2156" data-end="2160">h1</code> powinny być <strong data-start="2173" data-end="2183">spójne</strong> i opisowe. Dzięki temu użytkownik i wyszukiwarka otrzymują jednoznaczny komunikat o treści danej podstrony <span class="ms-1 inline-flex max-w-full items-center relative top-[-0.094rem] animate-[show_150ms_ease-in]"><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/title" rel="noopener" target="_blank" class="flex h-6 overflow-hidden rounded-xl px-2.5 text-[0.5625em] font-medium text-token-text-secondary! bg-[#F4F4F4]! dark:bg-[#303030]! transition-colors duration-150 ease-in-out"><span class="relative start-0 bottom-0 flex h-full w-full items-center"><span class="flex h-4 w-full items-center justify-between overflow-hidden"><span class="max-w-full grow truncate overflow-hidden text-center">MDN Web Docs</span></span></span></a></span>. Zasada „trójnika” URL–<code data-start="2352" data-end="2361"><title></code>–<code data-start="2362" data-end="2366">h1</code> to podstawowy czynnik zarówno w UX, jak i SEO.</p>
<hr class="" data-start="2415" data-end="2418">
<p> </p>
</div>
<div class=" ice-section section-index-3" data-content-type="articles" id="yzvg5kicjjykapxy" >
<h2 class="article-section-header no-sygnet level-1">Obrazy i tekst alternatywny</h2>
<p class="" data-start="2452" data-end="2970">Obrazy muszą zawierać <strong data-start="2474" data-end="2496">tekst alternatywny</strong> (<code data-start="2498" data-end="2503">alt</code>), który opisuje ich zawartość w kontekście strony. Jeśli zdjęcie jest istotne merytorycznie, <code data-start="2597" data-end="2602">alt</code> powinien oddać kluczowe informacje; jeśli dekoracyjne – warto je oznaczyć jako puste (<code data-start="2689" data-end="2697">alt=""</code>) <span class="ms-1 inline-flex max-w-full items-center relative top-[-0.094rem] animate-[show_150ms_ease-in]"><a href="https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Accessibility/HTML" rel="noopener" target="_blank" class="flex h-6 overflow-hidden rounded-xl px-2.5 text-[0.5625em] font-medium text-token-text-secondary! bg-[#F4F4F4]! dark:bg-[#303030]! transition-colors duration-150 ease-in-out"><span class="relative start-0 bottom-0 flex h-full w-full items-center"><span class="flex h-4 w-full items-center justify-between overflow-hidden"><span class="max-w-full grow truncate overflow-hidden text-center">MDN Web Docs</span></span></span></a></span>. Dodatkowo, dla zachowania wydajności i dostępności warto stosować <strong data-start="2804" data-end="2826">responsywne obrazy</strong> z atrybutami <code data-start="2840" data-end="2848">srcset</code> i <code data-start="2851" data-end="2858">sizes</code>, co pozwala przeglądarce wybrać optymalną wersję pliku dla danego ekranu <span class="ms-1 inline-flex max-w-full items-center relative top-[-0.094rem] animate-[show_150ms_ease-in]"><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Responsive_images" rel="noopener" target="_blank" class="flex h-6 overflow-hidden rounded-xl px-2.5 text-[0.5625em] font-medium text-token-text-secondary! bg-[#F4F4F4]! dark:bg-[#303030]! transition-colors duration-150 ease-in-out"><span class="relative start-0 bottom-0 flex h-full w-full items-center"><span class="flex h-4 w-full items-center justify-between overflow-hidden"><span class="max-w-full grow truncate overflow-hidden text-center">MDN Web Docs</span></span></span></a></span>.</p>
<hr class="" data-start="2972" data-end="2975">
<h2 class="" data-start="2977" data-end="3003">Linki i atrybut <code data-start="2996" data-end="3003">title</code>
</h2>
<p class="" data-start="3005" data-end="3598">Linki tekstowe powinny być czytelne i zrozumiałe same w sobie, ale <strong data-start="3072" data-end="3091">atrybut <code data-start="3082" data-end="3089">title</code></strong> może dostarczać dodatkowego kontekstu, zwłaszcza przy linkach graficznych lub tam, gdzie tekst nie wystarcza. Należy jednak pamiętać, że korzystanie z <code data-start="3243" data-end="3250">title</code> bywa problematyczne na urządzeniach dotykowych i w niektórych czytnikach ekranu – dlatego informacja zawarta w <code data-start="3362" data-end="3369">title</code> powinna wzmocnić, a nie zastąpić treść linku <span class="ms-1 inline-flex max-w-full items-center relative top-[-0.094rem] animate-[show_150ms_ease-in]"><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/title" rel="noopener" target="_blank" class="flex h-6 overflow-hidden rounded-xl px-2.5 text-[0.5625em] font-medium text-token-text-secondary! bg-[#F4F4F4]! dark:bg-[#303030]! transition-colors duration-150 ease-in-out"><span class="relative start-0 bottom-0 flex h-full w-full items-center"><span class="flex h-4 w-full items-center justify-between overflow-hidden"><span class="max-w-full grow truncate overflow-hidden text-center">MDN Web Docs</span></span></span></a></span>. Warto także oznaczać grupy linków za pomocą ról ARIA, np. <code data-start="3512" data-end="3531">role="navigation"</code> dla elementów nawigacyjnych <span class="ms-1 inline-flex max-w-full items-center relative top-[-0.094rem] animate-[show_150ms_ease-in]"><a href="https://www.w3.org/WAI/ARIA/apg/patterns/landmarks/examples/navigation.html" rel="noopener" target="_blank" class="flex h-6 overflow-hidden rounded-xl px-2.5 text-[0.5625em] font-medium text-token-text-secondary! bg-[#F4F4F4]! dark:bg-[#303030]! transition-colors duration-150 ease-in-out"><span class="relative start-0 bottom-0 flex h-full w-full items-center"><span class="flex h-4 w-full items-center justify-between overflow-hidden"><span class="max-w-full grow truncate overflow-hidden text-center">W3C</span></span></span></a></span>.</p>
<hr class="" data-start="3600" data-end="3603">
</div>
<div class=" ice-section section-index-4" data-content-type="articles" id="l1bgkaplsppdmi4v" >
<h2 class="article-section-header no-sygnet level-1">Nawigacja klawiaturą i link „Skip to Content”</h2>
<p class="" data-start="3655" data-end="4257">Zgodnie z <strong data-start="3665" data-end="3692">Success Criterion 2.1.1</strong> WCAG, całość interfejsu powinna być <strong data-start="3729" data-end="3754">operowalna klawiaturą</strong>, bez konieczności używania myszy <span class="ms-1 inline-flex max-w-full items-center relative top-[-0.094rem] animate-[show_150ms_ease-in]"><a href="https://www.w3.org/WAI/WCAG21/Understanding/keyboard.html" rel="noopener" target="_blank" class="flex h-6 overflow-hidden rounded-xl px-2.5 text-[0.5625em] font-medium text-token-text-secondary! bg-[#F4F4F4]! dark:bg-[#303030]! transition-colors duration-150 ease-in-out"><span class="relative start-0 bottom-0 flex h-full w-full items-center"><span class="flex h-4 w-full items-center justify-between overflow-hidden"><span class="max-w-full grow truncate overflow-hidden text-center">W3C</span></span></span></a></span>. Ponadto, w celu szybkiego pominięcia powtarzalnych bloków (menu, nagłówka) zaleca się umieszczenie <strong data-start="3926" data-end="3953">linku „Skip to content”</strong>, który skieruje fokus bezpośrednio na główną treść <span class="ms-1 inline-flex max-w-full items-center relative top-[-0.094rem] animate-[show_150ms_ease-in]"><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-skip.html" rel="noopener" target="_blank" class="flex h-6 overflow-hidden rounded-xl px-2.5 text-[0.5625em] font-medium text-token-text-secondary! bg-[#F4F4F4]! dark:bg-[#303030]! transition-colors duration-150 ease-in-out"><span class="relative start-0 bottom-0 flex h-full w-full items-center"><span class="flex h-4 w-full items-center justify-between overflow-hidden"><span class="max-w-full grow truncate overflow-hidden text-center">W3C</span></span></span></a></span> <span class="ms-1 inline-flex max-w-full items-center relative top-[-0.094rem] animate-[show_150ms_ease-in]"><a href="https://webaim.org/techniques/skipnav/" rel="noopener" target="_blank" class="flex h-6 overflow-hidden rounded-xl px-2.5 text-[0.5625em] font-medium text-token-text-secondary! bg-[#F4F4F4]! dark:bg-[#303030]! transition-colors duration-150 ease-in-out"><span class="relative start-0 bottom-0 flex h-full w-full items-center"><span class="flex h-4 w-full items-center justify-between overflow-hidden"><span class="max-w-full grow truncate overflow-hidden text-center">webaim.org</span></span></span></a></span>. To rozwiązanie znacząco przyspiesza dostęp do merytorycznej części strony, zwłaszcza dla użytkowników czytników ekranu i osób poruszających się wyłącznie za pomocą klawiatury.</p>
<hr class="" data-start="4259" data-end="4262">
</div>
<div class=" ice-section section-index-5" data-content-type="articles" id="kbc7avgjdtdoywt7" >
<h2 class="article-section-header no-sygnet level-1">Top strony (header) i projekt menu</h2>
<p class="" data-start="4303" data-end="4772">Sekcja <strong data-start="4310" data-end="4320">header</strong>, zwana często „topem strony”, powinna zawierać <strong data-start="4368" data-end="4376">logo</strong> (linkujące do strony głównej) oraz <strong data-start="4412" data-end="4427">główne menu</strong> <span class="ms-1 inline-flex max-w-full items-center relative top-[-0.094rem] animate-[show_150ms_ease-in]"><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/navigation_role" rel="noopener" target="_blank" class="flex h-6 overflow-hidden rounded-xl px-2.5 text-[0.5625em] font-medium text-token-text-secondary! bg-[#F4F4F4]! dark:bg-[#303030]! transition-colors duration-150 ease-in-out"><span class="relative start-0 bottom-0 flex h-full w-full items-center"><span class="flex h-4 w-full items-center justify-between overflow-hidden"><span class="max-w-full grow truncate overflow-hidden text-center">MDN Web Docs</span></span></span></a></span>. W menu głównym zaleca się mieścić od <strong data-start="4504" data-end="4522">5 do 9 pozycji</strong> (zasada 7±2) – liczba większa utrudnia przeglądanie i nawigację <span class="ms-1 inline-flex max-w-full items-center relative top-[-0.094rem] animate-[show_150ms_ease-in]"><a href="https://www.nngroup.com/articles/menu-design/" rel="noopener" target="_blank" class="flex h-6 overflow-hidden rounded-xl px-2.5 text-[0.5625em] font-medium text-token-text-secondary! bg-[#F4F4F4]! dark:bg-[#303030]! transition-colors duration-150 ease-in-out"><span class="relative start-0 bottom-0 flex h-full w-full items-center"><span class="flex h-4 w-full items-center justify-between overflow-hidden"><span class="max-w-full grow truncate overflow-hidden text-center">Nielsen Norman Group</span></span></span></a></span>. W przypadku rozbudowanych struktur warto stosować <strong data-start="4678" data-end="4689">podmenu</strong> lub kategorie rozwijane, pamiętając o responsywnej adaptacji do ekranów mobilnych.</p>
<hr class="" data-start="4774" data-end="4777">
</div>
<div class=" ice-section section-index-6" data-content-type="articles" id="ou7dzoulrhmrrfco" >
<h2 class="article-section-header no-sygnet level-1">Responsywność i orientacja ekranu</h2>
<p class="" data-start="4817" data-end="5377"><strong data-start="4817" data-end="4839">Responsywny design</strong> to nie tylko elastyczne siatki i media queries – to przede wszystkim <strong data-start="4909" data-end="4929">dynamika layoutu</strong> dostosowująca elementy do wielkości ekranu, co poprawia czytelność i użyteczność . Dodatkowo, wg WCAG 2.1 <strong data-start="5075" data-end="5100">SC 1.3.4: Orientation</strong>, treść powinna wyświetlać się poprawnie zarówno w orientacji poziomej, jak i pionowej, bez wymuszania konkretnego ustawienia urządzenia <span class="ms-1 inline-flex max-w-full items-center relative top-[-0.094rem] animate-[show_150ms_ease-in]"><a href="https://www.w3.org/WAI/WCAG21/Understanding/orientation.html" rel="noopener" target="_blank" class="flex h-6 overflow-hidden rounded-xl px-2.5 text-[0.5625em] font-medium text-token-text-secondary! bg-[#F4F4F4]! dark:bg-[#303030]! transition-colors duration-150 ease-in-out"><span class="relative start-0 bottom-0 flex h-full w-full items-center"><span class="flex h-4 w-full items-center justify-between overflow-hidden"><span class="max-w-full grow truncate overflow-hidden text-center">W3C</span></span></span></a></span>. Na stronie warto też uwzględnić meta-tag viewport oraz umożliwić użytkownikowi powiększanie treści.</p>
<hr class="" data-start="5379" data-end="5382">
</div>
<div class=" ice-section section-index-7" data-content-type="articles" id="ppdqmucbtu43qumv" >
<h2 class="article-section-header no-sygnet level-1">Cookie consent i dostępność banerów</h2>
<p class="" data-start="5424" data-end="5947">Baner zgody na ciasteczka (cookie banner) jest dziś wymogiem prawnym, ale często narusza zasady dostępności. Dobry banner powinien być <strong data-start="5559" data-end="5569">prosty</strong>, składać się z minimalnej liczby elementów (przyciski tak/nie, odnośnik do polityki prywatności) i pozostawać możliwy do zamknięcia klawiaturą i czytnikiem ekranu. Jednocześnie unikać należy skomplikowanych struktur (np. tabele, dropdowny) oraz rozwiązań, które całkowicie zasłaniają treść strony <span class="ms-1 inline-flex max-w-full items-center relative top-[-0.094rem] animate-[show_150ms_ease-in]"><a href="https://www.smashingmagazine.com/2023/04/potentially-dangerous-non-accessibility-cookie-notices/" rel="noopener" target="_blank" class="flex h-6 overflow-hidden rounded-xl px-2.5 text-[0.5625em] font-medium text-token-text-secondary! bg-[#F4F4F4]! dark:bg-[#303030]! transition-colors duration-150 ease-in-out"><span class="relative start-0 bottom-0 flex h-full w-full items-center"><span class="flex h-4 w-full items-center justify-between overflow-hidden"><span class="max-w-full grow truncate overflow-hidden text-center"> </span></span></span></a></span>.</p>
<hr class="" data-start="5949" data-end="5952">
</div>
<div class=" ice-section section-index-8" data-content-type="articles" id="kxu1fas2rr2j9vww" >
<h2 class="article-section-header no-sygnet level-1">Mapa strony jako alternatywna nawigacja</h2>
<p class="" data-start="5998" data-end="6493"><strong data-start="5998" data-end="6014">Mapa serwisu</strong> to hierarchiczne zestawienie linków do najważniejszych sekcji i podstron. Najprostsza forma to lista odnośników przedstawiająca strukturę witryny – zgodnie z techniką <strong data-start="6182" data-end="6189">G63</strong> WCAG <span class="ms-1 inline-flex max-w-full items-center relative top-[-0.094rem] animate-[show_150ms_ease-in]"><a href="https://www.w3.org/TR/WCAG20-TECHS/G63.html" rel="noopener" target="_blank" class="flex h-6 overflow-hidden rounded-xl px-2.5 text-[0.5625em] font-medium text-token-text-secondary! bg-[#F4F4F4]! dark:bg-[#303030]! transition-colors duration-150 ease-in-out"><span class="relative start-0 bottom-0 flex h-full w-full items-center"><span class="flex h-4 w-full items-center justify-between overflow-hidden"><span class="max-w-full grow truncate overflow-hidden text-center">W3C</span></span></span></a></span>. Dobrze przygotowana mapa strony pomaga użytkownikom (zwłaszcza tym korzystającym z czytników ekranu) szybko zorientować się w architekturze treści, a także służy celom SEO, gdy jest udostępniona w formacie XML i HTML <span class="ms-1 inline-flex max-w-full items-center relative top-[-0.094rem] animate-[show_150ms_ease-in]"><a href="https://kontent.ai/learn/develop/optimize/enhance-seo/use-sitemaps/rest" rel="noopener" target="_blank" class="flex h-6 overflow-hidden rounded-xl px-2.5 text-[0.5625em] font-medium text-token-text-secondary! bg-[#F4F4F4]! dark:bg-[#303030]! transition-colors duration-150 ease-in-out"><span class="relative start-0 bottom-0 flex h-full w-full items-center"><span class="flex h-4 w-full items-center justify-between overflow-hidden"><span class="max-w-full grow truncate overflow-hidden text-center">Kontent.ai</span></span></span></a></span>.</p>
<hr class="" data-start="6495" data-end="6498">
</div>
<div class=" ice-section section-index-9" data-content-type="articles" id="q64ydwacvjzmszgx" >
<h2 class="article-section-header no-sygnet level-1">Dobre praktyki - wiedza ze szkolenia z dostępności cyfrowej</h2>
</div>
<div class=" ice-section section-index-10" data-content-type="articles" id="6gz3ga4dwfxlk2gl" >
<h3 class="article-section-header no-sygnet level-2">Kontrola animacji i karuzel (slidery)</h3>
<p class="" data-start="0" data-end="853">Współczesne witryny często korzystają z dynamicznych elementów – karuzel, sliderów czy animowanych banerów – by przyciągnąć uwagę użytkownika. Jednak długotrwałe, automatyczne przewijanie treści może być nie tylko rozpraszające, ale wręcz wykluczające dla osób z zaburzeniami poznawczymi lub problemami ze wzrokiem. Dlatego każdy slider powinien oferować użytkownikowi intuicyjne, widoczne i dostępne klawiszowo (tab/enter) przyciski „pauza”, „stop” lub „następny/poprzedni”. Dodatkowo warto zaimplementować atrybuty ARIA (np. <code data-start="574" data-end="594">aria-live="polite"</code>, <code data-start="596" data-end="616">aria-atomic="true"</code>) oraz mechanizm poinformowania o zmianie slajdu, aby czytniki ekranu przekazywały użytkownikowi informację o nowej zawartości. Dzięki temu osoby korzystające z pomocy technologicznych zachowają kontrolę nad tempem prezentacji materiału.</p>
<hr class="" data-start="855" data-end="858">
</div>
<div class=" ice-section section-index-11" data-content-type="articles" id="7vcmcmgjsimsa4go" >
<h3 class="article-section-header no-sygnet level-2">Zastępowanie tekstu w obrazach rzeczywistym HTML-em (tekst w HTML, nie na zdjęciu)</h3>
<p class="" data-start="860" data-end="1525">Częstym błędem jest umieszczanie nagłówków lub istotnych informacji jako rasteryzowanych obrazów – zwłaszcza w elementach menu, przyciskach czy bannerach. Choć graficznie może to wyglądać atrakcyjnie, osoby korzystające z czytników ekranu czy te, które powiększają tekst, nie odczytają takiej zawartości. Zamiast tego zaleca się użycie czystego HTML‑owego tekstu z odpowiednim formatowaniem i stylami CSS. Tam, gdzie konieczne jest wykorzystanie grafiki, należy dodać prawidłowy <code data-start="1400" data-end="1405">alt</code>, a w razie potrzeby wspomóc się <code data-start="1438" data-end="1450">aria-label</code> lub <code data-start="1455" data-end="1472">aria-labelledby</code>, by zachować użyteczność i selekcjonowalność treści.</p>
<hr class="" data-start="1527" data-end="1530">
</div>
<div class=" ice-section section-index-12" data-content-type="articles" id="v0bu3qbn6vbejxbb" >
<h3 class="article-section-header no-sygnet level-2">Semantyczne widoki i audyt różnorodnych szablonów</h3>
<p class="" data-start="1532" data-end="2251">Duże portale i serwisy korporacyjne często składają się z kilku typów podstron (widoki artykułowe, listy, wyniki wyszukiwania, profil użytkownika itd.), każda oparta na dedykowanym szablonie HTML/CSS. W audycie dostępnym konieczne jest zbadanie co najmniej jednej reprezentatywnej podstrony z każdego widoku – dzięki temu wykryjemy powtarzalne wzorce błędów lub braków (np. brakujące <code data-start="1975" data-end="1979">h1</code>, niespójne ARIA landmarks czy różny poziom kontrastu). Ważne jest też, by zweryfikować, czy każdy szablon generowany przez CMS (autorski lub jak WordPress, Drupal itp.) nie zminifikuje semantycznej struktury kodu, a wręcz przeciwnie – stosuje logiczny porządek elementów.</p>
<hr class="" data-start="2253" data-end="2256">
</div>
<div class=" ice-section section-index-13" data-content-type="articles" id="d04owkcsvryysseb" >
<h3 class="article-section-header no-sygnet level-2">ARIA landmarks i logika DOM</h3>
<p class="" data-start="2258" data-end="2868">Oprócz semantycznych tagów HTML5 (<code data-start="2329" data-end="2339"><header></code>, <code data-start="2341" data-end="2348"><nav></code>, <code data-start="2350" data-end="2358"><main></code>, <code data-start="2360" data-end="2370"><footer></code>), należy zaimplementować ARIA landmarks, które ułatwiają czytnikom ekranu szybkie przejście do kluczowych sekcji strony. Atrybuty takie jak <code data-start="2511" data-end="2530">role="navigation"</code>, <code data-start="2532" data-end="2547">role="banner"</code>, <code data-start="2549" data-end="2562">role="main"</code> czy <code data-start="2567" data-end="2587">role="contentinfo"</code> powinny zostać prawidłowo przypisane odpowiednim elementom. Istotne jest utrzymanie <strong data-start="2672" data-end="2697">spójnego porządku DOM</strong>: nagłówek i nawigacja (header, nav) na początku dokumentu, treść w <code data-start="2765" data-end="2773"><main></code>, a stopka (footer) na końcu – co pozwala na naturalne sekwencjonowanie przy skanowaniu strony.</p>
<hr class="" data-start="2870" data-end="2873">
</div>
<div class=" ice-section section-index-14" data-content-type="articles" id="jebcnrmjueosszyw" >
<h3 class="article-section-header no-sygnet level-2">Wielość dróg nawigacji i „3‑klikowa reguła”</h3>
<p class="" data-start="2875" data-end="3465">Dobry projekt dostępności przewiduje, że użytkownik może dotrzeć do dowolnej podstrony wieloma ścieżkami: poprzez menu, wyszukiwarkę, linki kontekstowe czy mapę strony. Jednym z mierników użyteczności jest tzw. zasada <strong data-start="3146" data-end="3177">maksymalnie trzech kliknięć</strong>, dzięki której nawet najgłębiej ukryty artykuł nie wymaga niepotrzebnej liczby akcji. Aby to osiągnąć, należy oprócz menu głównego i wyszukiwarki zapewnić także listy powiązanych treści w stopce, wewnątrz artykułów (breadcrumbs, powiązane wpisy) oraz klarowną, interaktywną mapę serwisu.</p>
<hr class="" data-start="3467" data-end="3470">
</div>
<div class=" ice-section section-index-15" data-content-type="articles" id="jz96ydgyihubbian" >
<h3 class="article-section-header no-sygnet level-2">Testy na wielu przeglądarkach, urządzeniach i wbudowanych przeglądarkach aplikacyjnych</h3>
<p class="" data-start="3472" data-end="4159">Chociaż Google Chrome dominuje wśród użytkowników desktopowych, należy pamiętać o właścicielach Apple (Safari), użytkownikach smartfonów, tabletów, a nawet wbudowanych przeglądarkach w aplikacjach (np. Gmail, Facebook). Warto przeprowadzić testy manualne i automatyczne (Wave, axe-core), zwracając uwagę na to, czy ciasteczka, banery i dynamiczne moduły nie blokują treści. Dodatkowo ważne jest, by na różnych rozdzielczościach – od pełnego HD (1920×1080), przez niższe ekrany 1366×768, aż po wąskie viewporty mobilne – elementy interfejsu wyświetlały się poprawnie i zachowywały dostępność.</p>
<hr class="" data-start="4161" data-end="4164">
<h3 data-start="4166" data-end="4680">Przygotowanie na przyszłe wytyczne WCAG 3.0 „Silver<strong data-start="4166" data-end="4225">”</strong>
</h3>
<p class="" data-start="4166" data-end="4680">Choć obecnie obowiązujące WCAG 2.1 stanowi podstawę audytów, warto śledzić prace nad WCAG 3.0 (roboczo „Silver”), które rozszerzą zakres o nowe urządzenia – od smartwatchy po inteligentne lodówki z ekranami. Już dziś należy projektować z myślą o <strong data-start="4474" data-end="4502">elastyczności wytycznych</strong>, modularności komponentów i rosnącym znaczeniu proporcjonalnych jednostek (rem, vw/vh), aby w przyszłości bez większych zmian wdrożyć bardziej zaawansowane kryteria dostępności.</p>
</div>
<div class=" ice-section section-index-16" data-content-type="articles" id="tb6ugacegqwxwi1s" >
<h2 class="article-section-header no-sygnet level-1">Wnioski</h2>
<p class="" data-start="6511" data-end="6875">Projektowanie dostępnych stron internetowych wymaga zrozumienia wielu powiązanych ze sobą aspektów: od semantyki HTML, przez właściwe opisy elementów, aż po intuicyjną nawigację i elastyczny, responsywny układ. Stosując się do przedstawionych wytycznych, możemy stworzyć witrynę przyjazną dla każdego użytkownika – niezależnie od urządzenia czy sposobu interakcji.</p>
<hr class="" data-start="6877" data-end="6880">
</div>
<div class=" ice-section section-index-17" data-content-type="articles" id="8amptvtz2bbsjoyn" >
<h2 class="article-section-header no-sygnet level-1">Źródła</h2>
<ol data-start="6892" data-end="9616">
<li class="" data-start="6892" data-end="7023"><strong>W3C WAI – Headings Tutorial:</strong> <a href="https://www.w3.org/WAI/tutorials/page-structure/headings/" rel="noopener" target="_new" class="" data-start="6924" data-end="6981">https://www.w3.org/WAI/tutorials/page-structure/headings/</a> <span class="ms-1 inline-flex max-w-full items-center relative top-[-0.094rem] animate-[show_150ms_ease-in]"><a href="https://www.w3.org/WAI/tutorials/page-structure/headings/" rel="noopener" target="_blank" class="flex h-6 overflow-hidden rounded-xl px-2.5 text-[0.5625em] font-medium text-token-text-secondary! bg-[#F4F4F4]! dark:bg-[#303030]! transition-colors duration-150 ease-in-out"><span class="relative start-0 bottom-0 flex h-full w-full items-center"><span class="flex h-4 w-full items-center justify-between overflow-hidden"><span class="max-w-full grow truncate overflow-hidden text-center">W3C</span></span></span></a></span></li>
<li class="" data-start="7024" data-end="7189"><strong>MDN – HTML: Accessibility Basics</strong>: <a href="https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Accessibility/HTML" rel="noopener" target="_new" class="" data-start="7061" data-end="7147">https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Accessibility/HTML</a> <span class="ms-1 inline-flex max-w-full items-center relative top-[-0.094rem] animate-[show_150ms_ease-in]"><a href="https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Accessibility/HTML" rel="noopener" target="_blank" class="flex h-6 overflow-hidden rounded-xl px-2.5 text-[0.5625em] font-medium text-token-text-secondary! bg-[#F4F4F4]! dark:bg-[#303030]! transition-colors duration-150 ease-in-out"><span class="relative start-0 bottom-0 flex h-full w-full items-center"><span class="flex h-4 w-full items-center justify-between overflow-hidden"><span class="max-w-full grow truncate overflow-hidden text-center">MDN Web Docs</span></span></span></a></span></li>
<li class="" data-start="7190" data-end="7340"><strong>MDN – Global <code data-start="7206" data-end="7213">title</code> attribute</strong>: <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/title" rel="noopener" target="_new" class="" data-start="7225" data-end="7298">https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/title</a> <span class="ms-1 inline-flex max-w-full items-center relative top-[-0.094rem] animate-[show_150ms_ease-in]"><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/title" rel="noopener" target="_blank" class="flex h-6 overflow-hidden rounded-xl px-2.5 text-[0.5625em] font-medium text-token-text-secondary! bg-[#F4F4F4]! dark:bg-[#303030]! transition-colors duration-150 ease-in-out"><span class="relative start-0 bottom-0 flex h-full w-full items-center"><span class="flex h-4 w-full items-center justify-between overflow-hidden"><span class="max-w-full grow truncate overflow-hidden text-center">MDN Web Docs</span></span></span></a></span></li>
<li class="" data-start="7341" data-end="7533"><strong>Stefany Newman – Accessible Cookie Banners</strong>: <a rel="noopener" target="_new" data-start="7388" data-end="7491">https://medium.com/@web-accessibility-education/dos-and-donts-of-accessible-cookie-banners-2c1a3102df2f</a> <span class="ms-1 inline-flex max-w-full items-center relative top-[-0.094rem] animate-[show_150ms_ease-in]"><a href="https://medium.com/%40web-accessibility-education/dos-and-donts-of-accessible-cookie-banners-2c1a3102df2f" rel="noopener" target="_blank" class="flex h-6 overflow-hidden rounded-xl px-2.5 text-[0.5625em] font-medium text-token-text-secondary! bg-[#F4F4F4]! dark:bg-[#303030]! transition-colors duration-150 ease-in-out"><span class="relative start-0 bottom-0 flex h-full w-full items-center"><span class="flex h-4 w-full items-center justify-between overflow-hidden"><span class="max-w-full grow truncate overflow-hidden text-center">Medium</span></span></span></a></span></li>
<li class="" data-start="7534" data-end="7700"><strong>W3C – WCAG 2.1 Understanding Success Criterion 2.1.1: Keyboard</strong>: <a href="https://www.w3.org/WAI/WCAG21/Understanding/keyboard.html" rel="noopener" target="_new" class="" data-start="7601" data-end="7658">https://www.w3.org/WAI/WCAG21/Understanding/keyboard.html</a> <span class="ms-1 inline-flex max-w-full items-center relative top-[-0.094rem] animate-[show_150ms_ease-in]"><a href="https://www.w3.org/WAI/WCAG21/Understanding/keyboard.html" rel="noopener" target="_blank" class="flex h-6 overflow-hidden rounded-xl px-2.5 text-[0.5625em] font-medium text-token-text-secondary! bg-[#F4F4F4]! dark:bg-[#303030]! transition-colors duration-150 ease-in-out"><span class="relative start-0 bottom-0 flex h-full w-full items-center"><span class="flex h-4 w-full items-center justify-between overflow-hidden"><span class="max-w-full grow truncate overflow-hidden text-center">W3C</span></span></span></a></span></li>
<li class="" data-start="7701" data-end="7891"><strong>W3C – WCAG 2.0 Understanding Success Criterion 2.4.1: Skip Navigation</strong>: <a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-skip.html" rel="noopener" target="_new" class="" data-start="7775" data-end="7849">https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-skip.html</a> <span class="ms-1 inline-flex max-w-full items-center relative top-[-0.094rem] animate-[show_150ms_ease-in]"><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-skip.html" rel="noopener" target="_blank" class="flex h-6 overflow-hidden rounded-xl px-2.5 text-[0.5625em] font-medium text-token-text-secondary! bg-[#F4F4F4]! dark:bg-[#303030]! transition-colors duration-150 ease-in-out"><span class="relative start-0 bottom-0 flex h-full w-full items-center"><span class="flex h-4 w-full items-center justify-between overflow-hidden"><span class="max-w-full grow truncate overflow-hidden text-center">W3C</span></span></span></a></span></li>
<li class="" data-start="7892" data-end="8042"><strong>MDN – Responsive Images Guide</strong>: <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Responsive_images" rel="noopener" target="_new" class="" data-start="7926" data-end="8000">https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Responsive_images</a> <span class="ms-1 inline-flex max-w-full items-center relative top-[-0.094rem] animate-[show_150ms_ease-in]"><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Responsive_images" rel="noopener" target="_blank" class="flex h-6 overflow-hidden rounded-xl px-2.5 text-[0.5625em] font-medium text-token-text-secondary! bg-[#F4F4F4]! dark:bg-[#303030]! transition-colors duration-150 ease-in-out"><span class="relative start-0 bottom-0 flex h-full w-full items-center"><span class="flex h-4 w-full items-center justify-between overflow-hidden"><span class="max-w-full grow truncate overflow-hidden text-center">MDN Web Docs</span></span></span></a></span></li>
<li class="" data-start="8043" data-end="8237"><strong>Level Access – Responsive Web Design & Accessibility</strong>: <a rel="noopener" target="_new" data-start="8100" data-end="8195">https://www.levelaccess.com/blog/what-does-responsive-web-design-have-to-do-with-accessibility/</a> <span class="ms-1 inline-flex max-w-full items-center relative top-[-0.094rem] animate-[show_150ms_ease-in]"><a href="https://www.levelaccess.com/blog/what-does-responsive-web-design-have-to-do-with-accessibility/" rel="noopener" target="_blank" class="flex h-6 overflow-hidden rounded-xl px-2.5 text-[0.5625em] font-medium text-token-text-secondary! bg-[#F4F4F4]! dark:bg-[#303030]! transition-colors duration-150 ease-in-out"><span class="relative start-0 bottom-0 flex h-full w-full items-center"><span class="flex h-4 w-full items-center justify-between overflow-hidden"><span class="max-w-full grow truncate overflow-hidden text-center">Level Access</span></span></span></a></span></li>
<li class="" data-start="8238" data-end="8358"><strong>NN/g – Menu-Design Checklist</strong>: <a href="https://www.nngroup.com/articles/menu-design/">https://www.nngroup.com/articles/menu-design/</a><a rel="noopener" target="_new" data-start="8271" data-end="8316"> </a> <span class="ms-1 inline-flex max-w-full items-center relative top-[-0.094rem] animate-[show_150ms_ease-in]"><a href="https://www.nngroup.com/articles/menu-design/" rel="noopener" target="_blank" class="flex h-6 overflow-hidden rounded-xl px-2.5 text-[0.5625em] font-medium text-token-text-secondary! bg-[#F4F4F4]! dark:bg-[#303030]! transition-colors duration-150 ease-in-out"><span class="relative start-0 bottom-0 flex h-full w-full items-center"><span class="flex h-4 w-full items-center justify-between overflow-hidden"><span class="max-w-full grow truncate overflow-hidden text-center">Nielsen Norman Group</span></span></span></a></span></li>
<li class="" data-start="8359" data-end="8486"><strong>W3C – WCAG Technique G63 (Site Maps):</strong> <a href="https://www.w3.org/TR/WCAG20-TECHS/G63.html" rel="noopener" target="_new" class="" data-start="8401" data-end="8444">https://www.w3.org/TR/WCAG20-TECHS/G63.html</a> <span class="ms-1 inline-flex max-w-full items-center relative top-[-0.094rem] animate-[show_150ms_ease-in]"><a href="https://www.w3.org/TR/WCAG20-TECHS/G63.html" rel="noopener" target="_blank" class="flex h-6 overflow-hidden rounded-xl px-2.5 text-[0.5625em] font-medium text-token-text-secondary! bg-[#F4F4F4]! dark:bg-[#303030]! transition-colors duration-150 ease-in-out"><span class="relative start-0 bottom-0 flex h-full w-full items-center"><span class="flex h-4 w-full items-center justify-between overflow-hidden"><span class="max-w-full grow truncate overflow-hidden text-center">W3C</span></span></span></a></span></li>
<li class="" data-start="8487" data-end="8661"><strong>W3C ARIA Authoring Practices – Navigation Landmarks</strong>: <a href="https://www.w3.org/WAI/ARIA/apg/patterns/landmarks/examples/navigation.html" rel="noopener" target="_new" class="" data-start="8544" data-end="8619">https://www.w3.org/WAI/ARIA/apg/patterns/landmarks/examples/navigation.html</a> <span class="ms-1 inline-flex max-w-full items-center relative top-[-0.094rem] animate-[show_150ms_ease-in]"><a href="https://www.w3.org/WAI/ARIA/apg/patterns/landmarks/examples/navigation.html" rel="noopener" target="_blank" class="flex h-6 overflow-hidden rounded-xl px-2.5 text-[0.5625em] font-medium text-token-text-secondary! bg-[#F4F4F4]! dark:bg-[#303030]! transition-colors duration-150 ease-in-out"><span class="relative start-0 bottom-0 flex h-full w-full items-center"><span class="flex h-4 w-full items-center justify-between overflow-hidden"><span class="max-w-full grow truncate overflow-hidden text-center">W3C</span></span></span></a></span></li>
<li class="" data-start="8662" data-end="8820"><strong>W3C – WCAG 2.1 Understanding SC 1.3.4: Orientation:</strong> <a href="https://www.w3.org/WAI/WCAG21/Understanding/orientation.html" rel="noopener" target="_new" class="" data-start="8718" data-end="8778">https://www.w3.org/WAI/WCAG21/Understanding/orientation.html</a> <span class="ms-1 inline-flex max-w-full items-center relative top-[-0.094rem] animate-[show_150ms_ease-in]"><a href="https://www.w3.org/WAI/WCAG21/Understanding/orientation.html" rel="noopener" target="_blank" class="flex h-6 overflow-hidden rounded-xl px-2.5 text-[0.5625em] font-medium text-token-text-secondary! bg-[#F4F4F4]! dark:bg-[#303030]! transition-colors duration-150 ease-in-out"><span class="relative start-0 bottom-0 flex h-full w-full items-center"><span class="flex h-4 w-full items-center justify-between overflow-hidden"><span class="max-w-full grow truncate overflow-hidden text-center">W3C</span></span></span></a></span></li>
<li class="" data-start="8821" data-end="8937"><strong>WebAIM – Skip Navigation Links</strong>: <a rel="noopener" target="_new" data-start="8857" data-end="8895">https://webaim.org/techniques/skipnav/</a> <span class="ms-1 inline-flex max-w-full items-center relative top-[-0.094rem] animate-[show_150ms_ease-in]"><a href="https://webaim.org/techniques/skipnav/" rel="noopener" target="_blank" class="flex h-6 overflow-hidden rounded-xl px-2.5 text-[0.5625em] font-medium text-token-text-secondary! bg-[#F4F4F4]! dark:bg-[#303030]! transition-colors duration-150 ease-in-out"><span class="relative start-0 bottom-0 flex h-full w-full items-center"><span class="flex h-4 w-full items-center justify-between overflow-hidden"><span class="max-w-full grow truncate overflow-hidden text-center">webaim.org</span></span></span></a></span></li>
<li class="" data-start="8938" data-end="9077"><strong>web.dev – Accessible Responsive Design</strong>: <a rel="noopener" target="_new" data-start="8982" data-end="9035">https://web.dev/articles/accessible-responsive-design</a> <span class="ms-1 inline-flex max-w-full items-center relative top-[-0.094rem] animate-[show_150ms_ease-in]"><a href="https://web.dev/articles/accessible-responsive-design" rel="noopener" target="_blank" class="flex h-6 overflow-hidden rounded-xl px-2.5 text-[0.5625em] font-medium text-token-text-secondary! bg-[#F4F4F4]! dark:bg-[#303030]! transition-colors duration-150 ease-in-out"><span class="relative start-0 bottom-0 flex h-full w-full items-center"><span class="flex h-4 w-full items-center justify-between overflow-hidden"><span class="max-w-full grow truncate overflow-hidden text-center">web.dev</span></span></span></a></span></li>
<li class="" data-start="9078" data-end="9277"><strong>Smashing Magazine – Non-Accessibility of Cookie Notices</strong>: <a rel="noopener" target="_new" data-start="9139" data-end="9235">https://www.smashingmagazine.com/2023/04/potentially-dangerous-non-accessibility-cookie-notices/</a> <span class="ms-1 inline-flex max-w-full items-center relative top-[-0.094rem] animate-[show_150ms_ease-in]"><a href="https://www.smashingmagazine.com/2023/04/potentially-dangerous-non-accessibility-cookie-notices/" rel="noopener" target="_blank" class="flex h-6 overflow-hidden rounded-xl px-2.5 text-[0.5625em] font-medium text-token-text-secondary! bg-[#F4F4F4]! dark:bg-[#303030]! transition-colors duration-150 ease-in-out"><span class="relative start-0 bottom-0 flex h-full w-full items-center"><span class="flex h-4 w-full items-center justify-between overflow-hidden"><span class="max-w-full grow truncate overflow-hidden text-center">Smashing Magazine</span></span></span></a></span></li>
<li class="" data-start="9447" data-end="9616"><strong>MDN – ARIA <code data-start="9462" data-end="9474">navigation</code> Role</strong>: <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/navigation_role" rel="noopener" target="_new" class="" data-start="9481" data-end="9576">https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/navigation_role</a> <span class="ms-1 inline-flex max-w-full items-center relative top-[-0.094rem] animate-[show_150ms_ease-in]"><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/navigation_role" rel="noopener" target="_blank" class="flex h-6 overflow-hidden rounded-xl px-2.5 text-[0.5625em] font-medium text-token-text-secondary! bg-[#F4F4F4]! dark:bg-[#303030]! transition-colors duration-150 ease-in-out"><span class="relative start-0 bottom-0 flex h-full w-full items-center"><span class="flex h-4 w-full items-center justify-between overflow-hidden"><span class="max-w-full grow truncate overflow-hidden text-center">MDN Web Docs</span></span></span></a></span></li>
</ol>
</div>
</div>
<div class="article-border">
<div>
<div class="row">
<div class="col-12 cited" id="aemvlc7oigoqs7vh"><div>
<div class="text-center"></div>
<div class="mx-auto custom-forms-container" data-custom-form="strona-glowna" data-clear-form-after-submit>
<div class="custom-forms-overlay"></div>
<form
method="POST"
enctype="multipart/form-data"
name="form-1-1"
action="/_action_module/CustomForms/submit/eyJ0ZW1wbGF0ZSI6ImtyYWt3ZWIiLCJpbml0aWF0b3IiOiJcL25handhem5pZWpzemUtemFzYWR5LXByb2pla3Rvd2FuaWEtZG9zdGVwbnljaC1zdHJvbi1pbnRlcm5ldG93eWNoIiwicmVkaXJlY3RfdG8iOiIifQ==?form_id=1&step=1"
data-recaptcha-key="6LekmJsjAAAAANUMDi2grMDiyW3SmOtxWVlwmviD"
id="form_form-1-1"
class=""
>
<div class="row g-3">
<div
class=" input-field-text"
>
<label
for="form-1-1_field-1"
class="form-label "
>
Imię, nazwisko, telefon
</label>
<input
type="text"
class="form-control "
id="form-1-1_field-1"
name="field-1"
placeholder=""
value=""
/>
<small id="form-1-1_field-1_help" class="field-help" style="display: block; font-style: italic; font-size: 90%; margin-top: 5px">
</small>
</div>
<div
class=" input-field-email"
>
<label
for="form-1-1_field-2"
class="form-label "
>
Adres e-mail
<span style="color: red">*</span>
</label>
<input
type="email"
class="form-control "
id="form-1-1_field-2"
name="field-2"
required aria-required="true" placeholder=""
value=""
/>
<small id="form-1-1_field-2_help" class="field-help" style="display: block; font-style: italic; font-size: 90%; margin-top: 5px">
</small>
</div>
<div
class=" input-field-textarea"
>
<label
for="form-1-1_field-3"
class="form-label "
>
Treść zapytania
<span style="color: red">*</span>
</label>
<textarea
class="form-control mceNoEditor "
id="form-1-1_field-3"
name="field-3"
required aria-required="true" placeholder=""
rows="10"
></textarea>
<small id="form-1-1_field-3_help" class="field-help" style="display: block; font-style: italic; font-size: 90%; margin-top: 5px">
</small>
</div>
<div
class=" input-field-file"
>
<label
for="form-1-1_field-52[]"
class="form-label "
>
Brief
</label>
<div class="js-drag-and-drop" tabindex="0">
<div class="js-drag-and-drop-placeholder">
Wybierz plik
</div>
<div class="js-drag-and-drop-files d-none"></div>
<input
type="file"
class="js-drag-and-drop-input "
id="form-1-1_field-52[]"
name="field-52[]"
data-max-size=50
/>
<input type="file"
name="__temp-files"
class="js-drag-and-drop-helper-input d-none"
data-limit="1"
>
</div>
<small id="form-1-1_field-52[]_help" class="field-help" style="display: block; font-style: italic; font-size: 90%; margin-top: 5px">
</small>
</div>
<input type="text" id="form-1-1_honeypot"
name="honeypot"
class="iceberg-wall" aria-label="honeypot"/>
<script src="https://www.google.com/recaptcha/api.js?render=6LekmJsjAAAAANUMDi2grMDiyW3SmOtxWVlwmviD" async defer></script>
<div class="submit-row
d-flex justify-content-end ">
<input
type="submit"
class="btn btn-primary"
id="form-1-1_submitafb20cf5"
name="submitafb20cf5"
value="Wyślij"
/>
</div>
</div>
</form>
</div>
</div></div>
</div>
</div>
<div> </div>
<h3>Zapisz się na nasz newsletter</h3>
<div>
<style>
.newsletter-form-container {
max-width: 860px;
position: relative;
}
.newsletter-form-container .newsletter-forms-overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
display: none;
background-color: black;
opacity: 0.3;
z-index: 10;
}
.newsletter-form-container .newsletter-forms-overlay.show {
display: block;
}
</style>
<div class="newsletter-form-container"
id="newsletter-form-container-1"
data-newsletter-form="newsletter-krakweb"
>
<div class="newsletter-forms-overlay"></div>
<form
method="POST"
enctype="application/x-www-form-urlencoded"
name="newsletter-form-1"
action="/_action_module/Newsletter/submit/eyJ0ZW1wbGF0ZSI6ImtyYWt3ZWIiLCJpbml0aWF0b3IiOiJcL25handhem5pZWpzemUtemFzYWR5LXByb2pla3Rvd2FuaWEtZG9zdGVwbnljaC1zdHJvbi1pbnRlcm5ldG93eWNoIiwicmVkaXJlY3RfdG8iOiIifQ==?widget_id=1"
data-recaptcha-key="6LekmJsjAAAAANUMDi2grMDiyW3SmOtxWVlwmviD"
id="form_newsletter-form-1"
class=""
>
<div
class=" input-field-email"
>
<label
for="newsletter-form-1_field-email"
class="form-label "
>
Email
<span style="color: red">*</span>
</label>
<input
type="email"
class="form-control "
id="newsletter-form-1_field-email"
name="field-email"
required aria-required="true"
value=""
/>
</div>
<div
class=" input-field-text"
>
<label
for="newsletter-form-1_field-first_name"
class="form-label "
>
Imię
</label>
<input
type="text"
class="form-control "
id="newsletter-form-1_field-first_name"
name="field-first_name"
value=""
/>
</div>
<div class="row">
<div class="col-12"></div>
</div>
<div
class=" input-field-yesno"
>
<label
for="newsletter-form-1_field-_group_1"
class="form-label "
>
Newsletter Krakweb - wszystkie tematy
</label>
<input type="hidden" name="field-_group_1" value="0">
<input type="checkbox"
class="form-check-input "
id="newsletter-form-1_field-_group_1"
name="field-_group_1"
value="1"
>
<small id="newsletter-form-1_field-_group_1_help" class="field-help" style="display: block; font-style: italic; font-size: 90%; margin-top: 5px">
Wybierz tę grupę newslettera, jeśli chcesz otrzymywać od nas informacje na wszystkie tematy. Nie martw się - nie spamujemy. Pisać będziemy 1-2 razy miesięcznie. Otrzymasz mailingi na temat: naszych nowych projektów, wybrane artykuły (pogrupowane tematycznie), nowości w ICEberg CMS 5. Jeśli wolisz wybrać węższą tematykę - wybierz z listy poniżej.
</small>
</div>
<div
class=" input-field-yesno"
>
<label
for="newsletter-form-1_field-_group_2"
class="form-label "
>
Newsletter Krakweb - WCAG
</label>
<input type="hidden" name="field-_group_2" value="0">
<input type="checkbox"
class="form-check-input "
id="newsletter-form-1_field-_group_2"
name="field-_group_2"
value="1"
>
<small id="newsletter-form-1_field-_group_2_help" class="field-help" style="display: block; font-style: italic; font-size: 90%; margin-top: 5px">
WCAG to jeden z głównych tematów, o których teraz piszemy. Oraz jeden z głównych aspektów w których skupiamy się we wdrożeniach. Jeśli jesteś dyrektorem szkoły / fundacji lub pracownikiem odpowiedzialnym za wdrożenie WCAG lub szukasz wiedzy o WCAG przed jego wdrożeniem w Twojej firmie / organizacji - wybierz ten newsletter.
</small>
</div>
<div
class=" input-field-yesno"
>
<label
for="newsletter-form-1_field-_group_3"
class="form-label "
>
Newsletter Krakweb - SEO
</label>
<input type="hidden" name="field-_group_3" value="0">
<input type="checkbox"
class="form-check-input "
id="newsletter-form-1_field-_group_3"
name="field-_group_3"
value="1"
>
<small id="newsletter-form-1_field-_group_3_help" class="field-help" style="display: block; font-style: italic; font-size: 90%; margin-top: 5px">
</small>
</div>
<div
class=" input-field-yesno"
>
<label
for="newsletter-form-1_field-_group_4"
class="form-label "
>
Newsletter Krakweb - e-commerce
</label>
<input type="hidden" name="field-_group_4" value="0">
<input type="checkbox"
class="form-check-input "
id="newsletter-form-1_field-_group_4"
name="field-_group_4"
value="1"
>
<small id="newsletter-form-1_field-_group_4_help" class="field-help" style="display: block; font-style: italic; font-size: 90%; margin-top: 5px">
</small>
</div>
<p style="width: 100% !important; border-top: 1px solid #ddd"></p>
<div
class=" input-field-yesno"
>
<label
for="newsletter-form-1_field-_agreement_1"
class="form-label "
>
<p><p>Zgadzam się na otrzymywanie drogą elektroniczną na wskazany przeze mnie adres e-mail informacji handlowych od Krakweb sp. z o.o., Kraków Mała Góra 32/2, 30-864 Kraków NIP 6793317857 zgodnie z ustawą z dnia 18 lipca 2002 roku o świadczeniu usług drogą elektroniczną oraz z ustawą z dnia 16 lipca 2004 roku prawo telekomunikacyjne.</p></p>
<span style="color: red">*</span>
</label>
<input type="hidden" name="field-_agreement_1" value="0">
<input type="checkbox"
class="form-check-input "
id="newsletter-form-1_field-_agreement_1"
name="field-_agreement_1"
required aria-required="true"
value="1"
>
</div>
<script src="https://www.google.com/recaptcha/api.js?render=6LekmJsjAAAAANUMDi2grMDiyW3SmOtxWVlwmviD" async defer></script>
<div class="submit-row
col-12
">
<input
type="submit"
class="btn btn-primary"
id="newsletter-form-1_submitd285a061"
name="submitd285a061"
value="Zapisz się"
/>
</div>
<input type="text" id="newsletter-form-1_honeypot"
name="honeypot"
class="iceberg-wall" aria-label="honeypot"/>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-5 col-xl-4 article-sidebar">
<div class="article-border">
<p> <a href="tel:530555521">
<div class="row">
<div class="col-12" id="thlgunntyypaecwe"><h3>Porozmawiaj z ekspertem</h3>
<div><div>
<div>
<div class="contact-business-card">
<div class="contact-business-card-image-wrapper">
<img class="contact-business-card-image lazyload" style="aspect-ratio: 338 / 338" alt="Maciej Chmielowski" data-src="https://www.krakweb.pl/images/modules/components/wizytowki/dsc-8860-kolo-whitebg.webp?w=338&h=338" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==">
</div>
<div class="contact-business-card-content">
<div class="text-center mb-3">
<h4 class="contact-business-card-name">Maciej Chmielowski</h4>
<div class="contact-business-card-position">Krakweb CEO</div>
</div>
<!-- row-cols-xl-2 -->
<div class="row row-cols-1 g-2 text-center mb-3 justify-content-center">
<div>
<a href="tel:+48 530 555 521">
<i class="fas fa-phone-alt me-2"></i>+48 530 555 521
</a>
</div>
<div>
<a href="mailto:kontakt@krakweb.pl">
<i class="fas fa-envelope me-2 align-middle"></i>kontakt@krakweb.pl
</a>
</div>
</div>
<p>W Krakweb zrealizował ponad 500 projektów w ciągu 18 lat. Zadaj pytanie ekspertowi. Umów się na konsultację. Uzyskaj <a href="https://www.krakweb.pl/kontakt">bezpłatną wycenę</a>. </p>
</div>
</div>
</div>
</div>
</div></div>
</div>
</a>
</p>
<p> <a href="/kontakt">
<div class="row">
<div class="col-12" id="pimylgy3zqskarum"><h3>Szukasz ekspertów z tego zakresu?</h3>
<p>Chcesz zrealizować serwis internetowy, wdrożyć oprogramowanie związane z tym tematem?</p>
<div class="btn btn-outline-primary" title="Przejdź do kontaktu">Napisz do nas!</div>
<div title="Przejdź do kontaktu">Doradzimy, pokażemy możliwości, przygotujemy bezpłatną wycenę.</div></div>
</div>
</a>
</p>
</div>
<div class="table-of-contents article-border d-none d-lg-block">
<div class="table-of-contents-header">
<h2 class="table-of-contents-title mb-0">Spis treści</h2>
<button class="btn collapse-arrow-btn" type="button" data-bs-toggle="collapse" data-bs-target="#articles-contents-collapse-n4lcj6hntmnutgiz" aria-expanded="true" aria-controls="articles-contents-collapse-n4lcj6hntmnutgiz">
<i class="fas fa-angle-down"></i>
</button>
</div>
<div class="table-of-contents-content collapse show mt-2" id="articles-contents-collapse-n4lcj6hntmnutgiz">
<ul class="table-of-contents-list-level-1">
<li class="mt-2 table-of-contents-list-item-level-1">
<div class="table-of-contents-link-wrapper">
<a href="https://www.krakweb.pl/najwazniejsze-zasady-projektowania-dostepnych-stron-internetowych#9xiaifqcrkaeqi6m" class="table-of-contents-link">
<h4>
1
Podsumowanie
</h4>
</a>
</div>
</li>
<li class="mt-2 table-of-contents-list-item-level-1">
<div class="table-of-contents-link-wrapper">
<a href="https://www.krakweb.pl/najwazniejsze-zasady-projektowania-dostepnych-stron-internetowych#ppnvgdnkbhpbx1cb" class="table-of-contents-link">
<h4>
2
Hierarchia i semantyka nagłówków
</h4>
</a>
</div>
</li>
<li class="mt-2 table-of-contents-list-item-level-1">
<div class="table-of-contents-link-wrapper">
<a href="https://www.krakweb.pl/najwazniejsze-zasady-projektowania-dostepnych-stron-internetowych#yzvg5kicjjykapxy" class="table-of-contents-link">
<h4>
3
Obrazy i tekst alternatywny
</h4>
</a>
</div>
</li>
<li class="mt-2 table-of-contents-list-item-level-1">
<div class="table-of-contents-link-wrapper">
<a href="https://www.krakweb.pl/najwazniejsze-zasady-projektowania-dostepnych-stron-internetowych#l1bgkaplsppdmi4v" class="table-of-contents-link">
<h4>
4
Nawigacja klawiaturą i link „Skip to Content”
</h4>
</a>
</div>
</li>
<li class="mt-2 table-of-contents-list-item-level-1">
<div class="table-of-contents-link-wrapper">
<a href="https://www.krakweb.pl/najwazniejsze-zasady-projektowania-dostepnych-stron-internetowych#kbc7avgjdtdoywt7" class="table-of-contents-link">
<h4>
5
Top strony (header) i projekt menu
</h4>
</a>
</div>
</li>
<li class="mt-2 table-of-contents-list-item-level-1">
<div class="table-of-contents-link-wrapper">
<a href="https://www.krakweb.pl/najwazniejsze-zasady-projektowania-dostepnych-stron-internetowych#ou7dzoulrhmrrfco" class="table-of-contents-link">
<h4>
6
Responsywność i orientacja ekranu
</h4>
</a>
</div>
</li>
<li class="mt-2 table-of-contents-list-item-level-1">
<div class="table-of-contents-link-wrapper">
<a href="https://www.krakweb.pl/najwazniejsze-zasady-projektowania-dostepnych-stron-internetowych#ppdqmucbtu43qumv" class="table-of-contents-link">
<h4>
7
Cookie consent i dostępność banerów
</h4>
</a>
</div>
</li>
<li class="mt-2 table-of-contents-list-item-level-1">
<div class="table-of-contents-link-wrapper">
<a href="https://www.krakweb.pl/najwazniejsze-zasady-projektowania-dostepnych-stron-internetowych#kxu1fas2rr2j9vww" class="table-of-contents-link">
<h4>
8
Mapa strony jako alternatywna nawigacja
</h4>
</a>
</div>
</li>
<li class="mt-2 table-of-contents-list-item-level-1">
<div class="table-of-contents-link-wrapper">
<a href="https://www.krakweb.pl/najwazniejsze-zasady-projektowania-dostepnych-stron-internetowych#q64ydwacvjzmszgx" class="table-of-contents-link">
<h4>
9
Dobre praktyki - wiedza ze szkolenia z dostępności cyfrowej
</h4>
</a>
<button class="btn collapse-arrow-btn " type="button" data-bs-toggle="collapse" data-bs-target="#articles-contents-collapse-q64ydwacvjzmszgxio5a2egchhqcchyz" aria-expanded="true" aria-controls="articles-contents-collapse-q64ydwacvjzmszgxio5a2egchhqcchyz">
<i class="fas fa-angle-down"></i>
</button>
</div>
<div id="articles-contents-collapse-q64ydwacvjzmszgxio5a2egchhqcchyz" class="collapse show">
<ul class="table-of-contents-list-level-2">
<div class="contents-1">
<li class="mt-1 table-of-contents-list-item-level-2">
<div class="table-of-contents-link-wrapper">
<a href="https://www.krakweb.pl/najwazniejsze-zasady-projektowania-dostepnych-stron-internetowych#6gz3ga4dwfxlk2gl" class="table-of-contents-link">
<h5>
9.1
Kontrola animacji i karuzel (slidery)
</h5>
</a>
</div>
</li>
<li class="mt-1 table-of-contents-list-item-level-2">
<div class="table-of-contents-link-wrapper">
<a href="https://www.krakweb.pl/najwazniejsze-zasady-projektowania-dostepnych-stron-internetowych#7vcmcmgjsimsa4go" class="table-of-contents-link">
<h5>
9.2
Zastępowanie tekstu w obrazach rzeczywistym HTML-em (tekst w HTML, nie na zdjęciu)
</h5>
</a>
</div>
</li>
<li class="mt-1 table-of-contents-list-item-level-2">
<div class="table-of-contents-link-wrapper">
<a href="https://www.krakweb.pl/najwazniejsze-zasady-projektowania-dostepnych-stron-internetowych#v0bu3qbn6vbejxbb" class="table-of-contents-link">
<h5>
9.3
Semantyczne widoki i audyt różnorodnych szablonów
</h5>
</a>
</div>
</li>
<li class="mt-1 table-of-contents-list-item-level-2">
<div class="table-of-contents-link-wrapper">
<a href="https://www.krakweb.pl/najwazniejsze-zasady-projektowania-dostepnych-stron-internetowych#d04owkcsvryysseb" class="table-of-contents-link">
<h5>
9.4
ARIA landmarks i logika DOM
</h5>
</a>
</div>
</li>
<li class="mt-1 table-of-contents-list-item-level-2">
<div class="table-of-contents-link-wrapper">
<a href="https://www.krakweb.pl/najwazniejsze-zasady-projektowania-dostepnych-stron-internetowych#jebcnrmjueosszyw" class="table-of-contents-link">
<h5>
9.5
Wielość dróg nawigacji i „3‑klikowa reguła”
</h5>
</a>
</div>
</li>
<li class="mt-1 table-of-contents-list-item-level-2">
<div class="table-of-contents-link-wrapper">
<a href="https://www.krakweb.pl/najwazniejsze-zasady-projektowania-dostepnych-stron-internetowych#jz96ydgyihubbian" class="table-of-contents-link">
<h5>
9.6
Testy na wielu przeglądarkach, urządzeniach i wbudowanych przeglądarkach aplikacyjnych
</h5>
</a>
</div>
</li>
</div>
</ul>
</div>
</li>
<li class="mt-2 table-of-contents-list-item-level-1">
<div class="table-of-contents-link-wrapper">
<a href="https://www.krakweb.pl/najwazniejsze-zasady-projektowania-dostepnych-stron-internetowych#tb6ugacegqwxwi1s" class="table-of-contents-link">
<h4>
10
Wnioski
</h4>
</a>
</div>
</li>
<li class="mt-2 table-of-contents-list-item-level-1">
<div class="table-of-contents-link-wrapper">
<a href="https://www.krakweb.pl/najwazniejsze-zasady-projektowania-dostepnych-stron-internetowych#8amptvtz2bbsjoyn" class="table-of-contents-link">
<h4>
11
Źródła
</h4>
</a>
</div>
</li>
</ul>
</div>
</div>
<div class="article-border">
<div class="article-tags">
<h3 class="me-3">Tagi</h3>
<div class="taxonomy-tags-container">
<a
href="https://www.krakweb.pl/artykuly/dostepne-strony-internetowe"
class="taxonomy-tag"
>
dostępne strony internetowe
</a>
<a
href="https://www.krakweb.pl/artykuly/dostepnosc-cyfrowa"
class="taxonomy-tag"
>
dostępność cyfrowa
</a>
<a
href="https://www.krakweb.pl/artykuly/projektowanie-uniwersalne"
class="taxonomy-tag"
>
Projektowanie uniwersalne
</a>
<a
href="https://www.krakweb.pl/artykuly/standardy"
class="taxonomy-tag"
>
standardy
</a>
<a
href="https://www.krakweb.pl/artykuly/uzytecznosc"
class="taxonomy-tag"
>
użyteczność
</a>
<a
href="https://www.krakweb.pl/artykuly/wcag"
class="taxonomy-tag"
>
WCAG
</a>
<a
href="https://www.krakweb.pl/artykuly/zasady-dostepnosci"
class="taxonomy-tag"
>
zasady dostępności
</a>
</div>
</div>
</div>
</div>
</div>
</main>
<div>
</div>
<div>
<div class="article-navigation justify-content-between row my-5 g-3">
<div class="col-md-5 col-lg-4 col-xl-3">
<h4>Poprzedni artykuł</h4>
<a href="https://www.krakweb.pl/wsparcie-joomla-dla-wcag-i-zgodnosc-joomla-z-wcag-czy-joomla-to-dobry-wybor-jesli-wazne-jest-dla-mnie-zeby-moja-strona-byla-dostepna-cyfrowo" class="root-content-tile" title="Poprzedni artykuł">
<div class="root-content-image-wrapper">
<img class="root-content-image content-image lazyload" style="aspect-ratio: 480 / 270" alt="Wsparcie Joomla dla WCAG i zgodność Joomla z WCAG. Czy Joomla to dobry wybór jeśli ważne jest dla mnie żeby moja strona była dostępna cyfrowo?" data-src="https://www.krakweb.pl/images/stock_images/pexels-photo-6660419.jpeg?w=480&h=270&p=standard_tile" data-srcset="https://www.krakweb.pl/images/stock_images/pexels-photo-6660419.jpeg?w=480&h=270&scale=1&p=standard_tile 480w, https://www.krakweb.pl/images/stock_images/pexels-photo-6660419.jpeg?w=480&h=270&scale=0.75&p=standard_tile 360w, https://www.krakweb.pl/images/stock_images/pexels-photo-6660419.jpeg?w=480&h=270&scale=0.5&p=standard_tile 240w, https://www.krakweb.pl/images/stock_images/pexels-photo-6660419.jpeg?w=480&h=270&scale=0.25&p=standard_tile 120w" data-sizes="auto" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" title="fot. Pexels - Photo By: Kaboompics.com">
</div>
<div class="py-2">
<h3 class="no-sygnet root-content-title mb-0 text-start">
Wsparcie Joomla dla WCAG i zgodność Joomla z WCAG. Czy Joomla to dobry wybór jeśli ważne jest dla mnie żeby moja strona była dostępna cyfrowo?
</h3>
<div class="category-node-description mt-2 text-body">
<p>Czy Twoja strona ma być dostępna dla wszystkich, ale nie wiesz, czy Joomla to dobry wybór? Przyjrzymy się, jak ta popularna platforma wspiera standardy WCAG i pomoże zbudować stronę przyjazną dla wszystkich użytkowników. Sprawdź nasz artyk…</p>
</div>
</div>
</a>
</div>
<div class="col-md-5 col-lg-4 col-xl-3">
<h4>Następny artykuł</h4>
<a href="https://www.krakweb.pl/ibm-equal-access-accessibility-checker-rozbudowane-otwarte-narzedzie-do-automatycznej-oceny-dostepnosci-cyfrowej-stron-internetowych-i-aplikacji" class="root-content-tile" title="Następny artykuł">
<div class="root-content-image-wrapper">
<img class="root-content-image content-image lazyload" style="aspect-ratio: 480 / 270" alt="IBM Equal Access Accessibility Checker - rozbudowane, otwarte narzędzie do automatycznej oceny dostępności cyfrowej stron internetowych i aplikacji" data-src="https://www.krakweb.pl/images/stock_images/pexels-photo-8850706.jpeg?w=480&h=270&p=standard_tile" data-srcset="https://www.krakweb.pl/images/stock_images/pexels-photo-8850706.jpeg?w=480&h=270&scale=1&p=standard_tile 480w, https://www.krakweb.pl/images/stock_images/pexels-photo-8850706.jpeg?w=480&h=270&scale=0.75&p=standard_tile 360w, https://www.krakweb.pl/images/stock_images/pexels-photo-8850706.jpeg?w=480&h=270&scale=0.5&p=standard_tile 240w, https://www.krakweb.pl/images/stock_images/pexels-photo-8850706.jpeg?w=480&h=270&scale=0.25&p=standard_tile 120w" data-sizes="auto" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" title="fot. Pexels - Tara Winstead">
</div>
<div class="py-2">
<h3 class="no-sygnet root-content-title mb-0 text-start">
IBM Equal Access Accessibility Checker - rozbudowane, otwarte narzędzie do automatycznej oceny dostępności cyfrowej stron internetowych i aplikacji
</h3>
<div class="category-node-description mt-2 text-body">
<p>IBM Equal Access Accessibility Checker to potężne narzędzie, które automatyzuje ocenę dostępności cyfrowej. Poznaj jego możliwości i spraw, aby Twoje aplikacje były bardziej przyjazne. Kliknij i przeczytaj, jak to zrobić!</p>
</div>
</div>
</a>
</div>
</div>
</div>
</article>
</div>
</div>
<div class="container"> </div>
<hr class="mb-0" style="height: 1px;">
<div class="container">
<!-- Breadcrumbs -->
<div class="location-wrapper my-2">
<a href="https://www.krakweb.pl/" title="Strona główna">
<i class="fas fa-home"></i>
</a>
<i class="location-separator fa fa-chevron-right"></i>
<a
class="location"
href="https://www.krakweb.pl/blog/"
>
Blog
</a>
<i class="location-separator fa fa-chevron-right"></i>
<a
class="location_last"
href="https://www.krakweb.pl/artykuly/"
>
Artykuły
</a>
</div>
</div>
<!-- Cookies Popup -->
<div class="modal fade cookies-modal" data-bs-backdrop="static" tabindex="-1" id="cookies-modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Cookies</h5>
</div>
<div class="modal-body small">
<h3>Twoja prywatność</h3>
<p>Poniżej możesz zmienić ustawienia plików cookies (ciasteczek). Korzystanie przez nas z plików cookie analitycznych oraz marketingowych wymaga Twojej zgody. Więcej informacji o poszczególnych kategoriach plików cookie, które stosujemy w serwisie, znajdziesz poniżej. Możesz zaakceptować wszystkie pliki cookie, klikając „Zaakceptuj wszystkie”. lub tylko niezbędne pliki cookie - wtedy kliknij „Zapisz ustawienia i zamknij”. </p>
<div class="card shadow-none mb-1">
<div class="card-header p-0 cookies-group-toggler-wrapper">
<h6 class="mb-0 w-100 p-2" data-bs-toggle="collapse" data-bs-target="#group-base" role="button">
Cookies podstawowe</h6>
</div>
<div class="card-body collapse" id="group-base"><p>Korzystanie przez nas z niezbędnych plików cookie jest konieczne dla prawidłowego funkcjonowania strony internetowej. Pliki te są instalowane w szczególności na potrzeby zapamiętywania m.in. opcji prywatności.</p></div>
</div>
<div class="card shadow-none mb-1">
<div class="card-header p-0 cookies-group-toggler-wrapper">
<h6 class="mb-0 w-100 p-2" data-bs-toggle="collapse" data-bs-target="#group-analytical" role="button">
Cookies analityczne</h6>
<label for="analytical" class="p-2 form-check-label" role="button">
<input class="form-check-input cookies-group-toggler" type="checkbox" id="analytical" name="analytical">
</label>
</div>
<div class="card-body collapse" id="group-analytical"><p>Analityczne pliki cookie umożliwiają sprawdzenie liczby wizyt i źródeł ruchu w naszym serwisie. Pomagają nam ustalić, które strony są bardziej, a które mniej popularne, i zrozumieć, jak użytkownicy poruszają się po stronie. Dzięki temu możemy badać statystyki i poprawiać wydajność naszej witryny. Informacje zbierane przez te pliki cookie są agregowane, nie mają więc na celu ustalania Twojej tożsamości. Jeśli nie zezwolisz na stosowanie tych plików cookie, nie będziemy wiedzieć, kiedy odwiedziłeś/-aś naszą stronę internetową.</p></div>
</div>
<div class="card shadow-none mb-1">
<div class="card-header p-0 cookies-group-toggler-wrapper">
<h6 class="mb-0 w-100 p-2" data-bs-toggle="collapse" data-bs-target="#group-advertising" role="button">
Cookies reklamowe</h6>
<label for="advertising" class="p-2 form-check-label" role="button">
<input class="form-check-input cookies-group-toggler" type="checkbox" id="advertising" name="advertising">
</label>
</div>
<div class="card-body collapse" id="group-advertising"><p>Reklamowe pliki cookie pozwalają na dopasowanie wyświetlanych treści reklamowych do Twoich zainteresowań, nie tylko w tej witrynie, ale też poza nią. Mogą być instalowane przez partnerów reklamowych za pośrednictwem naszej strony internetowej. Na podstawie informacji z tych plików cookie i aktywności w innych serwisach jest budowany Twój profil zainteresowań. Reklamowe cookies nie przechowują Twoich danych osobowych, ale identyfikują Twoją przeglądarkę internetową i sprzęt. Jeśli nie zezwolisz na stosowanie tych plików cookie nie będziemy mogli wyświetlać Ci reklam w oparciu o tematykę, którą jesteś zainteresowany/-a.</p></div>
</div>
<div class="card shadow-none mb-1">
<div class="card-header p-0 cookies-group-toggler-wrapper">
<h6 class="mb-0 w-100 p-2" data-bs-toggle="collapse" data-bs-target="#group-preferences" role="button">
Cookies preferencje</h6>
<label for="preferences" class="p-2 form-check-label" role="button">
<input class="form-check-input cookies-group-toggler" type="checkbox" id="preferences" name="preferences">
</label>
</div>
<div class="card-body collapse" id="group-preferences"><p>Pliki cookie dotyczące preferencji umożliwiają stronie zapamiętanie informacji, które zmieniają wygląd lub funkcjonowanie strony, np. preferowany język lub region, w którym znajduje się użytkownik.</p></div>
</div>
<div class="d-flex justify-content-end mt-3 gap-2">
<button class="btn btn-outline-primary cookies-submit px-2">Zaakceptuj wybrane</button>
<button class="btn btn-primary cookies-submit-all px-2">Zaakceptuj wszystkie</button>
</div>
</div>
</div>
</div>
</div>
<!-- Footer -->
<footer>
<div class="footer-main section-padded">
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-6">
<h3>Sprawdź!</h3>
<div><ul class="list-unstyled mb-0">
<li class="mb-2 ">
<a href="https://www.krakweb.pl/oferta/" >
Oferta
</a>
<span class="list-item-description">
</span>
</li>
<li class="mb-2 ">
<a href="https://www.krakweb.pl/portfolio-krakweb" >
Portfolio
</a>
<span class="list-item-description">
</span>
</li>
<li class="mb-2 ">
<a href="https://www.krakweb.pl/krakweb-materialy-prasowe" >
Materiały prasowe
</a>
<span class="list-item-description">
</span>
</li>
<li class="mb-2 ">
<a href="https://www.krakweb.pl/mapa-strony" >
Mapa strony
</a>
<span class="list-item-description">
</span>
</li>
<li class="mb-2 ">
<a href="https://www.krakweb.pl/polityka-prywatnosci-i-cookies" >
Polityka prywatności i cookies
</a>
<span class="list-item-description">
</span>
</li>
<li class="mb-2 ">
<a href="https://www.krakweb.pl/regulamin-hosting" >
Regulamin hosting
</a>
<span class="list-item-description">
</span>
</li>
<li class="mb-2 ">
<a href="https://www.krakweb.pl/reklamacje" >
Reklamacje
</a>
<span class="list-item-description">
</span>
</li>
</ul>
</div>
</div>
<div class="col-lg-3 col-md-6 mt-5 mt-md-0 footer-contact">
<h3>Kontakt</h3>
<p>Telefon: <a href="tel:+48 530 555 521" rel="noopener" target="_blank">+48 530 555 521</a></p>
<p>Telefon kom.: <a href="tel:+48 530 555 521" rel="noopener" target="_blank" title="Zadzwoń do nas">+48 530 555 521</a></p>
<p>Email: <a href="mailto:kontakt@krakweb.pl" rel="noopener" target="_blank" title="Napisz do nas">kontakt@krakweb.pl</a></p>
<p><a href="https://www.krakweb.pl/reklamacje" title="Formularz reklamacji">Reklamacje</a></p>
<div class="footer-social">
</div>
</div>
<div class="col-lg-6 mt-5 mt-lg-0">
<h3>Wyszukiwarka</h3>
<div>
<div class="header-secondary-search-wrapper" data-search-widget-container>
<div class="searchbox search-widget search-merge-inputs">
<form action="https://www.krakweb.pl/wyszukiwarka" method="get" class="searchbox-form d-flex justify-content-between" role="search">
<input class="form-control" id="lzlkqtpggnqwskhu" type="text" name="q" value="" aria-label="Wyszukiwarka">
<button class="search btn btn-primary tooltipable" title="" aria-label="Wyszukaj" data-bs-original-title="Wyszukaj">
<i class="fa fa-search" aria-hidden="true"></i>
</button>
</form>
</div>
</div>
<script>
window.addEventListener('DOMContentLoaded', () => {
new IceMeili(
'all',
"lzlkqtpggnqwskhu",
"Wpisz szukaną frazę...",
1,
"/_action/autocomplete-search-results/eyJ0ZW1wbGF0ZSI6ImtyYWt3ZWIiLCJpbml0aWF0b3IiOiJcL25handhem5pZWpzemUtemFzYWR5LXByb2pla3Rvd2FuaWEtZG9zdGVwbnljaC1zdHJvbi1pbnRlcm5ldG93eWNoIiwicmVkaXJlY3RfdG8iOiIifQ==",
{},
);
})
</script>
</div>
</div>
</div>
</div>
</div>
<div class="footer-copyright text-center">
<div class="container">
<p style="text-align: center;">© Krakweb sp. z o.o. Agencja Interaktywna & Software House Kraków 2006-2023</p>
</div>
</div>
<div class="footer-captcha-legal">
This site is protected by reCAPTCHA and the Google
<a href="https://policies.google.com/privacy">Privacy Policy</a>
and
<a href="https://policies.google.com/terms">Terms of Service</a>
apply.
</div>
</footer>
<!-- Accessibility -->
<div class="accessibility-widget">
<div class="accessibility-widget-header">
<span>
Ustawienia dostępności
</span>
<i class="fa fa-times close-widget"></i>
</div>
<div class="accessibility-grid">
<!-- FONT MINUS -->
<button type="button" accesskey="1" class="accessibility-widget-item wcag-font-down" title="Zmniejsz czcionkę">
<span class="accessibility-icon-font-size-minus">Aa-</span>
<span class="wcag-label">Zmniejsz czcionkę</span>
</button>
<!-- FONT RESET -->
<button type="button" accesskey="9" class="accessibility-widget-item wcag-font-reset" title="Zresetuj czcionkę">
<span class="accessibility-icon-font-size-reset">Aa</span>
<span class="wcag-label">Zresetuj czcionkę</span>
</button>
<!-- FONT PLUS -->
<button type="button" accesskey="2" class="accessibility-widget-item wcag-font-up" title="Zwiększ czcionkę">
<span class="accessibility-icon-font-size-plus">Aa+</span>
<span class="wcag-label">Zwiększ czcionkę</span>
</button>
<!-- CONTRAST MODE -->
<button type="button" accesskey="3" class="accessibility-widget-item accessibility-contrast-button wcag-contrast-black-yellow" data-mode="black-yellow"
title="Żółty na czarnym" data-bs-toggle="tooltip">
<span class="accessibility-icon-contrast accessibility-icon-contrast-black-yellow"></span>
</button>
<button type="button" accesskey="4" class="accessibility-widget-item accessibility-contrast-button wcag-contrast-black-white" data-mode="black-white"
title="Biały na czarnym" data-bs-toggle="tooltip">
<span class="accessibility-icon-contrast accessibility-icon-contrast-black-white"></span>
</button>
<button type="button" accesskey="5" class="accessibility-widget-item accessibility-contrast-button wcag-contrast-gray" data-mode="gray"
title="Szary na białym" data-bs-toggle="tooltip">
<span class="accessibility-icon-contrast accessibility-icon-contrast-gray"></span>
</button>
<button type="button" accesskey="6" class="accessibility-widget-item accessibility-contrast-button wcag-contrast-white-black" data-mode="white-black"
title="Czarny na białym" data-bs-toggle="tooltip">
<span class="accessibility-icon-contrast accessibility-icon-contrast-white-black"></span>
</button>
<button type="button" accesskey="7" class="accessibility-widget-item accessibility-contrast-button wcag-contrast-yellow-black" data-mode="yellow-black"
title="Czarny na żółtym" data-bs-toggle="tooltip">
<span class="accessibility-icon-contrast accessibility-icon-contrast-yellow-black"></span>
</button>
<button type="button" accesskey="8" class="accessibility-widget-item accessibility-contrast-button wcag-contrast-no-bg" data-mode="no-bg"
title="Łagodne tło" data-bs-toggle="tooltip">
<span class="accessibility-icon-contrast accessibility-icon-contrast-no-bg"></span>
</button>
<!-- LINE HEIGHT -->
<div class="accessibility-widget-item wcag-line-height" title="Wysokość linii" data-step="0"
data-class-name="line-height">
<i class="fas fa-text-height"></i>
<div class="steps">
<div class="accessibility-step"></div>
<div class="accessibility-step"></div>
<div class="accessibility-step"></div>
<div class="accessibility-step"></div>
</div>
<span class="wcag-label">Wysokość linii</span>
</div>
<!-- LETTER SPACING -->
<div class="accessibility-widget-item wcag-letter-spacing" title="Odległość między literami" data-step="0"
data-class-name="letter-spacing">
<i class="fas fa-text-width"></i>
<div class="steps">
<div class="accessibility-step"></div>
<div class="accessibility-step"></div>
<div class="accessibility-step"></div>
<div class="accessibility-step"></div>
</div>
<span class="wcag-label">Odległość między literami</span>
</div>
<!-- HIGHLIGHT LINKS -->
<div class="accessibility-widget-item wcag-highlighted-links" title="Podświetlenie linków" data-class-name="highlighted-links">
<i class="fas fa-link"></i>
<span class="wcag-label">Podświetlenie linków</span>
</div>
<!-- STOP ANIMATIONS -->
<div class="accessibility-widget-item wcag-stop-animations" title="Wyłącz animacje" data-class-name="stop-animations">
<i class="fas fa-pause"></i>
<span class="wcag-label">Wyłącz animacje</span>
</div>
<!-- READING LINE -->
<div class="accessibility-widget-item wcag-reading-line" title="Przewodnik czytania" data-class-name="reading-line">
<i class="fas fa-ruler-horizontal"></i>
<span class="wcag-label">Przewodnik czytania</span>
</div>
<!-- SPEECH -->
<div accesskey="8" class="accessibility-widget-item wcag-speech" title="Czytnik">
<i class="fas fa-volume-down"></i>
<span class="wcag-label">Czytnik</span>
</div>
<div class="accessibility-widget-item wcag-no-images" title="Wyłącz obrazki" data-class-name="no-images">
<i class="fas fa-images"></i>
<span class="wcag-label">Wyłącz obrazki</span>
</div>
<div class="accessibility-widget-item wcag-focus-on-content" title="Skup się na zawartości">
<i class="far fa-search"></i>
<span class="wcag-label">Skup się na zawartości</span>
</div>
<!-- BIGGER CURSOR -->
<div class="accessibility-widget-item wcag-bigger-cursor" title="Większy kursor" data-class-name="bigger-cursor">
<i class="fas fa-mouse-pointer"></i>
<span class="wcag-label">Większy kursor</span>
</div>
</div>
<a href="https://www.krakweb.pl/skroty-klawiaturowe" class="accessibility-hotkeys" target="_blank">Skróty klawiszowe</a>
<button type="button" class="btn btn-light reset-wcag m-3 mt-0" accesskey="0">
Resetuj ustawienia
</button>
</div>
<script>
window.IcebergVars = {
pageType: 'content',
sectionId: 1836,
sectionCategoryId: 2,
sectionContentType: 'articles',
sectionName: 'Najważniejsze zasady projektowania dostępnych stron internetowych',
sectionSlug: 'najwazniejsze-zasady-projektowania-dostepnych-stron-internetowych',
sectionDomain: 'www.krakweb.pl',
currentUrl: 'https://www.krakweb.pl/najwazniejsze-zasady-projektowania-dostepnych-stron-internetowych',
domain: 'https://www.krakweb.pl/',
language: 'pl',
defaultLanguage: 'pl',
template: 'krakweb',
};
</script>
<script>
defer(function () {
});
</script>
</body>
</html>