带有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”、指向title子元素的aria-labelledby，以及指向desc子元素或通过ID指向外部段落的aria-describedby。每一项都体量微小，却能完成其他两项无法完成的工作。

一个尖锐的警告：在根svg元素上设置role=“img”会改变辅助技术处理子元素的方式。设置role=“img”后，NVDA和JAWS将整个SVG视为单个带标签的图像，不公开内部节点——即使那些内部节点设置了tabindex也是如此。要同时获得两种行为——顶层摘要标签和内部可寻址子节点——需要不设置根role（或从W3C图形ARIA模块设置role=“graphics-document”），并将标签放在子g元素上而非根元素上。不同浏览器和屏幕阅读器对这种组合的处理不尽一致。第6节的矩阵记录了各平台的实际支持情况。

longdesc属性曾是”alt属性还不够”这一问题的最初解答。各浏览器已悄然移除对它的支持多年：Firefox在90版本中将其删除，Safari从未实现它，Chrome将其视为无操作。2026年仍在编写longdesc=“benzene-desc.html”的人，是在发布没有任何东西会读取的标记。替代方案并非单一属性，而是一个将内联描述、可见可展开面板和机器可读元数据结合在一起的三层模式。

第一层是SVG内部的内联desc元素。两到四句话。当SVG根元素被宣告时由屏幕阅读器读取。这是新的longdesc——一段作为SVG文档组成部分、随SVG文件到任何地方传播的描述。

第二层是图表旁边的可见可展开描述面板，对所有读者开放，而非仅对屏幕阅读器用户。一行摘要加一个展开按钮，打开后呈现更长的文字说明——化学分子通常三到十句，含二十个标注细胞器的细胞结构图则更长。可见面板解决了内联desc无法解决的问题：能看见图表但无法解读的学生（低视力学习者、阅读障碍学习者、初次接触该材料的任何人）同样需要长描述。将其置于按钮后面不会对屏幕阅读器隐藏它——屏幕阅读器会枚举展开按钮，用户激活它，描述被读入缓冲区。

第三层是通过JSON-LD提供结构化元数据。一个CreativeWork对象，其accessibilityFeature数组枚举了图表提供的功能：longDescription、alternativeText、structuralNavigation、describedMath、tactileGraphic（如有可打印触觉图可用）。搜索引擎、内容推荐系统和无障碍合规扫描器都会消费这些元数据。它对即时的屏幕阅读器阅读体验没有直接作用，但使图表作为无障碍内容可被发现——当学习者在三本教材中做选择、其中一本以机器可读形式宣传其无障碍功能时，这一点至关重要。

静态图表是较为容易处理的情况。难点在于动态图表——三维旋转的线粒体、沿x轴描绘出来的正弦波、化学键在四秒内断裂并重组的化学反应。传统答案是带有音频描述轨道的视频文件，但这放弃了SVG的可寻址性：一旦将动画烘焙成视频，您精心标注的每个节点就不再是DOM节点，而再次变成了像素。

无障碍替代方案是将动画保持为SVG（或带有屏幕外无障碍树的Canvas），并在动画进行过程中，由驱动视觉变化的同一DOM变化来驱动音频描述的发出。具体模式：一个MutationObserver监视SVG的变化——新的transform属性、出现的化学键、旋转的向量——并在每次重要变化时，将一段简短文字更新写入全局aria-live=“polite”区域。视觉动画驱动了一段从同一事实来源实时生成的音频叙述。

实现有三个组成部分。第一是动画本身，以时间轴关键帧序列表达——与SVG渲染器消费的数据相同。第二是注解层：每个关键帧携带一段简短文字，描述该时刻发生的变化（“C1和C2之间形成化学键”，“波从下方穿过零点”）。第三是音频描述驱动器，订阅时间轴，获取每个带注解的关键帧，并在视觉变化发生前几百毫秒将其文字写入实时区域。这段提前量与影片制作中音频描述的做法一致：描述在视觉事件发生之前被听到，而非在之后。

有三种常见失效模式值得专门指出。第一，突发更新。每秒触发60次变化的动画会淹没屏幕阅读器的语音合成器——播报排队积压、动画滞后，最终变得无法理解。只注解语义上重要的关键帧，而非每一帧，并限制为大约每1500毫秒一次播报。第二，遗漏起始。一个在动画开始前不存在的实时区域，第一次更新的播报可能不可靠（参见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坐标处在系列间切换；左右方向键沿当前系列移动。该约定与电子表格阅读器导航行列的方式相似，复用了许多用户已有的心理模型。

一个常被忽视的细节：被聚焦的数据点需要可见的焦点指示器。非视力用户不需要它，但使用屏幕阅读器的视力用户需要，协助观看学生操作的教师也需要。使用:focus-visible样式在被聚焦的SVG元素周围渲染焦点环——与按钮焦点环的约定相同，应用于浏览器默认不设置样式的SVG节点。

本文中最难以回避的事实：无障碍SVG技术栈在不同浏览器和屏幕阅读器上的行为并不一致，而这些缺口并非您的标记存在问题。Firefox上的NVDA是最可靠的组合——也是唯一一个让本文所有模式都按W3C SVG无障碍映射规范所述运行的组合。其他所有组合都至少存在一个已知缺口。

macOS上Safari配合VoiceOver是主要技术栈中问题最多的。WebKit的SVG无障碍树在公开带有ARIA标签的内层g元素方面存在已记录的漏洞：标签确实存在于DOM中，可通过无障碍检查器检视，但当用户使用VO+右方向键导航时，VoiceOver并不总能读取到它们。这一行为不一致——有时内层标签会被宣告，有时只有根SVG标签被读取，客户端看不出任何规律。WebKit的bugzilla上有关于此问题的公开报告，可追溯至2020年。实际含义：如果您的STEM图表在Mac上能正常工作，这是必要条件，而非充分条件。发布前请在Windows上用NVDA测试。

Windows上Chrome配合JAWS是第二可靠的组合——接近NVDA+Firefox，但有一个细节：JAWS对SVG role=“img”的处理比NVDA更激进，折叠内部节点的频率更高。解决方法是在根svg上使用W3C图形ARIA模块中的role=“graphics-document”，JAWS能正确处理这一设置。NVDA同样能正确处理。Firefox和Chrome都已部署必要的平台API映射。

移动端是另一个独立问题。iOS VoiceOver继承了WebKit的SVG缺口；Android TalkBack在Chrome上能可靠处理内部节点，但尚不支持W3C图形ARIA角色，因此回退到role=“img”行为。对于同时面向桌面和移动端的教材出版商，安全的选择是提供两种SVG模式：桌面端提供结构可导航模式，移动端提供”摘要加长描述”模式，禁用内部导航。模式切换由用户代理和用户偏好驱动，并跨会话保存。

对矩阵的一种解读：以NVDA+Firefox作为基准合规测试目标，记录Safari和TalkBack的备用方案，且永远不要将某个内部节点播报在Mac上未出现，作为SVG存在无障碍问题的证据。图表可能完全无障碍——只是平台未能公开您编写的标签。Safari开发者菜单中的无障碍检查器可以显示树中存在的内容，即使VoiceOver未能读取，它是区分”标记有问题”与”平台有问题”的正确工具。

大多数已发布的STEM图表无障碍指导停留在title和desc层面，那只是容易实现的30%。剩余的70%——长描述面板、由DOM变化驱动的音频描述时间轴、两粒度级别的键盘导航、特定平台的备用方案——是交互设计，与标记同等重要。屏幕阅读器是其中一类用户；一位使用屏幕阅读器、以视力正常同学的速度在函数图像上导航的视障学习者，是不同类型的用户，有着不同的需求。

回报是巨大而不均匀的。一家在某本微积分教材的约600张图表中全面部署技术栈的教材出版商，能够服务：使用该教材的所有视障学习者、欣赏折叠面板的所有低视力学习者、能阅读长描述但无法解读视觉图形的所有阅读障碍学习者、比视觉学科惯例更容易理解结构化描述的所有以非母语学英语的学习者，以及为播客制作音频摘要的所有视力正常的教师。同一段标记服务了五类不同受众。成本是每张图表几个小时，摊薄至数十年的学生使用年限。

当前技术水平参差不齐，因为学生实际使用的操作系统之间，无障碍树的实现存在差异。Windows上的NVDA和JAWS已弥合了大部分SVG缺口。macOS上的Safari尚未完成。在各平台收敛之前，生产模式是：针对最严格的目标进行创作——NVDA+Firefox——并为存在已知缺口的平台记录备用方案。这比alt属性模式曾经要求的工作量更多。它也是发布一本不排除任何被它本应教导的读者的STEM教材的唯一途径。