Skip to content

Add alt attribute to image on PCPInfo template. #21808

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Oct 18, 2021

Conversation

braders
Copy link
Contributor

@braders braders commented Oct 12, 2021

It is an accessibility best-practice that all images should have alt text.

If a description has been provided, we use that text,
otherwise an empty alt text is used (i.e. the image is treated as decorative)

@civibot
Copy link

civibot bot commented Oct 12, 2021

(Standard links)

@civibot civibot bot added the master label Oct 12, 2021
@eileenmcnaughton
Copy link
Contributor

@agh1 this feels like something you know best practices for

@@ -185,10 +185,11 @@ public function run() {
if (!empty($entityFile)) {
$fileInfo = reset($entityFile);
$fileId = $fileInfo['fileID'];
$altText = $fileInfo['description'] ?? '';
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Because 'description' is not automatically html-escaped (per https://github.com/civicrm/civicrm-core/blob/5.43/CRM/Utils/API/HTMLInputCoder.php#L55) it needs to be escaped here before inserting it into html.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good catch. I've updated this to use htmlspecialchars, but to be honest I wasn't sure if CiviCRM has a better function to be using here - let me know if so!

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That works. Thanks.

@colemanw
Copy link
Member

@braders thanks for this PR, this looks good to go, but it would be helpful if you squashed the 2 commits (which you can do with git rebase -i HEAD~2 and then get push -f).

It is an accessibility best-practice that all images should have alt text.

If a description has been provided, we use that text,
otherwise an empty alt text is used (i.e. the image is treated as decorative)
@braders braders force-pushed the feature/pcp-alt-text branch from 8691f56 to 7546e57 Compare October 18, 2021 18:33
@braders
Copy link
Contributor Author

braders commented Oct 18, 2021

@colemanw Rebased. Thanks

@seamuslee001 seamuslee001 merged commit 781aa24 into civicrm:master Oct 18, 2021
@agh1
Copy link
Contributor

agh1 commented Oct 19, 2021

Whoa y'all I'm sorry I'm late to the party, but I don't think it is clear to the person editing the description that it's to be used as alt text.
image

Yes, alt text is better than no alt text, but no text is better than random text as alt text.

I think it will be important to modify the PCP edit form to specify that it's not "description" but rather alt text. We'll also need to make it clear at least in the release notes, if not in the upgrade messages, that all past PCP image descriptions are now treated as alt text.

On the plus side, my general sense is that few people have been using the description field and if they do, they're unlikely to put anything too terrible in there. It just might be a little confusing for someone who can't see the image.

@braders
Copy link
Contributor Author

braders commented Oct 20, 2021

For what it's worth, I'm not opposed to the alt attribute always being blank (i.e. treating the image as decorative).

Given that the description is otherwise not displayed on the PCP page, using it as alt text feels appropriate, but I don't feel strongly either way.

@agh1
Copy link
Contributor

agh1 commented Oct 20, 2021

I actually do think this is an improvement--it just needs to be followed back to the source a little more.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants