<!--
CO_OP_TRANSLATOR_METADATA:
{
  "original_hash": "f0c88c3e2cefa8952d356f802b1e47ca",
  "translation_date": "2025-08-29T09:41:52+00:00",
  "source_file": "1-getting-started-lessons/3-accessibility/README.md",
  "language_code": "uk"
}
-->
# Створення доступних вебсторінок

![Все про доступність](../../../../translated_images/webdev101-a11y.8ef3025c858d897a403a1a42c0897c76e11b724d9a8a0c0578dd4316f7507622.uk.png)
> Скетчнот від [Tomomi Imura](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 правильно. Чи можете ви знайти кнопку, яка повинна бути посиланням? Підказка: клацніть правою кнопкою миші та виберіть "Переглянути вихідний код сторінки" у вашому браузері, щоб переглянути основний код.

### Створюйте описову ієрархію заголовків

Користувачі екранних читачів [дуже покладаються на заголовки](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.

### Проблема з "натисніть тут"

Екранні читачі також мають можливість читати лише гіперпосилання на сторінці, так само, як людина з нормальним зором сканує сторінку в пошуках посилань. Якщо текст посилання завжди "натисніть тут", користувач почує лише "натисніть тут, натисніть тут, натисніть тут, натисніть тут, натисніть тут, ...". Усі посилання тепер не відрізняються одне від одного.

### Хороший текст посилання

Хороший текст посилання коротко описує, що знаходиться за посиланням. У наведеному вище прикладі про малих пінгвінів посилання веде на сторінку Вікіпедії про цей вид. Фраза *малий пінгвін* була б ідеальним текстом посилання, оскільки вона чітко вказує, що дізнається користувач, якщо натисне на посилання — про малих пінгвінів.

> [Малий пінгвін](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`. Тому, знову ж таки, забезпечення доступності вашої сторінки приносить додаткові бонуси!

## Клавіатура

Деякі користувачі не можуть використовувати мишу або трекпад, натомість покладаючись на взаємодію з клавіатурою, щоб переходити від одного елемента до іншого. Важливо, щоб ваш вебсайт представляв ваш контент у логічному порядку, щоб користувач клавіатури міг отримати доступ до кожного інтерактивного елемента, рухаючись вниз по документу. Якщо ви створюєте свої вебсторінки з семантичною розміткою та використовуєте 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). Хоча ми прагнемо до точності, зверніть увагу, що автоматичні переклади можуть містити помилки або неточності. Оригінальний документ мовою оригіналу слід вважати авторитетним джерелом. Для критично важливої інформації рекомендується професійний людський переклад. Ми не несемо відповідальності за будь-які непорозуміння або неправильні тлумачення, що виникли внаслідок використання цього перекладу.