{"id":2683,"date":"2022-10-31T16:57:00","date_gmt":"2022-10-31T14:57:00","guid":{"rendered":"https:\/\/www.migomedia.pl\/?p=2683"},"modified":"2022-11-09T11:20:16","modified_gmt":"2022-11-09T09:20:16","slug":"jak-sprawdzic-dostepnosc-strony-internetowej","status":"publish","type":"post","link":"https:\/\/migo.media\/pl\/jak-sprawdzic-dostepnosc-strony-internetowej","title":{"rendered":"Jak sprawdzi\u0107 dost\u0119pno\u015b\u0107 strony internetowej dla os\u00f3b z niepe\u0142nosprawno\u015bciami?"},"content":{"rendered":"\n<p>Je\u015bli jeste\u015b w\u0142a\u015bcicielem strony internetowej lub jej administratorem, z pewno\u015bci\u0105 dbasz o jej <a href=\"https:\/\/migo.media\/pl\/ux-ui-design\">UX i UI design<\/a> &#8211; by by\u0142a u\u017cyteczna i przyjazna dla wi\u0119kszo\u015bci u\u017cytkownik\u00f3w.&nbsp;<\/p>\n\n\n\n<p>Czy jednak na pewno pomy\u015bla\u0142e\u015b o wszystkich odbiorcach \u2013 tak\u017ce tych, kt\u00f3rzy s\u0105 w mniejszo\u015bci? Dobr\u0105 praktyk\u0105 jest dostosowanie witryny do potrzeb os\u00f3b z niepe\u0142nosprawno\u015bciami. <strong>Czym jest dost\u0119pno\u015b\u0107 strony internetowej i jak j\u0105 sprawdzi\u0107?<\/strong><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Co to jest dost\u0119pno\u015b\u0107 strony internetowej?<\/strong><\/h2>\n\n\n\n<p><strong>Dost\u0119pno\u015b\u0107 strony internetowej (ang. accessibility)<\/strong> polega na przygotowaniu jej w taki spos\u00f3b, by by\u0142a przyjazna dla wszystkich u\u017cytkownik\u00f3w. Tw\u00f3rcy witryny powinni zaprojektowa\u0107 i zaprogramowa\u0107 poszczeg\u00f3lne elementy tak, aby nie wyklucza\u0142y mo\u017cliwo\u015bci jej odbioru przez \u017cadn\u0105 <strong>grup\u0119 ze specjalnymi potrzebami<\/strong>. Zwraca si\u0119 tu przede wszystkim uwag\u0119 na wymagania wzgl\u0119dem os\u00f3b z niepe\u0142nosprawno\u015bciami, w szczeg\u00f3lno\u015bci:<\/p>\n\n\n\n<ul><li>niewidz\u0105cych lub niedowidz\u0105cych,<\/li><li>nies\u0142ysz\u0105cych,<\/li><li>niepe\u0142nosprawnych ruchowo,<\/li><li>z zaburzeniami funkcji poznawczych.<\/li><\/ul>\n\n\n\n<p>Zasady tworzenia dost\u0119pnych stron internetowych okre\u015bla <strong>standard WCAG 2.1<\/strong>, czyli dokument przygotowany przez Mi\u0119dzynarodowe Konsorcjum W3C. Podstawowe wytyczne m\u00f3wi\u0105 o funkcjonalno\u015bci, kompatybilno\u015bci, postrzegalno\u015bci i&nbsp; zrozumia\u0142o\u015bci.<\/p>\n\n\n\n<p>W Polsce regu\u0142y dotycz\u0105ce dost\u0119pno\u015bci cyfrowej zawiera tak\u017ce <em>ustawa z dnia 4 kwietnia 2019 o dost\u0119pno\u015bci cyfrowej stron internetowych i <\/em><a href=\"https:\/\/migo.media\/pl\/czy-twoja-firma-potrzebuje-aplikacji-mobilnej\"><em>aplikacji mobilnych<\/em><\/a><em> podmiot\u00f3w publicznych.<\/em> Cho\u0107 tylko podmioty publiczne maj\u0105 ustawowy obowi\u0105zek stosowania tych zasad, nie znaczy to, \u017ce inni tw\u00f3rcy stron www mog\u0105 je lekcewa\u017cy\u0107.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Jak sprawdzi\u0107 dost\u0119pno\u015b\u0107 cyfrow\u0105 strony internetowej?<\/strong><\/h2>\n\n\n\n<p>Zgodnie z ustaw\u0105 podmioty publiczne maj\u0105 obowi\u0105zek przygotowywania <strong>deklaracji dost\u0119pno\u015bci <\/strong><a href=\"https:\/\/migo.media\/pl\/nowa-strona-www\"><strong>strony internetowej<\/strong><\/a>. W tym celu musz\u0105 j\u0105 najpierw zweryfikowa\u0107. Cho\u0107 na podmiotach prywatnych nie ci\u0105\u017cy podobny obowi\u0105zek, jednak taki monitoring im tak\u017ce bywa potrzebny.<\/p>\n\n\n\n<p>Aby <strong>sprawdzi\u0107 dost\u0119pno\u015b\u0107 strony internetowej dla os\u00f3b z niepe\u0142nosprawno\u015bciami<\/strong>, powiniene\u015b zweryfikowa\u0107 szereg element\u00f3w w tre\u015bci i budowie witryny. Poni\u017cej znajdziesz list\u0119 najwa\u017cniejszych z nich. Sprawd\u017a, czy w\u0142a\u015bciwie stosujesz mo\u017cliwo\u015bci wzmocnienia dost\u0119pno\u015bci strony dla os\u00f3b z niepe\u0142nosprawno\u015bciami. A je\u015bli tak nie jest, wprowad\u017a usprawnienia.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Wielko\u015b\u0107 i skalowalno\u015b\u0107 czcionek<\/strong><\/h3>\n\n\n\n<p>Dla os\u00f3b niedowidz\u0105cych wielko\u015b\u0107 czcionki ma ogromne znaczenie. Nie oznacza to, \u017ce powiniene\u015b u\u017cywa\u0107 nienaturalnie du\u017cych font\u00f3w. Dost\u0119pne s\u0105 narz\u0119dzia pozwalaj\u0105ce powi\u0119kszy\u0107 czcionk\u0119, np. jeden z najbardziej popularnych przycisk\u00f3w \u201eaAA\u201d, z kt\u00f3rych niedowidz\u0105cy u\u017cytkownicy ch\u0119tnie korzystaj\u0105.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>W\u0142a\u015bciwy kontrast<\/strong><\/h3>\n\n\n\n<p>Osoby niedowidz\u0105ce doceniaj\u0105 odpowiednio dobrane kolory na stronie www. Kontrast kolorystyczny pomi\u0119dzy tekstem a t\u0142em powinien oscylowa\u0107 na poziomie od 7 do 1. Ten drobny zabieg znacz\u0105co u\u0142atwi odbi\u00f3r tre\u015bci i uczyni witryn\u0119 du\u017co bardziej przyjazn\u0105.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Struktura nag\u0142\u00f3wk\u00f3w<\/strong><\/h3>\n\n\n\n<p>By\u0107 mo\u017ce jeste\u015b przyzwyczajony, \u017ce <a href=\"https:\/\/migo.media\/pl\/hierarchia-naglowkow-h1-h2-na-stronie\">nag\u0142\u00f3wki typu h1, h2, h3<\/a> stosujesz na stronie, by wesprze\u0107 jej pozycje w wyszukiwarkach. To wa\u017cny aspekt, jednak nie zapominaj o u\u017cytkowniku. Szczeg\u00f3lnie osoby ze specjalnymi potrzebami du\u017co korzystaj\u0105 na w\u0142a\u015bciwie dobranych nag\u0142\u00f3wkach. Dzi\u0119ki nim s\u0105 w stanie szybko zorientowa\u0107 si\u0119 w tre\u015bci strony.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Meta tagi na stronie<\/strong><\/h3>\n\n\n\n<p>W kodzie strony programi\u015bci i specjali\u015bci od SEO umieszczaj\u0105 tzw. <a href=\"https:\/\/migo.media\/pl\/meta-znaczniki\">meta tagi<\/a>. Najwa\u017cniejsze z nich to <em>meta title<\/em> i <em>meta description<\/em>. Podobnie jak nag\u0142\u00f3wki, maj\u0105 one du\u017ce znaczenie dla <a href=\"https:\/\/migo.media\/pl\/podstawy-seo\">pozycji witryny w wyszukiwarkach<\/a>, jednak ich wa\u017cn\u0105 rol\u0105 jest tak\u017ce pomoc osobom z niepe\u0142nosprawno\u015bciami. Czytniki stron www odczytuj\u0105 meta tagi i w ten spos\u00f3b szybko podpowiadaj\u0105, z jakiego typu witryn\u0105 u\u017cytkownicy maj\u0105 do czynienia.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Opisy alternatywne<\/strong><\/h3>\n\n\n\n<p>Czytniki stron internetowych dla os\u00f3b z niepe\u0142nosprawno\u015bciami odczytuj\u0105 tak\u017ce opisy alternatywne obrazk\u00f3w, czyli tzw. <em>alty<\/em>. Dzi\u0119ki temu u\u017cytkownik wie, co znajduje si\u0119 na obrazku uzupe\u0142niaj\u0105cym tre\u015b\u0107 witryny. Konstruuj wi\u0119c <em>alty <\/em>tak, by jasno opisywa\u0142y zdj\u0119cia czy grafiki na Twojej stronie.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Video z napisami<\/strong><\/h3>\n\n\n\n<p>Je\u015bli zamieszczasz na swojej stronie www content w formie video pami\u0119taj, \u017ce jest on bezwarto\u015bciowy dla os\u00f3b nies\u0142ysz\u0105cych &#8211; chyba \u017ce dodasz do filmu napisy lub transkrypcj\u0119.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Efekt \u201estroboskopowy\u201d, migotanie<\/strong><\/h3>\n\n\n\n<p>Przemy\u015bl s\u0142uszno\u015b\u0107 zastosowania na swojej stronie agresywnych animacji, migaj\u0105cych, gwa\u0142townie zmieniaj\u0105cych jasno\u015b\u0107 czy z efektem \u201estroboskopowym\u201d. S\u0105 one trudne w odbiorze dla wielu u\u017cytkownik\u00f3w, a bywaj\u0105 tak\u017ce niebezpieczne, np. dla os\u00f3b z padaczk\u0105.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Zrozumia\u0142e instrukcje<\/strong><\/h3>\n\n\n\n<p>Je\u015bli aktywno\u015b\u0107 u\u017cytkownik\u00f3w na Twojej stronie wymaga post\u0119powania wed\u0142ug instrukcji, np. podczas rejestracji, napisz j\u0105 mo\u017cliwie najprostszym j\u0119zykiem. U\u017cywaj prostych s\u0142\u00f3w i kr\u00f3tkich zda\u0144. Podziel proces na kilka krok\u00f3w. U\u0142atwisz w ten spos\u00f3b zadanie osobom z zaburzonymi funkcjami poznawczymi.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Mo\u017cliwo\u015b\u0107 nawigacji klawiszowej<\/strong><\/h3>\n\n\n\n<p>Zweryfikuj, czy do poszczeg\u00f3lnych element\u00f3w strony i podstron mo\u017cna przechodzi\u0107 przy u\u017cyciu klawiatury komputera. Co wi\u0119cej, obszar strony, kt\u00f3ry zosta\u0142 wybrany za pomoc\u0105 klawisza, powinien si\u0119 pod\u015bwietla\u0107. Jest to istotne dla os\u00f3b z ograniczeniami ruchowymi, kt\u00f3re nie s\u0105 w stanie operowa\u0107 myszk\u0105, a tak\u017ce dla os\u00f3b niewidomych, kt\u00f3re r\u00f3wnie\u017c najcz\u0119\u015bciej pos\u0142uguj\u0105 si\u0119 klawiatur\u0105.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>W\u0142a\u015bciwy format dokument\u00f3w<\/strong><\/h3>\n\n\n\n<p>Je\u015bli to mo\u017cliwe, zadbaj, by dokumenty zamieszczone na stronie w formacie PDF by\u0142y przygotowane jako tekst, a nie w formie skanu \u2013 dzi\u0119ki temu b\u0119dzie mo\u017cliwe odczytanie ich przez czytniki. Link do dokumentu do pobrania powinien mie\u0107 w swojej tre\u015bci informacj\u0119 o formacie i rozmiarze dokumentu.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Dost\u0119pno\u015b\u0107 strony internetowej \u2013 lista kontrolna<\/strong><\/h2>\n\n\n\n<p>Na rz\u0105dowej stronie internetowej, <a href=\"http:\/\/www.gov.pl\">www.gov.pl<\/a>, znajdziesz szczeg\u00f3\u0142ow\u0105 <strong>list\u0119 kontroln\u0105 <\/strong>z elementami warunkuj\u0105cymi dost\u0119pno\u015b\u0107 cyfrowej witryny. Cho\u0107 zosta\u0142a ona stworzona na podstawie ustawy dla podmiot\u00f3w publicznych, mo\u017cesz wykorzysta\u0107 j\u0105 tak\u017ce dla swojej strony.<\/p>\n\n\n\n<p>Je\u015bli potrzebujesz dokona\u0107 szczeg\u00f3\u0142owej analizy strony pod k\u0105tem jej dost\u0119pno\u015bci dla os\u00f3b niepe\u0142nosprawnych, lista ta b\u0119dzie przydatna. Je\u015bli jednak chcesz po prostu zadba\u0107 o swoich u\u017cytkownik\u00f3w, tak\u017ce tych ze szczeg\u00f3lnymi potrzebami, zacznij od opisanych powy\u017cej element\u00f3w. Wprowadzaj\u0105c zmiany sprawisz, \u017ce <strong>Twoja witryna b\u0119dzie du\u017co bardziej przyjazna i <\/strong><a href=\"https:\/\/migo.media\/pl\/web-usability-i-user-experience\"><strong>u\u017cyteczna<\/strong><\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Je\u015bli jeste\u015b w\u0142a\u015bcicielem strony internetowej lub jej administratorem, z pewno\u015bci\u0105 dbasz o jej UX i UI design &#8211; by by\u0142a u\u017cyteczna i przyjazna dla wi\u0119kszo\u015bci u\u017cytkownik\u00f3w.&nbsp; Czy jednak na pewno pomy\u015bla\u0142e\u015b o wszystkich odbiorcach \u2013 tak\u017ce tych, kt\u00f3rzy s\u0105 w mniejszo\u015bci? Dobr\u0105 praktyk\u0105 jest dostosowanie witryny do potrzeb os\u00f3b z niepe\u0142nosprawno\u015bciami. Czym jest dost\u0119pno\u015b\u0107 strony\u2026 <a href=\"https:\/\/migo.media\/pl\/jak-sprawdzic-dostepnosc-strony-internetowej\">Wi\u0119cej &raquo;<\/a><\/p>\n","protected":false},"author":6,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[4],"tags":[],"acf":[],"_links":{"self":[{"href":"https:\/\/migo.media\/pl\/wp-json\/wp\/v2\/posts\/2683"}],"collection":[{"href":"https:\/\/migo.media\/pl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/migo.media\/pl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/migo.media\/pl\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/migo.media\/pl\/wp-json\/wp\/v2\/comments?post=2683"}],"version-history":[{"count":2,"href":"https:\/\/migo.media\/pl\/wp-json\/wp\/v2\/posts\/2683\/revisions"}],"predecessor-version":[{"id":2685,"href":"https:\/\/migo.media\/pl\/wp-json\/wp\/v2\/posts\/2683\/revisions\/2685"}],"wp:attachment":[{"href":"https:\/\/migo.media\/pl\/wp-json\/wp\/v2\/media?parent=2683"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/migo.media\/pl\/wp-json\/wp\/v2\/categories?post=2683"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/migo.media\/pl\/wp-json\/wp\/v2\/tags?post=2683"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}