Header formatting on email version of TWiR is not line breaking correctly

[mariannegoldin]

The title image and header of the email are not breaking correctly in the generated HTML code for the TwiR email issue.

The break should be placed after the "This Week in Rust" title image. Instead, the line is currently breaking after the "This" in the text header.

The email code is being generated by the optimize-email Makefile job, which uses the website code (via the make build && make generate-website && make host-content command) to create an email using juice.

<td style="font-family: 'Helvetica Neue', Helvetica, sans-serif;">
  <img class="wrapper-image " src="https://this-week-in-rust.org/images/logo32.png" alt="This Week in Rust" style="width: 30px; vertical-align: bottom; max-width: 100%;" width="30">
  <span class="wrapper-header-01" style="line-height: 27px; font-size: 23px; font-weight: bold; color: #444444;">This Week in Rust</span>
</td>

Narrow window:

Wide window:

[ericseppanen]

It looks good for me, but I am seeing an icon at the left where you get "This Week in Rust" in small purple text.

Gmail/Linux/Firefox:

Gmail/IOS:

[ericseppanen]

I think the alt-text on the icon is actually hurting here (since we repeat that exact text to its right), and suppressing it would give a better outcome.

[bennyvasquez]

@mariannegoldin / @ericseppanen do either of y'all have interest in trying to fix this? We don't wanna suppress the alt-text, but that's definitely a less than optimal experience for users. If you don't have time or expertise, I'll add that help wanted label and we'll see if we can get some help.

[ericseppanen]

I think my preferred fix is still to lose the alt-text. Can you explain why you disagree?

I don't think it adds any value, because that exact text is already there. If the image doesn't load, nothing is lost.

[bennyvasquez]

I just went back and looked at this again and realized that I'd completely missed that we include it on 119 in addition. I'd really like to hear from someone with a deeper accessibility understanding. Even though the text is repeated just next to it, removing it would cause a problem for anyone relying on that alt text.

[wezm]

I think it's reasonable to set alt="" on the image as it is a decorative element that does not add anything not already available as text in the email (since the "This Week in Rust" text is present as a heading). The web accessibility guidelines say the following:

If non-text content is pure decoration, is used only for visual formatting, or is not presented to users, then it is implemented in a way that it can be ignored by assistive technology.

pure decoration is defined as:

serving only an aesthetic purpose, providing no information, and having no functionality

Specifically setting the alt attribute to null/empty string hides that element from assistive technology (as opposed to omitting it entirely).

[denschub]

If we're being very pedantic, the alt text is currently wrong anyway. The HTML Standard provides some guidance on what the alt-text should be:

The most general rule to consider when writing alternative text is the following: the intent is that replacing every image with the text of its alt attribute does not change the meaning of the page.

And here, it already changes the meaning of the page. The image being replaced is not "This Week in Rust", it's "The This Week in Rust Logo".

However, in this case, setting alt="" is the actually correct thing to do. It's not even a hacky workaround, but somewhat intended: The icon used here doesn't have a meaning on its own, it's a supplemental decoration to the text right next to it. The spec has this case covered with an explanation, too:

In some cases, the icon is supplemental to a text label conveying the same meaning. In those cases, the alt attribute must be present but must be empty.

So yeah, +1 for setting the alt text to an empty string. If you want to be explicit about telling screenreaders to skip over the image entirely, you can additionally set the aria-hidden="true" attribute on the <img>. No information is lost, since the "title"/"headline" is repeated in text form right after that.

[mariannegoldin]

Thank you @bennyvasquez for the fix!