{"id":23530,"date":"2023-08-24T05:00:00","date_gmt":"2023-08-24T03:00:00","guid":{"rendered":"https:\/\/sii.pl\/blog\/?p=23530"},"modified":"2023-08-24T09:19:20","modified_gmt":"2023-08-24T07:19:20","slug":"czy-chatgpt-moze-pomoc-w-zapewnieniu-dostepnosci","status":"publish","type":"post","link":"https:\/\/sii.pl\/blog\/czy-chatgpt-moze-pomoc-w-zapewnieniu-dostepnosci\/","title":{"rendered":"Czy ChatGPT mo\u017ce pom\u00f3c w zapewnieniu dost\u0119pno\u015bci?"},"content":{"rendered":"\n<p>W artykule om\u00f3wi\u0119 pr\u00f3b\u0105 wykorzystania sztucznej inteligencji \u2013 szczeg\u00f3lnie ChatGPT \u2013 w kontek\u015bcie mo\u017cliwo\u015bci zwi\u0119kszania oraz poprawiania dost\u0119pno\u015bci. Temat powsta\u0142 na pocz\u0105tku roku i pocz\u0105tkowo mia\u0142 mie\u0107 form\u0119 prezentacji, jednak zdecydowa\u0142em, \u017ce b\u0119dzie rozwini\u0119ciem <a href=\"https:\/\/sii.pl\/blog\/wyszukiwarka\/krause\/\" target=\"_blank\" aria-label=\" (opens in a new tab)\" rel=\"noreferrer noopener\" class=\"ek-link\">moich wcze\u015bniejszych artyku\u0142\u00f3w<\/a> zwi\u0105zanych ze sztuczn\u0105 inteligencj\u0105 i zagadnieniem dost\u0119pno\u015bci.<\/p>\n\n\n\n<p>Zada\u0142em ChatGPT mn\u00f3stwo pyta\u0144 zwi\u0105zanych z dost\u0119pno\u015bci\u0105. We wpisie chcia\u0142bym przedstawi\u0107 Wam, jak sztuczna inteligencja mo\u017ce prowadzi\u0107 do ulepszenia obszaru accessibility, wspieraj\u0105c przedstawicieli r\u00f3\u017cnych r\u00f3l zawodowych \u2013 technicznych i nietechnicznych. W celu ograniczenia obszerno\u015bci artyku\u0142u, w ka\u017cdym przypadku przedstawi\u0119 maksymalnie trzy pytania. Ustosunkuj\u0119 si\u0119 r\u00f3wnie\u017c do cz\u0119\u015bci odpowiedzi udzielonych przez AI.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large\"><a href=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/08\/Rys-1.jpg\"><img decoding=\"async\" width=\"1024\" height=\"573\" src=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/08\/Rys-1-1024x573.jpg\" alt=\"Zrzut ekranu \u2013 odpowiedzi uzyskane z ChatGPT na temat dost\u0119pno\u015bci\" class=\"wp-image-23531\" srcset=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/08\/Rys-1-1024x573.jpg 1024w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/08\/Rys-1-300x168.jpg 300w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/08\/Rys-1-768x430.jpg 768w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/08\/Rys-1-1536x859.jpg 1536w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/08\/Rys-1-2048x1145.jpg 2048w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/08\/Rys-1-555x312.jpg 555w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><figcaption class=\"wp-element-caption\">Ryc. 1 Zrzut ekranu <em>\u2013 <\/em>odpowiedzi uzyskan<em>e<\/em> z ChatGPT na temat dost\u0119pno\u015bci<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Czym jest ChatGPT?<\/strong><\/h2>\n\n\n\n<p>Dla wyr\u00f3wnania wiedzy przypomn\u0119, \u017ce ChatGPT to du\u017cy model j\u0119zykowy stworzony przez OpenAI. Jest to program komputerowy, kt\u00f3ry zosta\u0142 wytrenowany na poka\u017anych zbiorach danych j\u0119zykowych, aby nauczy\u0107 si\u0119 przetwarza\u0107 i generowa\u0107 tekst w naturalnym j\u0119zyku.<\/p>\n\n\n\n<p>ChatGPT zaprojektowano do interakcji z lud\u017ami poprzez chatboty, aplikacje i inne narz\u0119dzia, kt\u00f3re wykorzystuj\u0105 sztuczn\u0105 inteligencj\u0119 do komunikacji j\u0119zykowej. Narz\u0119dzie jest w stanie odpowiada\u0107 na r\u00f3\u017cne pytania, generowa\u0107 tekst na podstawie kr\u00f3tkiego opisu lub zadania, a tak\u017ce pom\u00f3c w rozwi\u0105zywaniu problem\u00f3w zwi\u0105zanych z j\u0119zykiem naturalnym.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Pytanie 1: Czy dost\u0119pno\u015b\u0107 jest wa\u017cna?<\/strong><\/h3>\n\n\n\n<p>Odpowied\u017a ChatGPT:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>Tak, dost\u0119pno\u015b\u0107 jest bardzo wa\u017cna, szczeg\u00f3lnie w dzisiejszym cyfrowym \u015bwiecie, w kt\u00f3rym coraz wi\u0119cej us\u0142ug i produkt\u00f3w jest oferowanych online. <strong>Dost\u0119pno\u015b\u0107 oznacza, \u017ce \u200b\u200bus\u0142ugi, produkty i tre\u015bci s\u0105 dost\u0119pne dla jak najwi\u0119kszej liczby os\u00f3b, bez wzgl\u0119du na ich zdolno\u015bci, ograniczenia lub preferencje.<\/strong><\/p>\n\n\n\n<p><strong>Dost\u0119pno\u015b\u0107 ma kluczowe znaczenie dla os\u00f3b z niepe\u0142nosprawno\u015bciami<\/strong>, takich jak osoby niewidome, niedowidz\u0105ce, g\u0142uche, niedos\u0142ysz\u0105ce lub z zaburzeniami motorycznymi. Dost\u0119pno\u015b\u0107 <strong>mo\u017ce r\u00f3wnie\u017c wp\u0142yn\u0105\u0107 na u\u017cytkownik\u00f3w starszych<\/strong>, kt\u00f3rzy mog\u0105 mie\u0107 trudno\u015bci z korzystaniem z bardziej skomplikowanych interfejs\u00f3w.<\/p>\n\n\n\n<p>Dost\u0119pno\u015b\u0107 mo\u017ce r\u00f3wnie\u017c mie\u0107 wp\u0142yw na biznes, poniewa\u017c osoby z niepe\u0142nosprawno\u015bciami i starsze osoby stanowi\u0105 znacz\u0105c\u0105 cz\u0119\u015b\u0107 populacji i mog\u0105 by\u0107 potencjalnymi klientami. <strong>Brak dost\u0119pno\u015bci mo\u017ce wp\u0142yn\u0105\u0107 na reputacj\u0119 firmy i prowadzi\u0107 do utraty klient\u00f3w.Dlatego wa\u017cne jest, aby tw\u00f3rcy produkt\u00f3w i us\u0142ug, a tak\u017ce projektanci stron internetowych i aplikacji, kierowali si\u0119 zasadami dost\u0119pno\u015bci i d\u0105\u017cyli do zapewnienia jak najwi\u0119kszej liczby u\u017cytkownik\u00f3w dost\u0119pem do swoich produkt\u00f3w i us\u0142ug<\/strong>.<\/p>\n<\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Rola 1: Zajmuj\u0119 si\u0119 programowaniem. Jak ChatGPT mo\u017ce pom\u00f3c w zapewnieniu dost\u0119pno\u015bci?<\/strong><\/h2>\n\n\n\n<p>Obecnie pracuj\u0119 w projekcie aplikacji medycznej pisanej we Flutterze. Opr\u00f3cz \u201ezwyk\u0142ego\u201d testowania, jestem te\u017c odpowiedzialny za testowanie dost\u0119pno\u015bci. Zapyta\u0142em AI, jak tworzy\u0107 dost\u0119pn\u0105 aplikacj\u0119 we Flutterze.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Pytanie 2: Jak tworzy\u0107 aplikacj\u0119 mobiln\u0105 we Flutterze, kt\u00f3ra jest dost\u0119pna?<\/strong><\/h3>\n\n\n\n<p>Odpowied\u017a ChatGPT:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>Flutter to framework programistyczny stworzony przez Google do tworzenia natywnych aplikacji mobilnych na platformy Android i iOS. Oto kilka wskaz\u00f3wek, jak stworzy\u0107 aplikacj\u0119 mobiln\u0105 we Flutterze, kt\u00f3ra jest dost\u0119pna dla os\u00f3b z niepe\u0142nosprawno\u015bciami:<\/p>\n\n\n\n<ol class=\"wp-block-list\" type=\"1\">\n<li><strong>U\u017cywanie odpowiednich narz\u0119dzi i bibliotek<\/strong> &#8211; Flutter oferuje wiele narz\u0119dzi i bibliotek do tworzenia dost\u0119pnych aplikacji mobilnych. Na przyk\u0142ad, Flutter zawiera pakiet flutter_localizations, kt\u00f3ry umo\u017cliwia t\u0142umaczenie aplikacji na wiele j\u0119zyk\u00f3w. Innym przyk\u0142adem jest pakiet flutter_accessibility, kt\u00f3ry umo\u017cliwia dodanie dost\u0119pno\u015bci do aplikacji, takiej jak czytnik ekranu i powi\u0119kszenie tekstu.<\/li>\n\n\n\n<li><strong>U\u017cywanie w\u0142a\u015bciwego uk\u0142adu ekranu<\/strong> &#8211; Dla os\u00f3b niewidomych lub niedowidz\u0105cych, uk\u0142ad ekranu jest kluczowy. Projektowanie interfejsu u\u017cytkownika, kt\u00f3ry jest \u0142atwy do obs\u0142ugi, wymaga zrozumienia, jak osoby te korzystaj\u0105 z aplikacji. Wa\u017cne jest, aby tekst by\u0142 czytelny, a przyciski i inne elementy interfejsu by\u0142y \u0142atwe do zlokalizowania i naci\u015bni\u0119cia.<\/li>\n\n\n\n<li><strong>Zapewnienie odpowiedniego kontrastu kolor\u00f3w<\/strong> &#8211; Kontrast kolor\u00f3w jest wa\u017cny dla os\u00f3b z niedowidzeniem i s\u0142ab\u0105 percepcj\u0105 kolor\u00f3w. Warto zatem zapewni\u0107 odpowiedni kontrast kolor\u00f3w, aby informacje by\u0142y czytelne i \u0142atwe do odczytania.<\/li>\n\n\n\n<li><strong>Dostarczanie alternatywnych opis\u00f3w obrazk\u00f3w<\/strong> &#8211; Dla os\u00f3b niewidomych, alternatywny opis obrazka jest kluczowy, aby zrozumie\u0107, co si\u0119 na nim znajduje. W Flutterze, alternatywny opis mo\u017cna doda\u0107 do elementu Image za pomoc\u0105 parametru 'semanticLabel&#8217;.<\/li>\n\n\n\n<li><strong>Testowanie dost\u0119pno\u015bci<\/strong> &#8211; W celu upewnienia si\u0119, \u017ce aplikacja jest dost\u0119pna dla os\u00f3b z niepe\u0142nosprawno\u015bciami, nale\u017cy przeprowadzi\u0107 testy dost\u0119pno\u015bci. Flutter zawiera narz\u0119dzie 'flutter analyze&#8217;, kt\u00f3re automatycznie wykrywa pewne problemy z dost\u0119pno\u015bci\u0105. Ponadto, warto przeprowadzi\u0107 testy z osobami z niepe\u0142nosprawno\u015bciami, aby uzyska\u0107 ich opinie i wskaz\u00f3wki.<\/li>\n\n\n\n<li>Zastosowanie standard\u00f3w dost\u0119pno\u015bci &#8211; Wa\u017cne jest, aby projektowa\u0107 aplikacje zgodnie ze standardami dost\u0119pno\u015bci, takimi jak WCAG (Web Content Accessibility Guidelines). W przypadku Fluttera, standardy dost\u0119pno\u015bci mo\u017cna znale\u017a\u0107 w dokumentacji Google, kt\u00f3ra obejmuje najlepsze praktyki, poradniki i przyk\u0142ady.<\/li>\n<\/ol>\n\n\n\n<p>Podsumowuj\u0105c, tworzenie dost\u0119pnej aplikacji mobilnej we Flutterze wymaga uwzgl\u0119dnienia r\u00f3\u017cnych potrzeb u\u017cytkownik\u00f3w z niepe\u0142nosprawno\u015bciami. Projektowanie takiej aplikacji wymaga zastosowania odpowiednich narz\u0119dzi i bibliotek.<\/p>\n<\/blockquote>\n\n\n\n<p><strong>Moja opinia<\/strong>: ChatGPT dobrze poradzi\u0142 sobie z pytaniem i wskaza\u0142 najwa\u017cniejsze aspekty zwi\u0105zane z dost\u0119pno\u015bci\u0105. W tym przypadku zabrak\u0142o informacji o czytnikach ekranu i odpowiedniej klawiaturze.<\/p>\n\n\n\n<p>Teraz przysz\u0142a pora na web developera, kt\u00f3ry pewnie w swojej pracy zetkn\u0105\u0142 si\u0119 z poj\u0119ciem kodu semantycznego, u\u0142atwiaj\u0105cego zapewnienie dost\u0119pno\u015bci.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Pytanie 3: Jak tworzy\u0107 semantyczny kod w HTML?<\/strong><\/h3>\n\n\n\n<p>Odpowied\u017a ChatGPT:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>Semantyczny kod HTML to taki, kt\u00f3ry opisuje znaczenie zawarto\u015bci strony, a nie tylko jej wygl\u0105d. Dzi\u0119ki zastosowaniu semantycznego kodu, <strong>strona internetowa jest bardziej czytelna dla u\u017cytkownik\u00f3w, w tym dla os\u00f3b korzystaj\u0105cych z czytnik\u00f3w ekranowych i innych technologii asystuj\u0105cych<\/strong>. Oto kilka wskaz\u00f3wek, jak tworzy\u0107 semantyczny kod w HTML:<\/p>\n\n\n\n<ol class=\"wp-block-list\" type=\"1\">\n<li><strong>U\u017cywanie odpowiednich tag\u00f3w<\/strong> &#8211; HTML oferuje wiele tag\u00f3w, kt\u00f3re opisuj\u0105 r\u00f3\u017cne rodzaje tre\u015bci, takie jak nag\u0142\u00f3wki, paragrafy, listy, tabele, itp. Wa\u017cne jest, aby u\u017cywa\u0107 odpowiednich tag\u00f3w dla ka\u017cdego rodzaju tre\u015bci, poniewa\u017c u\u0142atwia to ich interpretacj\u0119 przez przegl\u0105darki i asystent\u00f3w ekranowych.<\/li>\n\n\n\n<li>U\u017cywanie tag\u00f3w nag\u0142\u00f3wk\u00f3w <strong>zgodnie z hierarchi\u0105<\/strong> tre\u015bci &#8211; Nag\u0142\u00f3wki HTML (H1-H6) powinny by\u0107 u\u017cywane zgodnie z hierarchi\u0105 tre\u015bci na stronie, gdzie H1 to najwa\u017cniejszy nag\u0142\u00f3wek, a H6 to najmniej wa\u017cny. To pomaga w interpretacji struktury strony i jej zawarto\u015bci przez przegl\u0105darki i asystenty ekranowe.<\/li>\n\n\n\n<li><strong>U\u017cywanie tag\u00f3w sekcji <\/strong>&#8211; HTML oferuje tagi sekcji, takie jak &lt;header&gt;, &lt;footer&gt;, &lt;nav&gt;, &lt;aside&gt;, kt\u00f3re opisuj\u0105 r\u00f3\u017cne cz\u0119\u015bci strony. Warto korzysta\u0107 z tych tag\u00f3w, aby opisa\u0107 struktur\u0119 strony, poniewa\u017c u\u0142atwia to korzystanie z niej dla u\u017cytkownik\u00f3w.<\/li>\n\n\n\n<li><strong>U\u017cywanie<\/strong> <strong>tag\u00f3w list<\/strong> &#8211; HTML oferuje tagi list, takie jak &lt;ul&gt;, &lt;ol&gt;, &lt;dl&gt;, kt\u00f3re opisuj\u0105 r\u00f3\u017cne rodzaje list. U\u017cywanie tych tag\u00f3w u\u0142atwia interpretacj\u0119 zawarto\u015bci strony dla u\u017cytkownik\u00f3w, zw\u0142aszcza dla os\u00f3b korzystaj\u0105cych z czytnik\u00f3w ekranowych.<\/li>\n\n\n\n<li><strong>U\u017cywanie atrybut\u00f3w semantycznych<\/strong> &#8211; HTML oferuje wiele atrybut\u00f3w semantycznych, takich jak 'alt&#8217; dla obraz\u00f3w, 'title&#8217; dla element\u00f3w z wskaz\u00f3wkami, 'aria-&#8217; dla opisu stanu lub roli elementu. U\u017cywanie tych atrybut\u00f3w pomaga w interpretacji zawarto\u015bci strony dla os\u00f3b korzystaj\u0105cych z technologii asystuj\u0105cych.<\/li>\n\n\n\n<li><strong>Unikanie nadu\u017cywania tag\u00f3w nieoznaczonych<\/strong> &#8211; HTML oferuje tagi nieoznaczone, takie jak &lt;div&gt; i &lt;span&gt;, kt\u00f3re pozwalaj\u0105 na grupowanie tre\u015bci bez okre\u015blania ich rodzaju. Warto jednak unika\u0107 nadu\u017cywania tych tag\u00f3w i zamiast tego u\u017cywa\u0107 bardziej semantycznych tag\u00f3w, kt\u00f3re opisuj\u0105 rodzaj tre\u015bci.<\/li>\n<\/ol>\n\n\n\n<p>Podsumowuj\u0105c, tworzenie semantycznego kodu w HTML wymaga zastosowania odpowiednich tag\u00f3w, atrybut\u00f3w i hierarchii tre\u015bci. Dzi\u0119ki temu strona jest bardziej czytelna i zrozumia\u0142a dla u\u017cytkownik\u00f3w.<\/p>\n<\/blockquote>\n\n\n\n<p><strong>Moja opinia<\/strong>: Sztuczna inteligencja wskaza\u0142a najwa\u017cniejsze zagadnienia zwi\u0105zane z kodem semantycznym i poda\u0142a przyk\u0142ady ich u\u017cycia. <\/p>\n\n\n\n<p>Powy\u017cej mamy g\u0142\u00f3wnie teori\u0119. Co si\u0119 stanie, je\u017celi potrzebowaliby\u015bmy praktycznej pomocy dotycz\u0105cej semantycznego kodu?<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Pytanie 4: Poka\u017c semantyczny kod HTML dla formularza p\u0142atno\u015bci z wykorzystaniem WAI-ARIA<\/strong><\/h3>\n\n\n\n<p>Na powy\u017cszy prompt ChatGPT by\u0142 w stanie wygenerowa\u0107 kod HTML, kt\u00f3ry w narz\u0119dziach deweloperskich \u201eLighthouse\u201d w Google Chrome otrzyma\u0142 ocen\u0119 100\/100 pod k\u0105tem dost\u0119pno\u015bci.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large\"><a href=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/08\/Rys-2.jpg\"><img decoding=\"async\" width=\"811\" height=\"1024\" src=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/08\/Rys-2-811x1024.jpg\" alt=\"Widok formularza napisanego w HTML oraz oceny uzyskanej w Lighthouse i podgl\u0105d kodu wygenerowanego przez ChatGPT\" class=\"wp-image-23535\" srcset=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/08\/Rys-2-811x1024.jpg 811w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/08\/Rys-2-238x300.jpg 238w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/08\/Rys-2-768x970.jpg 768w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/08\/Rys-2-1217x1536.jpg 1217w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/08\/Rys-2.jpg 1276w\" sizes=\"(max-width: 811px) 100vw, 811px\" \/><\/a><figcaption class=\"wp-element-caption\">Ryc. 2 Widok formularza napisanego w HTML oraz oceny uzyskanej w Lighthouse i podgl\u0105d kodu wygenerowanego przez ChatGPT<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Rola 2: Zajmuj\u0119 si\u0119 testowaniem. Jak ChatGPT mo\u017ce pom\u00f3c w zapewnieniu dost\u0119pno\u015bci?<\/strong><\/h2>\n\n\n\n<p>W tej sekcji przedstawi\u0119, w jaki spos\u00f3b sztuczna inteligencja mo\u017ce pom\u00f3c w testowaniu dost\u0119pno\u015bci. Testerzy, kt\u00f3rzy zetkn\u0119li si\u0119 z zagadnieniem accessibility na pewno spotkali na swojej drodze termin <strong>WCAG<\/strong>. Za\u0142\u00f3\u017cmy jednak, \u017ce s\u0105 w tym temacie zieloni i chcieliby wej\u015b\u0107 w \u015bwiat testowania dost\u0119pno\u015bci \ud83d\ude09<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Pytanie 5: Jestem pocz\u0105tkuj\u0105cym testerem i chcia\u0142bym testowa\u0107 dost\u0119pno\u015b\u0107. Jakie zagadnienia i terminy powinienem pozna\u0107?<\/strong><\/h3>\n\n\n\n<p>Odpowiedz ChatGPT:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<ol class=\"wp-block-list\" type=\"1\">\n<li>\u201eJestem zadowolony, \u017ce jeste\u015b zainteresowany testowaniem dost\u0119pno\u015bci! Oto kilka wa\u017cnych zagadnie\u0144 i termin\u00f3w, kt\u00f3re powiniene\u015b pozna\u0107 jako pocz\u0105tkuj\u0105cy tester dost\u0119pno\u015bci:. <strong>Dost\u0119pno\u015b\u0107<\/strong> (Accessibility): Og\u00f3lnie oznacza, \u017ce strony internetowe, aplikacje lub inne technologie cyfrowe s\u0105 projektowane i tworzone w taki spos\u00f3b, aby by\u0142y dost\u0119pne i u\u017cyteczne dla os\u00f3b z r\u00f3\u017cnymi niepe\u0142nosprawno\u015bciami.<\/li>\n\n\n\n<li><strong>WCAG<\/strong> (Web Content Accessibility Guidelines): Jest to zbi\u00f3r wytycznych opracowany przez W3C, kt\u00f3ry okre\u015bla standardy i zalecenia dotycz\u0105ce dost\u0119pno\u015bci tre\u015bci internetowych.<\/li>\n\n\n\n<li>POUR: Akronim ten reprezentuje cztery g\u0142\u00f3wne zasady dost\u0119pno\u015bci wed\u0142ug WCAG: Perceivable (Odbieralno\u015b\u0107), Operable (Wykonalno\u015b\u0107), Understandable (Zrozumia\u0142o\u015b\u0107) i Robust (Stabilno\u015b\u0107).<\/li>\n\n\n\n<li>Testowanie dost\u0119pno\u015bci: Proces sprawdzania i oceny dost\u0119pno\u015bci strony internetowej lub aplikacji pod k\u0105tem zgodno\u015bci z wytycznymi dost\u0119pno\u015bci, takimi jak WCAG.<\/li>\n\n\n\n<li>Atrybuty dost\u0119pno\u015bci: S\u0105 to cechy i w\u0142a\u015bciwo\u015bci element\u00f3w interfejsu, kt\u00f3re pozwalaj\u0105 technologiom asystuj\u0105cym interpretowa\u0107 i komunikowa\u0107 informacje u\u017cytkownikom z niepe\u0142nosprawno\u015bciami, na przyk\u0142ad atrybuty alt dla obraz\u00f3w lub etykiety formularzy..<\/li>\n\n\n\n<li><strong>Technologie asystuj\u0105ce<\/strong>: Oprogramowanie i urz\u0105dzenia, kt\u00f3re pomagaj\u0105 osobom z niepe\u0142nosprawno\u015bciami w korzystaniu z komputera i przegl\u0105daniu tre\u015bci internetowych. Przyk\u0142ady to czytniki ekranu, powi\u0119kszaj\u0105ce oprogramowanie, klawiatury ekranowe.<\/li>\n\n\n\n<li><strong>Narz\u0119dzia do testowania dost\u0119pno\u015bci<\/strong>: Istnieje wiele narz\u0119dzi dost\u0119pnych online, kt\u00f3re mog\u0105 pom\u00f3c w automatycznym sprawdzaniu dost\u0119pno\u015bci stron internetowych, takie jak WAVE, Axe, Lighthouse, Accessibility Insights itp.<\/li>\n\n\n\n<li><strong>Dobre praktyki dost\u0119pno\u015bci<\/strong>: S\u0105 to zalecenia i techniki projektowania i tworzenia stron internetowych, kt\u00f3re pomagaj\u0105 w zapewnieniu dost\u0119pno\u015bci dla os\u00f3b z niepe\u0142nosprawno\u015bciami. Przyk\u0142ady to odpowiednie oznaczenia nag\u0142\u00f3wk\u00f3w, dost\u0119pne etykiety formularzy, kontrast kolor\u00f3w itp.<\/li>\n\n\n\n<li>Niepe\u0142nosprawno\u015bci: <strong>Rozumienie r\u00f3\u017cnych rodzaj\u00f3w niepe\u0142nosprawno\u015bci<\/strong>, takich jak wizualne, s\u0142uchowe, ruchowe i poznawcze, <strong>jest wa\u017cne dla testera dost\u0119pno\u015bci<\/strong>. Poznanie wyzwa\u0144, przed jakimi staj\u0105 osoby z niepe\u0142nosprawno\u015bciami, pomo\u017ce w zidentyfikowaniu potencjalnych problem\u00f3w i zapewnieniu odpowiedniej dost\u0119pno\u015bci.<\/li>\n\n\n\n<li>Dost\u0119pno\u015b\u0107 mobilna: Testowanie dost\u0119pno\u015bci dla urz\u0105dze\u0144 mobilnych, takich jak smartfony i tablety<\/li>\n<\/ol>\n<\/blockquote>\n\n\n\n<p><strong>Moja opinia<\/strong>: Ciesz\u0119 si\u0119, \u017ce poj\u0119cie WCAG zosta\u0142o wymienione, oraz \u017ce ChatGPT zawar\u0142 najwa\u017cniejsze elementy zwi\u0105zane z testowaniem dost\u0119pno\u015bci i wskaza\u0142 narz\u0119dzia, kt\u00f3re mog\u0105 pom\u00f3c w tym procesie.<\/p>\n\n\n\n<p>To teraz przejdziemy do praktycznych wskaz\u00f3wek dotycz\u0105cych testowania.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Pytanie 6: Jak przetestowa\u0107 aplikacj\u0119 mobiln\u0105 pod wzgl\u0119dem WCAG?<\/strong><\/h3>\n\n\n\n<p>Odpowied\u017a ChatGPT:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>WCAG (Web Content Accessibility Guidelines) to mi\u0119dzynarodowe wytyczne dotycz\u0105ce dost\u0119pno\u015bci cyfrowej, kt\u00f3re maj\u0105 na celu zapewnienie, \u017ce strony internetowe i aplikacje s\u0105 dost\u0119pne dla wszystkich u\u017cytkownik\u00f3w, w tym dla os\u00f3b z niepe\u0142nosprawno\u015bciami. Aby przetestowa\u0107 aplikacj\u0119 mobiln\u0105 pod wzgl\u0119dem WCAG, mo\u017cna skorzysta\u0107 z narz\u0119dzi automatycznych lub przeprowadzi\u0107 testy manualne.<\/p>\n\n\n\n<p>Oto kilka krok\u00f3w, jak przetestowa\u0107 aplikacj\u0119 mobiln\u0105 pod k\u0105tem zgodno\u015bci z WCAG:<\/p>\n\n\n\n<ol class=\"wp-block-list\" type=\"1\">\n<li>Sprawd\u017a, czy aplikacja <strong>umo\u017cliwia dost\u0119p za pomoc\u0105 klawiatury<\/strong> &#8211; u\u017cytkownicy korzystaj\u0105cy z klawiatury lub innych narz\u0119dzi asystuj\u0105cych <strong>musz\u0105 mie\u0107 mo\u017cliwo\u015b\u0107 nawigacji i korzystania z aplikacji bez u\u017cycia myszy lub ekranu dotykowego<\/strong>.<\/li>\n\n\n\n<li>Sprawd\u017a, czy aplikacja <strong>ma odpowiedni kontrast<\/strong> &#8211; tekst i grafiki w aplikacji musz\u0105 by\u0107 czytelne i \u0142atwe do odczytania dla wszystkich u\u017cytkownik\u00f3w, w tym dla os\u00f3b z wadami wzroku.<\/li>\n\n\n\n<li>Sprawd\u017a, czy aplikacja umo\u017cliwia <strong>zmian\u0119 rozmiaru czcionki<\/strong> i przegl\u0105danie aplikacji w trybie pe\u0142noekranowym &#8211; u\u017cytkownicy powinni mie\u0107 mo\u017cliwo\u015b\u0107 dostosowania rozmiaru czcionki do swoich potrzeb.<\/li>\n\n\n\n<li>Sprawd\u017a, czy aplikacja <strong>ma odpowiedni\u0105 struktur\u2013 i nawigacj\u0119<\/strong> &#8211; u\u017cytkownicy powinni mie\u0107 \u0142atwy dost\u0119p do wszystkich sekcji aplikacji i \u0142atwo si\u0119 po nich porusza\u0107.<\/li>\n\n\n\n<li>Sprawd\u017a, czy wszystkie tre\u015bci multimedialne (np. wideo i audio) <strong>maj\u0105 alternatywne opisy<\/strong> &#8211; osoby niewidome lub niedowidz\u0105ce musz\u0105 mie\u0107 dost\u0119p do wszystkich tre\u015bci multimedialnych w aplikacji.<\/li>\n\n\n\n<li>Sprawd\u017a, czy aplikacja dzia\u0142a poprawnie <strong>z r\u00f3\u017cnymi narz\u0119dziami asystuj\u0105cymi<\/strong>, takimi jak czytniki ekranowe.<\/li>\n\n\n\n<li>Skorzystaj z <strong>automatycznych narz\u0119dzi do testowania dost\u0119pno\u015bci<\/strong>, takich jak Lighthouse, Accessibility Scanner lub Axe, aby szybko wykry\u0107 problemy z dost\u0119pno\u015bci\u0105.<\/li>\n\n\n\n<li><strong>Przeprowad\u017a testy manualne przez osoby z r\u00f3\u017cnymi typami niepe\u0142nosprawno\u015bci<\/strong>, aby uzyska\u0107 realne opinie u\u017cytkownik\u00f3w i wskaza\u0107 problemy, kt\u00f3re mog\u0105 nie zosta\u0107 wykryte przez narz\u0119dzia automatyczne.<\/li>\n<\/ol>\n\n\n\n<p>Przetestowanie aplikacji mobilnej pod wzgl\u0119dem WCAG wymaga systematyczno\u015bci i ci\u0105g\u0142ego monitorowania, aby zagwarantowa\u0107, \u017ce aplikacja jest dost\u0119pna dla wszystkich u\u017cytkownik\u00f3w.<\/p>\n<\/blockquote>\n\n\n\n<p><strong>Moja opinia:<\/strong> AI dobrze poradzi\u0142a sobie z tym pytaniem. Wa\u017cnym aspektem jest przeprowadzenie test\u00f3w (je\u017celi mamy mo\u017cliwo\u015b\u0107 \u2013 przez osoby z niepe\u0142nosprawno\u015bciami).<\/p>\n\n\n\n<p>ChatGPT wspomnia\u0142 o opisach alternatywnych. Jednym z kryteri\u00f3w WCAG jest to, \u017ceby tre\u015bci nietekstowe, na przyk\u0142ad obrazy, posiada\u0142y opis alternatywny, kt\u00f3ry zostanie przeczytany przez czytnik ekranu lub wy\u015bwietlony w aplikacji w przypadku problem\u00f3w z za\u0142adowaniem obrazu.<\/p>\n\n\n\n<p>Nast\u0119pne zadanie, kt\u00f3re postawi\u0142em przed ChatGPT, to pr\u00f3ba zautomatyzowania sprawdzenia, czy w aplikacji webowej obrazy posiadaj\u0105 tekst alternatywny.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Pytanie 7: Przygotuj automatyczny test, kt\u00f3ry b\u0119dzie sprawdza\u0142, czy strona www posiada tekst alternatywny<\/strong><\/h3>\n\n\n\n<p>Odpowied\u017a GPT:<\/p>\n\n\n\n<p>ChatGPT przygotowa\u0142 kod oraz doda\u0142 wyja\u015bnienie:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>Ten test u\u017cywa biblioteki requests do pobrania zawarto\u015bci strony, a nast\u0119pnie biblioteki BeautifulSoup do przetwarzania HTML. Nast\u0119pnie test znajduje wszystkie obrazy na stronie i sprawdza, czy ka\u017cdy z nich ma alternatywny tekst. Je\u015bli obraz nie ma tekstu alternatywnego, test wy\u015bwietli komunikat z adresem URL obrazu. Mo\u017cna zintegrowa\u0107 ten test z systemem automatycznego testowania, takim jak Selenium lub Robot Framework, aby automatycznie wykonywa\u0107 ten test przy ka\u017cdym wydaniu aplikacji.<\/p>\n<\/blockquote>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large\"><a href=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/08\/Rys-3.png\"><img decoding=\"async\" width=\"1024\" height=\"662\" src=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/08\/Rys-3-1024x662.png\" alt=\"Kod wygenerowany przez ChatGPT, kt\u00f3ry sprawdza, czy obrazy na stronie internetowej maj\u0105 tekst alternatywny\" class=\"wp-image-23539\" srcset=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/08\/Rys-3-1024x662.png 1024w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/08\/Rys-3-300x194.png 300w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/08\/Rys-3-768x496.png 768w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/08\/Rys-3-1536x993.png 1536w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/08\/Rys-3-2048x1323.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><figcaption class=\"wp-element-caption\">Ryc. 3 Kod wygenerowany przez ChatGPT, kt\u00f3ry sprawdza, czy obrazy na stronie internetowej maj\u0105 tekst alternatywny<\/figcaption><\/figure>\n\n\n\n<p>Powy\u017cszy program sprawdza stron\u0119 i wy\u015bwietla wszystkie obrazy bez tekstu alternatywnego. Nale\u017cy zada\u0107 pytanie, czy to dobrze, \u017ce ka\u017cdy obraz b\u0119dzie mia\u0142 tekst alternatywny.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Pytanie uzupe\u0142niaj\u0105ce: Czy wszystkie elementy nietekstowe powinny mie\u0107 tekst alternatywny?<\/strong><\/h3>\n\n\n\n<p>Odpowied\u017a ChatGPT:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>Nie ka\u017cdy element nietekstowy musi mie\u0107 tekst alternatywny, ale og\u00f3lnie tekst alternatywny jest wa\u017cny dla dost\u0119pno\u015bci element\u00f3w nietekstowych, takich jak obrazy, audio i video. Wa\u017cne jest, aby zrozumie\u0107 kontekst i cel danego elementu nietekstowego, zanim zdecydujemy, czy potrzebuje on tekstu alternatywnego.<\/p>\n\n\n\n<p>Oto kilka og\u00f3lnych zasad:<\/p>\n\n\n\n<ol class=\"wp-block-list\" type=\"1\">\n<li>Obrazy: Jak wspomnia\u0142em wcze\u015bniej, obrazy powinny zazwyczaj mie\u0107 tekst alternatywny opisuj\u0105cy ich tre\u015b\u0107 lub funkcj\u0119. <strong>Je\u015bli obraz jest czysto dekoracyjny i nie dodaje \u017cadnej informacji, powinien mie\u0107 pusty atrybut `alt`.<\/strong><\/li>\n\n\n\n<li>Audio i wideo: Dla tre\u015bci audio i wideo, zaleca si\u0119 dostarczanie napis\u00f3w, transkrypt\u00f3w lub opis\u00f3w audio, aby u\u017cytkownicy z r\u00f3\u017cnymi niepe\u0142nosprawno\u015bciami mogli korzysta\u0107 z tych tre\u015bci.<\/li>\n\n\n\n<li>Elementy interaktywne**: Elementy interaktywne, takie jak przyciski lub linki, powinny mie\u0107 czytelne etykiety, kt\u00f3re opisuj\u0105 ich funkcj\u0119. Te etykiety s\u0142u\u017c\u0105 jako &#8222;tekst alternatywny&#8221; dla tych element\u00f3w.<\/li>\n\n\n\n<li>Elementy z\u0142o\u017cone**: Dla niekt\u00f3rych z\u0142o\u017conych element\u00f3w nietekstowych, takich jak wykresy lub infografiki, tekst alternatywny mo\u017ce nie wystarczy\u0107, aby w pe\u0142ni przekaza\u0107 informacje. W takim przypadku mo\u017ce by\u0107 konieczne dostarczenie dodatkowej tre\u015bci opisuj\u0105cej te elementy, na przyk\u0142ad za pomoc\u0105 d\u0142ugiego opisu.<\/li>\n<\/ol>\n\n\n\n<p>Pami\u0119taj, \u017ce celem jest zawsze zapewnienie dost\u0119pu do tej samej tre\u015bci i funkcji wszystkim u\u017cytkownikom, niezale\u017cnie od ich zdolno\u015bci.<\/p>\n<\/blockquote>\n\n\n\n<p>Bez tego pytania uzupe\u0142niaj\u0105cego tester m\u00f3g\u0142by za\u0142o\u017cy\u0107 niepotrzebne zg\u0142oszenia dotycz\u0105ce braku tekstu alternatywnego. Oczywi\u015bcie, ChatGPT nie mia\u0142 problem\u00f3w ze zmodyfikowaniem programu, aby pomija\u0107 elementy z pustym alt text zgodnie z uzyskan\u0105 odpowiedzi\u0105.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large\"><a href=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/08\/Rys-4.jpg\"><img decoding=\"async\" width=\"884\" height=\"1024\" src=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/08\/Rys-4-884x1024.jpg\" alt=\"Odpowied\u017a ChatGPT na pro\u015bb\u0119 o zmodifikowanie kodu, kt\u00f3ry b\u0119dzie pomija\u0142 obrazy z pustym tekstem alternatywnym\" class=\"wp-image-23543\" srcset=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/08\/Rys-4-884x1024.jpg 884w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/08\/Rys-4-259x300.jpg 259w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/08\/Rys-4-768x889.jpg 768w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/08\/Rys-4.jpg 1190w\" sizes=\"(max-width: 884px) 100vw, 884px\" \/><\/a><figcaption class=\"wp-element-caption\">Ryc. 4 Odpowied\u017a ChatGPT na pro\u015bb\u0119 o zmodifikowanie kodu, kt\u00f3ry b\u0119dzie pomija\u0142 obrazy z pustym tekstem alternatywnym<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Rola 3: Zajmuj\u0119 si\u0119 projektowaniem UX\/UI. Jak ChatGPT mo\u017ce pom\u00f3c w zapewnieniu dost\u0119pno\u015bci?<\/strong><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Pytanie 8: Jak projektanci UX\/UI mog\u0105 pom\u00f3c w zapewnieniu dost\u0119pno\u015bci?<\/strong><\/h3>\n\n\n\n<p>Odpowied\u017a ChatGPT:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><strong>Projektanci UX\/UI odgrywaj\u0105 kluczow\u0105 rol\u0119 w zapewnieniu dost\u0119pno\u015bci<\/strong> dla r\u00f3\u017cnych grup u\u017cytkownik\u00f3w, w tym os\u00f3b z niepe\u0142nosprawno\u015bciami. Oto kilka sposob\u00f3w, w jakie projektanci mog\u0105 pom\u00f3c w zapewnieniu dost\u0119pno\u015bci:<\/p>\n\n\n\n<ol class=\"wp-block-list\" type=\"1\">\n<li><strong>Uwzgl\u0119dnianie potrzeb u\u017cytkownik\u00f3w z niepe\u0142nosprawno\u015bciami w fazie projektowania<\/strong> &#8211; Projektanci UX\/UI powinni bra\u0107 pod uwag\u0119 r\u00f3\u017cne potrzeby u\u017cytkownik\u00f3w, w tym os\u00f3b z niepe\u0142nosprawno\u015bciami. Nale\u017cy zastanowi\u0107 si\u0119, jak osoby niewidome, niedowidz\u0105ce, z zaburzeniami ruchu, s\u0142abo s\u0142ysz\u0105ce, z trudno\u015bciami w uczeniu si\u0119 i innymi problemami, korzystaj\u0105 z produktu i jak mo\u017cna u\u0142atwi\u0107 im interakcj\u0119 z nim.<\/li>\n\n\n\n<li><strong>Testowanie dost\u0119pno\u015bci<\/strong> &#8211; Projektanci powinni przeprowadza\u0107 testy dost\u0119pno\u015bci, aby upewni\u0107 si\u0119, \u017ce ich projekty s\u0105 \u0142atwe do u\u017cytkowania dla os\u00f3b z niepe\u0142nosprawno\u015bciami. Testy te powinny obejmowa\u0107 r\u00f3\u017cne grupy niepe\u0142nosprawno\u015bci i uwzgl\u0119dnia\u0107 r\u00f3\u017cne metody interakcji.<\/li>\n\n\n\n<li><strong>Zapewnienie czytelnej i zrozumia\u0142ej tre\u015bci<\/strong> &#8211; Dla os\u00f3b niewidomych, niedowidz\u0105cych lub z trudno\u015bciami w uczeniu si\u0119, czytelna i zrozumia\u0142a tre\u015b\u0107 jest kluczowa. Projektanci powinni zatem projektowa\u0107 stron\u0119 lub aplikacj\u0119 z my\u015bl\u0105 o dost\u0119pie do informacji przez osoby z r\u00f3\u017cnymi problemami.<\/li>\n\n\n\n<li><strong>U\u017cywanie odpowiedniego kontrastu kolor\u00f3w<\/strong> &#8211; Kontrast kolor\u00f3w jest wa\u017cny dla os\u00f3b z niedowidzeniem i s\u0142ab\u0105 percepcj\u0105 kolor\u00f3w. Projektanci powinni zapewni\u0107 odpowiedni kontrast kolor\u00f3w, aby informacje by\u0142y czytelne i \u0142atwe do odczytania.<\/li>\n\n\n\n<li><strong>Dostosowanie interfejsu u\u017cytkownika<\/strong> &#8211; Projektanci powinni projektowa\u0107 interfejs u\u017cytkownika, kt\u00f3ry jest \u0142atwy do obs\u0142ugi dla os\u00f3b z r\u00f3\u017cnymi problemami, takimi jak zaburzenia ruchu czy s\u0142uchu. Na przyk\u0142ad, nale\u017cy zapewni\u0107 odpowiedni rozmiar przycisk\u00f3w i innych element\u00f3w interfejsu, a tak\u017ce zapewni\u0107 alternatywne metody interakcji, takie jak polecenia g\u0142osowe.<\/li>\n\n\n\n<li><strong>Wdra\u017canie standard\u00f3w dost\u0119pno\u015bci<\/strong> &#8211; Projektanci powinni stosowa\u0107 standardy dost\u0119pno\u015bci, takie jak WCAG (Web Content Accessibility Guidelines), aby upewni\u0107 si\u0119, \u017ce ich projekty spe\u0142niaj\u0105 wymagania dost\u0119pno\u015bci.<\/li>\n<\/ol>\n\n\n\n<p>Podsumowuj\u0105c, projektanci UX\/UI odgrywaj\u0105 kluczow\u0105 rol\u0119 w zapewnieniu dost\u0119pno\u015bci dla r\u00f3\u017cnych grup u\u017cytkownik\u00f3w, w tym os\u00f3b z niepe\u0142nosprawno\u015bciami. Wymaga to uwzgl\u0119dnienia r\u00f3\u017cnych potrzeb u\u017cytkownik\u00f3w, testowania dost\u0119pno\u015bci, zapewnienia czytelnej tre\u015bci.<\/p>\n<\/blockquote>\n\n\n\n<p>Czas na bardziej praktyczne pytanie, kt\u00f3re pomo\u017ce UX\/UI usprawni\u0107 prac\u0119 pod k\u0105tem dost\u0119pno\u015bci.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Pytanie 9: Jakie narz\u0119dzia, np. do Figmy, mog\u0105 pom\u00f3c projektantom UX\/UI zapewni\u0107 dost\u0119pno\u015b\u0107?<\/strong><\/h3>\n\n\n\n<p>Odpowied\u017a ChatGPT:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>W Figmie, narz\u0119dziu do projektowania interfejsu, istnieje kilka funkcji i mo\u017cliwo\u015bci, kt\u00f3re mog\u0105 pom\u00f3c projektantom UX\/UI w zapewnieniu dost\u0119pno\u015bci. Oto kilka z nich:<\/p>\n\n\n\n<p>1. Style i komponenty: W Figmie mo\u017cna tworzy\u0107 style i komponenty, kt\u00f3re spe\u0142niaj\u0105 wymagania dost\u0119pno\u015bci. Mo\u017cna zdefiniowa\u0107 odpowiednie oznaczenia nag\u0142\u00f3wk\u00f3w, dost\u0119pne etykiety formularzy, odpowiedni kontrast kolor\u00f3w itp. Te style i komponenty mo\u017cna ponownie wykorzystywa\u0107 w projekcie, co zapewnia sp\u00f3jno\u015b\u0107 i u\u0142atwia zapewnienie dost\u0119pno\u015bci w r\u00f3\u017cnych cz\u0119\u015bciach aplikacji.<\/p>\n\n\n\n<p>2. Gridy i spacery: Figma pozwala na tworzenie siatek i odst\u0119p\u00f3w, kt\u00f3re pomagaj\u0105 w zachowaniu odpowiednich proporcji i przestrzeni w projekcie. Poprawne u\u0142o\u017cenie element\u00f3w interfejsu, takie jak przyciski i pola tekstowe, mo\u017ce u\u0142atwi\u0107 nawigacj\u0119 i interakcj\u0119 dla os\u00f3b z niepe\u0142nosprawno\u015bciami.<\/p>\n\n\n\n<p>3. Kontrast kolor\u00f3w: W Figmie mo\u017cna u\u017cywa\u0107 narz\u0119dzi do sprawdzania kontrastu kolor\u00f3w, aby upewni\u0107 si\u0119, \u017ce tekst i t\u0142o maj\u0105 odpowiedni\u0105 widoczno\u015b\u0107 dla os\u00f3b z wadami wzroku. Mo\u017cna skorzysta\u0107 z wbudowanych narz\u0119dzi lub zewn\u0119trznych narz\u0119dzi do sprawdzania kontrastu, kt\u00f3re integruj\u0105 si\u0119 z Figm\u0105.<\/p>\n\n\n\n<p>4. Etykiety i opisy alternatywne: Projektanci mog\u0105 u\u017cywa\u0107 etykiet i opis\u00f3w alternatywnych, aby opisa\u0107 obrazy i elementy interfejsu niedost\u0119pne dla czytnik\u00f3w ekranu. W Figmie mo\u017cna \u0142atwo doda\u0107 atrybuty alt do obraz\u00f3w i dost\u0119pne etykiety do interaktywnych element\u00f3w.<\/p>\n\n\n\n<p>5. Prototypowanie interakcji: Figma umo\u017cliwia tworzenie interaktywnych prototyp\u00f3w, kt\u00f3re pozwalaj\u0105 testowa\u0107 i sprawdza\u0107 dost\u0119pno\u015b\u0107 r\u00f3\u017cnych interakcji na stronie. Projektanci mog\u0105 symulowa\u0107 dzia\u0142anie funkcji dost\u0119pno\u015bci, takich jak fokusowanie, nawigacja klawiatur\u0105, czytniki ekranu itp., aby upewni\u0107 si\u0119, \u017ce s\u0105 one \u0142atwe do korzystania dla os\u00f3b z niepe\u0142nosprawno\u015bciami. Wa\u017cne jest jednak pami\u0119tanie, \u017ce cho\u0107 narz\u0119dzia takie jak Figma mog\u0105 pom\u00f3c projektantom w projektowaniu dost\u0119pnych interfejs\u00f3w, to ostateczne sprawdzenie dost\u0119pno\u015bci powinno by\u0107 przeprowadzone przez specjalist\u00f3w od testowania dost\u0119pno\u015bci lub os\u00f3b z do\u015bwiadczeniem w tej dziedzinie.<\/p>\n<\/blockquote>\n\n\n\n<p>Sprawdzi\u0142em, czy uda mi si\u0119 znale\u017a\u0107 co\u015b dotycz\u0105cego punktu nr 3: \u201eW Figmie mo\u017cna u\u017cywa\u0107 narz\u0119dzi do sprawdzania kontrastu kolor\u00f3w\u201d. Rzeczywi\u015bcie, uda\u0142o si\u0119 \ud83d\ude42<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large\"><a href=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/08\/Rys-5.png\"><img decoding=\"async\" width=\"1024\" height=\"608\" src=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/08\/Rys-5-1024x608.png\" alt=\"Zrzut ekranu: narz\u0119dzie dost\u0119pne dla Figmy, kt\u00f3re sprawdza, czy kontrast jest odpowiedni\" class=\"wp-image-23546\" srcset=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/08\/Rys-5-1024x608.png 1024w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/08\/Rys-5-300x178.png 300w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/08\/Rys-5-768x456.png 768w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/08\/Rys-5.png 1390w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><figcaption class=\"wp-element-caption\">Ryc. 5 Zrzut ekranu: narz\u0119dzie dost\u0119pne dla Figmy, kt\u00f3re sprawdza, czy kontrast jest odpowiedni<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Rola 4: Zajmuj\u0119 si\u0119 \u201epracami biurowymi\u201d. Jak ChatGPT mo\u017ce pom\u00f3c zwi\u0119kszy\u0107 dost\u0119pno\u015b\u0107?<\/strong><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Pytanie 10: Jak tworzy\u0107 dost\u0119pne posty na social media?<\/strong><\/h3>\n\n\n\n<p>Odpowied\u017a ChatGPT:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>Tworzenie dost\u0119pnych post\u00f3w na social media to wa\u017cny krok w kierunku zwi\u0119kszenia dost\u0119pno\u015bci Twojej tre\u015bci dla os\u00f3b z r\u00f3\u017cnymi rodzajami niepe\u0142nosprawno\u015bci. Oto kilka wskaz\u00f3wek, kt\u00f3re pomog\u0105 Ci w tworzeniu takich post\u00f3w:<\/p>\n\n\n\n<ol class=\"wp-block-list\" type=\"1\">\n<li>Opisuj obrazy: Je\u015bli zamieszczasz zdj\u0119cia, pami\u0119taj, \u017ce nie wszyscy mog\u0105 je zobaczy\u0107. Dlatego warto doda\u0107 kr\u00f3tki opis, kt\u00f3ry opisze, co jest na zdj\u0119ciu. Mo\u017cesz te\u017c u\u017cy\u0107 funkcji opisywania obraz\u00f3w, kt\u00f3re s\u0105 dost\u0119pne w niekt\u00f3rych platformach social media.<\/li>\n\n\n\n<li>Unikaj wy\u0142\u0105cznie wizualnych element\u00f3w: Je\u015bli Tw\u00f3j post sk\u0142ada si\u0119 wy\u0142\u0105cznie z obraz\u00f3w, wideo lub grafik, to osoby z pewnymi rodzajami niepe\u0142nosprawno\u015bci mog\u0105 mie\u0107 trudno\u015bci z odbiorem Twojej tre\u015bci. Dlatego warto doda\u0107 opisy, alternatywne teksty lub podpisy, kt\u00f3re umo\u017cliwi\u0105 dost\u0119p do Twojego przekazu.<\/li>\n\n\n\n<li>U\u017cywaj prostego j\u0119zyka: U\u017cywaj prostego i \u0142atwego do zrozumienia j\u0119zyka, unikaj skomplikowanych s\u0142\u00f3w i zwrot\u00f3w. To pozwoli na zwi\u0119kszenie zrozumienia Twojego postu przez osoby z r\u00f3\u017cnymi poziomami umiej\u0119tno\u015bci j\u0119zykowych.<\/li>\n\n\n\n<li>U\u017cywaj odpowiednich hashtag\u00f3w: U\u017cywanie odpowiednich hashtag\u00f3w mo\u017ce pom\u00f3c w zwi\u0119kszeniu zasi\u0119gu Twojego postu, jednak warto pami\u0119ta\u0107, \u017ce niekt\u00f3re hashtagi mog\u0105 by\u0107 nieodpowiednie lub obra\u017aliwe. Zawsze warto sprawdzi\u0107, co oznaczaj\u0105 hashtagi, kt\u00f3re u\u017cywasz.<\/li>\n\n\n\n<li>Testuj dost\u0119pno\u015b\u0107 swojego postu: Sprawd\u017a, jak Tw\u00f3j post wygl\u0105da dla os\u00f3b z r\u00f3\u017cnymi rodzajami niepe\u0142nosprawno\u015bci, na przyk\u0142ad za pomoc\u0105 narz\u0119dzi do testowania dost\u0119pno\u015bci. Mo\u017cesz te\u017c poprosi\u0107 o opinie od os\u00f3b z niepe\u0142nosprawno\u015bciami.<\/li>\n<\/ol>\n\n\n\n<p>Pami\u0119taj, \u017ce tworzenie dost\u0119pnych post\u00f3w na social media to proces ci\u0105g\u0142y, a ka\u017cdy post mo\u017ce zosta\u0107 ulepszony. Warto pami\u0119ta\u0107, \u017ce dbanie o dost\u0119pno\u015b\u0107 Twojej tre\u015bci mo\u017ce przynie\u015b\u0107 korzy\u015bci nie tylko osobom z niepe\u0142nosprawno\u015bciami, ale r\u00f3wnie\u017c wszystkim u\u017cytkownikom Twojego social media.<\/p>\n<\/blockquote>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Pytanie 11: Jak utworzy\u0107 dokument Word, kt\u00f3ry jest dost\u0119pny?<\/strong><\/h3>\n\n\n\n<p>Odpowied\u017a ChatGPT:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>Aby utworzy\u0107 dokument Word, kt\u00f3ry jest dost\u0119pny, nale\u017cy przestrzega\u0107 kilku wytycznych dost\u0119pno\u015bci, kt\u00f3re pomog\u0105 upewni\u0107 si\u0119, \u017ce dokument jest czytelny i dost\u0119pny dla u\u017cytkownik\u00f3w z r\u00f3\u017cnymi potrzebami. Oto kilka wa\u017cnych wskaz\u00f3wek:<\/p>\n\n\n\n<ol class=\"wp-block-list\" type=\"1\">\n<li>U\u017cyj prostego uk\u0142adu strony: U\u017cyj prostego uk\u0142adu strony z \u0142atwym do odczytania tekstem i jasnymi nag\u0142\u00f3wkami. Nie u\u017cywaj zbyt wielu kolor\u00f3w lub ozdobnik\u00f3w.<\/li>\n\n\n\n<li>Stosuj czcionki \u0142atwe do odczytania: U\u017cywaj czcionek, kt\u00f3re s\u0105 \u0142atwe do odczytania, takich jak Arial, Verdana lub Times New Roman. Unikaj stosowania czcionek ozdobnych lub stylizowanych.<\/li>\n\n\n\n<li>U\u017cyj jasnego kontrastu: Wybierz jasny kontrast mi\u0119dzy tekstem a t\u0142em. Dla wi\u0119kszo\u015bci dokument\u00f3w zaleca si\u0119 bia\u0142y lub jasny kolor t\u0142a z ciemnym tekstem.<\/li>\n\n\n\n<li>Dostosuj rozmiar tekstu: U\u017cywaj odpowiedniego rozmiaru tekstu, tak aby by\u0142 on \u0142atwy do odczytania. Zwykle zaleca si\u0119 ustawienie wielko\u015bci czcionki na 12-14 punkt\u00f3w.<\/li>\n\n\n\n<li>Stosuj listy i nag\u0142\u00f3wki: U\u017cywaj list i nag\u0142\u00f3wk\u00f3w do organizowania zawarto\u015bci. Zastosowanie list u\u0142atwi u\u017cytkownikom z niepe\u0142nosprawno\u015bciami ruchowymi nawigowanie po dokumencie.<\/li>\n\n\n\n<li>U\u017cywaj alternatywnych tekst\u00f3w: Dodaj alternatywny tekst do zdj\u0119\u0107 i innych element\u00f3w multimedialnych, aby osoby niewidome lub s\u0142abowidz\u0105ce mog\u0142y zrozumie\u0107 tre\u015b\u0107.<\/li>\n\n\n\n<li>Wybierz odpowiedni format pliku: Zapisz dokument w formacie, kt\u00f3ry jest \u0142atwy do odczytania przez innych, takich jak format .docx. Unikaj u\u017cywania skomplikowanych format\u00f3w plik\u00f3w, takich jak .pdf lub .doc.<\/li>\n\n\n\n<li>Sprawd\u017a dost\u0119pno\u015b\u0107: Przed opublikowaniem dokumentu, u\u017cyj narz\u0119dzi do sprawdzania dost\u0119pno\u015bci, takich jak Microsoft Accessibility Checker, aby upewni\u0107 si\u0119, \u017ce dokument jest dost\u0119pny dla u\u017cytkownik\u00f3w z r\u00f3\u017cnymi potrzebami.<\/li>\n<\/ol>\n\n\n\n<p>Przestrzeganie tych wskaz\u00f3wek pomo\u017ce Ci stworzy\u0107 dokument Word, kt\u00f3ry jest dost\u0119pny dla u\u017cytkownik\u00f3w z r\u00f3\u017cnymi potrzebami.<\/p>\n<\/blockquote>\n\n\n\n<p>Zajmijmy si\u0119 teraz zagadnieniem dost\u0119pno\u015bci niezwi\u0105zanej z produktami cyfrowymi i z IT.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Role nietechniczne<\/strong><\/h2>\n\n\n\n<p>Czy ChatGPT mo\u017ce pom\u00f3c w zapewnieniu dost\u0119pno\u015bci w innych sytuacjach, tak\u017ce sytuacjach dnia codziennego?<\/p>\n\n\n\n<p>W tej cz\u0119\u015bci zaczn\u0119 od pocz\u0105tkuj\u0105cego architekta, kt\u00f3ry zamierza rozpocz\u0105\u0107 przygod\u0119 z projektowaniem bardziej dost\u0119pnym.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Pytanie 12: Jak zapewni\u0107 dost\u0119pno\u015b\u0107 architektoniczn\u0105 w budynku?<\/strong><\/h3>\n\n\n\n<p>Odpowied\u017a ChatGPT:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>Zapewnienie dost\u0119pno\u015bci architektonicznej w budynku wymaga uwzgl\u0119dnienia r\u00f3\u017cnych czynnik\u00f3w i aspekt\u00f3w projektowych. Oto kilka sposob\u00f3w, jak mo\u017cna zapewni\u0107 dost\u0119pno\u015b\u0107 architektoniczn\u0105 w budynku:<\/p>\n\n\n\n<ol class=\"wp-block-list\" type=\"1\">\n<li><strong>Zapewnij bezbarierowy dost\u0119p do budynku<\/strong> poprzez odpowiednio zaprojektowany wjazd, bezstopniowe wej\u015bcie, windy, rampy czy schody z por\u0119czami.<\/li>\n\n\n\n<li>Zadbaj o <strong>oznakowanie i pod\u015bwietlenie drogi prowadz\u0105cej do budynku<\/strong>, aby osoby z problemami z widzeniem mog\u0142y porusza\u0107 si\u0119 bezpiecznie.<\/li>\n\n\n\n<li>Zainstaluj urz\u0105dzenia u\u0142atwiaj\u0105ce poruszanie si\u0119, takie jak windy, podjazdy, platformy oraz urz\u0105dzenia umo\u017cliwiaj\u0105ce komunikacj\u0119, takie jak wideofony, systemy nag\u0142a\u015bniaj\u0105ce.<\/li>\n\n\n\n<li><strong>Wybierz materia\u0142y o r\u00f3\u017cnym stopniu kontrastu i stosuj odpowiednie o\u015bwietlenie<\/strong>, aby u\u0142atwi\u0107 osobom z problemami z widzeniem korzystanie z pomieszcze\u0144.<\/li>\n\n\n\n<li><strong>Umo\u017cliwiaj \u0142atwy dost\u0119p do toalet i innych udogodnie\u0144, takich jak uchwyty w \u0142azienkach i drzwi z automatycznym otwieraniem.<\/strong><\/li>\n\n\n\n<li><strong>U\u0142atwiaj poruszanie si\u0119 wewn\u0105trz budynku <\/strong>poprzez odpowiednio szerokie korytarze i drzwi, kt\u00f3re pozwalaj\u0105 na \u0142atwe manewrowanie w\u00f3zkami inwalidzkimi czy chodzikami.<\/li>\n\n\n\n<li><strong>Zapewnij udogodnienia dla os\u00f3b z niepe\u0142nosprawno\u015bciami s\u0142uchu<\/strong>, takie jak systemy p\u0119tlowe lub napisy wideo.<\/li>\n\n\n\n<li><strong>Dostosuj wysoko\u015b\u0107 blat\u00f3w i mebli w pomieszczeniach<\/strong>, aby umo\u017cliwi\u0107 korzystanie z nich osobom na w\u00f3zkach inwalidzkich.<\/li>\n<\/ol>\n\n\n\n<p>Wszystkie te czynniki powinny by\u0107 uwzgl\u0119dnione ju\u017c na etapie projektowania budynku, aby zapewni\u0107 jak najlepsz\u0105 dost\u0119pno\u015b\u0107 architektoniczn\u0105 dla wszystkich u\u017cytkownik\u00f3w.<\/p>\n<\/blockquote>\n\n\n\n<p><strong>Moja opinia<\/strong>: Moim jedynym zastrze\u017ceniem jest u\u017cycie przez AI poj\u0119cia \u201ew\u00f3zek inwalidzki\u201d. Obecnie, <a href=\"https:\/\/dostepnosc24.pl\/jak-mowic-o-niepelnosprawnosci\/\" target=\"_blank\" aria-label=\" (opens in a new tab)\" rel=\"noreferrer noopener\" class=\"ek-link\" rel=\"nofollow\" >zgodnie z wytycznymi<\/a>, powinni\u015bmy unika\u0107 u\u017cywania tego sformu\u0142owania.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>Te okre\u015blenia s\u0105 przestarza\u0142e i cz\u0119sto nieadekwatne. Inwalid\u0105 okre\u015blano osob\u0119, kt\u00f3ra w wyniku dzia\u0142a\u0144 wojennych uleg\u0142a wypadkowi, nabywaj\u0105c tym samym niepe\u0142nosprawno\u015b\u0107. A w\u00f3zek inwalidzki s\u0142u\u017cy\u0142 do przewo\u017cenia takiej osoby.<\/p>\n<\/blockquote>\n\n\n\n<p>Na zako\u0144czenie wyobra\u017a sobie sytuacj\u0119, gdy na swojej drodze spotykasz osob\u0119 z niepe\u0142nosprawno\u015bci\u0105 s\u0142uchu i chcia\u0142by\u015b jej przekaza\u0107 wa\u017cny komunikat. Czy w zwyk\u0142ej sytuacji dnia codziennego, niezwi\u0105zanej z Internetem, ChatGPT b\u0119dzie tak\u017ce w stanie pom\u00f3c i u\u0142atwi\u0107 komunikacj\u0119?<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Pytanie 13: Jak pom\u00f3c osobie s\u0142abos\u0142ysz\u0105cej?<\/strong><\/h3>\n\n\n\n<p>Odpowied\u017a ChatGPT:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>Osobom s\u0142abo s\u0142ysz\u0105cym mo\u017cna pom\u00f3c na wiele sposob\u00f3w. Oto kilka wskaz\u00f3wek, kt\u00f3re mog\u0105 pom\u00f3c w komunikacji z osobami s\u0142abo s\u0142ysz\u0105cymi:<\/p>\n\n\n\n<ol class=\"wp-block-list\" type=\"1\">\n<li><strong>U\u017cywaj jasnego i wyra\u017anego j\u0119zyka oraz m\u00f3w wolno i wyra\u017anie<\/strong>. Zwr\u00f3\u0107 uwag\u0119 na artykulacj\u0119 i wyra\u017ano\u015b\u0107 s\u0142\u00f3w.<\/li>\n\n\n\n<li><strong>Upewnij si\u0119, \u017ce twoja twarz jest widoczna podczas rozmowy<\/strong>, a twoje usta s\u0105 dobrze o\u015bwietlone. Osoby s\u0142abo s\u0142ysz\u0105ce cz\u0119sto polegaj\u0105 na czytaniu z ruchu warg, dlatego wa\u017cne jest, aby m\u00f3c \u0142atwo obserwowa\u0107 ruchy ust rozm\u00f3wcy.<\/li>\n\n\n\n<li><strong>Unikaj m\u00f3wienia za szybko lub za g\u0142o\u015bno<\/strong>, co mo\u017ce utrudni\u0107 zrozumienie.<\/li>\n\n\n\n<li>U\u017cywaj gest\u00f3w, mimiki i innych form komunikacji niewerbalnej, aby pom\u00f3c w przekazywaniu znaczenia.<\/li>\n\n\n\n<li>Je\u015bli osoba s\u0142abo s\u0142ysz\u0105ca korzysta z aparatu s\u0142uchowego, upewnij si\u0119, \u017ce dzia\u0142a on poprawnie i jest odpowiednio dostrojony.<\/li>\n\n\n\n<li>Je\u015bli korzystasz z t\u0142umacza j\u0119zyka migowego, upewnij si\u0119, \u017ce jest on obecny na spotkaniu i jest widoczny dla osoby s\u0142abo s\u0142ysz\u0105cej.<\/li>\n\n\n\n<li><strong>Unikaj rozm\u00f3w w ha\u0142a\u015bliwych miejscach<\/strong> lub w miejscach, gdzie jest du\u017co t\u0142a d\u017awi\u0119kowego, kt\u00f3re mo\u017ce utrudni\u0107 zrozumienie.<\/li>\n\n\n\n<li>Je\u015bli korzystasz z technologii wideo lub audio, upewnij si\u0119, \u017ce jest ona odpowiednio skonfigurowana, aby umo\u017cliwi\u0107 lepsze zrozumienie dla os\u00f3b s\u0142abo s\u0142ysz\u0105cych, na przyk\u0142ad poprzez zastosowanie napis\u00f3w.<\/li>\n\n\n\n<li>Upewnij si\u0119, \u017ce masz \u015bwiadomo\u015b\u0107 potrzeb i preferencji osoby s\u0142abo s\u0142ysz\u0105cej i dostosuj swoj\u0105 komunikacj\u0119 w zale\u017cno\u015bci od sytuacji.<\/li>\n<\/ol>\n\n\n\n<p>Pami\u0119taj, \u017ce ka\u017cda osoba s\u0142abo s\u0142ysz\u0105ca ma inne potrzeby i preferencje. Dlatego wa\u017cne jest, aby zach\u0119ca\u0107 do otwartej i elastycznej komunikacji i dostosowywa\u0107 swoje zachowanie w zale\u017cno\u015bci od sytuacji.<\/p>\n<\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Z innej perspektywy<\/strong><\/h2>\n\n\n\n<p>Na koniec chcia\u0142bym zmieni\u0107 perspektyw\u0119. Powy\u017csze przyk\u0142ady dotyczy\u0142y zagadnienia, jak mo\u017cemy zwi\u0119ksza\u0107 dost\u0119pno\u015b\u0107. W artykule<a href=\"https:\/\/sii.pl\/blog\/przyklady-niezrozumienia-potrzeb-osob-z-niepelnosprawnoscia-i-jak-im-zaradzic-czesc-ii\/?category=testowanie&amp;tag=a11y,accessibility,dostepnosc,testng,testowanie,wcag,web-development\" target=\"_blank\" aria-label=\" (opens in a new tab)\" rel=\"noreferrer noopener\" class=\"ek-link\"> Przyk\u0142ady niezrozumienia potrzeb os\u00f3b z niepe\u0142nosprawno\u015bci\u0105 i jak im zaradzi\u0107. Cz\u0119\u015b\u0107 II<\/a> poruszy\u0142em w\u0105tek aplikacji By My Eyes, kt\u00f3ra pomaga osobom z niepe\u0142nosprawno\u015bci\u0105 wzorku w codziennych sytuacjach.<\/p>\n\n\n\n<p>Nasuwa si\u0119 wa\u017cne pytanie: czy tej pomocy i wsparcia mo\u017ce tak\u017ce udzieli\u0107 sztuczna inteligencja?<\/p>\n\n\n\n<p>W AppStore i Google Store aplikacja Be My Eyes jest \u201ereklamowana\u201d przyk\u0142adem u\u017cytkownika, kt\u00f3ry dzwoni do wolontariusza i udost\u0119pniaj\u0105c podgl\u0105d z kamery, pyta o kolor koszulki.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large\"><a href=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/08\/Rys-6.jpg\"><img decoding=\"async\" width=\"502\" height=\"1024\" src=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/08\/Rys-6-502x1024.jpg\" alt=\"Zdj\u0119cie reklamuj\u0105ce funkcjonalno\u015b\u0107 aplikacji By My Eyes, kt\u00f3rej dzia\u0142anie polega na tym, \u017ce wolontariusz poprzez udost\u0119pnion\u0105 kamer\u0119 wyja\u015bnia, co jest w kadrze\" class=\"wp-image-23554\" srcset=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/08\/Rys-6-502x1024.jpg 502w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/08\/Rys-6-147x300.jpg 147w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/08\/Rys-6-768x1567.jpg 768w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/08\/Rys-6-753x1536.jpg 753w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/08\/Rys-6-1003x2048.jpg 1003w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/08\/Rys-6.jpg 1051w\" sizes=\"(max-width: 502px) 100vw, 502px\" \/><\/a><figcaption class=\"wp-element-caption\">Ryc. 6 Zdj\u0119cie reklamuj\u0105ce funkcjonalno\u015b\u0107 aplikacji By My Eyes, kt\u00f3rej dzia\u0142anie polega na tym, \u017ce wolontariusz poprzez udost\u0119pnion\u0105 kamer\u0119 wyja\u015bnia, co jest w kadrze<\/figcaption><\/figure>\n\n\n\n<p>Postanowi\u0142em sprawdzi\u0107, czy w podobnym zakresie b\u0119d\u0119 m\u00f3g\u0142 liczy\u0107 na pomoc AI bez anga\u017cowania innych os\u00f3b. Przeprowadzi\u0142em test koszulkowy \ud83d\ude09<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large\"><a href=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/08\/Rys-7.png\"><img decoding=\"async\" width=\"531\" height=\"1024\" src=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/08\/Rys-7-531x1024.png\" alt=\"Odpowied\u017a aplikacji wykorzystuj\u0105cej ChatGPT, kt\u00f3ra by\u0142a w stanie ze zdj\u0119cia rozpozna\u0107 atrybuty koszulki takie jak kolor i elementy graficzne znajduj\u0105ce si\u0119 na niej\" class=\"wp-image-23557\" srcset=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/08\/Rys-7-531x1024.png 531w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/08\/Rys-7-156x300.png 156w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/08\/Rys-7-768x1481.png 768w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/08\/Rys-7-796x1536.png 796w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/08\/Rys-7-1062x2048.png 1062w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/08\/Rys-7.png 1112w\" sizes=\"(max-width: 531px) 100vw, 531px\" \/><\/a><figcaption class=\"wp-element-caption\">Ryc. 7 Odpowied\u017a aplikacji wykorzystuj\u0105cej ChatGPT, kt\u00f3ra by\u0142a w stanie ze zdj\u0119cia rozpozna\u0107 atrybuty koszulki takie jak kolor i elementy graficzne znajduj\u0105ce si\u0119 na niej<\/figcaption><\/figure>\n\n\n\n<p>Jak wida\u0107, aplikacja, kt\u00f3ra wykorzystuje ChatGPT, jest w stanie rozpozna\u0107 kolor koszulki i elementy, kt\u00f3re si\u0119 na niej znajduj\u0105.<\/p>\n\n\n\n<p>Kolejna pr\u00f3ba. Tym razem do aplikacji prze\u015bl\u0119 zdj\u0119cie koszulki, kt\u00f3r\u0105 otrzyma\u0142em w nagrod\u0119 za popularno\u015b\u0107 wpisy dotycz\u0105cego ChatGPT \ud83d\ude09 Zadanie troch\u0119 trudniejsze, poniewa\u017c koszulka zawiera tak\u017ce tekst.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large\"><a href=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/08\/Rys-8.png\"><img decoding=\"async\" width=\"473\" height=\"1024\" src=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/08\/Rys-8-473x1024.png\" alt=\"Odpowied\u017a aplikacji, kt\u00f3ra by\u0142a w stanie przeczyta\u0107 tekst na koszulce oraz poda\u0107 jej inne atrybuty, takie jak kolor\" class=\"wp-image-23559\" srcset=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/08\/Rys-8-473x1024.png 473w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/08\/Rys-8-139x300.png 139w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/08\/Rys-8-768x1662.png 768w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/08\/Rys-8-710x1536.png 710w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/08\/Rys-8-946x2048.png 946w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/08\/Rys-8.png 1170w\" sizes=\"(max-width: 473px) 100vw, 473px\" \/><\/a><figcaption class=\"wp-element-caption\">Ryc. 8 Odpowied\u017a aplikacji, kt\u00f3ra by\u0142a w stanie przeczyta\u0107 tekst na koszulce oraz poda\u0107 jej inne atrybuty, takie jak kolor<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Podsumowanie<\/strong><\/h2>\n\n\n\n<p>Uwa\u017cam, \u017ce umiej\u0119tne wdro\u017cenie sztucznej inteligencji mo\u017ce pom\u00f3c zwi\u0119kszy\u0107 dost\u0119pno\u015b\u0107 produkt\u00f3w cyfrowych oraz wesprze\u0107 osoby z niepe\u0142nosprawno\u015bci\u0105 w niekt\u00f3rych sytuacjach, np. poprzez tekstowe opisywanie zawarto\u015bci obraz\u00f3w.<\/p>\n\n\n\n<p>Jak pokaza\u0142em w artykule, sztuczna inteligencja mo\u017ce u\u0142atwi\u0107 proces tworzenia aplikacji, b\u0119d\u0105c wsparciem zar\u00f3wno dla deweloper\u00f3w jak i tester\u00f3w. Podkre\u015blam \u201ewsparciem\u201d, gdy\u017c w dalszym ci\u0105gu ze wzgl\u0119du na specyfik\u0119 odpowiedzi udzielanych przez ChatGPT, do wynik\u00f3w trzeba podchodzi\u0107 ostro\u017cnie i je weryfikowa\u0107.<\/p>\n\n\n\n<p>Dzi\u0119kuj\u0119 za uwag\u0119 i \u017cycz\u0119 mi\u0142ego dnia \ud83d\ude42<\/p>\n\n\n\n<p>***<\/p>\n\n\n\n<p>Je\u015bli interesuje Ci\u0119 obszar dost\u0119pno\u015bci, zajrzyj r\u00f3wnie\u017c <a aria-label=\"do innych artyku\u0142\u00f3w naszych ekspert\u00f3w (opens in a new tab)\" href=\"https:\/\/sii.pl\/blog\/all\/dostepnosc\/\" target=\"_blank\" rel=\"noreferrer noopener\" class=\"ek-link\">do innych artyku\u0142\u00f3w naszych ekspert\u00f3w<\/a>. <\/p>\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;23530&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;16&quot;,&quot;legendonly&quot;:&quot;&quot;,&quot;readonly&quot;:&quot;&quot;,&quot;score&quot;:&quot;4.9&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;4.9\\\/5 ( votes: 16)&quot;,&quot;size&quot;:&quot;18&quot;,&quot;title&quot;:&quot;Czy ChatGPT mo\u017ce pom\u00f3c w zapewnieniu dost\u0119pno\u015bci?&quot;,&quot;width&quot;:&quot;136.6&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: 136.6px;\">\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            4.9\/5 ( votes: 16)    <\/div>\n    <\/div>\n","protected":false},"excerpt":{"rendered":"<p>W artykule om\u00f3wi\u0119 pr\u00f3b\u0105 wykorzystania sztucznej inteligencji \u2013 szczeg\u00f3lnie ChatGPT \u2013 w kontek\u015bcie mo\u017cliwo\u015bci zwi\u0119kszania oraz poprawiania dost\u0119pno\u015bci. Temat powsta\u0142 &hellip; <a class=\"continued-btn\" href=\"https:\/\/sii.pl\/blog\/czy-chatgpt-moze-pomoc-w-zapewnieniu-dostepnosci\/\">Continued<\/a><\/p>\n","protected":false},"author":190,"featured_media":23563,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_editorskit_title_hidden":false,"_editorskit_reading_time":0,"_editorskit_is_block_options_detached":false,"_editorskit_block_options_position":"{}","inline_featured_image":false,"footnotes":""},"categories":[1316],"tags":[1116,1117,1118],"class_list":["post-23530","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-development-na-miekko","tag-accessibility","tag-dostepnosc","tag-wcag"],"acf":[],"aioseo_notices":[],"republish_history":[],"featured_media_url":"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/08\/Slajd1.jpg","category_names":["Development na mi\u0119kko"],"_links":{"self":[{"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/posts\/23530"}],"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=23530"}],"version-history":[{"count":3,"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/posts\/23530\/revisions"}],"predecessor-version":[{"id":23562,"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/posts\/23530\/revisions\/23562"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/media\/23563"}],"wp:attachment":[{"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/media?parent=23530"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/categories?post=23530"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/tags?post=23530"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}