# Прављење приступачних веб страница ![Све о приступачности](../../../../translated_images/webdev101-a11y.8ef3025c858d897a403a1a42c0897c76e11b724d9a8a0c0578dd4316f7507622.sr.png) > Скетчнота од [Томоми Имура](https://twitter.com/girlie_mac) ## Квиз пре предавања [Квиз пре предавања](https://ff-quizzes.netlify.app/web/) > Снага веба је у његовој универзалности. Приступ за све, без обзира на инвалидитет, је суштински аспект. > > \- Сер Тимоти Бернерс-Ли, директор W3C и проналазач Светске мреже Ево нечега што би вас могло изненадити: када правите приступачне веб странице, не помажете само људима са инвалидитетом—заправо побољшавате веб за све! Да ли сте приметили оне рампе на угловима улица? Првобитно су дизајниране за инвалидска колица, али сада помажу људима са колицима за бебе, радницима за доставу са колицима, путницима са коферима на точковима и бициклистима. Управо тако функционише приступачан веб дизајн—решења која помажу једној групи често на крају користе свима. Баш је кул, зар не? У овом часу ћемо истражити како да креирате веб странице које заиста раде за све, без обзира на то како прегледају веб. Открићете практичне технике које су већ уграђене у веб стандарде, радити са алатима за тестирање и видети како приступачност чини ваше сајтове употребљивијим за све кориснике. До краја овог часа, имаћете самопоуздање да приступачност учините природним делом вашег развојног процеса. Спремни да истражите како промишљене дизајнерске одлуке могу отворити веб за милијарде корисника? Хајде да почнемо! > Овај час можете похађати на [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/accessibility/?WT.mc_id=academic-77807-sagibbon)! ## Разумевање помоћних технологија Пре него што пређемо на кодирање, узмимо тренутак да разумемо како људи са различитим способностима заправо доживљавају веб. Ово није само теорија—разумевање ових стварних навигационих образаца учиниће вас много бољим програмером! Помоћне технологије су невероватни алати који помажу људима са инвалидитетом да интерагују са веб страницама на начине који би вас могли изненадити. Када схватите како ове технологије функционишу, креирање приступачних веб искустава постаје много интуитивније. То је као да учите да видите свој код кроз туђе очи. ### Читачи екрана [Читачи екрана](https://en.wikipedia.org/wiki/Screen_reader) су прилично софистицирани комади технологије који претварају дигитални текст у говор или брајево писмо. Иако их углавном користе људи са оштећењем вида, они су такође веома корисни за кориснике са поремећајима учења као што је дислексија. Волим да мислим о читачу екрана као о веома паметном наратору који вам чита књигу. Чита садржај наглас у логичном редоследу, најављује интерактивне елементе као што су "дугме" или "линк" и пружа пречице на тастатури за кретање по страници. Али ево у чему је ствар—читачи екрана могу да раде своју магију само ако градимо веб странице са правилном структуром и смисленим садржајем. Ту ви као програмер ступате на сцену! **Популарни читачи екрана на различитим платформама:** - **Windows**: [NVDA](https://www.nvaccess.org/about-nvda/) (бесплатан и најпопуларнији), [JAWS](https://webaim.org/articles/jaws/), [Narrator](https://support.microsoft.com/windows/complete-guide-to-narrator-e4397a0d-ef4f-b386-d8ae-c172f109bdb1/?WT.mc_id=academic-77807-sagibbon) (уграђен) - **macOS/iOS**: [VoiceOver](https://support.apple.com/guide/voiceover/welcome/10) (уграђен и веома способан) - **Android**: [TalkBack](https://support.google.com/accessibility/android/answer/6283677) (уграђен) - **Linux**: [Orca](https://wiki.gnome.org/Projects/Orca) (бесплатан и отвореног кода) **Како читачи екрана навигирају веб садржај:** Читачи екрана пружају више метода навигације који чине прегледање ефикасним за искусне кориснике: - **Секвенцијално читање**: Чита садржај од врха до дна, као праћење књиге - **Навигација преко обележја**: Прелазак између секција странице (заглавље, навигација, главни део, подножје) - **Навигација преко наслова**: Прескакање између наслова ради разумевања структуре странице - **Листе линкова**: Генерисање листе свих линкова ради брзог приступа - **Контроле формулара**: Директна навигација између поља за унос и дугмади > 💡 **Ево нечега што ме је одушевило**: 68% корисника читача екрана навигира углавном преко наслова ([WebAIM Survey](https://webaim.org/projects/screenreadersurvey9/#finding)). То значи да је ваша структура наслова као мапа за кориснике—када је правилно урадите, буквално помажете људима да брже пронађу свој пут кроз ваш садржај! ### Изградња вашег процеса тестирања Ево добрих вести—ефикасно тестирање приступачности не мора бити преоптерећујуће! Желите да комбинујете аутоматизоване алате (они су фантастични у откривању очигледних проблема) са мало ручног тестирања. Ево систематског приступа који сам открио да хвата највише проблема без трошења целог дана: **Основни процес ручног тестирања:** ```mermaid graph TD A[Start Testing] --> B{Keyboard Navigation} B --> C[Tab through all interactive elements] C --> D{Screen Reader Testing} D --> E[Test with NVDA/VoiceOver] E --> F{Zoom Testing} F --> G[Zoom to 200% and test functionality] G --> H{Color/Contrast Check} H --> I[Verify all text meets contrast ratios] I --> J{Focus Management} J --> K[Ensure focus indicators are visible] K --> L[Testing Complete] ``` **Контролна листа за тестирање корак по корак:** 1. **Навигација тастатуром**: Користите само Tab, Shift+Tab, Enter, Space и стрелице 2. **Тестирање читача екрана**: Омогућите NVDA, VoiceOver или Narrator и навигирајте затворених очију 3. **Тестирање зума**: Тестирајте на нивоима зума од 200% и 400% 4. **Провера контраста боја**: Проверите сав текст и UI компоненте 5. **Тестирање индикатора фокуса**: Уверите се да сви интерактивни елементи имају видљиве стања фокуса ✅ **Почните са Lighthouse**: Отворите DevTools вашег претраживача, покрените Lighthouse анализу приступачности, а затим користите резултате да усмерите своје области ручног тестирања. ### Алатке за зум и увећање Знате како понекад приближавате на телефону када је текст премали или жмирите на екран лаптопа на јаком сунцу? Многи корисници се ослањају на алатке за увећање како би учинили садржај читљивим сваког дана. Ово укључује људе са слабим видом, старије особе и свакога ко је икада покушао да чита веб страницу напољу. Модерне технологије зума су еволуирале изван само увећавања. Разумевање како ове алатке функционишу помоћи ће вам да креирате одзивне дизајне који остају функционални и атрактивни на било ком нивоу увећања. **Модерне могућности зума у претраживачима:** - **Зум странице**: Пропорционално увећава сав садржај (текст, слике, распоред) - ово је пожељан метод - **Само зум текста**: Повећава величину фонта уз задржавање оригиналног распореда - **Пинч-то-зум**: Подршка за мобилне гестове за привремено увећање - **Подршка претраживача**: Сви модерни претраживачи подржавају зум до 500% без нарушавања функционалности **Специјализовани софтвер за увећање:** - **Windows**: [Magnifier](https://support.microsoft.com/windows/use-magnifier-to-make-things-on-the-screen-easier-to-see-414948ba-8b1c-d3bd-8615-0e5e32204198) (уграђен), [ZoomText](https://www.freedomscientific.com/training/zoomtext/getting-started/) - **macOS/iOS**: [Zoom](https://www.apple.com/accessibility/mac/vision/) (уграђен са напредним функцијама) > ⚠️ **Дизајнерско разматрање**: WCAG захтева да садржај остане функционалан када је увећан до 200%. На овом нивоу, хоризонтално скроловање треба да буде минимално, а сви интерактивни елементи треба да остану приступачни. ✅ **Тестирајте свој одзивни дизајн**: Увећајте претраживач на 200% и 400%. Да ли се ваш распоред лепо прилагођава? Можете ли и даље приступити свим функцијама без прекомерног скроловања? ## Модерни алати за тестирање приступачности Сада када разумете како људи навигирају веб уз помоћне технологије, хајде да истражимо алатке које вам помажу да изградите и тестирате приступачне веб странице. Размислите о овоме: аутоматизовани алати су одлични за откривање очигледних проблема (као што је недостајући alt текст), док ручно тестирање помаже да осигурате да ваша страница буде пријатна за коришћење у стварном свету. Заједно, они вам пружају сигурност да ваше странице раде за све. ### Тестирање контраста боја Ево добрих вести: контраст боја је један од најчешћих проблема приступачности, али је такође један од најлакших за решавање. Добар контраст користи свима—од корисника са оштећењем вида до људи који покушавају да читају телефон на плажи. **WCAG захтеви за контраст:** | Тип текста | WCAG AA (минимум) | WCAG AAA (побољшано) | |------------|--------------------|----------------------| | **Обичан текст** (испод 18pt) | Однос контраста 4.5:1 | Однос контраста 7:1 | | **Велики текст** (18pt+ или 14pt+ bold) | Однос контраста 3:1 | Однос контраста 4.5:1 | | **UI компоненте** (дугмад, оквири формулара) | Однос контраста 3:1 | Однос контраста 3:1 | **Основни алати за тестирање:** - [Colour Contrast Analyser](https://www.tpgi.com/color-contrast-checker/) - Десктоп апликација са алатком за избор боја - [WebAIM Contrast Checker](https://webaim.org/resources/contrastchecker/) - Веб-базирано са тренутним повратним информацијама - [Stark](https://www.getstark.co/) - Додатак за алате за дизајн као што су Figma, Sketch, Adobe XD - [Accessible Colors](https://accessible-colors.com/) - Проналажење приступачних палета боја ✅ **Изградите боље палете боја**: Почните са бојама вашег бренда и користите проверу контраста да креирате приступачне варијације. Документујте их као приступачне боје у вашем дизајнерском систему. ### Свеобухватно тестирање приступачности Најефикасније тестирање приступачности комбинује више приступа. Ниједан алат не хвата све, па изградња рутине тестирања са различитим методама осигурава темељну покривеност. **Тестирање у претраживачу (уграђено у DevTools):** - **Chrome/Edge**: Lighthouse анализа приступачности + панел приступачности - **Firefox**: Инспектор приступачности са детаљним приказом стабла - **Safari**: Таб за анализу у Web Inspector-у са симулацијом VoiceOver-а **Професионални додатци за тестирање:** - [axe DevTools](https://www.deque.com/axe/devtools/) - Индустријски стандард за аутоматизовано тестирање - [WAVE](https://wave.webaim.org/extension/) - Визуелне повратне информације са истакнутим грешкама - [Accessibility Insights](https://accessibilityinsights.io/) - Microsoft-ов свеобухватни пакет за тестирање **Командна линија и интеграција у CI/CD:** - [axe-core](https://github.com/dequelabs/axe-core) - JavaScript библиотека за аутоматизовано тестирање - [Pa11y](https://pa11y.org/) - Алат за тестирање приступачности преко командне линије - [Lighthouse CI](https://github.com/GoogleChrome/lighthouse-ci) - Аутоматизовано оцењивање приступачности > 🎯 **Циљ тестирања**: Циљајте на Lighthouse оцену приступачности од 95+ као ваш основни стандард. Запамтите, аутоматизовани алати хватају само око 30-40% проблема приступачности—ручна тестирања су и даље неопходна! ## Изградња приступачности од самог почетка Кључ успеха у приступачности је да је уградите у своје основе од првог дана. Знам да је примамљиво мислити "Додаћу приступачност касније," али то је као да покушавате да додате рампу кући након што је већ изграђена. Могуће? Да. Лако? Не баш. Размислите о приступачности као о планирању куће—много је лакше укључити приступачност за инвалидска колица у ваше почетне архитектонске планове него све накнадно прилагођавати. ### Принципи POUR: Ваша основа за приступачност Смернице за приступачност веб садржаја (WCAG) су изграђене око четири основна принципа који чине POUR. Не брините—ово нису суви академски концепти! Они су заправо практичне смернице за прављење садржаја који ради за све. Када схватите POUR, доношење одлука о приступачности постаје много интуитивније. То је као да имате менталну контролну листу која води ваше дизајнерске изборе. Хајде да их разложимо: **🔍 Перцептивно**: Информације морају бити представљене на начине које корисници могу да перципирају кроз своја доступна чула - Обезбедите текстуалне алтернативе за нетекстуални садржај (слике, видео, аудио) - Осигурајте довољан контраст боја за сав текст и UI компоненте - Понудите титлове и транскрипте за мултимедијални садржај - Дизајнирајте садржај који остаје функционалан када се увећа до 200% - Користите више сензорних карактеристика (не само боју) за пренос информација **🎮 Оперативно**: Сви интерфејсни елементи морају бити оперативни кроз доступне методе уноса - Учини све функције доступним преко навигације Boja je moćan alat za komunikaciju, ali nikada ne bi trebalo da bude jedini način prenosa važnih informacija. Dizajniranje izvan boje stvara robusnija i inkluzivnija iskustva koja funkcionišu u različitim situacijama. **Dizajnirajte za razlike u percepciji boja:** Otprilike 8% muškaraca i 0,5% žena ima neki oblik razlike u percepciji boja (često nazvano "daltonizam"). Najčešći tipovi su: - **Deuteranopija**: Teškoće u razlikovanju crvene i zelene boje - **Protanopija**: Crvena boja izgleda tamnije - **Tritanopija**: Teškoće sa plavom i žutom bojom (retko) **Strategije za inkluzivnu upotrebu boja:** ```css /* ❌ Bad: Using only color to indicate status */ .error { color: red; } .success { color: green; } /* ✅ Good: Color plus icons and context */ .error { color: #d32f2f; border-left: 4px solid #d32f2f; } .error::before { content: "⚠️"; margin-right: 8px; } .success { color: #2e7d32; border-left: 4px solid #2e7d32; } .success::before { content: "✅"; margin-right: 8px; } ``` **Iznad osnovnih zahteva za kontrast:** - Testirajte svoje izbore boja pomoću simulatora za daltonizam - Koristite šare, teksture ili oblike uz kodiranje boja - Osigurajte da interaktivna stanja ostanu prepoznatljiva bez boje - Razmotrite kako vaš dizajn izgleda u režimu visokog kontrasta ✅ **Testirajte pristupačnost boja**: Koristite alate poput [Coblis](https://www.color-blindness.com/coblis-color-blindness-simulator/) da vidite kako vaša stranica izgleda korisnicima sa različitim vrstama percepcije boja. ### Indikatori fokusa i dizajn interakcije Indikatori fokusa su digitalni ekvivalent kursora—pokazuju korisnicima tastature gde se nalaze na stranici. Dobro dizajnirani indikatori fokusa poboljšavaju iskustvo za sve, čineći interakcije jasnim i predvidivim. **Najbolje prakse za moderne indikatore fokusa:** ```css /* Enhanced focus styles that work across browsers */ button:focus-visible { outline: 2px solid #0066cc; outline-offset: 2px; box-shadow: 0 0 0 4px rgba(0, 102, 204, 0.25); } /* Remove focus outline for mouse users, preserve for keyboard users */ button:focus:not(:focus-visible) { outline: none; } /* Focus-within for complex components */ .card:focus-within { box-shadow: 0 0 0 3px rgba(74, 144, 164, 0.5); border-color: #4A90A4; } /* Ensure focus indicators meet contrast requirements */ .custom-focus:focus-visible { outline: 3px solid #ffffff; outline-offset: 2px; box-shadow: 0 0 0 6px #000000; } ``` **Zahtevi za indikatore fokusa:** - **Vidljivost**: Moraju imati kontrastni odnos od najmanje 3:1 u odnosu na okolne elemente - **Širina**: Minimalna debljina od 2px oko celog elementa - **Postojanost**: Trebalo bi da ostanu vidljivi dok se fokus ne pomeri na drugo mesto - **Razlikovanje**: Moraju biti vizuelno različiti od drugih stanja korisničkog interfejsa > 💡 **Savjet za dizajn**: Odlični indikatori fokusa često koriste kombinaciju obrisa, senke okvira i promene boje kako bi osigurali vidljivost na različitim pozadinama i u različitim kontekstima. ✅ **Proverite indikatore fokusa**: Prođite kroz svoju veb stranicu koristeći taster Tab i zabeležite koji elementi imaju jasne indikatore fokusa. Da li su neki teško vidljivi ili potpuno nedostaju? ### Semantički HTML: Osnova pristupačnosti Semantički HTML je kao da asistivnim tehnologijama dajete GPS sistem za vašu veb stranicu. Kada koristite prave HTML elemente za njihovu namenu, u suštini pružate čitačima ekrana, tastaturama i drugim alatima detaljnu mapu koja pomaže korisnicima da se efikasno kreću. Evo analogije koja mi je zaista pomogla da shvatim: semantički HTML je razlika između dobro organizovane biblioteke sa jasnim kategorijama i korisnim oznakama i skladišta gde su knjige nasumično razbacane. Na oba mesta se nalaze iste knjige, ali gde biste radije pokušali da pronađete nešto? Upravo tako! **Osnovni elementi strukture pristupačne stranice:** ```html

Your Site Name

Article Title

Published on

First Section

Content that relates to this section...

Second Section

More related content...

``` **Zašto semantički HTML transformiše pristupačnost:** | Semantički element | Namena | Prednost za čitače ekrana | |--------------------|--------|--------------------------| | `
` | Zaglavlje stranice ili sekcije | "Banner landmark" - brzo navigiranje do vrha | | `