Демо
Вижте видео въведение в историята и функциите на проверката,
или опитайте да редактирате демо съдържанието по-долу, да отваряте и скривате сигнали,
и да използвате лентата с инструменти () за преглед на структурата на заглавията. Това демо включва и основните тестове, и пакета CSA.
Това демо използва TinyMCE редактор. Editoria11y е съвместим с повечето редактори на съдържание и разполага с готови реализации за CKEditor и Gutenberg в WordPress и Drupal.
Заглавия
Това заглавие е прескочило ниво:
Грешка
Това заглавие изобщо няма текст:
Тази кратка блок-цитата може да е заглавие:
Аз съм фалшиво заглавие
Този изцяло удебелен абзац може да е заглавие:
Аз съм фалшиво заглавие
Това заглавие е много дълго:
Заглавията и подзаглавията създават навигируемо съдържание за асистивни устройства. Числата указват отстъпи в йерархична връзка. Много дългите заглавия вероятно означават, че авторът казва твърде много в заглавието.
Текстови алтернативи за изображения
Това заглавие е съставено от изображение на текст без alt:
Изображение без атрибут alt:

Изображение с невалиден атрибут alt, напр. alt="'"

Изображение с файлово име като alt

Изображение с излишен текст в alt, като „image of:"

Свързано изображение с излишен текст в alt, като „image of:"
Изображение с placeholder alt:

Свързано изображение с placeholder alt:
Изображение с машинен код като alt:

Свързано изображение с машинен код като alt:
Изображение с много дълъг alt текст:

Изображения в връзки, където alt текстът може да описва изображението, а не връзката
Тази връзка има текст и
изображение.
Всяко свързано изображение (тестът е изключен по подразбиране)
Изображение в figure, маркирано като декоративно:
Изображение в figure с alt, същото като figcaption:
Изображение в карусел без alt:
Контраст
Нечетлива комбинация от цветове:
Много четливо.
Цветът изисква ръчна проверка:
И неизчислимо.
SVG графика без достатъчен контраст
SVG графика, чийто контраст изисква ръчна проверка
Вградени елементи & медия
Видео, маркирано за ръчна проверка за субтитри:
Аудиото се нуждае от транскрипт:
Iframe без заглавие, изискващ и ръчна проверка:
Iframe без фокус:
Вложени интерактивни компоненти
Акордеон
Акордеон
Surprise!Смислени връзки
Връзки без никакъв текст
Връзки, обозначени само с URL:
https://www.youtube.com/watch?v=DLzxrzFCyOs
Връзки, обозначени само със символи:
Връзки с еднакви имена, водещи към различни места
Връзки, обозначени само с DOI номер:
doi.org/10.1145/3493612.3520468
Връзки с безсмислени надписи:
Свързани икони без текстови алтернативи:
Връзки, отварящи се в нов прозорец без икона за външна връзка или текстово предупреждение
Сигнал за теста „отваря се в нов таб".
Връзки към PDF
Връзки към други документи
Връзки с излишни title атрибути
Връзки с атрибути, премахващи ги от tab index:
Връзки с aria-labelledby атрибути към елементи без текст:
Връзки с общи думи в aria label:
Свързано изображение без alt текст:
Свързано изображение с непроизносим alt текст:
Свързано изображение без атрибут alt:
Свързано изображение без атрибут alt в връзка с текст:
Свързано изображение само с файлово име като alt текст:
Свързано изображение с подозрително дълъг alt текст:
Счупени вътрешни връзки
Връзки към dev сървър
Дублирани котви
Таблици
Таблици без валидни заглавни клетки
| Таблица без TH заглавие е невалидна |
Заглавията на съдържанието не се броят |
Деактивирайте теста за заглавие на съдържание вътре в таблици |
| Празни заглавия | |
|---|---|
| Открих | 700 видеа с костенурки |
| Всяко | с продължителност 2 секунди |
Четимост
НЯКОЛКО ДУМИ ПОДРЕД С CAPS LOCK ЩЕ ЗАДЕЙСТВАТ ПРЕДУПРЕЖДЕНИЕ ЗА РЪЧНА ПРОВЕРКА.
Подчертан текст
Малко курсив е добре, но големи блокове с курсивен текст не са много четливи. Малко е приемливо, разбира се, но има граница — и цял абзац е прекалено много. Ето например, цял абзац. Трудно се чете, нали? Но този тест не се задейства, докато не е толкова дълго, така че не трябва да виждате фалшиви положителни резултати в съдържанието си, освен ако редовно не пишете наистина дълги абзаци като този.
Изравнен текст
Прекомерен горен или долен индекс; долният индекс трябва да се използва за кратки препратки и бележки под линия, а не за цели изречения или абзаци.
Много малки шрифтове
* Фалшиви списъци с обичайни знаци,
* букви, цифри и емоджи.
Формуляри
Бутон без надпис
Полета за въвеждане с невидим надпис, питащо дали има и видим надпис.
Полета за въвеждане само с placeholder надпис, питащо дали има и видим надпис.
Бутон с достъпен надпис, различен от видимия.
Бутон с невалиден атрибут aria-labelledby.
Бутон с излишен надпис.
Бутон за нулиране.