Демо

Перегляньте відеовступ до історії та функцій перевірника, або спробуйте редагувати демо-вміст нижче, відкривати та закривати сповіщення, і використовувати панель інструментів ( Знімок панелі інструментів Editoria11y з 4 помилками. ) для перегляду структури заголовків. Це демо містить як основні перевірки, так і набір CSA.

У цьому демо використовується редактор TinyMCE. Editoria11y сумісний з більшістю текстових редакторів і має готові реалізації для CKEditor та Gutenberg у WordPress і Drupal.

Заголовки

Цей заголовок пропустив рівень:

Oops

Цей заголовок зовсім не містить тексту:

Ця коротка цитата може бути заголовком:

I'm a fake heading

Цей повністю жирний абзац може бути заголовком:

I am a fake heading

Цей заголовок надто довгий:

Заголовки та підзаголовки створюють зміст із навігацією для допоміжних пристроїв. Цифри вказують на відступи в ієрархічних відносинах. Дуже довгі заголовки, мабуть, означають, що автор говорить у заголовку забагато.

Текстові альтернативи для зображень

Цей заголовок складається із зображення тексту без атрибута alt:

Зображення без атрибута alt взагалі:

Зображення з недійсним атрибутом alt, наприклад alt=”'”

Зображення з назвою файлу як alt

Зображення з надлишковим текстом в alt, наприклад «зображення:»

Image of a dog.

Зображення-посилання з надлишковим текстом в alt, наприклад «зображення:»

Зображення з тимчасовим alt:

TBD

Зображення-посилання з тимчасовим alt:

Зображення з машинним кодом у alt:

$700VIDEOSABOUTTURTLESALL2SECONDSLONG

Зображення-посилання з машинним кодом у alt:

Зображення з дуже довгим текстом alt:

Look at this doggy. This doggy is so happy. This doggy got to go on a walk and the walk went to a lake and there were all kinds of fascinating smells. What an amazing day this doggy had.

Зображення в посиланнях, де текст alt може описувати зображення, а не посилання

Це посилання містить текст і зображення. A lovely gray box

Будь-яке зображення-посилання (перевірка вимкнена за замовчуванням)

Зображення у figure, позначене як декоративне:

Зображення у figure, де alt збігається з figcaption:

Зображення в каруселі без атрибута alt:

Контрастність

Нечитабельне поєднання кольорів:

Дуже читабельно.

Колір потребує перевірки вручну:

І не піддається обчисленню.

Поле введення з низькою контрастністю

Колір заповнювача не вдається обчислити

SVG-графіка з недостатньою контрастністю

SVG-графіка, контрастність якої потребує перевірки вручну

Вбудовані елементи та медіа

Відео позначено як таке, що потребує перевірки субтитрів вручну:

Відтворення вимкнено для запобігання файлам cookie.

Аудіо потребує транскрипту:

Iframe без заголовка, який також потребує перевірки вручну:

Iframe, недоступний для фокусування:

Вкладені інтерактивні компоненти

Акордеон

Сюрприз!

Змістовні посилання

Посилання без будь-якого тексту

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

Посилання, підписані лише URL-адресою:

https://www.youtube.com/watch?v=DLzxrzFCyOs

Посилання, підписані лише символами:

↣

Посилання з однаковими назвами ведуть у різні місця

Черепахи Черепахи

Посилання, підписані лише номером DOI:

doi.org/10.1145/3493612.3520468

Посилання з беззмістовними підписами:

Натисніть тут

Іконки-посилання без текстових альтернатив:

Посилання, що відкриваються в новому вікні без значка зовнішнього посилання або текстового попередження

Сповіщення для перевірки відкриття у новому вікні.

Посилання на PDF-файли

Удачі.

Посилання на інші документи

Фіктивне посилання на doc-файл.

Посилання з надлишковими атрибутами title

Наведіть курсор

Посилання з атрибутами, що виключають їх із послідовності табуляції:

Посилання з aria-labelledby, що вказує на елементи без тексту:

Посилання із загальними словами в aria-мітці:

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

Зображення-посилання без тексту alt:

Зображення-посилання з незрозумілим текстом alt:

Зображення-посилання без атрибута alt:

Зображення-посилання без атрибута alt у посиланні з текстом:

Пошук

Зображення-посилання з назвою файлу як текстом alt:

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

Зламані посилання на елементи сторінки

Такого ID не існує.

Посилання на сервер розробки

Oops

Дублікати якорів

Якір 1 Якір 2

Таблиці

Таблиці без дійсних заголовків

Таблиця без заголовка TH є недійсною

Заголовки структури не рахуються

Перевірку заголовків вмісту всередині таблиць слід вимкнути

	Порожні заголовки
Я знайшов	700 відео про черепах
Кожне	по 2 секунди

Читабельність

КІЛЬКА СЛІВ ПІДРЯД, НАПИСАНИХ CAPS LOCK, СПРИЧИНЯТЬ ПОПЕРЕДЖЕННЯ ПРО НЕОБХІДНІСТЬ ПЕРЕВІРКИ ВРУЧНУ.

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

Трохи курсиву — це нормально, але великі блоки виділеного тексту погано читаються. Небагато — цілком прийнятно, але є межі, і цілий абзац — це вже занадто. Ось, наприклад, цілий абзац. Його важкувато читати, чи не так? Але ця перевірка не спрацьовує, поки текст не стане таким довгим, тому хибних спрацьовувань у вашому вмісті не буде, якщо ви регулярно не пишете справді великих абзаців.

Текст із вирівнюванням по ширині

Надмірний верхній або нижній індекс; _{нижній індекс слід використовувати для невеликих посилань і виносок, а не для цілих речень чи абзаців.}

Дуже дрібний шрифт

* Фіктивні списки із загальних символів,

* літер, цифр та емодзі.

Відсутній тег UL

Форми

Кнопка без підпису

Поля введення з невидимим підписом — перевірка наявності також видимого підпису.

Поля введення лише з підписом-заповнювачем — перевірка наявності також видимого підпису.

Кнопка з доступним підписом, що відрізняється від видимого.

Кнопка з недійсним атрибутом aria-labelledby.

Кнопка з надлишковим підписом.

Кнопка скидання.

Порушення порядку табуляції