Accessibility requirement: capacity to have an empty alt output in the HTML from an empty or null string variable passed into a th:alt property

• Nature of the issue according to me: BUG
• Problem description: Web accessibility for images that are decorative (that is most images on the web) requires that they have an empty alt property, see: https://www.w3.org/WAI/tutorials/images/decorative/
• Work-around: duplicate img tag with two versions, one with an alt=“” when variable is an empty string or null, the other with the th:alt=“”, when the variable is a non nempty, non null string
• Version of Thymeleaf: 3
• Environment: not relevant
• Add an empty th:alt property to an image tag if variable passed in the th:alt property resolves to null or empty string without having to manage empty or null string and duplicating tag

HTML in thymeleaf, case: string altText is not empty ( set to ‘test’)

<th:block th:with=" altText = 'test' ">
    <img alt=""
        src="https://via.placeholder.com/90x32?text=NonEmptynonNullString"
        th:alt="${altText}"
        th:if="${not #strings.isEmpty(altText)}"
    >
    <img alt=""
        src="https://via.placeholder.com/90x32?text=emptyOrNullString"
        th:if="${altText == '' or altText == null}"
    >
</th:block>

Outputs

<img alt="" src="https://via.placeholder.com/90x32?text=NonEmptynonNullString">

HTML in thymeleaf, case: string altText is empty ( set to ‘’)

<th:block th:with=" altText = '' ">
    <img alt=""
        src="https://via.placeholder.com/90x32?text=NonEmptynonNullString"
        th:alt="${altText}"
        th:if="${not #strings.isEmpty(altText)}"
    >
    <img alt=""
        src="https://via.placeholder.com/90x32?text=emptyOrNullString"
        th:if="${altText == '' or altText == null}"
    >
</th:block>

Outputs

<img alt="" src="https://via.placeholder.com/90x32?text=emptyOrNullString">

HTML in thymeleaf, case: string altText is empty ( set to null)

<th:block th:with=" altText = null ">
    <img alt=""
        src="https://via.placeholder.com/90x32?text=NonEmptynonNullString"
        th:alt="${altText}"
        th:if="${not #strings.isEmpty(altText)}"
    >
    <img alt=""
        src="https://via.placeholder.com/90x32?text=emptyOrNullString"
        th:if="${altText == '' or altText == null}"
    >
</th:block>

Outputs

<img alt="" src="https://via.placeholder.com/90x32?text=emptyOrNullString">

HTML in thymeleaf, case: string altText is empty (set to null or ‘’) It should be possible to output

<th:block th:with=" altText = null ">
    <img
        src="https://via.placeholder.com/90x32?text=emptyOrNullString"
        th:alt="${altText}"
    >
</th:block>
<th:block th:with=" altText = '' ">
    <img
        src="https://via.placeholder.com/90x32?text=emptyOrNullString"
        th:alt="${altText}"
    >
</th:block>

Outputs

<img src="https://via.placeholder.com/90x32?text=emptyOrNullString">

Thymeleaf SHOULD output, for web accessibility needs

<img alt="" src="https://via.placeholder.com/90x32?text=emptyOrNullString">

[Sven-WEBDESIGN]

Sorry, i closed the issue by error. Have a good day.

[ultraq]

Yeah, the th:alt="" thing does bother me - I feel it should at least emit an empty alt value if the expression in it is empty itself or resolves to some “falsey” value. I think we have other attributes that do this, so I can check those.

I’ll leave this issue open and tag it as appropriate so that the other devs can see this and we can discuss if necessary. Thanks for bringing this up @Sven-WEBDESIGN.