Question

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

我们已经内置了authorable 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为非null时，上述条件将起作用。对于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引擎限制剥离空值，这似乎是最有效的。

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

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

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

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

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

2 个答案: