Please note: the demo pages are automatic translations. Sa11y (the interface) was professionally translated only. You can improve the translation with a pull request.

## Все

Ну майже все. Просто сторінка з великою кількістю помилок і попереджень. 🤠

На цій сторінці: Заголовки Зображення Посилання Таблиці Інші питання

## Заголовки

### Порожні заголовки

###

### Навмисно прихований заголовок

### Пропущені заголовки

##### Це має бути заголовок 4!

### Занадто довгі заголовки

#### Чи справді заголовок є заголовком, якщо це довге речення? Або автор контенту просто шукає візуальну естетику? Заголовки довше 160 символів будуть позначені як попередження.

### Блокові лапки використовуються як заголовки

Якщо блокова цитата містить менше 25 символів, вона буде позначена як попередження.

> Про команду

> «Бути чи не бути, ось в чому питання».

### Порожній заголовок містить декоративне зображення

####

### Заголовок містить зображення без альтернативного тексту

####

### Заголовок містить зображення з альтернативним текстом

####

### Як заголовок використовується жирний текст

Шукаю`<p><strong>Some text</strong></p>`

Про нас

Сам біль - це любов до болю, головні екологічні проблеми, але я даю такий час, щоб впасти, щоб якийсь великий біль і біль. Елітний смуток У статті також був вибір шоколаду, а не основний. Життєвий стрес – результат мультфільму. Egestas Macenas сагайдак, щоб придушити хворобу лева.

Це не слід позначати, оскільки він довгий і необов’язково заголовок. Це може бути просто великий блок жирного тексту. Він налічує понад 120 символів.

Сам біль - це любов до болю, головні екологічні проблеми, але я даю такий час, щоб впасти, щоб якийсь великий біль і біль. Елітний смуток У статті також був вибір шоколаду, а не основний. Життєвий стрес – результат мультфільму. Egestas Macenas сагайдак, щоб придушити хворобу лева.

### Як заголовок використовується жирний текст із розривами рядків

Шукаю щось на кшталт... Ця перевірка була розроблена таким чином, щоб вона була дещо поблажливою, щоб запобігти надмірній кількості попереджень. `<p><strong>Fake heading<br></strong> Followed by some text.</p>`

#### УВАГА

Це буде позначено прапорцем!
Тому що це досить змістовний абзац. Сам біль - це любов до болю, головні екологічні проблеми, але я даю такий час, щоб впасти, щоб якийсь великий біль і біль. Елітний смуток Сам біль - це любов до болю, головні екологічні проблеми, але я даю такий час, щоб впасти, щоб якийсь великий біль і біль. Елітний смуток У статті також був вибір шоколаду, а не основний. Життєвий стрес – результат мультфільму. Egestas Macenas сагайдак, щоб придушити хворобу лева.

#### Пас

Про нас
Не буде позначено, оскільки це невеликий абзац. Сам біль - це любов до болю, головні екологічні проблеми, але я даю такий час, щоб впасти, щоб якийсь великий біль і біль. Елітний смуток

Адреса
105 Bond Street
Toronto, ON
M5B 2K3

Це також не буде позначено, оскільки цей напівжирний текст довгий і не обов’язково є заголовком. Це може бути просто великий блок жирного тексту. Він налічує понад 120 символів.
Сам біль - це любов до болю, головні екологічні проблеми, але я даю такий час, щоб впасти, щоб якийсь великий біль і біль. Елітний смуток Сам біль - це любов до болю, головні екологічні проблеми, але я даю такий час, щоб впасти, щоб якийсь великий біль і біль. Елітний смуток У статті також був вибір шоколаду, а не основний. Життєвий стрес – результат мультфільму. Egestas Macenas сагайдак, щоб придушити хворобу лева.

## Зображення

### Зображення без посилань

#### Пас

1. Зображення має альтернативний текст.

#### Попередження

2: Альтернативний текст містить підозріле стоп-слово.

3. Зображення декоративне.

4. Зображення є декоративним, використовуючи порожній простір (alt=" ").

5: Альтернативний текст задовгий.

#### Помилки

6: Відсутній альтернативний текст.

7: Альтернативний текст має розширення файлу.

8: Альтернативний текст містить текст-заповнювач.

### Зображення з гіперпосиланнями

#### Пас

Дізнайтеся більше про тигрів

9: Зображення з гіперпосиланням із нульовим альтернативним текстом, але має навколишній текст посилання під зображенням.

Дізнайтеся більше про тигрів

10: Зображення з гіперпосиланням із нульовим альтернативним текстом, але має навколишній текст посилання над зображенням.

Текст підпису малюнка.

11: Зображення малюнка з різним текстом заголовка та підпису.

12: Зображення малюнка без підпису.

#### Попередження

13: Зображення з гіперпосиланням із альтернативним текстом.

14: Зображення з гіперпосиланням містить альтернативний текст, який містить слово-зупинку.

15: надто довге зображення з гіперпосиланням.

Дізнайтеся більше про Fiat.

16: Зображення з гіперпосиланням, яке містить як альтернативний текст, так і текст посилання.

Рис. 1: Намбійська пустеля (Джерело: невідоме)

17: Декоративне зображення в елементі <figure>.

Дві зебри

18: Елемент рисунок має повторюваний текст заголовка та заголовка.

19: Елемент малюнка з гіперпосиланням без підпису fig.

Чорно-біле фото двох зебр.

20: Гіперпосиланий елемент малюнка з підписом fig.

#### Помилки

21: На зображенні з гіперпосиланням відсутній альтернативний текст.

22: декоративне зображення з гіперпосиланням.

23: Зображення з гіперпосиланням, яке є декоративним, використовуючи порожній простір (alt=" ").

Дізнайтеся більше про жоржини

24: Зображення з гіперпосиланням з відсутнім альтернатом і містить навколишній текст посилання.

25: Зображення з гіперпосиланням містить альтернативний текст, що містить текст-заповнювач.

26: Зображення з гіперпосиланням, де якір має aria-hidden="true".

#### Інший

27: Зображення з гіперпосиланням, де якір має aria-hidden="true" і tabindex="-1"

###### Дізнайтеся більше про Канарські острови

28: Зображення з гіперпосиланням містить пропущений заголовок. Помилка додається після гіперпосилання, щоб запобігти вкладенню кнопки всередині гіперпосилання.

29: Зображення з гіперпосиланням відкривається в новій вкладці.

30: Зображення з гіперпосиланням відкривається в новій вкладці. Альтернативний текст вказує, що посилання відкривається в новому вікні.

31: Тестування помилок. Ігноруйте теги <noscript>.

## Посилання

### Часткові стоп-слова

#### Помилки

Використання будь-якого з наведених вище слів самостійно призведе до помилки, оскільки воно недостатньо описове.

дізнатися більше
дізнатися більше »
дізнатися більше >

#### Пас

Однак, якщо використовується з додатковим текстом, він не буде позначено як помилка.

Дізнайтеся більше про Sa11y

### Часткові стоп-слова з виключеннями

Іноді тема веб-сайту може автоматично додавати текст до посилання. Наприклад, "(Зовнішнє посилання)" буде проігноровано, що правильно позначить це посилання як помилку, оскільки воно недостатньо описове.

дізнатися більше (зовнішнє посилання)

### Порожні гіперпосилання

- Пусте гіперпосилання:
- Пусте гіперпосилання з пробілом:
- Один символ: .
- Нерозривний простір:

### Порожні гіперпосилання з дітьми

- Пусте гіперпосилання зі шрифтом значка:
- Пусте гіперпосилання зі шрифтом значка (відкриває нову вкладку):
- Пусте гіперпосилання з SVG:
- Пусте гіперпосилання за допомогою SVG (відкриває нову вкладку):

### Порожні гіперпосилання з доступною назвою через атрибут title

- Пусте гіперпосилання із заголовком:
- Пусте гіперпосилання з пробілом і заголовком:
- Нерозривний пробіл і назва:
- Пусте гіперпосилання зі шрифтом значка та заголовком:
- Пусте гіперпосилання зі шрифтом значка (відкриває нову вкладку) та заголовком:
- Пусте гіперпосилання з SVG і заголовком:
- Пусте гіперпосилання за допомогою SVG (відкриває нову вкладку):

### Найкращі поради щодо тексту посилання

#### Зупинити слова

Посилання містить: "клацніть тут", ">", "<"

Натисніть тут, щоб переглянути наші програми
Далі >
< Попередній

#### Довгі URL-адреси

Довгі URL-адреси будуть лише позначені.

https://sa11y.netlify.app/developers/custom-checks/
https://sa11y.netlify.app

### Гіперпосилання з ARIA

#### Етикетка ARIA

- код: `<a href="#" aria-label="Learn more about Sa11y">Learn more</a>`
- Очікуваний результат: дізнайтеся більше про Sa11y

Вчи більше

#### Дитина з етикеткою ARIA

- код: `<a href="#">Learn more <span aria-label="about Sa11y"></span></a>`
- Очікуваний результат: дізнайтеся більше про Sa11y

Вчи більше

#### Кілька дітей із міткою ARIA

- код: `<a href="#">Learn more <span aria-label="about Sa11y"></span> <i aria-label="(External)" class="bi bi-box-arrow-up-right"></i></a>`
- Очікуваний результат: дізнайтеся більше про Sa11y (зовнішній)

Вчи більше

#### Єдиний атрибут ARIA-labeledby

яблука

- Ідентифікатор посилання: `<span id="app">apples</span>`
- код: `<a href="#" aria-labelledby="app">Learn more</a>`
- Очікуваний результат: яблука

Вчи більше

#### Кілька атрибутів, позначених ARIA

і банани

- Ідентифікатори посилання: сам, `<span id="app">apples</span>`, `x`який не існує,`<span id="ban">bananas</span>`
- код: `<a href="#" id="self" aria-labelledby="self app x ban">Learn more about</a>`
- Очікуваний результат: дізнайтеся більше про яблука та банани

Дізнайтеся більше про

#### Дочірня з атрибутами, позначеними ARIA

- Ідентифікатор посилання: `<span id="app">apples</span>` , `x` який не існує,`<span id="ban">bananas</span>`
- код: `<a href="#">Learn more <span aria-labelledby="app x ban"></span></a>`
- Очікуваний результат: дізнайтеся більше про яблука та банани

Дізнайтеся більше про

#### АРІЯ Прихована

- код: `<a href="#" aria-hidden="true">Learn more</a>`
- Очікуваний результат:

Вчи більше

## Таблиці

### Правильний стіл

Назва події | Час | Розташування
--- | --- | ---
Основна доповідь | 9:00 ранку | Аудиторія
Обід | 12:00 | Номер Skyline
Вечеря закриття | 17:00 | Столична кімната

### Відсутні заголовки таблиці

Назва події | Час | Розташування
Основна доповідь | 9:00 ранку | Аудиторія
Обід | 12:00 | Номер Skyline
Вечеря закриття | 17:00 | Столична кімната

### Таблиця з порожнім заголовком

| Час | Розташування
--- | --- | ---
Основна доповідь | 9:00 ранку | Аудиторія
Обід | 12:00 | Номер Skyline
Вечеря закриття | 17:00 | Столична кімната

### Таблиця із семантичними заголовками

#### Подія | #### Час | #### Розташування
--- | --- | ---
Основна доповідь | 9:00 ранку | Аудиторія
Обід | 12:00 | Номер Skyline фальшивий заголовок
Вечеря закриття | 17:00 | Столична кімната

## Інші питання

### PDF

Попередження додається до будь-яких гіперпосилань, які мають `.pdf`розширення файлу. Значок попередження додається лише до першого PDF-файлу, виявленого на сторінці, щоб уникнути перевантаження автора вмісту. Усі інші посилання PDF візуально виділені.

- Завантажити Довідник про вступ (PDF)
- Опис курсу (PDF)
- Шпаргалка (PDF)
- Google Docs

### Текст у верхньому регістрі

Це застереження спрямоване на те, щоб запобігти використанню тексту у верхньому регістрі. Це не вимога WCAG 2.1, але не рекомендується для читабельності. По-друге, деякі слова, написані з великої літери, можуть бути помилково прийнятий за абревіатуру та готові символ за символом за допомогою програми зчитування з екрана. Ця умова використовує регулярний вираз для пошуку слів у верхньому регістрі, які мають довжину щонайменше 3 символи, однак воно буде вказано як попередження лише у випадку, якщо в елементі знайдено принаймні 5 слів у верхньому регістрі. Він перевіряє лише слова верхнього регістру в таких елементах: h1, h2, h3, h4, h5, h6, p, li, span, blockquote.

НАПРИКЛАД, ЦЕ БУДЕ ПОМІРЧЕНО .

НАПРИКЛАД, це НЕ БУДЕ позначено.

- ТЕКСТ В ВЕЛИКІ РЕГІСТРІ У КУЛЯХ також буде позначено.

### Підкреслений текст

Це попередження має на меті перешкодити використанню підкресленого тексту, оскільки його легко сплутати з посиланнями. Ця умова перевіряє підкреслений текст, створений за допомогою розмітки <u> і стилів css у таких елементах: h1, h2, h3, h4, h5, h6, p, li, span, blockquote.

Це буде позначено прапорцем.

<u>підкреслений</u> цей спосіб буде позначено прапорцем.

- Підкреслений текст у списках також буде позначено.

#### Цей заголовок буде позначено прапорцем.

Пов’язаний текст не буде позначено.

### Несемантичні списки

а) Іноді люди створюють список вручну
б) використовуючи підроблені префікси списку
г) замість використання семантичного списку.

1. Банани

2. Груші

3. Яблука

### Повторювані ідентифікатори

Елемент 1 і елемент 2 мають однаковий `id`атрибут.

### Subscript and superscript formatting

A subscript or superscript is a character that is set slightly below or above the normal line of type, respectively. It is usually smaller than the rest of the text. Subscripts appear at or below the baseline, while superscripts are above. Wikipedia.

A subscript or superscript is a character that is set slightly below or above the normal line of type, respectively. It is usually smaller than the rest of the text. Subscripts appear at or below the baseline, while superscripts are above. Wikipedia.