如何在Sightly中保留null alt属性？

Question

我在一个符合AAA标准的ADA级网站上工作。出于可访问性的目的，如果图像没有语义值(背景模式等)，则应该对alt属性alt=''使用空字符串，这样屏幕阅读器就不会向用户读取图像的长文件名。

我们在每个图片中内置了可授权的alt文本选项，但是Sightly/HTL的默认行为是删除任何导致空字符串的属性。

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

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

有什么建议吗？

Answer 1

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

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

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

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

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

根据Sightly Documentation

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

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

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

<!--/* 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>

希望这能有所帮助。

Answer 2

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

我的一个解决方案是，如果为空，则将可视值设为true，如下面的示例所示。

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