Title attribute on decorative (blank alt attribute) images is an accessibility problem.

Created on 29 July 2024, 5 months ago
Updated 31 July 2024, 5 months ago

Problem/Motivation

Blazy is overly aggressive in populating the `title` attribute for images. This results in cases where an image can be decorative with a blank `alt` attribute but a populated `title` attribute, even if it was left blank on the original media item. This is technically a failure of WCAG 1.1.1 Non-text Content, as a `title` attribute shouldn't be used in place of `alt`.

Steps to reproduce

1. Put in an image media entity that is rendered using the Blazy formatter
1. Leave alt and title attributes blank, name media entity appropriately
1. Examine img tag in rendered output

Proposed resolution

Add check into code at `blazy/src/Theme/Attributes.php:488` to not set the title if the alt text is empty.

Remaining tasks

User interface changes

None, unless an override is desired

API changes

none

Data model changes

none, other than to allow for both `alt` and `title` to be blank.

Feature request
Status

Closed: duplicate

Version

3.0

Component

Code

Created by

🇺🇸United States R_H-L

Live updates comments and jobs are added and updated live.
  • Accessibility

    It affects the ability of people with disabilities or special needs (such as blindness or color-blindness) to use Drupal.

Sign in to follow issues

Comments & Activities

  • Issue created by @R_H-L
  • Status changed to Postponed: needs info 5 months ago
  • 🇮🇩Indonesia gausarts

    Thank you.

    > to not set the title if the alt text is empty.
    I don't quite understand your issue :)

    FYI, the current implementation is:

    • alt is always being enforced for accessibility reason,
    • title is always optional, never being enforced.

    They are already what you wanted, unless I misunderstood, or missed the use cases in the first place, or mistakenly overrode things, of course.

    Please describe using cases with current implementations vs expectations, e.g.:

    1. Alt filled, title filled
      Current: GOOD Expected: GOOD
    2. Alt filled, title empty
      Current: GOOD Expected: GOOD
    3. Alt empty, title empty
      Current: GOOD Expected: GOOD
    4. Alt empty, title filled
      Current: GOOD Expected: GOOD

    Keep GOOD, or change it to BAD, with added explanations only if BAD.

    To ease debugging, you can use any lightbox with caption option filled in with Alt and Title. And later inspect element as usual.

    That would hopefully pinpoint expected fixes, with proper debugging/ reproduction, more accurately.

  • 🇺🇸United States R_H-L

    Alt text is not always necessary, in that some images are considered "decorative" in that they are not needed for the content. A good example of this is things like thumbnails for a news story link. There is a module to allow for this, the Decorative Images Module, which allows for blanked alt text.

    There shouldn't be a case where the title attribute is filled in but alt is not, though the inverse is fine. Right now, Blazy seems to obstinately fill the title in, even if it is left blank intentionally, and seems to be pulling in the media item label if nothing else (blazy/src/Theme/Attributes.php:494)

    I think this is what you want here:
    Alt filled, title filled
    Current: GOOD Expected: GOOD
    Alt filled, title empty
    Current: GOOD Expected: GOOD
    Alt empty, title empty
    Current: GOOD Expected: GOOD
    Alt empty, title filled
    Current: GOOD Expected: BAD

  • 🇮🇩Indonesia gausarts

    I understand your issue now, thanks :)

    I heard about decorative image for quite a while. It was a new accessibility concern, AFAIK, I didn't give too much care for reasons:

    • Blazy is not designed for decorative images like thumbnails, borders alike, and discouraged to be used as such, as noted anywhere and at project home:
      It doesn't take over all images, so it can be enabled as needed via Blazy formatter, or its supporting modules.
      I even intentionally disabled Blazy features for thumbnails like seen at Slick/Splide carousels from the very early devs. Just because I can, I never abused Blazy for that purpose because it was a fundamental concept. When core did force lazy load on all images, Blazy even offered an option to disable lazyload via Lazy priority option, which also crucial for LCP issues. Meaning Blazy is by design simply not for decorative images if that is what you care about in this issue.
    • It is not supported by core, yet.

    However I supported your expectations since it was an obvious miss for the title being enforced here. It was never being enforced beforehand until just as recently when I reworked Media integration to its fullest since 2.0.6, IIRC.

    But it doesn't mean I supported your use of Blazy for decorative usages per se.

    The only reason it has a fallback for Media label was to take huge benefit of the very useful and meaningful label automatically generated by core Media specific for Remote video which was also another raised Accessibility concerned in some other thread. Without taking this automatic advantage, you have to walk through each video and add your own laborous meaningful titles.

    Patches are welcome, it should be easy, what is not easy is to not break the latest mentioned advantage, and that should be properly incorporated in.

  • 🇮🇩Indonesia gausarts

    We should probably change this to a Bug.

    What prevents me for the time being is the automation benefits with this default scenario:
    If you, like some regular editors, at least based on my own clients' tendencies, can just leave Media label as is with the benefits of having proper documentation, hierarchical file names, etc. without extra editings which may not only waste your time, but also destroy the hidden benefits.

    With that default, Blazy Media label will not be a problem since it has an internal mechanism to filter out meaningless default values like file names.

    No such ugly titles will be printed, thus no problems. UI fixes are equally valid like written codes.

    Aside from the fact, Blazy is not designed for OP intentions from the very beginning, thanks to its just being optional. So it has no real compelling reasons that is is against any holy rules.

    Thus I can also just close this as WAD if no other people interest in this, except you.

  • Status changed to Closed: duplicate 5 months ago
Production build 0.71.5 2024