Accessibility Inspector извършва автоматизирани проверки по WCAG 2.1 Level AA на всяка уебстраница и създава категоризиран отчет за проблемите с достъпността. Откривайте недостатъчен контраст на цветовете, липсващ алтернативен текст на изображенията, неправилни ARIA роли и атрибути, липсващи етикети на формуляри, проблеми с навигацията с клавиатура и липсващи региони с ориентири — с подчертаване на елементите за всеки намерен проблем с едно щракване.
Уеб достъпността не е опция — тя е законово изискване в много юрисдикции и е от съществено значение за 15% от световното население, живеещо с увреждания. Въпреки това проблемите с достъпността често са невидими по време на нормална разработка и тестване. Един бутон може да изглежда добре, но да бъде напълно недостъпен за екранни четци, защото е стилизиран div без атрибут role. Текстът може да е четлив за вас, но да не отговаря на изискванията за контраст за потребители със слабо зрение. Accessibility Inspector извежда тези невидими проблеми автоматично. Той проверява десетки критерии на WCAG 2.1 Level AA, включително съотношения на контраста на цветовете (минимум 4.5:1 за нормален текст, 3:1 за голям текст), липсващ алтернативен текст на изображенията, липсващи етикети на входни полета във формуляри, неправилни ARIA роли и атрибути, липсващи ориентири в документа (nav, main, footer) и индикатори за фокус на клавиатурата. Всеки проблем включва засегнатия елемент, конкретния нарушен критерий на WCAG и препоръка как да го поправите. Щракнете върху всеки проблем, за да подчертаете елемента на страницата.
Изпълнява автоматизирани проверки спрямо критериите за успех на WCAG 2.1 Level AA, включително категориите възприемаемост, оперативност, разбираемост и стабилност. Всяка проверка показва конкретния критерий (напр. 1.4.3 Контраст, 1.1.1 Нетекстово съдържание) и статуса на преминаване.
Изчислява съотношението на контраста между цветовете на текста и фона за всеки текстов елемент на страницата. Маркира елементи под 4.5:1 за нормален текст или 3:1 за голям текст (18px+ или 14px+ получер). Показва действителното съотношение и минималното изисквано.
Сканира всеки img, svg и елемент с роля image. Маркира липсващи атрибути alt, празен алтернативен текст при недекоративни изображения и прекалено общ алтернативен текст („image“, „photo“). Предлага дали всяко изображение се нуждае от описателен алтернативен текст, празен alt (декоративен) или role="presentation".
Проверява за неправилна употреба на роля ARIA (роли на грешни елементи), липсващи задължителни атрибути ARIA (напр. aria-label на бутони с икони), дублиращи се идентификатори (IDs), реферирани чрез aria-labelledby, и липсващи региони с ориентири (без main, без nav). Препоръчва семантични HTML алтернативи.
Уверява се, че всяко входящо поле във формуляр (текст, имейл, парола, квадратче за отметка, избор) има свързан етикет — чрез елемент label със съответстващи for/id, aria-label или aria-labelledby. Немаркираните входящи полета са недостъпни за екранни четци.
Проблемите са категоризирани като Грешки (трябва да се поправят — бариери за достъп), Предупреждения (трябва да се поправят — потенциални бариери) и Преминати (потвърдено достъпни). Броят на грешките се показва на видно място. Щракнете върху всеки проблем, за да подчерраете засегнатия елемент на страницата.
Преди пускане на нова страница или функционалност, използвайте Accessibility Inspector, за да уловите проблемите рано. Липсващият алтернативен текст, немаркираните полета на формуляри и нарушенията на контраста са лесни за коригиране по време на разработката, но скъпи за откриване в производство.
Много юрисдикции изискват съответствие с WCAG 2.1 Level AA (ADA в САЩ, EAA в ЕС). Пуснете инспектора на вашите публични страници, за да идентифицирате пропуските в съответствието, преди те да се превърнат в правни рискове.
Включете проверката на достъпността като част от вашия QA процес. След визуален QA и функционално тестване, стартирайте Accessibility Inspector, за да потвърдите, че внедряването не въвежда регресии в достъпността.
Пуснете инспектора на текущия си сайт по време на екипна среща, за да покажете реални проблеми с достъпността. Визуалното подчертаване и ясните обяснения помагат на разработчиците да разберат как изглежда достъпният код и защо той е важен.
Одитирайте страници, които включват уиджети (widgets) от трети страни, вградено съдържание или генериран от потребителите HTML. Тези източници често въвеждат проблеми с достъпността (липсващ алтернативен текст, нарушения на контраста), за които вие все пак носите отговорност като собственик на страницата.
Отворете плаващия док DevSuite Pro и щракнете върху иконата Accessibility Inspector. Инструментът сканира DOM на страницата за проблеми с достъпността.
Появява се категоризиран отчет с Грешки (червено), Предупреждения (жълто) и Преминати (зелено). Всяка секция изброява специфични проблеми с препратки към засегнатите елементи и критериите на WCAG.
Кликнете върху всеки проблем, за да подчертаете засегнатия елемент на страницата с цветна рамка и да превъртите до него. Връзката между отчета и DOM елемента е мигновена.
Всеки проблем включва специфична препоръка: „Добавете алтернативен текст, описващ съдържанието на изображението“, „Увеличете контраста на цвета на шрифта до поне 4.5:1“, „Добавете label елемент с for='email'“.
Направете промени в кода си, презаредете страницата и стартирайте одита отново. Броят на грешките трябва да намалее с разрешаването на проблемите. Стремете се към нула грешки.
Инсталирайте DevSuite Pro безплатно и отключете 39+ инструмента за разработчици за вашия браузър.
