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: Зображення малюнка без підпису.
Попередження
16: Зображення з гіперпосиланням, яке містить як альтернативний текст, так і текст посилання.
17: Декоративне зображення в елементі <figure>.
18: Елемент рисунок має повторюваний текст заголовка та заголовка.
20: Гіперпосиланий елемент малюнка з підписом fig.
Помилки
24: Зображення з гіперпосиланням з відсутнім альтернатом і містить навколишній текст посилання.
26: Зображення з гіперпосиланням, де якір має aria-hidden="true".
Інший
27: Зображення з гіперпосиланням, де якір має aria-hidden="true" і tabindex="-1"
Дізнайтеся більше про Канарські острови
28: Зображення з гіперпосиланням містить пропущений заголовок. Помилка додається після гіперпосилання, щоб запобігти вкладенню кнопки всередині гіперпосилання.
Посилання
Часткові стоп-слова
Помилки
Використання будь-якого з наведених вище слів самостійно призведе до помилки, оскільки воно недостатньо описове.
Пас
Однак, якщо використовується з додатковим текстом, він не буде позначено як помилка.
Часткові стоп-слова з виключеннями
Іноді тема веб-сайту може автоматично додавати текст до посилання. Наприклад, "(Зовнішнє посилання)" буде проігноровано, що правильно позначить це посилання як помилку, оскільки воно недостатньо описове.
Порожні гіперпосилання
- Пусте гіперпосилання:
- Пусте гіперпосилання з пробілом:
- Один символ: .
- Нерозривний простір:
Порожні гіперпосилання з дітьми
Порожні гіперпосилання з доступною назвою через атрибут 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)
- Опис курсу (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атрибут.
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.