Skip to content

Fix accessibility: add missing labels to fundraising SVG and images#2553

Open
Mr-Sunglasses wants to merge 1 commit intodjango:mainfrom
Mr-Sunglasses:feat/accessibilty-issue-in-fundraising
Open

Fix accessibility: add missing labels to fundraising SVG and images#2553
Mr-Sunglasses wants to merge 1 commit intodjango:mainfrom
Mr-Sunglasses:feat/accessibilty-issue-in-fundraising

Conversation

@Mr-Sunglasses
Copy link
Copy Markdown
Contributor

@Mr-Sunglasses Mr-Sunglasses commented Mar 10, 2026

fix: #2552

Before:

WCAG 'Text Labels and Names' criterion (Content with images must be labeled) error in heart svg showing the funding goal

After:

fixed WCAG 'Text Labels and Names' criterion (Content with images must be labeled) error in heart svg showing the funding goal with appropriate stats for screen readers

Copy link
Copy Markdown

@erosselli erosselli left a comment

Choose a reason for hiding this comment

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

Thanks for contributing! I left some comments

Comment on lines 3 to +4
<div class="hero-logo">
{% if obj.url %}<a href="{{ obj.url }}" rel="nofollow">{% endif %}
{% if obj.url %}<a href="{{ obj.url }}" rel="nofollow" aria-label="{{ obj.display_name }}">{% endif %}
Copy link
Copy Markdown

Choose a reason for hiding this comment

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

what is this change? It seems unrelated to the heart image


<div class="fundraising-heart" data-percent="{{ goal_percent }}">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 503 431">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 503 431" role="img" aria-label="{% blocktranslate trimmed %}Fundraising progress: {{ goal_percent }} funded{% endblocktranslate %}">
Copy link
Copy Markdown

Choose a reason for hiding this comment

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

I think this needs a "%", since right now it reads "Fundraising progress: 0 funded" which to me seems like an absolute number rather than a %

Suggested change
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 503 431" role="img" aria-label="{% blocktranslate trimmed %}Fundraising progress: {{ goal_percent }} funded{% endblocktranslate %}">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 503 431" role="img" aria-label="{% blocktranslate trimmed %}Fundraising progress: {{ goal_percent }} percent funded{% endblocktranslate %}">


<div class="fundraising-heart" data-percent="{{ goal_percent }}">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 503 431">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 503 431" role="img" aria-label="{% blocktranslate trimmed %}Fundraising progress: {{ goal_percent }} funded{% endblocktranslate %}">
Copy link
Copy Markdown

@erosselli erosselli Mar 15, 2026

Choose a reason for hiding this comment

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

also since this is new text, I think we might need to add this as new messages to locale/en/LC_MESSAGES/django.po -- look at how we do it for the existing {{ goal_percent }}% funded text :)

</g>
<foreignObject>
<img src="{% static 'img/fundraising-heart.svg' %}" />
<img src="{% static 'img/fundraising-heart.svg' %}" alt="{% translate 'Fundraising heart logo' %}" />
Copy link
Copy Markdown

Choose a reason for hiding this comment

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

is this needed? I tested with a screen reader and this doesn't get read out but I tbh I think just the label from above is enough

@adamzap
Copy link
Copy Markdown
Member

adamzap commented Apr 6, 2026

@Mr-Sunglasses Do you plan to address the comments here?

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

Projects

Development

Successfully merging this pull request may close these issues.

Accessibility: Missing labels on fundraising heart SVG

4 participants