{"id":581,"date":"2022-10-28T09:07:57","date_gmt":"2022-10-28T09:07:57","guid":{"rendered":"https:\/\/webdevs.blog\/pl\/?p=581"},"modified":"2026-02-20T07:28:07","modified_gmt":"2026-02-20T07:28:07","slug":"web-accessibility","status":"publish","type":"post","link":"https:\/\/webdevs.blog\/pl\/web-accessibility\/","title":{"rendered":"Web accessibility czyli dost\u0119pno\u015b\u0107 WWW"},"content":{"rendered":"\n

Termin Web Accessibility<\/em> odnosi si\u0119 do tworzenia stron i aplikacji internetowych w taki spos\u00f3b, aby by\u0142y one dost\u0119pne dla wszystkich u\u017cytkownik\u00f3w. Jest to szczeg\u00f3lnie istotne w przypadku r\u00f3\u017cnego typu niepe\u0142nosprawno\u015bci, np. wzroku, s\u0142uchu, ruchu, ale dotyczy te\u017c czasowej niezdolno\u015bci do pracy czy zaburze\u0144 poznawczych.<\/strong><\/p>\n\n\n\n

Wed\u0142ug danych WHO<\/a> oko\u0142o 15% \u015bwiatowej populacji ludzi posiada jaki\u015b rodzaj niepe\u0142nosprawno\u015bci – s\u0105 to zar\u00f3wno niepe\u0142nosprawno\u015bci fizyczne jak i zaburzenia poznawcze i neurologiczne. Wska\u017aniki te z pewno\u015bci\u0105 b\u0119d\u0105 ros\u0142y ze wzgl\u0119du na starzenie si\u0119 populacji i wzrost przewlek\u0142ych schorze\u0144. Je\u015bli wierzy\u0107 statystykom, na \u015bwiecie jest ponad 5 miliard\u00f3w (\u017ar\u00f3d\u0142o<\/a>) u\u017cytkownik\u00f3w sieci WWW. Mo\u017cna oszacowa\u0107, \u017ce oko\u0142o 750 milion\u00f3w u\u017cytkownik\u00f3w Internetu to osoby z r\u00f3\u017cnymi ograniczeniami i dysfunkcjami (i ilo\u015b\u0107 ta ca\u0142y czas ro\u015bnie).<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Nie trzeba zatem t\u0142umaczy\u0107 jak kwestia dost\u0119pno\u015bci WWW jest istotna w procesie projektowania i tworzenia stron internetowych.<\/p>\n\n\n\n

WCAG<\/h3>\n\n\n\n

WCAG to skr\u00f3t od Web Content Accessibility Guidelines<\/em> i oznacza zbi\u00f3r wytycznych dotycz\u0105cych dost\u0119pno\u015bci tre\u015bci internetowych. Zosta\u0142y one opracowane przez W3C. Ich celem by\u0142o ustanowienie mi\u0119dzynarodowych wytycznych, reguluj\u0105cych standardy dost\u0119pno\u015bci tre\u015bci internetowych w taki spos\u00f3b, aby by\u0142y dost\u0119pne dla jak najwi\u0119kszej ilo\u015bci os\u00f3b z niepe\u0142nosprawno\u015bciami. Najnowsz\u0105 wydan\u0105 i obowi\u0105zuj\u0105c\u0105 wersj\u0105 WCAG jest wersja WCAG 2.1<\/strong> z 2018 roku. Trwaj\u0105 jednak prace nad wersj\u0105 WCAG 2.2<\/strong>, kt\u00f3ra ma by\u0107 sko\u0144czona i w pe\u0142ni opublikowana w grudniu 2022 roku.<\/p>\n\n\n\n

WCAG stanowi podstaw\u0119 wi\u0119kszo\u015bci akt\u00f3w prawnych w wielu krajach na \u015bwiecie. Wytyczne WCAG te dziel\u0105 si\u0119 na trzy poziomy zgodno\u015bci:<\/p>\n\n\n\n

\n
\n
Poziom A<\/h6>\n\n\n\n

Najni\u017cszy poziom zgodno\u015bci z WCAG, w kt\u00f3rym tre\u015bci spe\u0142niaj\u0105 jedynie te najbardziej podstawowe funkcje dost\u0119pno\u015bci. Niedostosowanie si\u0119 do tego poziomu powoduje ca\u0142kowit\u0105 niedost\u0119pno\u015b\u0107 w kwestii „web accessibility”.<\/p>\n<\/div>\n\n\n\n

\n
Poziom AA<\/h6>\n\n\n\n

Jest to najpowszechniejszy poziom zgodno\u015bci WCAG, kt\u00f3ry jest wymagany przez wi\u0119kszo\u015b\u0107 akt\u00f3w prawnych w wielu krajach na \u015bwiecie (w tym chocia\u017cby w przepisach UE i co za tym idzie – w przepisach polskich).<\/p>\n<\/div>\n\n\n\n

\n
Poziom AAA<\/h6>\n\n\n\n

Najwy\u017cszy poziom zgodno\u015bci z WCAG i co za tym idzie – najwy\u017cszy poziom dost\u0119pno\u015bci WWW dla os\u00f3b niepe\u0142nosprawnych. Jest stosunkowo trudny do osi\u0105gni\u0119cia przez wi\u0119kszo\u015b\u0107 witryn.
Poziom ten jest po\u017c\u0105dany, ale nie jest konieczny<\/em>.<\/p>\n<\/div>\n<\/div>\n\n\n\n

POUR czyli 4 zasady dost\u0119pno\u015bci <\/h3>\n\n\n\n

WCAG 2.1 opiera si\u0119 na 4 podstawowych zasadach tworzenia tre\u015bci internetowych zwanych POUR<\/mark><\/strong> (akronim od s\u0142\u00f3w: Perceivable, Operable, Understandable, Robust<\/mark><\/strong>). Celem stosowania tych zasad jest to, aby z tworzonych tre\u015bci m\u00f3g\u0142 korzysta\u0107 ka\u017cdy, kto tylko chce<\/em>. Zasady te s\u0105 nast\u0119puj\u0105ce:<\/p>\n\n\n\n

    \n
  1. Perceivable<\/mark><\/strong> (postrzegalno\u015b\u0107) – wed\u0142ug tej zasady, u\u017cytkownik strony internetowej lub aplikacji powinien by\u0107 w stanie korzysta\u0107 w pe\u0142ni za pomoc\u0105 dost\u0119pnych dla niego zmys\u0142\u00f3w. Ka\u017cda tre\u015b\u0107 na stronie powinna by\u0107 widoczna lub wykrywalna (np. w spos\u00f3b d\u017awi\u0119ku lub dotyku) dla takiej osoby.<\/li>\n\n\n\n
  2. Operable<\/mark> <\/strong>(funkcjonalno\u015b\u0107) – u\u017cytkownicy powinni m\u00f3c znajdowa\u0107 elementy interfejsu i u\u017cywa\u0107 ich niezale\u017cnie od rodzaju urz\u0105dzeniu za pomoc\u0105, kt\u00f3rego to robi\u0105, np. za pomoc\u0105 samej myszy, touchpada, klawiatury czy te\u017c urz\u0105dzenia do sterowania wzrokiem (eye tracker).<\/li>\n\n\n\n
  3. Understandable<\/mark><\/strong> (zrozumia\u0142o\u015b\u0107) – tre\u015b\u0107 powinna by\u0107 przejrzysta i sp\u00f3jna, a projekt witryny lub aplikacji zrobiony wed\u0142ug przewidywalnych wzorc\u00f3w u\u017cytkownika (user experience). U\u017cytkownik nie powinien mie\u0107 problemu ze zrozumieniem znaczenia i celu prezentowanych informacji i tre\u015bci.<\/li>\n\n\n\n
  4. Robust<\/strong> <\/mark>(solidno\u015b\u0107 lub kompatybilno\u015b\u0107) – tre\u015bci powinny dzia\u0142a\u0107 poprawnie w wielu r\u00f3\u017cnych programach u\u017cytkownik\u00f3w (np. w programach i urz\u0105dzeniach dla os\u00f3b niewidomych).<\/li>\n<\/ol>\n\n\n\n
    \n

    Brak kt\u00f3rejkolwiek z powy\u017cszych zasad sprawia, \u017ce tre\u015b\u0107 internetowa nie jest dost\u0119pna dla u\u017cytkownik\u00f3w z niepe\u0142nosprawno\u015bciami, a co za tym idzie sprawia, \u017ce dana strona WWW lub aplikacja nie jest zgodna z WCAG.<\/mark><\/strong><\/p>\n<\/div>\n\n\n\n

    \"\"<\/figure>\n\n\n\n

    Dost\u0119pno\u015b\u0107 WWW w praktyce<\/h3>\n\n\n\n

    Przy tworzeniu strony WWW, kt\u00f3ra ma by\u0107 dost\u0119pna dla wszystkich, przydatna mo\u017ce by\u0107 strona guia-wcag.com<\/a>. Prezentuje ona w zwi\u0119z\u0142y i przyjazny spos\u00f3b wytyczne WCAG, jakie nasza strona musi spe\u0142nia\u0107. S\u0105 one podzielone wed\u0142ug zasad POUR. Mo\u017cemy je te\u017c filtrowa\u0107 wed\u0142ug poziom\u00f3w zgodno\u015bci (poziom A, AA i AAA). Opr\u00f3cz tego mamy te\u017c oznaczone wytyczne, kt\u00f3re wesz\u0142y wraz z WCAG 2.1 oraz te, kt\u00f3re (prawdopodobnie) wejd\u0105 wraz z WCAG 2.2.<\/p>\n\n\n\n

    Dost\u0119pno\u015b\u0107 WWW nie jest rzecz\u0105 prost\u0105 do wdro\u017cenia – szczeg\u00f3lnie na ju\u017c istniej\u0105cych stronach. Cz\u0119sto elementy potrzebne do jej implementacji koliduj\u0105 z wizj\u0105 UI strony. Dobr\u0105 praktyk\u0105, kt\u00f3ra powinna zdecydowanie u\u0142atwi\u0107 nam dostosowanie witryny dla os\u00f3b niepe\u0142nosprawnych jest to, aby kierowa\u0107 si\u0119 wytycznymi WCAG od samego pocz\u0105tku jej projektowania. Wypracowanie u projektant\u00f3w UI \/ UX oraz programist\u00f3w nawyku planowania strony pod k\u0105tem spe\u0142nienia wymaga\u0144 os\u00f3b wykluczonych cyfrowo<\/em> jest obecnie elementem bardzo istotnym, o kt\u00f3rym \u017caden profesjonalny tw\u00f3rca WWW nie mo\u017ce zapomina\u0107.<\/p>\n\n\n","protected":false},"excerpt":{"rendered":"

    Termin Web Accessibility odnosi si\u0119 do tworzenia stron i aplikacji internetowych w taki spos\u00f3b, aby by\u0142y one dost\u0119pne dla wszystkich u\u017cytkownik\u00f3w. Jest to szczeg\u00f3lnie istotne w przypadku r\u00f3\u017cnego typu niepe\u0142nosprawno\u015bci, np. wzroku, s\u0142uchu, ruchu, ale dotyczy te\u017c czasowej niezdolno\u015bci do pracy czy zaburze\u0144 poznawczych. Wed\u0142ug danych WHO oko\u0142o 15% \u015bwiatowej populacji ludzi posiada jaki\u015b rodzaj […]<\/p>\n","protected":false},"author":12,"featured_media":583,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,4],"tags":[105,106,104],"class_list":["post-581","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-dobre-praktyki","category-web-development","tag-dostepnosc-www","tag-wcag","tag-web-accessibility"],"_links":{"self":[{"href":"https:\/\/webdevs.blog\/pl\/wp-json\/wp\/v2\/posts\/581","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webdevs.blog\/pl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webdevs.blog\/pl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webdevs.blog\/pl\/wp-json\/wp\/v2\/users\/12"}],"replies":[{"embeddable":true,"href":"https:\/\/webdevs.blog\/pl\/wp-json\/wp\/v2\/comments?post=581"}],"version-history":[{"count":41,"href":"https:\/\/webdevs.blog\/pl\/wp-json\/wp\/v2\/posts\/581\/revisions"}],"predecessor-version":[{"id":679,"href":"https:\/\/webdevs.blog\/pl\/wp-json\/wp\/v2\/posts\/581\/revisions\/679"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webdevs.blog\/pl\/wp-json\/wp\/v2\/media\/583"}],"wp:attachment":[{"href":"https:\/\/webdevs.blog\/pl\/wp-json\/wp\/v2\/media?parent=581"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webdevs.blog\/pl\/wp-json\/wp\/v2\/categories?post=581"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webdevs.blog\/pl\/wp-json\/wp\/v2\/tags?post=581"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}