<!--
CO_OP_TRANSLATOR_METADATA:
{
  "original_hash": "e4cd5b1faed4adab5acf720f82798003",
  "translation_date": "2025-08-28T08:27:52+00:00",
  "source_file": "1-getting-started-lessons/3-accessibility/README.md",
  "language_code": "bg"
}
-->
# Създаване на достъпни уеб страници

![Всичко за достъпността](../../../../translated_images/webdev101-a11y.8ef3025c858d897a403a1a42c0897c76e11b724d9a8a0c0578dd4316f7507622.bg.png)  
> Скетч от [Tomomi Imura](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 за повече информация.

> **NOTE** Както ще прочетете, никога не трябва да създавате връзки, които изглеждат като горните примери.

Запомнете, четците на екрана са различен интерфейс от браузърите с различен набор от функции.

### Проблемът с използването на URL

Четците на екрана четат текста. Ако URL се появи в текста, четецът на екрана ще прочете URL. Като цяло, URL не предава значима информация и може да звучи досадно. Може би сте изпитали това, ако телефонът ви някога е прочел на глас текстово съобщение с URL.

### Проблемът с "щракнете тук"

Четците на екрана също имат способността да четат само хипервръзките на страница, подобно на начина, по който човек с добро зрение би сканирал страница за връзки. Ако текстът на връзката винаги е "щракнете тук", потребителят ще чуе само "щракнете тук, щракнете тук, щракнете тук, щракнете тук, щракнете тук, ..." Всички връзки стават неразличими една от друга.

### Добър текст на връзките

Добър текст на връзките накратко описва какво има от другата страна на връзката. В горния пример за малките пингвини, връзката е към страницата в Wikipedia за вида. Фразата *малки пингвини* би била перфектен текст за връзка, тъй като ясно показва какво ще научи някой, ако щракне върху връзката - малки пингвини.

> [Малкият пингвин](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 поддържа набор от атрибути, известни като [Достъпни богати интернет приложения (ARIA)](https://developer.mozilla.org/docs/Web/Accessibility/ARIA). Тези атрибути ви позволяват да предоставите допълнителна информация на четците на екрана.

> **NOTE**: Както много аспекти на 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

---

**Отказ от отговорност**:  
Този документ е преведен с помощта на AI услуга за превод [Co-op Translator](https://github.com/Azure/co-op-translator). Въпреки че се стремим към точност, моля, имайте предвид, че автоматичните преводи може да съдържат грешки или неточности. Оригиналният документ на неговия изходен език трябва да се счита за авторитетен източник. За критична информация се препоръчва професионален превод от човек. Ние не носим отговорност за каквито и да е недоразумения или погрешни интерпретации, произтичащи от използването на този превод.