|
|
<!--
|
|
|
CO_OP_TRANSLATOR_METADATA:
|
|
|
{
|
|
|
"original_hash": "e4cd5b1faed4adab5acf720f82798003",
|
|
|
"translation_date": "2025-08-28T10:33:31+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/quiz/5)
|
|
|
|
|
|
> Моћ Веба је у његовој универзалности. Приступ за све, без обзира на инвалидитет, је суштински аспект.
|
|
|
>
|
|
|
> \- Сер Тимоти Бернерс-Ли, директор 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 текст. Дакле, још једном, осигуравање да је ваша страница приступачна пружа додатне бонусе!
|
|
|
|
|
|
## Тастатура
|
|
|
|
|
|
Неки корисници нису у могућности да користе миш или тачпед, већ се ослањају на интеракције са тастатуром како би прелазили са једног елемента на други. Важно је да ваш веб сајт представи ваш садржај у логичном редоследу како би корисник тастатуре могао да приступи сваком интерактивном елементу док се к
|
|
|
Многе владе имају законе који се односе на захтеве приступачности. Информишите се о законима о приступачности у вашој земљи. Шта је обухваћено, а шта није? Пример је [ова владина веб страница](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). Иако се трудимо да обезбедимо тачност, молимо вас да имате у виду да аутоматски преводи могу садржати грешке или нетачности. Оригинални документ на његовом изворном језику треба сматрати меродавним извором. За критичне информације препоручује се професионални превод од стране људи. Не преузимамо одговорност за било каква погрешна тумачења или неспоразуме који могу настати услед коришћења овог превода. |
