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: Відсутній альтернативний текст.

birdy.jpg

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>.


Посилання

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

Помилки

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

Пас

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Гіперпосилання з 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 візуально виділені.

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

Це застереження спрямоване на те, щоб запобігти використанню тексту у верхньому регістрі. Це не вимога 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атрибут.