[4.0] Intro and Full image accessibility

[brianteeman]

An alt text provides an accessible description of an image. Most of the time you should always have one. You should never not have any alt because then assistive technology such as a screenreader will announce the filename. See the October Joomla Magazine article on this

In the rarer situation that the image is purely decorative then it is acceptable to have an empty alt text which should be alt="".

Currently there are several places in Joomla where if you are too lazy to enter a text description of the image then joomla will insert alt="" While this does prevent the filename being read aloud it is not good practice as you are preventing a significant % of your readers being able to access all the content.

Research conducted by the EU shows that content creators want to (need to) create accessible content but don't really know how. The main tool that they have available to them is an accessibility checker. And they then act upon the findings of that tool.

If the content author performs an accessibility check of their site then most checkers will not report any errors or warnings about missing descriptions as it sees the alt="" and ignores it.

Adding alt="" is perfectly valid for a decorative image only. It should be a conscious/active decision to mark an image as decorative.

Comment from @brucel confirming this #31138 (comment)

Comment from @mgifford confirming this #31138 (comment)

Adding an additional help text to the description is not enough

Making this a required field is not possible in Joomla with the current codebase as it would only be required IF there is an image and we dont have support for that condition.

Suggesting that you have to put "" in the description to mark something as decorative is not very user friendly and it is actually adding more keystrokes etc than skipping to the next field and checking the box - as explained to @carcam

The correct use of alt text is not advanced accessibility. It is very basic accessibility and addressed at level A

There is no point in making the commitment and statement that Joomla itself is accessible if it at the same time makes it harder to create an accessible site.

Testing

Testing is really easy. No npm, js or css involved.
Merge the pull request and then go to edit an article on both the admin and site. For the site you might need to enable the frontend images and urls option in the component.

You now have a new field and tweaked text

Please test three scenarios when adding an intro image

1. Image Description (Alt Text) = Empty
   No Description = unchecked

2. Image Description (Alt Text) = "some description"
   No Description = unchecked

3. Image Description (Alt Text) = Empty
   No Description = checked

The expected behaviour for each of these tests is

1. <img loading="lazy" src="filename.jpg" itemprop="thumbnailUrl">
2. <img loading="lazy" src="filename.jpg" alt="some description" itemprop="thumbnailUrl">
3. <img loading="lazy" src="filename.jpg" alt itemprop="thumbnailUrl">
   or <img loading="lazy" src="filename.jpg" alt="" itemprop="thumbnailUrl">

PLEASE do not comment on what you think the code does but apply the PR and test it. Getting very tired of people blocking PR with their comments without actually testing the code.

PS we will need to do similar changes elsewhere

[C-Lodder]

Seems good.

Question though. Why have another parameter for this (checkbox) as opposed to completely omitting the alt attribute if no description is provided?

[ceford]

I have tested this item ✅ successfully on c5dd8cb

It does what it says. But, case 4: Description present and checked = Case 2.

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/31318.}

[brianteeman]

@C-Lodder there are two different scenarios. An empty ALT by ignorance and a blank ALT by choice. alt="" is valid and the correct thing to do for a purely decorative image. Instead of the checkbox it could be done by saying you have to enter "" in the alt text field to indicate it is a decorative image. Pre-existing user research and testing on this says that this would not be a user friendly or intuitive option.

@ceford I have no idea what you are saying - there is no case 4

[C-Lodder]

An empty ALT by ignorance and a blank ALT by choice

Ahh yes, sorry.

[C-Lodder]

I have tested this item ✅ successfully on c5dd8cb

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/31318.}

[ceford]

In anticipation of this being merged soon I have changed the Help screen to provide a new screen shot and this in the text:

Image Description (Alt Text). Set the alt attribute for this image. A few descriptive words for screen readers.
No Description. Check in the rare instance of a purely Decorative Image - no description required. Note that if the Image Description is empty and the No Description checkbox is unchecked then the image will fail to meet accessibility criteria. If an image description is present this check box has no effect.

It will take a while for this change to pass through the translation system. Please come back if my understanding is incorrect.

[carcam]

@brianteeman thank you very much for this commit and I do appreciate you consider the options I suggested about double quotes and making the field required (which I also know it was our [yours and mine] preferred options).

I don't see anything against this and as per the motives we discussed it looks like a great addition to Joomla A11y.

I want to discuss this with the team but remembering an old saying from my university times: "Better ask forgiveness than permission" (sorry for the bad translation), I would go for requesting RTC status (not even sure if this is something I can do).

Also I will propose JAT to review the preview PR that was rejected as for providing an homogeneus UI, it looks like it is the correct path (though as you know I'm against adding more fields to the form), but that is another story.

Thank you very much indeed.

RTC

Best!!

[infograf768]

@carcam
If you have tested this pr ok, please add your test on issues.joomla.org

[carcam]

@infograf768 it already has 2 tests, right?

[infograf768]

a 3rd test adds value to the Pr ;)

Rtc

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/31318.}

[infograf768]

Note: I guess a similar pr will be done for category or is it useless there?

[brianteeman]

Already done hours ago

[chmst]

Thanks!

[brianteeman]

Thanks