1

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

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

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

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

有什么建议么？

4

2 回答 2

3

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

<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 文档：

请注意，其值计算为空字符串的属性（文字或通过 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>

希望这可以帮助。

于 2017-03-08T23:47:57.027 回答
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 />
于 2017-11-17T18:41:47.270 回答