我想允许作者在CKEditor图像插件对话框中输入长描述，然后通过aria-describedby属性向屏幕阅读器提供描述。在我们的用例中，作者以WYSIWYG模式工作;他们不应该编辑原始HTML，因此我们不能要求他们在图像对话框中输入ID，向其他元素添加相应的ID等。
增强CKEditor图像插件对话框以创建一个字段，让作者可以输入长描述以伴随简短描述，这是一件微不足道的事。结果可能类似于<img data-long-description="this is a long description" alt="short description" />。但我们需要的是<img aria-describedby="longDescriptionID" alt="short description" />，其中longDescriptionID是页面上某些元素的ID（对于有视力的用户是否隐藏）....
我有几种可能性。 （1）保持图像插件的功能：输出<img />标签，如第一个示例所示，然后最终面向用户视图中的其他一些代码有责任查找数据 - 描述，在aria-describedby属性中用ID（随机生成，比如说）替换它们，并在视图中的某处插入对视觉用户隐藏的相应内容，以便屏幕阅读器将其拾取。
可能性（2）是使图像插件输出类似于<span class="accessibleImage"><img aria-describedby="randomID1" alt="short description" /><span id="randomID1" class="accessibleLongDescription">This is nice, long description of the image blah blah blah</span></span>，其中.accessibleLongDescription被隐藏，除了屏幕阅读器。
答案 0 :(得分：2)
你正在研究这个问题。对图像的更详细描述通常是有用的。几点想法......
不仅仅是使用屏幕阅读器的人发现更长的描述有用。有认知障碍的人通常会从复杂图像的更详细解释中受益。如果您可以按需向任何人提供说明，这将有助于更多人。
当描述插入DOM时，它需要紧跟在与之相关的图像之后。屏幕阅读器使用称为辅助功能树的DOM的翻译来访问内容，因此DOM顺序非常重要。
因此，一种可能性是组合您的方法 - 按照您在第一种方法中的建议搜索/替换数据属性，然后在第二种方法中根据模式插入描述。
另一种可能性可能是使用公开小部件模式。将图像表示为本公开的触发控件，并在扩展窗口小部件时使详细描述可用。
合理的disclosure widget pattern就在这里。