Героично изображение на блог с атрибут alt е решен проблем. STEM схема — не е. Три свойства на научните изображения нарушават допусканията, заложени в alt, aria-label и речевия модел на екранния четец.

Първо, плътността на информацията е достатъчно висока, че едно изречение не може да я носи. Бензеновият пръстен е шест въглерода, шест водорода, редуващи се двойни връзки, делокализирана пи-система, равнинна геометрия, дължина на връзката 1,39 ангстрьома. Конвенцията за алтернативен текст изисква „кратък текстов заместител“; бензенът се нуждае от абзац. Свиването му в едно изречение или губи структурната информация („молекула бензен“), или произвежда нечетим низ без край, който екранният четец трябва да произнесе при 180 думи в минута.

Второ, връзките между елементите носят толкова смисъл, колкото и самите елементи. В диаграма на свободно тяло стрелката от кутията към стената не е украса — тя е нормалната сила, а ъгълът ѝ спрямо вектора на гравитацията е отговорът на задачата. Плоско описание не може да кодира „ъгълът между тези две стрелки е 90 градуса и затова задачата се решава“, защото плоското описание няма структура. SVG, използван внимателно, има.

Трето, студентите по STEM трябва да навигират в схемата, а не само да я чуят. Учащ, който работи по графика на кубична функция, не иска да чуе алтернативния текст от началото до края — той иска да попадне на локалния максимум, да попита „какъв е наклонът тук“, после да премине към инфлексната точка. Това е различен модел на взаимодействие от онзи, с който екранните четци се предлагат по подразбиране. Изграждането му изисква манипулатори на клавиатура върху отделните SVG възли, дърво на описано чрез ARIA съдържание и резервен вариант за стековете на помощните технологии, които не могат да следват темпото.

Почти всеки издаден STEM учебник все още предлага схемите си като PNG или JPG. Растерното изображение е непрозрачна пикселна решетка: то има една входна точка за помощна технология, атрибута alt, и един резервен вариант, атрибута longdesc, който браузърите прекратяват от десет години. Няма структура вътре в изображението, която екранен четец да може да адресира. Схемата е черна кутия с етикет отпред.

SVG обръща модела. Всяка форма в SVG документ е DOM възел — адресируем, фокусируем, обозначим. Бензенов пръстен, изобразен като SVG, има шест елемента circle за въглеродите, шест елемента line за връзките и обхващащ елемент g, който наименува цялото. Всеки от тези възли може да носи атрибути role, aria-label, aria-labelledby, aria-describedby и tabindex. Екранният четец вижда дърво на достъпността от наименувани области вместо единична непрозрачна капка.

Минималният жизнеспособен достъпен SVG носи три неща на коренния си елемент svg: role=“img”, aria-labelledby, сочещ към дъщерен title, и aria-describedby, сочещ към дъщерен desc или към външен абзац по ID. Всяко е малко. Всяко върши работа, която другите две не могат.

Едно остро предупреждение: role=“img” на коренния svg променя това, което помощната технология прави с децата. С role=“img” NVDA и JAWS третират целия SVG като единично обозначено изображение и не излагат вътрешните възли — дори ако тези вътрешни възли имат tabindex. За да получите и двете поведения — обобщителен етикет отгоре и адресируеми деца вътре — оставете коренната роля незададена (или задайте role=“graphics-document” от модула W3C Graphics ARIA) и поставете етикета на дъщерен g, а не на корена. Браузърите и екранните четци обработват тази комбинация неравномерно. Матрицата в раздел 6 документира какво работи къде.

Атрибутът longdesc беше първоначалният отговор на „атрибутът alt не е достатъчен“. Браузърите тихо премахват поддръжката от години; Firefox го отстрани във версия 90, Safari никога не го реализира, Chrome го третира като без ефект. Всеки, който все още пише longdesc=“benzene-desc.html” през 2026 г., пуска маркировка, която нищо не чете. Заместителят не е единичен атрибут, а трислоен шаблон, който съчетава вградено описание, видим разгъваем панел и машинночетими метаданни.

Слой едно е вграденият елемент desc вътре в SVG. Две до четири изречения. Четени от екранните четци, когато се обяви коренът на SVG. Това е новият longdesc — описание, което е част от SVG документа и пътува с него навсякъде, където отива SVG.

Слой две е видим разгъваем описателен панел до схемата, достъпен за всеки читател, а не само за потребителите на екранен четец. Обобщителен ред плюс бутон за разкриване, който отваря по-дълъг текстов преглед — обикновено три до десет изречения за химическа молекула, по-дълъг за схема на клетъчна структура с двайсет обозначени органела. Видимият панел решава проблем, който вграденият desc не може: студентите, които могат да видят схемата, но не могат да я разчетат (учащи със слабо зрение, учащи с дислексия, всеки, който усвоява материала за първи път), също се нуждаят от дългото описание. Поставянето му зад бутон не го скрива от екранните четци — те изброяват разкриването, потребителят го активира и описанието се прочита в буфера.

Слой три са структурирани метаданни чрез JSON-LD. Обект CreativeWork, чийто масив accessibilityFeature изброява какво предлага схемата: longDescription, alternativeText, structuralNavigation, describedMath, tactileGraphic (ако е налична отпечатваема тактилна версия). Търсачки, препоръчватели на съдържание и скенери за съответствие с достъпността консумират тези метаданни. Те не правят нищо за непосредственото четивно изживяване с екранен четец, но правят схемата откриваема като достъпно съдържание — което има значение, когато учащ избира между три учебника и един от тях рекламира функциите си за достъпност в машинночетим вид.

Статичните схеми са лесният случай. Трудният случай е анимираната схема — митохондрия, въртяща се в 3D, синусоида, изчертавана по оста x, химична реакция с връзки, които се късат и възстановяват в продължение на четири секунди. Конвенционалният отговор е видеофайл с аудио-описателна пътечка, но това изоставя адресируемостта на SVG: в мига, в който вградите анимацията във видео, всеки възел, който внимателно сте обозначили, спира да бъде DOM възел и отново става пиксел.

Достъпната алтернатива е да запазите анимацията като SVG (или Canvas с офекранно дърво на достъпността) и да извеждате аудио описания с напредването на анимацията, задвижвани от същите DOM мутации, които задвижват визуалната промяна. Шаблонът: MutationObserver наблюдава SVG за промени — нов атрибут transform, появяваща се връзка, въртящ се вектор — и при всяка значима промяна записва кратко текстово обновление в глобална област aria-live=“polite”. Визуалната анимация задвижва аудио наратив, генериран в реално време от същия източник на истина.

Реализацията има три движещи се части. Първата е самата анимация, изразена като последователност от ключови кадри на времевата линия — същите данни, които консумира SVG визуализаторът. Втората е анотационен слой: всеки ключов кадър носи кратък текст, описващ какво се променя в този момент („образува се връзка между C1 и C2“, „вълната пресича нулата отдолу“). Третата е аудио-описателният драйвер, който се абонира за времевата линия, взима всеки анотиран ключов кадър и записва текста му в живата област няколкостотин милисекунди преди визуалната промяна да настъпи. Изпреварването съответства на това, което прави производственото аудио описание за филм: описанието се чува точно преди визуалното събитие, а не след него.

Три режима на провал са достатъчно чести, за да си струва да се отбележат. Първо, серийни обновления. Анимация, която задейства 60 мутации в секунда, удавя синтезатора на екранния четец — обявяванията се натрупват на опашка, изостават от анимацията и стават неразбираеми. Анотирайте само семантично значимите ключови кадри, не всеки кадър, и ограничете до приблизително едно обявяване на 1500 ms. Второ, пропускане на началото. Жива област, която не е съществувала преди началото на анимацията, няма да обяви надеждно първото си обновление (вижте материала за рамката aria-live за подлежащия проблем с планировчика). Монтирайте живата област празна при зареждане на страницата. Трето, без управление на паузата. Потребителите трябва да могат да поставят аудио описанието на пауза, да го забавят или да го преминават едно събитие наведнъж. Изградете малка лента за управление — възпроизвеждане, пауза, предишно събитие, следващо събитие — и свържете бутоните ѝ със същия драйвер на времевата линия.

Математическа графика на функция, която зрящ студент може да преглежда с курсор, не е достъпна, докато незрящ студент не може да я преглежда с клавиатурата. Механизмът е добре известен и зле реализиран в практиката: всяка значима точка от данни на кривата получава tabindex=“0”, aria-label, описващ координатите ѝ и всяка наименувана особеност („локален максимум при x = -1, y = 4“), и манипулатор на клавиатура, който реагира на клавишите със стрелки за фино придвижване между съседните точки.

Правилната гранулярност има по-голямо значение, отколкото хората осъзнават. Преминаването с tab през всеки начертан пиксел на кубична крива е враждебно — потребителят чува хиляди обявявания „x е равно на 0,1, y е равно на 0,001“, преди да достигне нещо интересно. Преминаването с tab само през наименуваните особености (локални максимуми, минимуми, инфлексни точки, x-пресечни точки, y-пресечни точки) е твърде рядко. Прагматичният компромис: два слоя навигация. Клавишът Tab преминава само през наименуваните особености — обикновено три до седем на крива — а клавишите със стрелки, веднъж щом особеността е фокусирана, пристъпват наляво и надясно по кривата на определена от учащия стъпка, обявявайки координатата при всяка стъпка. Home и End прескачат до лявата и дясната граница на кривата. Page Up и Page Down прескачат до следващата наименувана особеност.

За диаграма с няколко серии — кинетичен график по химия, физически график на трептене с две вълни — добавете ос за превключване на серии. Клавишите със стрелки нагоре и надолу се придвижват между сериите при текущата x-координата; наляво и надясно се придвижват по текущата серия. Конвенцията е успоредна на това как четците на електронни таблици навигират по редове и колони и преизползва мисловен модел, който много потребители вече имат.

Един детайл, който се пропуска: фокусираната точка от данни се нуждае от видим индикатор за фокус. Незрящият потребител не се нуждае от него, но зрящ потребител на екранен четец — да, както и инструкторите партньори, които наблюдават през рамото на студента. Изобразете фокусен пръстен около фокусирания SVG елемент със стилизиране :focus-visible — същата конвенция като фокусните пръстени на бутоните, приложена към SVG възли, които браузърът не стилизира по подразбиране.

Най-трудната истина в този материал: стекът за достъпен SVG не работи по един и същ начин в различните браузъри и екранни четци, а пропуските не са грешки във вашата маркировка. NVDA на Firefox е най-надеждната комбинация — единствената, при която всеки шаблон в тази статия се държи така, както казва преобразуването на достъпността на SVG от W3C. Всяка друга комбинация има поне един известен пропуск.

Safari на macOS с VoiceOver е най-проблематичният от големите стекове. Дървото на достъпността за SVG на WebKit има документирани дупки в начина, по който излага вътрешни елементи g с ARIA етикети: етикетите присъстват в DOM и са инспектируеми с инспектора на достъпността, но VoiceOver не винаги ги улавя, когато потребителят навигира с VO-Right-Arrow. Поведението е непоследователно — понякога вътрешните етикети се обявяват, понякога се чете само етикетът на коренния SVG, без видим за клиента шаблон. Bugzilla на WebKit има отворени проблеми по този въпрос от 2020 г. насам. Прагматичното следствие: ако вашата STEM схема работи на Mac, това е необходимо условие, а не достатъчно. Тествайте на Windows с NVDA, преди да пуснете.

Chrome на Windows с JAWS е вторият най-надежден стек — близо до NVDA + Firefox, с една особеност: JAWS третира SVG role=“img” по-агресивно от NVDA, като свива вътрешните възли по-често. Поправката е да се използва role=“graphics-document” от модула W3C Graphics ARIA на коренния svg, който JAWS обработва правилно. NVDA също го обработва правилно. Firefox и Chrome предлагат необходимите преобразувания към платформените API.

Мобилните устройства са отделен проблем. iOS VoiceOver наследява пропуските при SVG на WebKit; Android TalkBack на Chrome обработва вътрешните възли надеждно, но все още не поддържа ролите на W3C Graphics ARIA, така че се връща към поведението на role=“img”. За издател на учебници, насочващ се както към десктоп, така и към мобилни устройства, безопасният избор е да се предлагат два SVG режима: структурно навигируем режим за десктоп и режим „резюме плюс дълго описание“, който деактивира вътрешната навигация на мобилни устройства. Превключването на режима се задвижва от потребителския агент и от предпочитанието на потребителя, съхранявано между сесиите.

Едно разчитане на матрицата: пуснете NVDA + Firefox като базова цел за съответствие, документирайте резервните варианти за Safari и TalkBack и никога не използвайте отсъствието на обявяване на вътрешен възел на Mac като доказателство, че SVG е недостъпен. Схемата може да е напълно достъпна — платформата просто не излага етикетите, които сте написали. Инспекторът на достъпността в менюто Develop на Safari показва какво има в дървото дори когато VoiceOver не успява да го прочете, и е правилният инструмент за разграничаване на „счупена маркировка“ от „счупена платформа“.

Повечето публикувани указания за достъпността на STEM схеми спират на слоя title-and-desc. Това са лесните 30 процента. Останалите 70 процента — панелът с дълго описание, времевата линия на аудио описанието, задвижвана от DOM мутации, навигацията с клавиатура на две нива на гранулярност, специфичните за платформата резервни варианти — са дизайн на взаимодействие толкова, колкото и маркировка. Екранният четец е един потребител; незрящ учащ, използващ екранен четец, за да навигира в графика на функция със същото темпо като зрящ съученик, е различен потребител, с различни нужди.

Дивидентът е голям и неравномерен. Издател на учебници, който предлага пълния стек в приблизително 600 схеми в учебник по смятане, обслужва всеки незрящ учащ, използващ този учебник, всеки учащ със слабо зрение, който оценява панела за разкриване, всеки учащ с дислексия, който може да прочете дългото описание, но не може да разчете визуалното, всеки учащ с английски като втори език, който намира структурираното описание за по-лесно от визуалните конвенции на областта, и всеки зрящ инструктор, който произвежда аудио резюмета за подкасти. Същата маркировка обслужва пет отделни аудитории. Цената е няколко часа на схема, амортизирани в десетилетия студентска употреба.

Текущото състояние на технологиите е неравномерно, защото реализациите на дървото на достъпността се различават в операционните системи, които студентите реално използват. NVDA и JAWS на Windows са затворили повечето от пропуските при SVG. Safari на macOS — не. Докато платформите се сближат, производственият шаблон е да се създава за най-строгата цел — NVDA + Firefox — и да се документират резервните варианти за платформите с известни пропуски. Това е повече работа, отколкото изискваше моделът с атрибута alt. Това е също единственият начин да се пусне STEM учебник, който не изключва читателите, които се предполага да обучи.