2

I'm working on an ADA level AAA compliant site. For accessibility purposes, you are supposed to use an empty string for the alt attribute alt='' if the image has no semantic value (a background pattern, etc) so that screen readers don't read the long filename of the image to the user.

We've built-in the option of authorable alt text along with every image, but Sightly/HTL's default behavior is to remove any attributes which result in an empty string.

I tried using a conditional to fall back to an empty string explicitly, but that didn't help.

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

Any suggestions?

jbaker
  • 68
  • 1
  • 7

3 Answers3

4

One way of doing this would be to add a test:

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

The above condition will work when altText is non-null. For cases where altText is null,

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

Note that alt="" is not using Sightly syntax, so it will be ignored by the Sightly processor and will come out as alt="" as Sightly ignores empty string literals.

As per the Sightly Documentation:

Note that an attribute (either literal or set via data-sly-attribute) whose value evaluates to the empty string will be removed in the final markup. The one exception to this rule is that a literal attribute set to a literal empty string will be preserved.

Personally, I don't think this is the most elegant solution but due to current Sightly engine's limitations for stripping empty values, this seems the most effective one.

Another option is to use empty arrays:

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

Hope this helps.

Imran Saeed
  • 3,414
  • 1
  • 16
  • 27
  • 1
    This made sense to me, but in practice it actually didn't work. Something still strips the alt attribute, but I'm not sure if it is Sightly or not. I'm exploring a JavaScript option now to just add an empty alt attribute to all images that don't have any alt attribute, but the value still gets stripped. Would AEM itself be doing that somewhere on the HTML rendering side? – jbaker Mar 17 '17 at 14:19
  • According to latest specifications it should work: https://github.com/Adobe-Marketing-Cloud/htl-spec/blob/master/SPECIFICATION.md#2231-detailed-examples but if it's not working, I would recommend looking at your filter chain and any HTML minifying output filters in the chain. – Imran Saeed Mar 17 '17 at 14:39
  • I just tried this using AEM 6.2 and JS Fiddle (acs-tools): https://github.com/Adobe-Consulting-Services/acs-aem-tools/releases/tag/acs-aem-tools-0.0.40 Input:
    The output HTML is:
    – Imran Saeed Mar 17 '17 at 15:44
  • Just tried: the first method worked for me, but the empty array doesn't seem to work at AEM 6.3.2 , though the spec says it should work. :-( – Dr. Hans-Peter Störr Nov 30 '18 at 10:27
3

The above answer is a sightly specification bug. Reference: https://github.com/Adobe-Marketing-Cloud/htl-spec/issues/39

One solution for me is put true if is empty the sightly value like the follow example.

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

Instead of data-sly-test we can use following code

<img src="${properties.imgMobile}" alt="${properties.altText ? properties.altText : ''}"/>
Aniket Pandey
  • 1