|
|
<!--
|
|
|
CO_OP_TRANSLATOR_METADATA:
|
|
|
{
|
|
|
"original_hash": "f0c88c3e2cefa8952d356f802b1e47ca",
|
|
|
"translation_date": "2025-08-29T12:22:57+00:00",
|
|
|
"source_file": "1-getting-started-lessons/3-accessibility/README.md",
|
|
|
"language_code": "sr"
|
|
|
}
|
|
|
-->
|
|
|
# Прављење приступачних веб страница
|
|
|
|
|
|
|
|
|
> Скетч од [Томоми Имура](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) су уобичајени клијенти за особе са оштећењем вида. Док проводимо време осигуравајући да прегледач правилно преноси информације које желимо да поделимо, морамо такође осигурати да читач екрана ради исто.
|
|
|
|
|
|
Најосновније, читач екрана ће звучно читати страницу од врха до дна. Ако је ваша страница само текст, читач ће пренети информације на сличан начин као прегледач. Наравно, веб странице ретко садрже само текст; оне ће садржати линкове, графику, боје и друге визуелне компоненте. Потребно је водити рачуна да ове информације буду правилно прочитане од стране читача екрана.
|
|
|
|
|
|
Сваки веб програмер треба да се упозна са читачем екрана. Као што је горе истакнуто, то је клијент који ће ваши корисници користити. На исти начин на који сте упознати са радом прегледача, требало би да научите како функционише читач екрана. Срећом, читачи екрана су уграђени у већину оперативних система.
|
|
|
|
|
|
Неки прегледачи такође имају уграђене алате и екстензије који могу читати текст наглас или чак пружити неке основне навигационе функције, као што су [ови алати за приступачност у Edge прегледачу](https://support.microsoft.com/help/4000734/microsoft-edge-accessibility-features). Ово су такође важни алати за приступачност, али функционишу веома другачије од читача екрана и не треба их мешати са алатима за тестирање читача екрана.
|
|
|
|
|
|
✅ Испробајте читач екрана и читач текста у прегледачу. На Windows-у је подразумевано укључен [Narrator](https://support.microsoft.com/windows/complete-guide-to-narrator-e4397a0d-ef4f-b386-d8ae-c172f109bdb1/?WT.mc_id=academic-77807-sagibbon), а могу се инсталирати и [JAWS](https://webaim.org/articles/jaws/) и [NVDA](https://www.nvaccess.org/about-nvda/). На macOS-у и iOS-у подразумевано је инсталиран [VoiceOver](https://support.apple.com/guide/voiceover/welcome/10).
|
|
|
|
|
|
### Зумирање
|
|
|
|
|
|
Још један алат који често користе особе са оштећењем вида је зумирање. Најосновнији тип зумирања је статичко зумирање, које се контролише преко `Control + плус знак (+)` или смањењем резолуције екрана. Овај тип зумирања узрокује да се цела страница промени величину, па је коришћење [одзивног дизајна](https://developer.mozilla.org/docs/Learn/CSS/CSS_layout/Responsive_Design) важно за пружање доброг корисничког искуства на повећаним нивоима зумирања.
|
|
|
|
|
|
Други тип зумирања ослања се на специјализовани софтвер за увећање једног дела екрана и померање, слично као коришћење праве лупе. На 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 провера контраста боја](https://microsoftedge.microsoft.com/addons/detail/wcag-color-contrast-check/idahaggnlnekelhgplklhfpchbfdmkjp?hl=en-US&WT.mc_id=academic-77807-sagibbon). Шта сте научили?
|
|
|
|
|
|
### Lighthouse
|
|
|
|
|
|
У области алата за програмере вашег прегледача, наћи ћете алат Lighthouse. Овај алат је важан за добијање првог увида у приступачност (као и друге анализе) веб странице. Иако је важно не ослањати се искључиво на Lighthouse, резултат од 100% је веома користан као основа.
|
|
|
|
|
|
✅ Пронађите Lighthouse у панелу алата за програмере вашег прегледача и покрените анализу било које странице. Шта сте открили?
|
|
|
|
|
|
## Дизајнирање за приступачност
|
|
|
|
|
|
Приступачност је релативно велика тема. Да бисмо вам помогли, доступни су бројни ресурси.
|
|
|
|
|
|
- [Accessible U - Универзитет Минесоте](https://accessibility.umn.edu/your-role/web-developers)
|
|
|
|
|
|
Иако нећемо моћи да покријемо сваки аспект креирања приступачних страница, у наставку су неки од основних принципа које ћете желети да примените. Дизајнирање приступачне странице од самог почетка је **увек** лакше него враћање на постојећу страницу како би се учинила приступачном.
|
|
|
|
|
|
## Добри принципи приказа
|
|
|
|
|
|
### Палете боја које су безбедне за коришћење
|
|
|
|
|
|
Људи виде свет на различите начине, а то укључује и боје. Када бирате шему боја за вашу страницу, требало би да осигурате да је приступачна за све. Један одличан [алат за генерисање палета боја је Color Safe](http://colorsafe.co/).
|
|
|
|
|
|
✅ Идентификујте веб страницу која је веома проблематична у коришћењу боја. Зашто?
|
|
|
|
|
|
### Користите исправан HTML
|
|
|
|
|
|
Са CSS-ом и JavaScript-ом могуће је учинити да било који елемент изгледа као било која врста контроле. `<span>` се може користити за креирање `<button>`, а `<b>` може постати хипервеза. Иако се ово може сматрати лакшим за стилизовање, не преноси ништа читачу екрана. Користите одговарајући HTML када креирате контроле на страници. Ако желите хипервезу, користите `<a>`. Коришћење исправног HTML-а за одговарајућу контролу назива се коришћење семантичког HTML-а.
|
|
|
|
|
|
✅ Идите на било коју веб страницу и проверите да ли дизајнери и програмери правилно користе HTML. Можете ли пронаћи дугме које би требало да буде линк? Савет: десним кликом изаберите 'View Page Source' у вашем прегледачу да бисте погледали основни код.
|
|
|
|
|
|
### Креирајте описну хијерархију наслова
|
|
|
|
|
|
Корисници читача екрана [веома се ослањају на наслове](https://webaim.org/projects/screenreadersurvey8/#finding) како би пронашли информације и навигирали кроз страницу. Писање описног садржаја наслова и коришћење семантичких ознака за наслове су важни за креирање лако навигабилне странице за кориснике читача екрана.
|
|
|
|
|
|
### Користите добре визуелне трагове
|
|
|
|
|
|
CSS нуди потпуну контролу над изгледом било ког елемента на страници. Можете креирати текстуалне оквире без оквира или хипервезе без подвлачења. Нажалост, уклањање тих трагова може отежати некоме ко зависи од њих да препозна врсту контроле.
|
|
|
|
|
|
## Важност текста линкова
|
|
|
|
|
|
Хипервезе су основа за навигацију интернетом. Као резултат, осигуравање да читач екрана може правилно читати линкове омогућава свим корисницима да навигирају вашу страницу.
|
|
|
|
|
|
### Читачи екрана и линкови
|
|
|
|
|
|
Као што бисте очекивали, читачи екрана читају текст линкова на исти начин на који би читали било који други текст на страници. Узимајући то у обзир, текст приказан у наставку може изгледати потпуно прихватљиво.
|
|
|
|
|
|
> Мали пингвин, понекад познат као вилински пингвин, је најмањи пингвин на свету. [Кликните овде](https://en.wikipedia.org/wiki/Little_penguin) за више информација.
|
|
|
|
|
|
> Мали пингвин, понекад познат као вилински пингвин, је најмањи пингвин на свету. Посетите https://en.wikipedia.org/wiki/Little_penguin за више информација.
|
|
|
|
|
|
> **НАПОМЕНА** Као што ћете ускоро прочитати, никада не би требало да креирате линкове који изгледају као горе наведени.
|
|
|
|
|
|
Запамтите, читачи екрана су другачији интерфејс од прегледача са другачијим скупом функција.
|
|
|
|
|
|
### Проблем са коришћењем URL-а
|
|
|
|
|
|
Читачи екрана читају текст. Ако се URL појави у тексту, читач екрана ће прочитати URL. Генерално говорећи, URL не преноси значајне информације и може звучати досадно. Можда сте ово искусили ако вам је телефон икада звучно прочитао текстуалну поруку са URL-ом.
|
|
|
|
|
|
### Проблем са "кликните овде"
|
|
|
|
|
|
Читачи екрана такође имају могућност да читају само хипервезе на страници, слично као што би особа са видом прегледала страницу тражећи линкове. Ако је текст линкова увек "кликните овде", све што ће корисник чути је "кликните овде, кликните овде, кликните овде, кликните овде, кликните овде, ..." Сви линкови сада постају неразлучиви један од другог.
|
|
|
|
|
|
### Добар текст линкова
|
|
|
|
|
|
Добар текст линкова укратко описује шта се налази са друге стране линка. У горе наведеном примеру који говори о малим пингвинима, линк води до Википедијине странице о тој врсти. Фраза *мали пингвини* била би савршен текст линка јер јасно указује шта ће неко сазнати ако кликне на линк - мали пингвини.
|
|
|
|
|
|
> [Мали пингвин](https://en.wikipedia.org/wiki/Little_penguin), понекад познат као вилински пингвин, је најмањи пингвин на свету.
|
|
|
|
|
|
✅ Претражујте интернет неколико минута да бисте пронашли странице које користе нејасне стратегије линковања. Упоредите их са другим, боље линкованим страницама. Шта сте научили?
|
|
|
|
|
|
#### Напомене за претраживаче
|
|
|
|
|
|
Као додатни бонус за осигуравање да је ваша страница приступачна за све, помоћи ћете претраживачима да навигирају вашу страницу. Претраживачи користе текст линкова да би сазнали теме страница. Дакле, коришћење доброг текста линкова помаже свима!
|
|
|
|
|
|
### ARIA
|
|
|
|
|
|
Замислите следећу страницу:
|
|
|
|
|
|
| Производ | Опис | Наручи |
|
|
|
| ------------- | ----------------- | ------------- |
|
|
|
| Џиџа | [Опис](../../../../1-getting-started-lessons/3-accessibility/') | [Наручи](../../../../1-getting-started-lessons/3-accessibility/') |
|
|
|
| Супер џиџа | [Опис](../../../../1-getting-started-lessons/3-accessibility/') | [Наручи](../../../../1-getting-started-lessons/3-accessibility/') |
|
|
|
|
|
|
У овом примеру, дуплирање текста за опис и наручивање има смисла за некога ко користи прегледач. Међутим, неко ко користи читач екрана чуо би само речи *опис* и *наручи* поновљене без контекста.
|
|
|
|
|
|
Да би се подржали овакви сценарији, HTML подржава скуп атрибута познатих као [Accessible Rich Internet Applications (ARIA)](https://developer.mozilla.org/docs/Web/Accessibility/ARIA). Ови атрибути вам омогућавају да пружите додатне информације читачима екрана.
|
|
|
|
|
|
> **НАПОМЕНА**: Као и многи аспекти HTML-а, подршка прегледача и читача екрана може варирати. Међутим, већина главних клијената подржава ARIA атрибуте.
|
|
|
|
|
|
Можете користити `aria-label` да опишете линк када формат странице то не дозвољава. Опис за џиџу могао би бити постављен као
|
|
|
|
|
|
``` html
|
|
|
<a href="#" aria-label="Widget description">description</a>
|
|
|
```
|
|
|
|
|
|
✅ Уопштено, коришћење семантичког обележавања као што је горе описано има предност у односу на коришћење ARIA, али понекад не постоји семантички еквивалент за различите HTML видгете. Добар пример је стабло. Не постоји HTML еквивалент за стабло, па идентификујете генерички `<div>` за овај елемент са одговарајућом улогом и ARIA вредностима. [MDN документација о ARIA](https://developer.mozilla.org/docs/Web/Accessibility/ARIA) садржи више корисних информација.
|
|
|
|
|
|
```html
|
|
|
<h2 id="tree-label">File Viewer</h2>
|
|
|
<div role="tree" aria-labelledby="tree-label">
|
|
|
<div role="treeitem" aria-expanded="false" tabindex="0">Uploads</div>
|
|
|
</div>
|
|
|
```
|
|
|
|
|
|
## Слике
|
|
|
|
|
|
Подразумева се да читачи екрана нису у могућности да аутоматски прочитају шта се налази на слици. Осигуравање да су слике приступачне не захтева много рада - за то служи `alt` атрибут. Све значајне слике треба да имају `alt` који описује шта су.
|
|
|
Слике које су искључиво декоративне треба да имају свој `alt` атрибут постављен на празан стринг: `alt=""`. Ово спречава читаче екрана да непотребно најављују декоративну слику.
|
|
|
|
|
|
✅ Као што бисте очекивали, претраживачи такође нису у могућности да разумеју шта се налази на слици. Они такође користе alt текст. Дакле, као и увек, осигуравање да је ваша страница приступачна пружа додатне бонусе!
|
|
|
|
|
|
## Тастатура
|
|
|
|
|
|
Неки корисници нису у могућности да користе миш или тачпед, већ се ослањају на интеракције са тастатуром како би прелазили са једног елемента на други. Важно је да ваша веб страница представи ваш садржај у логичном редоследу како би корисник тастатуре могао приступити сваком интерактивном елементу док се креће низ документ. Ако градите своје веб странице са семантичким обележавањем и користите CSS за стилизовање њих
|
|
|
Многе владе имају законе који се односе на захтеве приступачности. Информишите се о законима о приступачности у вашој земљи. Шта је обухваћено, а шта није? Пример је [ова владина веб страница](https://accessibility.blog.gov.uk/).
|
|
|
|
|
|
## Задатак
|
|
|
|
|
|
[Анализирајте веб страницу која није приступачна](assignment.md)
|
|
|
|
|
|
Заслуге: [Turtle Ipsum](https://github.com/Instrument/semantic-html-sample) од Instrument
|
|
|
|
|
|
---
|
|
|
|
|
|
**Одрицање од одговорности**:
|
|
|
Овај документ је преведен коришћењем услуге за превођење помоћу вештачке интелигенције [Co-op Translator](https://github.com/Azure/co-op-translator). Иако настојимо да обезбедимо тачност, молимо вас да имате у виду да аутоматски преводи могу садржати грешке или нетачности. Оригинални документ на изворном језику треба сматрати ауторитативним извором. За критичне информације препоручује се професионални превод од стране људи. Не сносимо одговорност за било каква погрешна тумачења или неспоразуме који могу произаћи из коришћења овог превода. |
