WCAG - Image alt text does not allow for decorative text

Problem/Motivation

There is no capacity to code images up as decorative.
This is required to ensure compliance with WCAG 2.2 1.1.1

We need the ability for the alt text field on the media library to be:

1. left blank, or
2. allow for a decorative option, or
3. allow for the alt test to overridden when inserting image into a web page.

Note the alt text should be contextual in relation to the message/content it is associated with.

Steps to reproduce

• Go to Content | Media
• Select image to be edited (add media to upload new image)

Observed behaviour

The alt text field is mandatory requiring text - it does not allow for no entry and placing "" inside the field to replicate decorative alt text results in """" in the code.
Note: there is no option when inserting the image into a web page to change or update the alt text, which is also required to ensure it is contextual (aligns with the messaging of the page)

alt text is returning """" in code which does not allow for assisted technology browsers to interpret correctly as decorative (ignoring the image). Some assisted technology browsers seems to be interpreting this as bad coding and trying to use AI to describe the image by stating appears to be .......

Often the generic alt text provided in the media library is not suitable for the image's use on the web page, it could be focused on the incorrect messaging, to descriptive, not descriptive enough.

Expected outcome

The alt text should provide assisted technology users the same experience to consume information as a visual person. This includes not having to hear of an image that is only presented on the page as decorative (visual users will normally skip straight over this)
or
not unnecessarily repeating information already presented in the content (particularly immediately prior or afterwards)

Additionally

• Update the help text in the media library to Add a short description of the image to used by screen readers and displayed when the image is not loaded. If the image is decorative, add double quotation marks "". This is important for accessibility.
• Add an alt text field to the icon media type. Accessibility audit on a CT site raised that there is no option to add alt text to .svg ivon. This will also need to same help text added

Acceptance criteria

AC 1 - Image media help text
Given I'm a content author
When I observe the help text on the image media alt text field
Then it is Add a short description of the image to used by screen readers and displayed when the image is not loaded. If the image is decorative, add double quotation marks "". This is important for accessibility.

AC 2 - icon media alt text
Given I'm a content author
When I add an icon to the media library
Then there is an alt text field
And it is required
And the help text is Short description of the icon used by screen readers and displayed when the image is not loaded. If the icon is decorative, add double quotation marks "". This is important for accessibility.

AC 3 - decorative image media
Given I'm an anonymous user
And I'm using screen reading technology
When "" has been added to the alt text field of an image media file
Then the image is treated as decorative

AC 4 - decorative icon media
Given I'm an anonymous user
And I'm using screen reading technology
When "" has been added to the alt text field of an icon media file
Then the icon is treated as decorative

Solution direction

Ensure alt attribute is always set for image.twig. If alt is "" then replace with a blank string. See example below:

{#
/**
 * @file
 * Image component.
 *
 * Variables:
 * - theme: [string] Theme: light, dark.
 * - url: [string] URL of the image.
 * - alt: [string] Alternate text of the image. Treats `""` as blank.
 * - width: [string] Width.
 * - height: [string] Height.
 * - attributes: [string] Additional attributes.
 * - modifier_class: [string] Additional classes.
 */
#}

{% set theme_class = 'ct-theme-%s'|format(theme|default('light')) %}
{% set modifier_class = '%s %s'|format(theme_class, modifier_class|default('')) %}
{% set alt = (alt == '""') ? '' : alt|default('') %}

{% if url is not empty %}
  <img
    class="ct-image {{ modifier_class -}}"
    src="{{ url }}"
    alt="{{ alt }}"
    {% if width is not empty %}width="{{ width }}"{% endif %}
    {% if height is not empty %}height="{{ height }}"{% endif %}
    {% if attributes is not empty %}{{- attributes|raw -}}{% endif %}
  />
{% endif %}

Remove {% set alt_attribute = alt is defined ? 'alt="' ~ alt ~ '"' : '' %} from icon.twig. It's not needed.