Демо

Вижте видео въведение в историята и функциите на проверката, или опитайте да редактирате демо съдържанието по-долу, да отваряте и скривате сигнали, и да използвате лентата с инструменти (Снимка на екрана на лентата с инструменти на Editoria11y, показваща 4 грешки.) за преглед на структурата на заглавията. Това демо включва и основните тестове, и пакета CSA.

Това демо използва TinyMCE редактор. Editoria11y е съвместим с повечето редактори на съдържание и разполага с готови реализации за CKEditor и Gutenberg в WordPress и Drupal.

Заглавия

Това заглавие е прескочило ниво:

Грешка

Това заглавие изобщо няма текст:

Тази кратка блок-цитата може да е заглавие:

Аз съм фалшиво заглавие

Този изцяло удебелен абзац може да е заглавие:

Аз съм фалшиво заглавие

Това заглавие е много дълго:

Заглавията и подзаглавията създават навигируемо съдържание за асистивни устройства. Числата указват отстъпи в йерархична връзка. Много дългите заглавия вероятно означават, че авторът казва твърде много в заглавието.

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

Това заглавие е съставено от изображение на текст без alt:

Изображение без атрибут alt:

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

'

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

filename.jpg

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

Image of a dog.

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

Image of a dog.

Изображение с placeholder alt:

TBD

Свързано изображение с placeholder alt:

TBD

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

$700VIDEOSABOUTTURTLESALL2SECONDSLONG

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

$700VIDEOSABOUTTURTLESALL2SECONDSLONG

Изображение с много дълъг 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.

Тази връзка има текст и изображение.A lovely gray box

Hello there

Изображение в figure, маркирано като декоративно:

Figcaption е налице.

Изображение в figure с alt, същото като figcaption:

Figcaption is the same as alt
Figcaption е същото като alt

Изображение в карусел без alt:

Контраст

Нечетлива комбинация от цветове:

Много четливо.

Цветът изисква ръчна проверка:

И неизчислимо.

SVG графика без достатъчен контраст

SVG графика, чийто контраст изисква ръчна проверка

Вградени елементи & медия

Видео, маркирано за ръчна проверка за субтитри:

Playback disabled to prevent cookies.

Аудиото се нуждае от транскрипт:

Iframe без заглавие, изискващ и ръчна проверка:

Iframe без фокус:

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

Акордеон
АкордеонSurprise!

Таблици

Таблици без валидни заглавни клетки

Таблица без TH заглавие е невалидна

Заглавията на съдържанието не се броят

Деактивирайте теста за заглавие на съдържание вътре в таблици

Празни заглавия
Открих 700 видеа с костенурки
Всяко с продължителност 2 секунди

Четимост

НЯКОЛКО ДУМИ ПОДРЕД С CAPS LOCK ЩЕ ЗАДЕЙСТВАТ ПРЕДУПРЕЖДЕНИЕ ЗА РЪЧНА ПРОВЕРКА.

Подчертан текст

Малко курсив е добре, но големи блокове с курсивен текст не са много четливи. Малко е приемливо, разбира се, но има граница — и цял абзац е прекалено много. Ето например, цял абзац. Трудно се чете, нали? Но този тест не се задейства, докато не е толкова дълго, така че не трябва да виждате фалшиви положителни резултати в съдържанието си, освен ако редовно не пишете наистина дълги абзаци като този.

Изравнен текст

Прекомерен горен или долен индекс; долният индекс трябва да се използва за кратки препратки и бележки под линия, а не за цели изречения или абзаци.

Много малки шрифтове

* Фалшиви списъци с обичайни знаци,

* букви, цифри и емоджи.

  • Липсващ UL таг
  • Формуляри

    Бутон без надпис

    Полета за въвеждане с невидим надпис, питащо дали има и видим надпис.

    Полета за въвеждане само с placeholder надпис, питащо дали има и видим надпис.

    Бутон с достъпен надпис, различен от видимия.

    Бутон с невалиден атрибут aria-labelledby.

    Бутон с излишен надпис.

    Бутон за нулиране.

    Разбъркване на tab index