{"id":12979,"date":"2022-03-11T07:00:49","date_gmt":"2022-03-11T06:00:49","guid":{"rendered":"https:\/\/sii.pl\/blog\/?p=12979"},"modified":"2025-05-20T15:46:03","modified_gmt":"2025-05-20T13:46:03","slug":"przyklady-niezrozumienia-potrzeb-osob-z-niepelnosprawnoscia-i-jak-im-zaradzic-czesc-ii","status":"publish","type":"post","link":"https:\/\/sii.pl\/blog\/przyklady-niezrozumienia-potrzeb-osob-z-niepelnosprawnoscia-i-jak-im-zaradzic-czesc-ii\/","title":{"rendered":"Przyk\u0142ady niezrozumienia potrzeb os\u00f3b z niepe\u0142nosprawno\u015bci\u0105 i jak im zaradzi\u0107. Cz\u0119\u015b\u0107 II"},"content":{"rendered":"\n<p>Jak rozwi\u0105za\u0107 problem braku dost\u0119pno\u015bci? W artykule podziel\u0119 si\u0119 z Tob\u0105, Drogi Czytelniku, sposobami, dzi\u0119ki kt\u00f3rym mo\u017cemy pom\u00f3c osobom z niepe\u0142nosprawno\u015bciami. Podpowiem r\u00f3wnie\u017c, co mo\u017cemy zrobi\u0107, aby zwi\u0119kszy\u0107 dost\u0119pno\u015b\u0107 \u00ad\u2013 szczeg\u00f3lnie w aspekcie technologicznym i podczas tworzenia oprogramowania.<\/p>\n\n\n\n<p>Niniejszy artyku\u0142 jest znacznie bardziej pozytywn\u0105, bo nastawion\u0105 na dzia\u0142anie,&nbsp;<a href=\"https:\/\/sii.pl\/blog\/przyklady-niezrozumienia-potrzeb-osob-z-niepelnosprawnoscia-i-jak-im-zaradzic-czesc-i\/?category=testowanie&amp;tag=a11y,accessibility,dostepnosc,niepelnosprawnosc,testng,wcag\">kontynuacj\u0105 wpisu dotycz\u0105cego przyk\u0142ad\u00f3w niezrozumienia potrzeb os\u00f3b z niepe\u0142nosprawno\u015bci\u0105<\/a><\/p>\n\n\n\n<p>Artyku\u0142 b\u0119dzie porusza\u0107 dwa tematy:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Zagadnienia dost\u0119pno\u015bci w aspekcie poprawy komunikacji.<\/li>\n\n\n\n<li>Zagadnienie dost\u0119pno\u015bci w procesie tworzenia oprogramowania.<\/li>\n<\/ul>\n\n\n\n<p>Ka\u017cdy z nas mo\u017ce stara\u0107 si\u0119 usuwa\u0107 bariery i zapewnia\u0107 wi\u0119ksz\u0105 dost\u0119pno\u015b\u0107 w wielu aspektach:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>architektoniczno-przestrzennym,<\/li>\n\n\n\n<li>cyfrowym,<\/li>\n\n\n\n<li>informacyjno-komunikacyjnym.<\/li>\n<\/ul>\n\n\n\n<p>Przygotowuj\u0105c si\u0119 do napisania tego artyku\u0142u, sam wielu rzeczy si\u0119 nauczy\u0142em i odkry\u0142em rozwi\u0105zania, o kt\u00f3rych wcze\u015bniej nie mia\u0142em poj\u0119cia. Opisz\u0119 je poni\u017cej.<\/p>\n\n\n\n<p>Od 2018 roku w Polsce funkcjonuje dofinansowany przez \u015brodki unijne Program Dost\u0119pno\u015b\u0107 Plus. Na stronach tego programu mo\u017cna znale\u017a\u0107&nbsp;<a href=\"https:\/\/www.funduszeeuropejskie.gov.pl\/strony\/o-funduszach\/fundusze-europejskie-bez-barier\/dostepnosc-plus\/dobre-praktyki\/\" rel=\"nofollow\" >dobre praktyki<\/a>&nbsp;w zakresie dost\u0119pno\u015bci oraz praktyczne informacje w zakresie komunikowania si\u0119 z osobami niepe\u0142nosprawnymi.<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"15 \u2013 Cyfryzacja\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/uRzdRTfaK9E?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Zagadnienia dost\u0119pno\u015bci w aspekcie poprawy komunikacji<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Live Text i napisy automatyczne<\/h3>\n\n\n\n<p>W&nbsp;<a href=\"https:\/\/sii.pl\/blog\/przyklady-niezrozumienia-potrzeb-osob-z-niepelnosprawnoscia-i-jak-im-zaradzic-czesc-i\/\">cz\u0119\u015bci wpisu dotycz\u0105cej problemu dost\u0119pno\u015bci<\/a>&nbsp;opisa\u0142em spraw\u0119 o\u015bwiadczenia w formie grafiki. W tym miejscu chcia\u0142bym wspomnie\u0107 o funkcji, kt\u00f3ra w przysz\u0142o\u015bci b\u0119dzie w stanie w takich sytuacjach pom\u00f3c, je\u017celi zostanie zaimplementowana w odpowiedni spos\u00f3b, uwzgl\u0119dniaj\u0105c potrzeby os\u00f3b z niepe\u0142nosprawno\u015bci\u0105.<\/p>\n\n\n\n<p>Nowo\u015bci\u0105 w iOS 15 jest funkcja&nbsp;<a href=\"https:\/\/www.apple.com\/pl\/newsroom\/2021\/06\/ios-15-brings-powerful-new-features-to-stay-connected-focus-explore-and-more\/\" rel=\"nofollow\" >LiveText<\/a>, kt\u00f3ra pozwala na wydobycie tekstu ze zdj\u0119\u0107.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><a href=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/03\/Pokaz\u0307_Ostatnie_zdje\u0328cia-removebg-preview-e1637423766880.png\"><img decoding=\"async\" width=\"447\" height=\"289\" src=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/03\/Pokaz\u0307_Ostatnie_zdje\u0328cia-removebg-preview-e1637423766880.png\" alt=\"Grafika pokazuj\u0105ca zastosowanie funkcji LiveText, kt\u00f3ra pozwala skopiowa\u0107 tekst ze zdj\u0119\u0107\" class=\"wp-image-18523\" srcset=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/03\/Pokaz\u0307_Ostatnie_zdje\u0328cia-removebg-preview-e1637423766880.png 447w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/03\/Pokaz\u0307_Ostatnie_zdje\u0328cia-removebg-preview-e1637423766880-300x194.png 300w\" sizes=\"(max-width: 447px) 100vw, 447px\" \/><\/a><figcaption class=\"wp-element-caption\">Ryc.1 Dzia\u0142anie funkcji LiveText na systemie iOS<\/figcaption><\/figure>\n\n\n\n<p>Je\u017celi mowa o wykorzystywaniu nowych technologii w&nbsp;<strong>zakresie a11y<\/strong>&nbsp;warto wspomnie\u0107 o&nbsp;<strong>napisach automatycznych<\/strong>&nbsp;(napisy na \u017cywo). Od niedawna tak\u0105 funkcj\u0119 oferuje komunikator&nbsp;<a href=\"https:\/\/support.microsoft.com\/pl-pl\/office\/u%C5%BCywanie-napis%C3%B3w-na-%C5%BCywo-w-zdarzeniu-na-%C5%BCywo-1d6778d4-6c65-4189-ab13-e2d77beb9e2a\" rel=\"nofollow\" >MS Teams<\/a>&nbsp;oraz&nbsp;<a href=\"https:\/\/support.google.com\/youtube\/answer\/6373554?hl=pl\" rel=\"nofollow\" >YouTube<\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Dodawanie napis\u00f3w oraz t\u0142umaczenia na j\u0119zyk migowy<\/h3>\n\n\n\n<p>Bardzo dobrze dzia\u0142aj\u0105cym kontem internetowym w aspekcie zapewnienia dost\u0119pno\u015bci jest konto na YouTube, Rzecznika Praw Obywatelskich. Prawie wszystkie materia\u0142y maj\u0105 t\u0142umaczenie na PJM (Polski J\u0119zyk Migowy) lub\/i napisy. Ponadto, Strona internetowa RPO umo\u017cliwia zg\u0142oszenie sprawy do biura Rzecznika korzystaj\u0105c z j\u0119zyka migowego. Dodatkowo strona RPO posiada wysoki wynik (98 na 100) dost\u0119pno\u015bci w&nbsp;<strong>Lighthouse.<\/strong><\/p>\n\n\n\n<p>Z takich dzia\u0142a\u0144 zwi\u0119kszaj\u0105cych dost\u0119pno\u015b\u0107 naprawd\u0119 warto bra\u0107 przyk\u0142ad!<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><a href=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/03\/RPO-migowy-1024x462-1.png\"><img decoding=\"async\" width=\"1024\" height=\"462\" src=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/03\/RPO-migowy-1024x462-1.png\" alt=\"Grafika przedstawiaj\u0105ca mo\u017cliwo\u015b\u0107 z\u0142o\u017cenia wniosku do Rzecznika Praw Obywatelskich przy u\u017cyciu j\u0119zyka migowego.\" class=\"wp-image-18525\" srcset=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/03\/RPO-migowy-1024x462-1.png 1024w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/03\/RPO-migowy-1024x462-1-300x135.png 300w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/03\/RPO-migowy-1024x462-1-768x347.png 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><figcaption class=\"wp-element-caption\">Ryc. 2 Sk\u0142adanie wniosku do RPO za pomoc\u0105 j\u0119zyka migowego (zrzut ekranu ze strony RPO)<\/figcaption><\/figure>\n\n\n\n<p>Innym, pozytywnym przyk\u0142adem jest dodanie j\u0119zyka migowego do gry komputerowej:<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><a href=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/03\/2021-11-20-15_37_06-Window-1024x717-1.png\"><img decoding=\"async\" width=\"1024\" height=\"717\" src=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/03\/2021-11-20-15_37_06-Window-1024x717-1.png\" alt=\"Zrzut ekranu przedstawiaj\u0105cy artyku\u0142 na temat zastosowania j\u0119zyka migowego w grze Forza Horizon 5\" class=\"wp-image-18505\" srcset=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/03\/2021-11-20-15_37_06-Window-1024x717-1.png 1024w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/03\/2021-11-20-15_37_06-Window-1024x717-1-300x210.png 300w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/03\/2021-11-20-15_37_06-Window-1024x717-1-768x538.png 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><figcaption class=\"wp-element-caption\">Ryc. 3 Artyku\u0142 informuj\u0105cy o dost\u0119pno\u015bci j\u0119zyka migowego w grze komputerowej (zrzut ekranu)<\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">O\u015bwiadczenia w social mediach<\/h3>\n\n\n\n<p>Dobrym rozwi\u0105zaniem w przypadku social medi\u00f3w, kt\u00f3re ograniczaj\u0105 liczb\u0119 u\u017cytych znak\u00f3w, jest linkowanie do stron, zawieraj\u0105cych ca\u0142\u0105 wypowied\u017a lub o\u015bwiadczenie. Takie rozwi\u0105zanie mo\u017cecie poni\u017cej zobaczy\u0107 w przypadku wpisu rzecznika prasowego Wirtualnej Polski.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large\"><a href=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/03\/Screenshot_20210614_145819.jpg\"><img decoding=\"async\" width=\"801\" height=\"1024\" src=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/03\/Screenshot_20210614_145819-801x1024.jpg\" alt=\"Komunikat rzecznika prasowego Wirtualnej Polski, kt\u00f3ry zawiera zdj\u0119cie o\u015bwiadczenie oraz link, kieruj\u0105cy do ca\u0142o\u015bci o\u015bwiadczenia \" class=\"wp-image-18529\" srcset=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/03\/Screenshot_20210614_145819-801x1024.jpg 801w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/03\/Screenshot_20210614_145819-235x300.jpg 235w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/03\/Screenshot_20210614_145819-768x982.jpg 768w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/03\/Screenshot_20210614_145819.jpg 1080w\" sizes=\"(max-width: 801px) 100vw, 801px\" \/><\/a><figcaption class=\"wp-element-caption\">Ryc. 4 O\u015bwiadczenie rzecznika prasowego Wirtualnej Polski z za\u0142\u0105czonym linkiem do ca\u0142o\u015bci komunikatu (zrzut ekranu)<\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Nowoczesny wolontariat \u00ad\u2013 Projekt Be My Eyes<\/h3>\n\n\n\n<p>Mnie osobi\u015bcie bardzo pozytywnie zaskoczy\u0142 projekt&nbsp;<a href=\"https:\/\/www.bemyeyes.com\/\" rel=\"nofollow\" >Be My Eyes<\/a>&nbsp;\u00ad\u2013 aplikacji pozwalaj\u0105cej niewidomym u\u017cytkownikom znale\u017a\u0107 wolontariusza, kt\u00f3ry w codziennych sytuacjach im pomo\u017ce np. przeczyta dat\u0119 wa\u017cno\u015bci produktu z opakowania.<\/p>\n\n\n\n<p>Najlepiej zastosowanie tego projektu poka\u017ce zrzut ekranu z Google Play Store:<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><a href=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/03\/BeMyEyes-1024x871-1.png\"><img decoding=\"async\" width=\"1024\" height=\"871\" src=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/03\/BeMyEyes-1024x871-1.png\" alt=\"Przyk\u0142ady wykorzystania aplikacji Be My Eyes\" class=\"wp-image-18507\" srcset=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/03\/BeMyEyes-1024x871-1.png 1024w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/03\/BeMyEyes-1024x871-1-300x255.png 300w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/03\/BeMyEyes-1024x871-1-768x653.png 768w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/03\/BeMyEyes-1024x871-1-400x340.png 400w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><figcaption class=\"wp-element-caption\">Ryc. 5 Widok aplikacji By My Eyes z Google Play Store<\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">P\u0119tla indukcyjna dla os\u00f3b s\u0142abos\u0142ysz\u0105cych<\/h3>\n\n\n\n<p>Narz\u0119dziem, kt\u00f3re wiele instytucji, firm i organizator\u00f3w wydarze\u0144 mog\u0142oby wprowadzi\u0107 w celu u\u0142atwienia \u017cycia osobom s\u0142abos\u0142ysz\u0105cym, jest p\u0119tla indukcyjna. Klikaj\u0105c w link mo\u017cecie us\u0142ysze\u0107,&nbsp;<a href=\"https:\/\/youtu.be\/n-ij7OZDmQ8\" rel=\"nofollow\" >jak p\u0119tla indukcyjna pomaga osobom z wadami s\u0142uchu.<\/a><\/p>\n\n\n\n<p>Bardzo kibicuj\u0119 rozwojowi projektu&nbsp;<a href=\"http:\/\/www.tumozesz.pl\/\" rel=\"nofollow\" >Tu mo\u017cesz<\/a>,&nbsp;<a href=\"https:\/\/youtu.be\/EVBklrk9LBk\" rel=\"nofollow\" >kt\u00f3ry pomaga osobom s\u0142abos\u0142ysz\u0105cym znale\u017a\u0107<\/a>&nbsp;firmy, organizacje, wydarzenia, plac\u00f3wki medyczne i miejsca publiczne, gdzie takie rozwi\u0105zanie jest stosowane.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Rozwi\u0105zana architektoniczno-przestrzenne<\/h3>\n\n\n\n<p>Na tym polu ciekawe rozwi\u0105zanie wprowadzi\u0142 InPost w paczkomatach. Od niedawna (rok 2021) istnieje mo\u017cliwo\u015b\u0107 zaznaczenia w aplikacji opcji \u201e<strong>U\u0142atwiony dost\u0119p<\/strong>\u201d. W przypadku skorzystania z niej paczka powinna zosta\u0107 umieszczona w przegrodach na ni\u017cszych poziomach, czyli jest to idealne rozwi\u0105zanie dla os\u00f3b niewysokich (takich jak ja ?) lub z niepe\u0142nosprawno\u015bci\u0105 na przyk\u0142ad dla os\u00f3b poruszaj\u0105cych si\u0119 na w\u00f3zku.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Zg\u0142aszanie problem\u00f3w zwi\u0105zanych z dost\u0119pno\u015bci\u0105<\/h3>\n\n\n\n<p>W pierwszej cz\u0119\u015bci przedstawi\u0142em problem&nbsp;poruszania si\u0119 klawiszem \u201etab\u201d na stronie webowej plac\u00f3wki medyczne. Tytu\u0142 tej cz\u0119\u015bci artyku\u0142u brzmi \u201c<strong>Jak rozwi\u0105za\u0107 problem braku dost\u0119pno\u015bci<\/strong>?\u201d. Zawsze mo\u017cemy w merytoryczny spos\u00f3b przekaza\u0107 informacje, gdzie kwestia dost\u0119pno\u015bci wymaga uwagi i poprawy. Plac\u00f3wka medyczna na szcz\u0119\u015bcie bardzo rzetelnie i merytorycznie podesze\u0142a do sprawy i poinformowa\u0142a mnie, \u017ce moje zg\u0142oszenie zosta\u0142o przekazane do os\u00f3b odpowiedzialnych za rozw\u00f3j aplikacji. Mam nadziej\u0119, \u017ce utrudnienie w przysz\u0142o\u015bci zostanie zniwelowane.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Zagadnienie dost\u0119pno\u015bci w procesie tworzenia oprogramowania<\/h2>\n\n\n\n<p>W pracy testera staram si\u0119 mie\u0107 na uwadze zagadnienie dost\u0119pno\u015bci i sugeruj\u0119, na ile to mo\u017cliwe, uwzgl\u0119dnienie tej kwestii w procesie tworzenia oprogramowania. Osobi\u015bcie chcia\u0142bym, aby produkt by\u0142 dost\u0119pny w jak najwi\u0119kszym stopniu dla wszystkich (dla os\u00f3b z niepe\u0142nosprawno\u015bci\u0105, dla os\u00f3b starszych, os\u00f3b s\u0142abowidz\u0105cych, dla os\u00f3b maj\u0105cych problem z odr\u00f3\u017cnianiem kolor\u00f3w).<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Przyst\u0105pienie do tworzenia aplikacji<\/h3>\n\n\n\n<p>Bardzo wa\u017cn\u0105 rzecz\u0105 jest&nbsp;<strong>uwzgl\u0119dnienie a11y od samego pocz\u0105tku tworzenia aplikacji.<\/strong>&nbsp;W przypadku, gdyby\u015bmy od\u0142o\u017cyli kwesti\u0119 dost\u0119pno\u015bci na p\u00f3\u017aniej, to dostosowanie aplikacji na ko\u0144cowym etapie by\u0142oby procesem bardzo czasoch\u0142onnym i drogim.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Wykorzystanie narz\u0119dzi i wtyczek<\/h3>\n\n\n\n<p>Lighthouse to narz\u0119dzie, kt\u00f3re sugeruje, jakie elementy wymagaj\u0105 poprawy pod k\u0105tem a11y oraz wskazuje te, kt\u00f3re przesz\u0142y pozytywnie ocen\u0119 pod tym k\u0105tem wraz z wyja\u015bnieniami i wskaz\u00f3wkami.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><a href=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/03\/Lighthouse-1018x1024-1.png\"><img decoding=\"async\" width=\"1018\" height=\"1024\" src=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/03\/Lighthouse-1018x1024-1.png\" alt=\"Ilustracja pokazuj\u0105ca spos\u00f3b uruchomienia narz\u0119dzia Lighthouse w przegl\u0105darce\" class=\"wp-image-18517\" srcset=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/03\/Lighthouse-1018x1024-1.png 1018w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/03\/Lighthouse-1018x1024-1-298x300.png 298w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/03\/Lighthouse-1018x1024-1-150x150.png 150w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/03\/Lighthouse-1018x1024-1-768x773.png 768w\" sizes=\"(max-width: 1018px) 100vw, 1018px\" \/><\/a><figcaption class=\"wp-element-caption\">Ryc. 6 Kroki uruchomienia narz\u0119dzia Lighthouse w Google Chrome<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><a href=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/03\/Lighthouse-2-1024x772-1.png\"><img decoding=\"async\" width=\"1024\" height=\"772\" src=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/03\/Lighthouse-2-1024x772-1.png\" alt=\"Przyk\u0142ad prezentuj\u0105ce w jaki spos\u00f3b narz\u0119dzie Lighthouse wskazuje elementy do poprawy\" class=\"wp-image-18515\" srcset=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/03\/Lighthouse-2-1024x772-1.png 1024w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/03\/Lighthouse-2-1024x772-1-300x226.png 300w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/03\/Lighthouse-2-1024x772-1-768x579.png 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><figcaption class=\"wp-element-caption\">Ryc. 6 Elementy wymagaj\u0105cy poprawy wskazane przez Lighthouse<\/figcaption><\/figure>\n\n\n\n<p>Narz\u0119dziem do sprawdzania dost\u0119pno\u015bci aplikacji webowych, kt\u00f3re bardzo polecam jest tak\u017ce&nbsp;<a href=\"https:\/\/wave.webaim.org\/\" rel=\"nofollow\" >WAVE Web Accessibility Evaluation Tool<\/a><\/p>\n\n\n\n<p>Inne narz\u0119dzia przedstawi\u0119 w dalszej cz\u0119\u015b\u0107i w odpowiednich dla nich sekcjach.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Standardy WCAG 2.1<\/h3>\n\n\n\n<p>Co to jest WCAG? Najlepiej pos\u0142u\u017c\u0119 si\u0119 wyja\u015bnieniem&nbsp;<a href=\"https:\/\/www.gov.pl\/web\/dostepnosc-cyfrowa\/wcag-21-w-skrocie\" rel=\"nofollow\" >z oficjalnej strony rz\u0105dowej<\/a>.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>WCAG to skr\u00f3towiec od&nbsp;<strong>Web Content Accessibility Guidelines,<\/strong>&nbsp;czyli wytycznych dotycz\u0105cych dost\u0119pno\u015bci tre\u015bci internetowych. Obecnie obowi\u0105zuje wersja 2.1 tych wytycznych. Wyja\u015bniaj\u0105 one, jak tworzy\u0107 strony internetowe i aplikacje, aby udost\u0119pni\u0107 je osobom z niepe\u0142nosprawno\u015bciami np. wzroku, s\u0142uchu, ruchu, ale te\u017c z niepe\u0142nosprawno\u015bci\u0105 intelektualn\u0105 czy zaburzeniami poznawczymi. Strony internetowe i aplikacje mobilne, kt\u00f3re spe\u0142niaj\u0105 wytyczne WCAG nazywamy dost\u0119pnymi cyfrowo.<\/p>\n<\/blockquote>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/\" rel=\"nofollow\" >Dokumentacja w j\u0119zyku angielskim<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/wcag21.lepszyweb.pl\/#toc\" rel=\"nofollow\" >T\u0142umaczenie na j\u0119zyk polski<\/a><\/li>\n<\/ul>\n\n\n\n<p>Pomocny mo\u017ce by\u0107 tak\u017ce&nbsp;<a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/Accessibility\" rel=\"nofollow\" >materia\u0142 zamieszczony na stronie MDN<\/a>.<\/p>\n\n\n\n<p>WCAG dotyczy przede wszystkim aplikacji webowych. W 2015 roku powsta\u0142 roboczy dokument dotycz\u0105cy wykorzystania&nbsp;<a href=\"https:\/\/www.w3.org\/TR\/mobile-accessibility-mapping\/\" rel=\"nofollow\" >zasad WCAG tak\u017ce w przypadku aplikacji mobilnych<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">U\u017cycie klawiatury do poruszania si\u0119 po aplikacji<\/h3>\n\n\n\n<p>Jedn\u0105 z wytycznych WCAG jest umo\u017cliwienie u\u017cytkownikom<strong>&nbsp;korzystania z aplikacji z poziomu klawiatury<\/strong>. Przy testowaniu produktu wa\u017cne jest sprawdzenie czy u\u017cytkownik jest w stanie porusza\u0107 si\u0119 po aplikacji i nawigowa\u0107 j\u0105 bez problemu u\u017cywaj\u0105c klawiatury (szczeg\u00f3lnie wa\u017cne w tym zakresie jest u\u017cycie klawisza TAB).<\/p>\n\n\n\n<p>Najlepiej na pytanie, dlaczego u\u017cycie klawiatury jest tak wa\u017cne,&nbsp;<a href=\"https:\/\/youtu.be\/93UgG72os8M\" rel=\"nofollow\" >odpowie niniejszy film<\/a>.<\/p>\n\n\n\n<figure class=\"wp-block-embed aligncenter is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"Web Accessibility Perspectives: Keyboard Compatibility\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/93UgG72os8M?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p>Polecam tak\u017ce zapozna\u0107 si\u0119 z pozosta\u0142ymi materia\u0142ami video na temat dost\u0119pno\u015bci pochodz\u0105cymi z strony&nbsp;<a href=\"https:\/\/www.w3.org\/WAI\/perspective-videos\/\" rel=\"nofollow\" >www.w3.org<\/a>.<\/p>\n\n\n\n<p>Z obs\u0142ugi klawiatury korzystaj\u0105 bardzo cz\u0119sto nie tylko osoby niewidome, ale tak\u017ce osoby, kt\u00f3re maj\u0105 problemy z narz\u0105dami ruchu i nie mog\u0105 korzysta\u0107 z myszki. Na rynku s\u0105 specjalne&nbsp;<strong>urz\u0105dzenia nag\u0142owne<\/strong>, kt\u00f3re ruchy g\u0142owy interpretuj\u0105 w\u0142a\u015bnie jak u\u017cycie klawisza \u201etab\u201d. Pomocne w tym zakresie s\u0105 tak\u017ce urz\u0105dzenia, kt\u00f3re \u015bledz\u0105 ruch ga\u0142ek ocznych i umo\u017cliwiaj\u0105 sterowanie komputerem za pomoc\u0105 wzroku. Niestety urz\u0105dzenia takie s\u0105 bardzo drogie.<\/p>\n\n\n\n<p><strong>Accessibility Insights for web<\/strong>&nbsp;to wtyczka do Google Chrome, kt\u00f3ra pomaga zwi\u0119kszy\u0107 dost\u0119pno\u015b\u0107 w tym zakresie, oferuj\u0105c funkcj\u0119 \u201eTab stops\u201d. Funkcja ta umo\u017cliwi nam sprawdzenie \u015bcie\u017cki, jak\u0105 u\u017cytkownik wykona u\u017cywaj\u0105c na stronie przycisku Tab.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large\"><a href=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/03\/tab-stops-2.png\"><img decoding=\"async\" width=\"1024\" height=\"629\" src=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/03\/tab-stops-2-1024x629.png\" alt=\"Wtyczka pokazuj\u0105ca map\u0119 u\u017cycia klawisza tab\" class=\"wp-image-18533\" srcset=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/03\/tab-stops-2-1024x629.png 1024w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/03\/tab-stops-2-300x184.png 300w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/03\/tab-stops-2-768x472.png 768w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/03\/tab-stops-2.png 1182w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><figcaption class=\"wp-element-caption\">Ryc. 7 Wtyczka Accessibility Insights for web<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large\"><a href=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/03\/tab-stop-1536x739-1.png\"><img decoding=\"async\" width=\"1024\" height=\"493\" src=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/03\/tab-stop-1536x739-1-1024x493.png\" alt=\"Podgl\u0105d mapy u\u017cycia wtyczki na przyk\u0142adzie strony internetowej\" class=\"wp-image-18531\" srcset=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/03\/tab-stop-1536x739-1-1024x493.png 1024w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/03\/tab-stop-1536x739-1-300x144.png 300w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/03\/tab-stop-1536x739-1-768x370.png 768w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/03\/tab-stop-1536x739-1.png 1536w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><figcaption class=\"wp-element-caption\">Ryc. 8 Dzia\u0142anie wtyczki pokazuj\u0105ce u\u017cycie klawisza TAB<\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Wykorzystanie czytnika ekranowego<\/h3>\n\n\n\n<p>Dobrym rozwi\u0105zaniem jest sprawdzenie czy nasza aplikacja webowa, desktopowa lub mobilna umo\u017cliwia nawigacj\u0119 i czytanie tre\u015bci dla u\u017cytkownik\u00f3w korzystaj\u0105cych z czytnik\u00f3w ekranowych. Na szcz\u0119\u015bcie, obecnie system Android (TalkBack) oraz iOS (VoiceOver) umo\u017cliwiaj\u0105 w\u0142\u0105czenie&nbsp;<strong>funkcji czytnika ekranowego.<\/strong><\/p>\n\n\n\n<p>Inne dost\u0119pne czynniki ekranowe:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/www.nvda.pl\/\" rel=\"nofollow\" >NVDA<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.freedomscientific.com\/products\/software\/jaws\/\" rel=\"nofollow\" >JAWS<\/a><\/li>\n<\/ul>\n\n\n\n<p>W przypadku przegl\u0105darki Google Chrome mamy mo\u017cliwo\u015b\u0107 zainstalowania wtyczki ScreenReader (wcze\u015bniej ChromeVox), kt\u00f3ra pozwoli korzysta\u0107 z czytnika na stronach internetowych. Jak dzia\u0142a czytnik ekranowy mo\u017cesz zobaczy\u0107 w za\u0142\u0105czonym&nbsp;<a href=\"https:\/\/youtu.be\/qDm7GiKra28\" rel=\"nofollow\" >linku<\/a>.<\/p>\n\n\n\n<p>Korzystaj\u0105c z czytnik\u00f3w ekranowych oraz obs\u0142ugi klawiatury, trzeba pami\u0119ta\u0107 o umiej\u0119tnym stosowaniu tab indeks\u00f3w, poniewa\u017c program czytaj\u0105cy odczytuje tre\u015b\u0107 liniowo.<\/p>\n\n\n\n<p><strong>Tabindex&nbsp;<\/strong>jest integerem wskazuj\u0105cym czy dany element mo\u017ce zosta\u0107 wyszczeg\u00f3lniony (jest&nbsp;<em>fokusyjny<\/em>) oraz czy powinien by\u0107 brany pod uwag\u0119 przy nawigacji sekwencyjnej klawiatury i, je\u015bli tak, to na jakiej pozycji.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Systemy operacyjne i kwestia dost\u0119pno\u015bci<\/h3>\n\n\n\n<p>Kilka lat wcze\u015bniej osoby niewidome, kt\u00f3re chcia\u0142y skorzysta\u0107 z czytnika ekranowego, musia\u0142y si\u0119 posi\u0142kowa\u0107 zewn\u0119trznymi programami. Teraz programi\u015bci system\u00f3w operacyjnych bardziej przyk\u0142adaj\u0105 si\u0119 do kwestii a11y i obecnie systemy posiadaj\u0105 wbudowane czytniki.<\/p>\n\n\n\n<p>W Windows 10 czytnik ekranowy jest dost\u0119pny pod nazw\u0105&nbsp;<strong>Microsoft Narrator<\/strong>. W MacOS u\u017cytkownicy maj\u0105 do dyspozycji w\u0142\u0105czenie opcji&nbsp;<strong>VoiceOver,<\/strong>&nbsp;a na systemach Linux jest oprogramowanie&nbsp;<strong>Orca<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full is-resized\"><a href=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/03\/narrator-1024x827-1.png\"><img decoding=\"async\" width=\"1024\" height=\"827\" src=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/03\/narrator-1024x827-1.png\" alt=\"Prezentacja funkcji Narrator w Windows 10\" class=\"wp-image-18519\" style=\"width:840px;height:678px\" srcset=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/03\/narrator-1024x827-1.png 1024w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/03\/narrator-1024x827-1-300x242.png 300w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/03\/narrator-1024x827-1-768x620.png 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><figcaption class=\"wp-element-caption\">Ryc. 9 Prezentacja funkcji Narrator w Windows 10<\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Kontrast<\/h3>\n\n\n\n<p>Niekt\u00f3rzy u\u017cytkownicy maj\u0105 problem z postrzeganiem kolor\u00f3w, dlatego z\u0142ym rozwi\u0105zaniem jest tworzenie aplikacji, kt\u00f3ra w nawigacji i w przekazywaniu tre\u015bci bazuje na kolorach.&nbsp;<strong>Odpowiedni kontrast<\/strong>&nbsp;pozwala u\u017cytkownikowi odr\u00f3\u017cni\u0107 tre\u015b\u0107 od t\u0142a. U\u017cycie kolor\u00f3w kontrastowych polega na u\u017cyciu kolor\u00f3w, kt\u00f3re znajduj\u0105 si\u0119 na przeciwleg\u0142ych biegunach nasycenia kolor\u00f3w (najcz\u0119\u015bciej u\u017cywane zestawienia: czarny tekst na bia\u0142ym tle, \u017c\u00f3\u0142te litery i czarne t\u0142o czy bia\u0142e litery na niebieskim tle).<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><a href=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/03\/kontrast-1024x560-1.png\"><img decoding=\"async\" width=\"1024\" height=\"560\" src=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/03\/kontrast-1024x560-1.png\" alt=\"Wygl\u0105d systemu w przypadku skorzystania z opcji wysoki kontrast\" class=\"wp-image-18513\" srcset=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/03\/kontrast-1024x560-1.png 1024w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/03\/kontrast-1024x560-1-300x164.png 300w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/03\/kontrast-1024x560-1-768x420.png 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><figcaption class=\"wp-element-caption\">Ryc. 10&nbsp;<a href=\"https:\/\/sii.pl\/\">Przyk\u0142ad zastosowania wysokiego kontrastu na stronie internetowej<\/a><\/figcaption><\/figure>\n\n\n\n<p>Aplikacja powinna by\u0107 tak\u017ce dost\u0119pna dla os\u00f3b maj\u0105cych problemy z rozr\u00f3\u017cnianiem kolor\u00f3w. Dobr\u0105 praktyk\u0105 jest wyr\u00f3\u017cnienie linku poprzez podkre\u015blenie. W przypadku zastosowania samego koloru link mo\u017ce nie odr\u00f3\u017cnia\u0107 si\u0119 od tre\u015bci.<\/p>\n\n\n\n<p>Oczywi\u015bcie tak\u017ce w kwestii kontrastu dost\u0119pne s\u0105 narz\u0119dzia takie jak&nbsp;<a href=\"https:\/\/www.tpgi.com\/color-contrast-checker\/\" rel=\"nofollow\" >Colour Contrast Analyser<\/a>, kt\u00f3re u\u0142atwi\u0105 nam sprawdzenie tego warunku WCAG w aplikacji. Mo\u017cemy tak\u017ce skorzysta\u0107 z rozszerzenia do Google Chrome WCAG \u2013&nbsp;<a href=\"https:\/\/chrome.google.com\/webstore\/detail\/color-contrast-checker\/jibccbkkepidahndjomdfbmbnfappopf?hl=pl\" rel=\"nofollow\" >Contrast checker<\/a>, kt\u00f3ry&nbsp;<strong>pozwala sprawdzi\u0107 wymagania dotycz\u0105ce kontrastu<\/strong>&nbsp;oraz zobaczy\u0107, jak strona wygl\u0105da dla os\u00f3b z zaburzeniami widzenia kolor\u00f3w.<\/p>\n\n\n\n<p>Na urz\u0105dzeniach z systemem Android mo\u017cemy zainstalowa\u0107 aplikacj\u0119 od Google \u2013&nbsp;<a href=\"https:\/\/developer.android.com\/guide\/topics\/ui\/accessibility\/testing#accessibility-scanner\" rel=\"nofollow\" >Accessibility Scanner<\/a>, kt\u00f3ra umo\u017cliwia&nbsp;<strong>sprawdzenie dostosowania aplikacji (w tym kontrast) pod wzgl\u0119dem a11y.<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><a href=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/03\/Scanner.png\"><img decoding=\"async\" width=\"417\" height=\"873\" src=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/03\/Scanner.png\" alt=\"Dzia\u0142anie narz\u0119dzie Accessibility Scanner pokazuj\u0105ce elementy do poprawy\" class=\"wp-image-18527\" srcset=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/03\/Scanner.png 417w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/03\/Scanner-143x300.png 143w\" sizes=\"(max-width: 417px) 100vw, 417px\" \/><\/a><figcaption class=\"wp-element-caption\">Ryc. 11 Narz\u0119dzie Accessibility Scanner<\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Zastosowanie w\u0142a\u015bciwej czcionki<\/h3>\n\n\n\n<p>Warto pami\u0119ta\u0107 tak\u017ce, aby sprawdzi\u0107, jak zachowa si\u0119 aplikacja, gdy u\u017cytkownik zwi\u0119kszy lub zmniejszy czcionk\u0119.&nbsp;Ze swojej strony polecam&nbsp;<a href=\"https:\/\/www.udacity.com\/course\/web-accessibility--ud891\" rel=\"nofollow\" >darmowy kurs Udacity na temat dost\u0119pno\u015bci aplikacji webowych<\/a>.<\/p>\n\n\n\n<p>Warto pami\u0119ta\u0107, \u017ce jednym z wymog\u00f3w WCAG jest umo\u017cliwienie u\u017cytkownikowi bezproblemowego korzystanie ze strony www w przypadku powi\u0119kszenia jej do 200%. Na szcz\u0119\u015bcie, wi\u0119kszo\u015b\u0107 przegl\u0105darek oraz program\u00f3w&nbsp;<strong>wspiera funkcj\u0119 powi\u0119kszania<\/strong>&nbsp;i w systemach Windows mo\u017cna tego dokona\u0107 za pomoc\u0105 \u201eCtrl\u201d + \u201e+\u201d w celu powi\u0119kszenia i \u201eCtrl\u201d + \u201e-\u201e w celu zmniejszenia. W MacOS mamy kombinacj\u0119 klawiszy \u2013 Command-plus (+) lub Command-minus (\u2013).<\/p>\n\n\n\n<p>Niekt\u00f3re serwisy implementuj\u0105 opcj\u0119 powi\u0119kszenia lub\/i kontrastu w kodzie. Taka opcja mo\u017ce by\u0107 pomocna dla os\u00f3b starszych lub tych, kt\u00f3re nie posiadaj\u0105 wiedzy o skr\u00f3tach klawiszowych lub funkcjach, jakie oferuje oprogramowanie.<\/p>\n\n\n\n<p>Warto mie\u0107 na uwadze, \u017ce osoby niedowidz\u0105ce w spos\u00f3b bardziej komfortowy przetwarzaj\u0105 tre\u015bci pisane&nbsp;<strong>czcionkami bezszeryfowymi<\/strong>. Czcionki bezszeryfowe s\u0105 proste i pozbawione ozdobnik\u00f3w i mniej m\u0119cz\u0105 wzrok.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Tekst alternatywny (opisowy tekst zast\u0119pczy)<\/h3>\n\n\n\n<p>Kiedy umieszczamy tre\u015bci nietekstowe, na przyk\u0142ad zdj\u0119cia na blogu, dobrym rozwi\u0105zaniem jest dodanie tekstu alternatywnego. Tekst ten jest tak\u017ce u\u017cywany w przypadku, kiedy wyst\u0105pi problem z za\u0142adowaniem zdj\u0119cia (s\u0142abe \u0142\u0105cze internetowe).<\/p>\n\n\n\n<p>Poni\u017cej przyk\u0142ad ze&nbsp;<a href=\"http:\/\/www.niepelnosprawni.pl\/\" rel=\"nofollow\" >strony Niepe\u0142nosprawni<\/a>.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><a href=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/03\/niepelnosprawni-1024x500-1.png\"><img decoding=\"async\" width=\"1024\" height=\"500\" src=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/03\/niepelnosprawni-1024x500-1.png\" alt=\"Przyk\u0142ad u\u017cycia tekstu alternatywnego na stronie niepelnosprawni.pl\" class=\"wp-image-18521\" srcset=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/03\/niepelnosprawni-1024x500-1.png 1024w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/03\/niepelnosprawni-1024x500-1-300x146.png 300w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/03\/niepelnosprawni-1024x500-1-768x375.png 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><figcaption class=\"wp-element-caption\">Ryc. 12&nbsp;<a href=\"http:\/\/niepelnosprawni.pl\/\" rel=\"nofollow\" >Przyk\u0142ad u\u017cycia tekstu alternatywnego na stronie niepelnosprawni.pl<\/a><\/figcaption><\/figure>\n\n\n\n<p>Tekst alternatywny powinien&nbsp;<strong>da\u0107 u\u017cytkownikowi podgl\u0105d, co wida\u0107 na obrazku<\/strong>&nbsp;i jaka akcja jest wykonywana na danym zdj\u0119ciu.<\/p>\n\n\n\n<p>Problem pomini\u0119cia tekstu alternatywnego jest na drugim miejscu pod wzgl\u0119dem najpopularniejszych b\u0142\u0119d\u00f3w zwi\u0105zanych z a11y. Na pierwszym miejscu znajduje si\u0119 nieuwzgl\u0119dnienie kontrastu.<\/p>\n\n\n\n<p><a href=\"https:\/\/webaim.org\/projects\/million\/#errors\" rel=\"nofollow\" >List\u0119 najcz\u0119\u015bciej pope\u0142nianych b\u0142\u0119d\u00f3w<\/a>&nbsp;mo\u017cna znale\u017a\u0107 w zamieszczonym linku. Napisanie odpowiedniego tekstu zast\u0119pczego nie jest spraw\u0105 \u0142atw\u0105, dlatego odsy\u0142am zainteresowanych do&nbsp;<a href=\"https:\/\/imediasolutions.pl\/jak-napisac-dobry-tekst-alternatywny-do-zdjecia-alt\/\" rel=\"nofollow\" >artyku\u0142u, kt\u00f3ry mo\u017ce im pom\u00f3c<\/a>. W przypadku tekstu alternatywnego warto jeszcze raz wspomnie\u0107 o funkcji Lighthouse, kt\u00f3ra pozwala nam sprawdzi\u0107 stron\u0119 pod wzgl\u0119dem uchybie\u0144 w tym zakresie.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full is-style-default\"><a href=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/03\/errors.png\"><img decoding=\"async\" width=\"973\" height=\"505\" src=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/03\/errors.png\" alt=\"Lista najcz\u0119\u015bciej pope\u0142nianych b\u0142\u0119d\u00f3w w aspekcie dost\u0119pno\u015bci\" class=\"wp-image-18509\" srcset=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/03\/errors.png 973w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/03\/errors-300x156.png 300w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/03\/errors-768x399.png 768w\" sizes=\"(max-width: 973px) 100vw, 973px\" \/><\/a><figcaption class=\"wp-element-caption\">Ryc. 13&nbsp;<a href=\"https:\/\/webaim.org\/projects\/million\/#errors\" rel=\"nofollow\" >Lista najcz\u0119\u015bciej pope\u0142nianych b\u0142\u0119d\u00f3w w aspekcie dost\u0119pno\u015bci<\/a><\/figcaption><\/figure>\n\n\n\n<p>Oczywi\u015bcie, w tym zakresie nowe technologie staraj\u0105 si\u0119 nam pom\u00f3c. Jaki\u015b czas temu Instagram testowa\u0142 funkcj\u0119 tworzenia tekstu alternatywnego na podstawie AI.<\/p>\n\n\n\n<p>Moim zdaniem powy\u017csze przyk\u0142ady w spos\u00f3b idealny obrazuj\u0105 jak bardzo wa\u017cne jest&nbsp;<strong>uwzgl\u0119dnienie potrzeb dost\u0119pno\u015bci od samego pocz\u0105tku tworzenia aplikacji<\/strong>. Wyobra\u017a sobie drogi U\u017cytkowniku, \u017ce strona internetowa ma tysi\u0105ce obrazk\u00f3w i poprzez uregulowania prawne tw\u00f3rca jest zobowi\u0105zany, \u017ceby strona by\u0142a dost\u0119pna na poziomie A, kt\u00f3ry zawiera opis alternatywny. Dostosowanie strony do tego wymogu by\u0142oby pracoch\u0142onne i kosztowne.<\/p>\n\n\n\n<p>Tworz\u0105c, na przyk\u0142ad dokumenty w du\u017cych korporacjach, do kt\u00f3rych dost\u0119p b\u0119dzie mia\u0142o wielu pracownik\u00f3w, powinno pami\u0119ta\u0107 si\u0119 o zachowaniu standard\u00f3w a11y. Sprawdzi\u0142em, jak to wygl\u0105da we wsp\u00f3\u0142czesnych edytorach tekstu.&nbsp;<strong>Microsoft Word i Google Docs umo\u017cliwiaj\u0105 dodanie tekstu alternatywnego<\/strong>. Microsoft Word oferuje tak\u017ce sprawdzenie dokumentu pod wzgl\u0119dem dost\u0119pno\u015bci.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><a href=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/03\/word-1024x548-1.png\"><img decoding=\"async\" width=\"1024\" height=\"548\" src=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/03\/word-1024x548-1.png\" alt=\"Funkcje dost\u0119pno\u015bci w edytorze tekstu Microsoft Word\" class=\"wp-image-18535\" srcset=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/03\/word-1024x548-1.png 1024w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/03\/word-1024x548-1-300x161.png 300w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/03\/word-1024x548-1-768x411.png 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><figcaption class=\"wp-element-caption\">Ryc. 14 Funkcje dost\u0119pno\u015bci w edytorze tekstu Microsoft Word<\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Kod semantyczny<\/h3>\n\n\n\n<p>Programi\u015bci pisz\u0105c kod, powinni d\u0105\u017cy\u0107 do tego, \u017ceby by\u0142 on semantyczny. W przypadku j\u0119zyka HTML znaczniki natywne oddaj\u0105 charakter elementu na stronie i pomagaj\u0105 u\u017cytkownikowi odbiera\u0107 stron\u0119 w oczekiwany spos\u00f3b i zgodnie z kontekstem.<\/p>\n\n\n\n<p><a href=\"https:\/\/www.kurshtml.edu.pl\/html\/kod_poprawny_semantycznie,tekst.html\" rel=\"nofollow\" ><em>Znaczniki semantyczne<\/em>&nbsp;maj\u0105 ogromne znaczenie dla&nbsp;<strong>syntezator\u00f3w mowy<\/strong><\/a>, czyli specjalnych przegl\u0105darek, kt\u00f3re odczytuj\u0105 tre\u015b\u0107 stron WWW na g\u0142os. U\u017cywane s\u0105 najcz\u0119\u015bciej przez osoby niewidome. Taka osoba nie zobaczy koloru czcionki i nie b\u0119dzie wiedzie\u0107, \u017ce gdzie\u015b tekst zosta\u0142 wyt\u0142uszczony w tradycyjny spos\u00f3b. Natomiast u\u017cywany&nbsp;<strong>syntezator mowy<\/strong>, kiedy natrafi na znacznik &lt;strong&gt;\u2026&lt;\/strong&gt;, mo\u017ce&nbsp;<strong>specjalnie podkre\u015bli\u0107 tonem g\u0142osu zawarty w nim tekst.<\/strong><\/p>\n\n\n\n<p>W przypadku kodu HTML w kwestiach zwi\u0105zanych z czytnikiem ekranowym du\u017ce znaczenie ma u\u017cycie znacznika &lt;lang&gt; kt\u00f3ry informuje czytnik w jakim j\u0119zyku jest tre\u015b\u0107 strony, umo\u017cliwia to&nbsp;<a href=\"https:\/\/www.w3.org\/WAI\/WCAG21\/Understanding\/language-of-page.html\" rel=\"nofollow\" >dopasowanie wersji j\u0119zykowej lektora<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Zako\u0144czenie<\/h2>\n\n\n\n<p>Tematem dost\u0119pno\u015bci interesuj\u0119 si\u0119 od jakiego\u015b czasu i ci\u0105gle staram si\u0119 rozwija\u0107 swoj\u0105 wiedz\u0119 w tym zakresie. W projekcie, w kt\u00f3rym pracuj\u0119, trafi\u0142em nawet&nbsp;<strong>do zespo\u0142u odpowiedzialnego za stworzenie wytycznych i kryteri\u00f3w akceptacji w zakresie accessibility<\/strong>.<\/p>\n\n\n\n<p>Niedawno bra\u0142em udzia\u0142 w telefonicznych sesjach coachingu, kt\u00f3re by\u0142y przeprowadzane przez moj\u0105&nbsp;<strong>niewidom\u0105 kole\u017cank\u0119<\/strong>&nbsp;\u2013 zdumieniem i wielk\u0105 rado\u015bci\u0105 napawa\u0142 mnie fakt, \u017ce podczas tych sesji&nbsp;<strong>kole\u017canka by\u0142a w stanie sporz\u0105dzi\u0107 notatki w edytorze tekstu.<\/strong><\/p>\n\n\n\n<p>W powy\u017cszym artykule chcia\u0142em przybli\u017cy\u0107 temat dost\u0119pno\u015bci oraz przedstawi\u0107 rozwi\u0105zania i wskaz\u00f3wki dotycz\u0105ce tego, jak ka\u017cdy z nas mo\u017ce w \u017cyciu codziennym stara\u0107 si\u0119 uwzgl\u0119dni\u0107 potrzeby os\u00f3b z niepe\u0142nosprawno\u015bci\u0105.<\/p>\n\n\n\n<p>Uwa\u017cam, \u017ce je\u017celi mamy mo\u017cliwo\u015b\u0107, to<strong>&nbsp;powinni\u015bmy stara\u0107 si\u0119 u\u0142atwia\u0107 innym w \u017cyciu i pomaga\u0107 im w codziennym funkcjonowaniu<\/strong>, tak\u017ce poprzez zwi\u0119kszanie dost\u0119pno\u015bci produkt\u00f3w cyfrowych. Technologia powinna likwidowa\u0107 bariery i ograniczenia, nie je tworzy\u0107.<\/p>\n\n\n\n<p>Wa\u017cne, \u017ceby osoby z niepe\u0142nosprawno\u015bciami&nbsp;<strong>czu\u0142y si\u0119 pe\u0142noprawnymi u\u017cytkownikami w \u017cyciu cyfrowym i \u017ceby na swojej drodze napotyka\u0142y jak najmniej barier<\/strong>. Moje serce b\u0119dzie si\u0119 radowa\u0107, je\u017celi po przeczytaniu artyku\u0142 zastosujesz porady w nim zawarte w \u017cyciu codziennym lub podczas tworzenia oprogramowania.<\/p>\n\n\n\n<p>Dzi\u0119kuj\u0119 Czytelniku, \u017ce wytrwa\u0142e\u015b do tego momentu i oczywi\u015bcie \u017cycz\u0119 \u201esmacznej kawusi\u201d&nbsp;\ud83d\ude09&nbsp;A w tych ci\u0119\u017ckich i trudnych czasach szczeg\u00f3lnie \u017cycz\u0119 pokoju.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><a href=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/03\/IMG_1798.jpg\"><img decoding=\"async\" width=\"398\" height=\"398\" src=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/03\/IMG_1798.jpg\" alt=\"Rysunek przedstawiaj\u0105cy autora z kubkiem gor\u0105cej kawy\" class=\"wp-image-18511\" srcset=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/03\/IMG_1798.jpg 398w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/03\/IMG_1798-300x300.jpg 300w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/03\/IMG_1798-150x150.jpg 150w\" sizes=\"(max-width: 398px) 100vw, 398px\" \/><\/a><\/figure>\n\n\n<div class=\"kk-star-ratings kksr-auto kksr-align-left kksr-valign-bottom\"\n    data-payload='{&quot;align&quot;:&quot;left&quot;,&quot;id&quot;:&quot;12979&quot;,&quot;slug&quot;:&quot;default&quot;,&quot;valign&quot;:&quot;bottom&quot;,&quot;ignore&quot;:&quot;&quot;,&quot;reference&quot;:&quot;auto&quot;,&quot;class&quot;:&quot;&quot;,&quot;count&quot;:&quot;28&quot;,&quot;legendonly&quot;:&quot;&quot;,&quot;readonly&quot;:&quot;&quot;,&quot;score&quot;:&quot;5&quot;,&quot;starsonly&quot;:&quot;&quot;,&quot;best&quot;:&quot;5&quot;,&quot;gap&quot;:&quot;11&quot;,&quot;greet&quot;:&quot;&quot;,&quot;legend&quot;:&quot;5\\\/5 ( votes: 28)&quot;,&quot;size&quot;:&quot;18&quot;,&quot;title&quot;:&quot;Przyk\u0142ady niezrozumienia potrzeb os\u00f3b z niepe\u0142nosprawno\u015bci\u0105 i jak im zaradzi\u0107. Cz\u0119\u015b\u0107 II&quot;,&quot;width&quot;:&quot;139.5&quot;,&quot;_legend&quot;:&quot;{score}\\\/{best} ( {votes}: {count})&quot;,&quot;font_factor&quot;:&quot;1.25&quot;}'>\n            \n<div class=\"kksr-stars\">\n    \n<div class=\"kksr-stars-inactive\">\n            <div class=\"kksr-star\" data-star=\"1\" style=\"padding-right: 11px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 18px; height: 18px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" data-star=\"2\" style=\"padding-right: 11px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 18px; height: 18px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" data-star=\"3\" style=\"padding-right: 11px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 18px; height: 18px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" data-star=\"4\" style=\"padding-right: 11px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 18px; height: 18px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" data-star=\"5\" style=\"padding-right: 11px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 18px; height: 18px;\"><\/div>\n        <\/div>\n    <\/div>\n    \n<div class=\"kksr-stars-active\" style=\"width: 139.5px;\">\n            <div class=\"kksr-star\" style=\"padding-right: 11px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 18px; height: 18px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" style=\"padding-right: 11px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 18px; height: 18px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" style=\"padding-right: 11px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 18px; height: 18px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" style=\"padding-right: 11px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 18px; height: 18px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" style=\"padding-right: 11px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 18px; height: 18px;\"><\/div>\n        <\/div>\n    <\/div>\n<\/div>\n                \n\n<div class=\"kksr-legend\" style=\"font-size: 14.4px;\">\n            5\/5 ( votes: 28)    <\/div>\n    <\/div>\n","protected":false},"excerpt":{"rendered":"<p>Jak rozwi\u0105za\u0107 problem braku dost\u0119pno\u015bci? W artykule podziel\u0119 si\u0119 z Tob\u0105, Drogi Czytelniku, sposobami, dzi\u0119ki kt\u00f3rym mo\u017cemy pom\u00f3c osobom z &hellip; <a class=\"continued-btn\" href=\"https:\/\/sii.pl\/blog\/przyklady-niezrozumienia-potrzeb-osob-z-niepelnosprawnoscia-i-jak-im-zaradzic-czesc-ii\/\">Continued<\/a><\/p>\n","protected":false},"author":190,"featured_media":12699,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_editorskit_title_hidden":false,"_editorskit_reading_time":8,"_editorskit_is_block_options_detached":false,"_editorskit_block_options_position":"{}","inline_featured_image":false,"footnotes":""},"categories":[1317],"tags":[807,1116,1117,146,1118,111],"class_list":["post-12979","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-testowanie","tag-testowanie","tag-accessibility","tag-dostepnosc","tag-testing","tag-wcag","tag-web-development"],"acf":[],"aioseo_notices":[],"republish_history":[],"featured_media_url":"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2021\/09\/Przyklady-niezrozumienia-potrzeb-osob-z-niepelnosprawnoscia.png","category_names":["Testowanie"],"_links":{"self":[{"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/posts\/12979"}],"collection":[{"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/users\/190"}],"replies":[{"embeddable":true,"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/comments?post=12979"}],"version-history":[{"count":3,"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/posts\/12979\/revisions"}],"predecessor-version":[{"id":31186,"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/posts\/12979\/revisions\/31186"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/media\/12699"}],"wp:attachment":[{"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/media?parent=12979"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/categories?post=12979"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/tags?post=12979"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}