如何在 Sightly 中保留空 alt 属性？答案

【问题标题】：How can I preserve null alt attributes in Sightly?如何在 Sightly 中保留空 alt 属性？
【发布时间】：2017-03-08 22:42:52
【问题描述】：

我正在开发一个符合 ADA 级别 AAA 的网站。出于可访问性目的，如果图像没有语义值（背景图案等），则应该为 alt 属性 alt='' 使用空字符串，以便屏幕阅读器不会将图像的长文件名读取给用户.

我们在每张图片中都内置了可创作的替代文本选项，但 Sightly/HTL 的默认行为是删除任何导致空字符串的属性。

我尝试使用条件显式回退到空字符串，但这没有帮助。

<img src="${properties.imgMobile}" alt="${properties.altText || ''}" />

有什么建议吗？

【问题讨论】：

标签： accessibility aem sightly htl

【解决方案1】：

一种方法是添加一个测试：

<div data-sly-test="${properties.altText}">
    <img src="${properties.imgMobile}" alt="${properties.altText}" />
</div>

当 altText 为非空时，上述条件将起作用。对于 altText 为空的情况，

<div data-sly-test="${!properties.altText}">
    <img src="${properties.imgMobile}" alt="" />
</div>

请注意，alt="" 没有使用 Sightly 语法，因此它将被 Sightly 处理器忽略，并显示为 alt=""，因为 Sightly 会忽略空字符串文字。

根据Sightly Documentation：

请注意，其值计算为空字符串的属性（文字或通过 data-sly-attribute 设置）将在最终标记中删除。此规则的一个例外是设置为文字空字符串的文字属性将被保留。

就个人而言，我不认为这是最优雅的解决方案，但由于当前 Sightly 引擎在剥离空值方面的限制，这似乎是最有效的解决方案。

另一种选择是使用空数组：

<!--/* Like empty strings, empty arrays remove the attribute: */-->
<div title="${[]}"></div>
<!--/* outputs: */-->
<div></div>

<!--/* But an array containing just an empty string doesn't get removed: */-->
<div title="${['']}"></div>
<!--/* outputs: */-->
<div title=""></div>

希望这会有所帮助。

【讨论】：

这对我来说是有道理的，但实际上它并没有奏效。有些东西仍然会剥离 alt 属性，但我不确定它是否是 Sightly 的。我现在正在探索一个 JavaScript 选项，只为所有没有任何 alt 属性的图像添加一个空的 alt 属性，但该值仍然被剥离。 AEM 本身会在 HTML 渲染端的某个地方这样做吗？
根据最新规范，它应该可以工作：github.com/Adobe-Marketing-Cloud/htl-spec/blob/master/… 但如果它不起作用，我建议查看您的过滤器链和链中的任何 HTML 缩小输出过滤器。
我刚刚使用 AEM 6.2 和 JS Fiddle (acs-tools) 进行了尝试：github.com/Adobe-Consulting-Services/acs-aem-tools/releases/tag/… 输入：

输出 HTML 为：
刚试过：第一种方法对我有用，但空数组似乎在 AEM 6.3.2 上不起作用，尽管规范说它应该起作用。 :-(

【解决方案2】：

上面的答案是一个明显的规范错误。参考： https://github.com/Adobe-Marketing-Cloud/htl-spec/issues/39

如果像下面的例子一样，如果是空的，那么对我来说一个解决方案是正确的。

<img src="${properties.imgMobile}" alt="${properties.altText || true}"/>
output:
<img src="http://google.com" alt />

【讨论】：

【解决方案3】：

我们可以使用以下代码代替 data-sly-test

&lt;img src="${properties.imgMobile}" alt="${properties.altText ? properties.altText : ''}"/&gt;

【讨论】：