Accessibility: ability to write alt text that is different to file description text for images

Bug #1982294 reported by Dianne Tennent
12
This bug affects 1 person
Affects Status Importance Assigned to Milestone
Mahara
Fix Released
Wishlist
Unassigned

Bug Description

This feature idea arose from a discussion of this feature request, regarding descriptions of embedded images in 'Text' blocks: Bug 1737995

It is related to images in 'Image' and 'Image Gallery' blocks only (not embedded images in 'Text' blocks).

This is a summary of the discussion:
- In order to improve the accessibility of Mahara, we would ideally have alt text available for every image and the alt text would be appropriate for describing an image to someone visually impaired.
- Currently, this is not a requirement.
- Currently, the text provided for the image file description is used as alt text - these are always the same, i.e. when the description is updated, so is the alt text (for 'Image' and 'Image Gallery' blocks).
- Currently, people can choose to display the file description as a caption in Image and Image Gallery blocks.

However, at times, the text that someone wishes to display as a caption is different to what would be considered appropriate alt text. The alt text is to describe the image, e.g. 'Two women dressed in warm jackets walk along a deserted beach', whereas the caption puts the image into the context of the surrounding text, e.g. 'Sandy and Mel discuss their latest project while out and about'.

Therefore, the proposed feature is to allow people to write different text for alt text and for the file description text (that would be used as a caption).

Where will this be implemented? The MVP of the proposed feature will be included in the options for editing a file that has been uploaded to Mahara. (The next phase of this feature would be to make this a requirement, i.e. prevent people from uploading image files without writing alt text. That aspect is not part of this feature proposal).

Attached to this bug report is a wireframe of the proposed feature, which illustrates the following user journey:
1. Precondition: user has uploaded an image file
2. User indicates via switchbox whether the image is decorative or not. This switchbox is set to 'No' by default. A tooltip is provided that explains what is considered to be a decorative image.
3. If the user chooses 'Yes', it is a decorative image, therefore no text needs to be provided. The user will not be able to enter alt text or a caption for this image file.
4. If the user leaves this switch set to 'No', then the 'Alt text' field is available, along with a tooltip explaining what effective and appropriate alt text is. Limited to 150 characters (?).
5. Below this input field is another switchbox: 'Use this alt text as a caption for this image?' - set to 'Yes' by default. By default, the alt text will be used as the caption.
6. If this switch remains set to 'Yes' and then the user chooses to display the image caption in the 'Image' or 'Image Gallery' blocks, we must ensure that we do not double up the alt text and the image caption. In this case, the image caption is sufficient for a screen reader, and the alt text should be set to an empty string to avoid confusion.
7. If the switchbox from (5) is set to 'No', then the user has the option to provide a separate line of text to be used as the image caption. In this case, when images and their captions are displayed in 'Image' and 'Image Gallery' blocks, there will be both alt text, and an image caption, giving slightly different information.

General:
- Whenever alt text or caption is updated, this update is applied to all instances of the image in 'Image' or 'Image Gallery' blocks. However, the update will not be applied to instances of the image that have been embedded in 'Text' blocks (this is beyond the current scope).

Please see the attached wireframe below which illustrates this feature.

Revision history for this message
Dianne Tennent (dianne-t) wrote :
tags: added: accessibility
description: updated
Changed in mahara:
assignee: nobody → Dianne Tennent (dianne-t)
summary: - Ability to write alt text that is different to file description text for
- images
+ Accessibility: ability to write alt text that is different to file
+ description text for images
description: updated
description: updated
Revision history for this message
Dianne Tennent (dianne-t) wrote (last edit ):

Notes from discussion with Maia, our accessibility specialist:
- We should remove the title attribute from all our images
- Because these images are wrapped with a link tag, we need to take this into account
- There should be an aria-label that tells the screenreader user what the link does, e.g. "Comment on this image"
- Then use an aria-describedby attribute on the link to associate it with the image
- When alt text is identical to caption, and the caption is on the page, the alt attribute should be an empty string.
- Here is an example of the mark up to use: https://www.w3.org/WAI/tutorials/images/informative/#example-2-images-used-to-supplement-other-information - note the explanation of when an image can be considered decorative which applies to our context (caption = alt text) also see: https://webaim.org/blog/alt-text-and-linked-images/
- As always, make sure to test with a screenreader

Changed in mahara:
status: New → Confirmed
description: updated
Revision history for this message
Mahara Bot (dev-mahara) wrote : A patch has been submitted for review
Changed in mahara:
milestone: none → 22.10.0
importance: Undecided → Wishlist
assignee: Dianne Tennent (dianne-t) → nobody
status: Confirmed → In Progress
Revision history for this message
Mahara Bot (dev-mahara) wrote : A change has been merged

Reviewed: https://reviews.mahara.org/c/mahara/+/13011
Committed: https://git.mahara.org/mahara/mahara/commit/4c417c738dc922d387d84f2b1103052728098bfd
Submitter: "Robert Lyon <email address hidden>"
Branch: main

commit 4c417c738dc922d387d84f2b1103052728098bfd
Author: Dianne Tennent <email address hidden>
Date: Mon Jul 25 17:26:47 2022 +1200

Bug 1982294: Accessible images with Alt. text and captions

* Description in the context of images is now called 'Caption'
in the frontend
* Images now have an 'Alttext' field,
e.g. for non-displayed assistive technologies.

* Hierarchy :
1. altiscaption is true, then alttext (whether empty or not)
2. altiscaption is false and caption is not empty, then caption
3. altiscaption is false and caption is empty, then title

- add 3 new columns to artefact_file_image table
- ability to save bool for if image is purely decorative
- saves alt text
- saves bool for if alt = caption
- for linked images, the <A> tag wraps around the image and the
caption, so that if the alt text is empty (when
description is same as alt), the link has a label for
screen readers
- added <figure> and <figcaption> when 'showdescription' is on
- deleted thumbnails.tpl as it is not being used anymore
- tidied up square thumbs so that caption will avoid being cut off
- add help text for isdecorative, alttext, and
altiscaption fields
- added a 'show caption' to image formatting options' when adding
image via TinyMCE so that it can have a caption

Change-Id: I80c2d62e45bb08d59b6f8d3033a113fcd30ae9a7

Robert Lyon (robertl-9)
Changed in mahara:
status: In Progress → Fix Committed
tags: added: newfeature
Robert Lyon (robertl-9)
Changed in mahara:
status: Fix Committed → Fix Released
To post a comment you must log in.
This report contains Public information  
Everyone can see this information.

Duplicates of this bug

Other bug subscribers

Remote bug watches

Bug watches keep track of this bug in other bug trackers.