{"id":539,"date":"2023-04-18T21:53:23","date_gmt":"2023-04-18T21:53:23","guid":{"rendered":"https:\/\/smultron.software\/wdrozenie-wcag-2-1-na-przykladzie-projektu-uczelniadostepna-pl\/"},"modified":"2024-06-13T16:59:25","modified_gmt":"2024-06-13T16:59:25","slug":"wdrozenie-wcag-2-1-na-przykladzie-projektu-uczelniadostepna-pl","status":"publish","type":"post","link":"https:\/\/smultron.software\/pl\/blog\/wdrozenie-wcag-2-1-na-przykladzie-projektu-uczelniadostepna-pl","title":{"rendered":"Wdro\u017cenie WCAG 2.1 na przyk\u0142adzie projektu uczelniadostepna.pl"},"content":{"rendered":"\n

Opracowane wytyczne WCAG 2.1 stanowi\u0105 kluczowy element w zapewnieniu dost\u0119pno\u015bci stron internetowych dla os\u00f3b z r\u00f3\u017cnymi typami niepe\u0142nosprawno\u015bci. W trakcie projektowania strony uczelniadostepna.pl stan\u0119li\u015bmy przed wyzwaniem, jakim by\u0142o zapewnienie dost\u0119pno\u015bci dla u\u017cytkownik\u00f3w z wadami wzroku, s\u0142uchu oraz ruchu. Dlatego musieli\u015bmy uwzgl\u0119dni\u0107 r\u00f3\u017cnorodne potrzeby os\u00f3b z niepe\u0142nosprawno\u015bciami i odpowiednio je dostosowa\u0107, aby strona by\u0142a dla nich \u0142atwa i intuicyjna w u\u017cytkowaniu.<\/p>\n\n\n\n

W naszej pracy przyj\u0119li\u015bmy podej\u015bcie oparte na zasadzie “dost\u0119pno\u015b\u0107 od pocz\u0105tku”<\/strong>. To znaczy, \u017ce projektowanie strony internetowej rozpocz\u0119li\u015bmy z my\u015bl\u0105 o zapewnieniu dost\u0119pno\u015bci, a nie pr\u00f3bowali\u015bmy jej dopasowa\u0107 do wytycznych WCAG 2.1<\/a> w p\u00f3\u017aniejszym etapie. Dzi\u0119ki temu uda\u0142o nam si\u0119 skutecznie zintegrowa\u0107 zasady dost\u0119pno\u015bci na ka\u017cdym etapie procesu projektowego, co pozwoli\u0142o nam osi\u0105gn\u0105\u0107 wysok\u0105 jako\u015b\u0107 dost\u0119pno\u015bci na stronie uczelniadostepna.pl<\/a>.<\/p>\n\n\n\n

Proces projektowania UX (struktura i funkcjonalno\u015bci)<\/h2>\n\n\n\n

Projektowanie UX i UI rozpocz\u0119li\u015bmy od zebrania wymaga\u0144 projektowych. Mieli\u015bmy za zadanie zrozumie\u0107 potrzeby u\u017cytkownik\u00f3w oraz cele, jakie chce osi\u0105gn\u0105\u0107 klient. Nast\u0119pnie, rozpocz\u0119li\u015bmy prac\u0119 nad koncepcj\u0105 projektow\u0105, tworz\u0105c szkice dotycz\u0105ce struktury i funkcjonalno\u015bci strony. Procesowi projektowania towarzyszy\u0142y regularne rozmowy z klientem. W trakcie tych spotka\u0144 omawiali\u015bmy post\u0119p prac, przedstawiali\u015bmy swoje koncepcje oraz uzgadniali\u015bmy kolejne kroki. Klient mia\u0142 r\u00f3wnie\u017c okazj\u0119 wyra\u017ca\u0107 swoje uwagi i sugestie odno\u015bnie projektu. Dzi\u0119ki temu, byli\u015bmy w stanie szybko reagowa\u0107 na ewentualne potrzeby klienta i dostosowywa\u0107 projekt do jego wymaga\u0144.<\/p>\n\n\n\n

Po zaprojektowaniu og\u00f3lnego kszta\u0142tu strony, zaj\u0119li\u015bmy si\u0119 projektowaniem interakcji, by u\u017cytkownik m\u00f3g\u0142 \u0142atwo porusza\u0107 si\u0119 po stronie, korzysta\u0107 z funkcjonalno\u015bci i odnale\u017a\u0107 potrzebne mu informacje. Stworzyli\u015bmy wtedy wireframe’y, czyli uproszczone schematy strony, na kt\u00f3rych zaznaczyli\u015bmy, gdzie znajduj\u0105 si\u0119 poszczeg\u00f3lne elementy interfejsu.<\/p>\n\n\n\n

Du\u017c\u0105 uwag\u0119 skupili\u015bmy na nawigacji (Kryterium sukcesu 2.4.5)<\/strong>. Menu g\u0142\u00f3wne w headerze umo\u017cliwia szybki dost\u0119p do poszczeg\u00f3lnych cz\u0119\u015bci witryny. Breadcrumbs pozwalaj\u0105 u\u017cytkownikom na \u015bledzenie swojej lokalizacji na stronie i \u0142atwe powracanie do poprzednich podstron, a sitemapa umo\u017cliwia szybkie dotarcie do r\u00f3\u017cnych sekcji witryny i zrozumienie, jak s\u0105 ze sob\u0105 powi\u0105zane.<\/p>\n\n\n\n

\"\"
Kryterium sukcesu 2.4.5 Wiele dr\u00f3g<\/figcaption><\/figure>\n\n\n\n

Natomiast powi\u0105zane wpisy umo\u017cliwiaj\u0105 u\u017cytkownikom przemieszczanie si\u0119 mi\u0119dzy podobnymi tre\u015bciami, co jest szczeg\u00f3lnie wa\u017cne dla os\u00f3b, kt\u00f3re szukaj\u0105 informacji na konkretny temat. Dzi\u0119ki temu u\u017cytkownicy mog\u0105 \u0142atwo odnale\u017a\u0107 informacje, kt\u00f3re ich interesuj\u0105, co zwi\u0119ksza u\u017cyteczno\u015b\u0107 witryny i pozytywnie wp\u0142ywa na do\u015bwiadczenie u\u017cytkownika.<\/p>\n\n\n\n

Wszystkie te drogi nawigacji s\u0105 istotne dla zapewnienia dost\u0119pno\u015bci witryny i spe\u0142niaj\u0105 wytyczne WCAG 2.1, co pozwala na jej \u0142atwe u\u017cytkowanie przez osoby z r\u00f3\u017cnymi potrzebami i umiej\u0119tno\u015bciami.<\/p>\n\n\n\n

Projektowanie UI (warstwa wizualna)<\/h2>\n\n\n\n

Nast\u0119pnie, zaj\u0119li\u015bmy si\u0119 projektowaniem wizualnym strony, opracowuj\u0105c styl, kolory, czcionki i grafik\u0119, kt\u00f3re mia\u0142y zapewni\u0107 sp\u00f3jny wygl\u0105d strony, a tak\u017ce pozytywne wra\u017cenia u\u017cytkownika i nawi\u0105zywa\u0107 do ksi\u0119gi znaku Stowarzyszenia \u201eTwoje Nowe Mo\u017cliwo\u015bci\u201d.<\/p>\n\n\n\n

Przy projektowaniu kolorystyki strony, skupili\u015bmy si\u0119 na zapewnieniu wystarczaj\u0105cego kontrastu mi\u0119dzy tekstem i elementami interfejsu a t\u0142em (Kryteria sukcesu 1.4.3, 1.4.6<\/strong>, 1.4.11)<\/strong>. Zdecydowali\u015bmy si\u0119 na kolorystyk\u0119 w odcieniach niebieskiego i bia\u0142ego. Dodatkowo jednak zapewnili\u015bmy wersje podwy\u017cszonego kontrastu.<\/p>\n\n\n\n

\"\"
Kryterium sukcesu 1.4.6 Kontrast (wzmocniony)<\/figcaption><\/figure>\n\n\n\n

Zgodnie z wytycznymi WCAG 2.1, strony internetowe powinny zapewnia\u0107 mo\u017cliwo\u015b\u0107 zwi\u0119kszenia rozmiaru tekstu bez utraty funkcjonalno\u015bci lub zawarto\u015bci. Zastosowali\u015bmy wi\u0119c elastyczne jednostki do okre\u015blania rozmiaru czcionki, dzi\u0119ki czemu u\u017cytkownicy mog\u0105 \u0142atwo powi\u0119kszy\u0107 tekst bez utraty czytelno\u015bci lub deformacji zawarto\u015bci (Kryterium sukcesu 1.4.4)<\/strong>. W widocznym miejscu umie\u015bcili\u015bmy przyciski umo\u017cliwiaj\u0105ce zwi\u0119kszenie rozmiaru tekstu, co pozwala u\u017cytkownikom na wygodne i intuicyjne dostosowanie wielko\u015bci czcionki do swoich potrzeb.<\/p>\n\n\n\n

Kodowanie interface (Front-End)<\/h2>\n\n\n\n
\n\t
\n\t\t
\n\t\t\tSzukasz do\u015bwiadczonego zespo\u0142u programistycznego? Porozmawiajmy o konkretach.\t\t<\/div>\n\t\t
\n\t\t\t\n
\n\t
\n\t\t\t\t\t\n\t\t\t<\/div>\n\t
\n\t\t
\n\t\t\t\n\t\t\t\thello@smultron.pl\t\t\t<\/a>\n\t\t<\/div>\n\t\t
\n\t\t\t\n\t\t\t\t+48 791 991 797\t\t\t<\/a>\n\t\t<\/div>\n\t<\/div>\n<\/div>\n\t\t<\/div>\n\t<\/div>\n<\/div>\n\n\n\n

Kodowanie strony pod k\u0105tem spe\u0142niania kryteri\u00f3w WCAG 2.1 wymaga\u0142o przede wszystkim skupienia si\u0119 na dobrych praktykach w zakresie tworzenia semantycznego HTML, u\u017cywania poprawnych atrybut\u00f3w, etykietowania formularzy, poprawnej nawigacji i dost\u0119pu do tre\u015bci, a tak\u017ce stosowania kontrast\u00f3w i innych wzorc\u00f3w wizualnych przyjaznych dla u\u017cytkownik\u00f3w z r\u00f3\u017cnymi dysfunkcjami wzroku.<\/p>\n\n\n\n

W celu spe\u0142nienia wymaga\u0144 standard\u00f3w dost\u0119pno\u015bci, zastosowali\u015bmy szereg dobrych praktyk programistycznych. Skupili\u015bmy si\u0119 na tworzeniu semantycznego kodu HTML, kt\u00f3ry u\u0142atwia u\u017cytkownikom nawigacj\u0119 i korzystanie ze strony. U\u017cywali\u015bmy nag\u0142\u00f3wk\u00f3w H1-H6<\/code>, kt\u00f3re pozwalaj\u0105 \u0142atwiej zorientowa\u0107 si\u0119, na jakim poziomie hierarchii znajduje si\u0119 dany fragment tekstu oraz o czym dok\u0142adnie on informuje. Ponadto zastosowali\u015bmy r\u00f3wnie\u017c wiele innych tag\u00f3w semantycznych, takich jak <header><\/code>, <nav><\/code>, <main><\/code>, <article><\/code>, czy te\u017c <footer><\/code>, aby dok\u0142adnie okre\u015bli\u0107 znaczenie element\u00f3w na stronie (Kryteria sukcesu 1.3.1,1.3.2, 2.4.6)<\/strong>.<\/p>\n\n\n\n

Dla przyk\u0142adu, nag\u0142\u00f3wek H1<\/code> powinien wyst\u0105pi\u0107 tylko raz na g\u00f3rze danej strony, zwykle w sekcji <header><\/code>, oraz powinien zawiera\u0107 nazw\u0119 strony lub temat, kt\u00f3ry jest przedmiotem strony (Kryterium sukcesu 2.4.2)<\/strong>. Pozosta\u0142e nag\u0142\u00f3wki H2-H6<\/code> powinny by\u0107 wykorzystywane w kolejno\u015bci zgodnej z hierarchi\u0105 informacji na stronie.<\/p>\n\n\n\n

Tagi <nav><\/code> zastosowali\u015bmy do okre\u015blenia obszar\u00f3w, w kt\u00f3rym znajduj\u0105 si\u0119 linki nawigacyjne, tag <main><\/code> pos\u0142u\u017cy\u0142 do oznaczenia g\u0142\u00f3wnej tre\u015bci strony, tag <article><\/code> u\u017cyli\u015bmy do oznaczenia artyku\u0142\u00f3w bloga, natomiast tag <footer><\/code> do okre\u015blenia stopki strony.<\/p>\n\n\n\n

Ponadto, zadbali\u015bmy o dodawanie opis\u00f3w alternatywnych do element\u00f3w multimedialnych, takich jak obrazy i grafiki, aby umo\u017cliwi\u0107 u\u017cytkownikom korzystanie z tre\u015bci, kt\u00f3rych nie s\u0105 w stanie zobaczy\u0107 (Kryteria sukcesu 1.1.1 i 1.4.5)<\/strong>.<\/p>\n\n\n\n

\"\"
Kryterium sukcesu 1.1.1 Tre\u015b\u0107 nietekstowa<\/figcaption><\/figure>\n\n\n\n
\"\"
Elementy dekoracyjne ignorowane przez technologie wspomagaj\u0105ce.<\/figcaption><\/figure>\n\n\n\n

U\u017cywali\u015bmy r\u00f3wnie\u017c atrybut\u00f3w formularzy, takich jak <label><\/code>, <for><\/code>, <fieldset><\/code>, <legend><\/code> , aby oznaczy\u0107 elementy formularzy i powi\u0105za\u0107 je ze swoimi etykietami, u\u0142atwiaj\u0105c u\u017cytkownikom ich wype\u0142nianie.<\/p>\n\n\n\n

W celu opisania element\u00f3w interaktywnych, takich jak przyciski i linki, u\u017cywali\u015bmy w\u0142a\u015bciwych atrybut\u00f3w, takich jak aria-label<\/code>, aria-describedby<\/code>, aria-expanded<\/code> i aria-current<\/code>.<\/p>\n\n\n\n

\"\"
Interaktywne elementy<\/figcaption><\/figure>\n\n\n\n

Zadbali\u015bmy r\u00f3wnie\u017c o odpowiedni\u0105 widoczno\u015b\u0107 i oznaczenie wybranych element\u00f3w fokusem (Kryteria sukcesu 1.4.13 i 2.4.7)<\/strong>. Dzi\u0119ki temu, korzystanie ze strony sta\u0142o si\u0119 \u0142atwiejsze i bardziej intuicyjne dla wszystkich u\u017cytkownik\u00f3w.<\/p>\n\n\n\n

\"\"
Kryterium sukcesu 2.4.7 Widoczny fokus<\/figcaption><\/figure>\n\n\n\n

Podczas tworzenia strony uczelniadostepna.pl<\/a>, zastosowali\u015bmy r\u00f3wnie\u017c szereg innych technik, kt\u00f3re mia\u0142y na celu u\u0142atwi\u0107 korzystanie z witryny. Opr\u00f3cz wcze\u015bniej wspomnianych, dodali\u015bmy tak\u017ce “Skip links” (Kryterium sukcesu 2.4.1)<\/strong>, kt\u00f3re umo\u017cliwiaj\u0105 szybkie przeskoczenie do wa\u017cnych sekcji strony oraz mechanizmy wspomagaj\u0105ce wyb\u00f3r szukanej warto\u015bci przy elementach formularza, takie jak podpowiedzi czy sugestie wprowadzania danych (Kryterium sukcesu 1.3.5 i 3.2.2)<\/strong>.<\/p>\n\n\n\n

\"\"
Kryterium sukcesu 2.4.1 Mo\u017cliwo\u015b\u0107 pomini\u0119cia blok\u00f3w<\/figcaption><\/figure>\n\n\n\n
\"\"
Kryterium sukcesu 1.3.5 Okre\u015blenie po\u017c\u0105danej warto\u015bci<\/figcaption><\/figure>\n\n\n\n

Optymalizacja<\/h2>\n\n\n\n

Jedn\u0105 z podstawowych wytycznych dotycz\u0105cych dost\u0119pno\u015bci stron internetowych jest zapewnienie, \u017ce strona b\u0119dzie odpowiednio zoptymalizowana pod k\u0105tem szybko\u015bci \u0142adowania. Dzi\u0119ki temu wszyscy u\u017cytkownicy, niezale\u017cnie od swojego po\u0142\u0105czenia internetowego czy urz\u0105dzenia, b\u0119d\u0105 mieli szybki i efektywny dost\u0119p do tre\u015bci strony.<\/p>\n\n\n\n

W celu osi\u0105gni\u0119cia jak najlepszego wyniku pod k\u0105tem szybko\u015bci \u0142adowania zastosowali\u015bmy takie techniki jak: caching, lazy loading, optymalizacja i minimalizacja kodu CSS i JavaScript, optymalizacja obraz\u00f3w, kompresja plik\u00f3w.<\/p>\n\n\n\n

\"\"
Google Lighthouse<\/figcaption><\/figure>\n\n\n\n

Testy<\/h2>\n\n\n\n

Ostatnim etapem w procesie ulepszania dost\u0119pno\u015bci strony by\u0142o przeprowadzenie test\u00f3w dost\u0119pno\u015bci, w celu weryfikacji efekt\u00f3w dzia\u0142a\u0144. Przeprowadzili\u015bmy testy z wykorzystaniem narz\u0119dzi dost\u0119pno\u015bci, takich jak Wave, W3C Markup Validation Service czy Accessibility Checker, a tak\u017ce testy manualne.<\/p>\n\n\n\n

Testy obejmowa\u0142y analiz\u0119 takich element\u00f3w jak kontrast, sp\u00f3jno\u015b\u0107 nag\u0142\u00f3wk\u00f3w, poprawno\u015b\u0107 semantyki HTML (Kryterium sukcesu 4.1.1)<\/strong> oraz dost\u0119pno\u015b\u0107 dla os\u00f3b korzystaj\u0105cych z technologii wspomagaj\u0105cych.<\/p>\n\n\n\n

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

W czasie test\u00f3w narz\u0119dziem WAVE WebAIM r\u00f3wnie\u017c nie zosta\u0142y wykryte \u017cadne b\u0142\u0119dy dotycz\u0105ce dost\u0119pno\u015bci, co oznacza, \u017ce strona w du\u017cej mierze spe\u0142nia wytyczne dost\u0119pno\u015bci WCAG 2.1.<\/p>\n\n\n\n

\"\"
WAVE (Web Accessibility Evaluation Tool)<\/figcaption><\/figure>\n\n\n\n

Podsumowanie<\/h2>\n\n\n\n

Projekt i wdro\u017cenie strony internetowej dla portalu Uczelnia Dost\u0119pna zgodnie z wytycznymi WCAG 2.1 by\u0142o dla naszej firmy wielkim wyzwaniem, ale r\u00f3wnie\u017c niezwykle satysfakcjonuj\u0105cym do\u015bwiadczeniem. Jeste\u015bmy dumni, \u017ce mogli\u015bmy przyczyni\u0107 si\u0119 do tworzenia lepszego i bardziej dost\u0119pnego internetu dla wszystkich.<\/p>\n\n\n\n

Je\u015bli chcesz dowiedzie\u0107 si\u0119 wi\u0119cej na temat tworzenia stron internetowych zgodnych z wytycznymi WCAG 2.1 zapraszamy do zapoznania si\u0119 z naszymi artyku\u0142ami WCAG 2.1 \u2013 Wprowadzenie w tematyk\u0119 dost\u0119pno\u015bci<\/a> oraz WCAG 2.1 \u2013 Skr\u00f3cony opis wytycznych dla dost\u0119pno\u015bci internetowej<\/a>.<\/p>\n\n\n\n

Natomiast je\u015bli zale\u017cy Ci na stworzeniu dost\u0119pnej strony internetowej, skontaktuj si\u0119 z nami<\/a>. Dzi\u0119ki naszemu do\u015bwiadczeniu i zaanga\u017cowaniu w projekt Uczelnia Dost\u0119pna, jeste\u015bmy w stanie Ci pom\u00f3c.<\/p>\n

\n\t
\n\t\tSkontaktuj si\u0119 z nami\t<\/div>\n\t
\n\t\t\n
\n\t
\n\t\t
\n\t\t\t\n\t\t\t
\n\t\t\t\t
Marcin Stawowiak<\/div>\n\t\t\t\t
\n\t\t\t\t\tCo-founder, Executive Manager\t\t\t\t<\/div>\n\t\t\t<\/div>\n\t\t<\/div>\n\t<\/div>\n\t
\n\t\t
\n\t\t\tSzukasz do\u015bwiadczonego zespo\u0142u programistycznego?
Porozmawiajmy o konkretach.\t\t<\/div>\n\t\t
\n\t\t\thello@smultron.pl<\/a>\n\t\t\t+48 791 991 797<\/a>\n\t\t<\/div>\n\t<\/div>\n\t
\n\t\t
\n\t\t\tSmultron Web Development\t\t<\/div>\n\t\t
\n\t\t\tul. S\u0142awkowska 12\t\t\t\n\t\t\t31-014 Krak\u00f3w\t\t<\/div>\n\t\t
\n\t\t\tNIP: 6762482785\t\t<\/div>\n\t<\/div>\n<\/div>\n\t\t\n
\n\t\n
\n

<\/p>

    <\/ul><\/div>\n
    \n
    \n<\/fieldset>\n
    \n
    \n
    \n\t\t\tWype\u0142nij poni\u017cszy formularz\n <\/div>\n
    \n
    \n