Skip to content

Address some issues from the accessibility milestone #1562

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.

Sign up for GitHub

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

Open
wants to merge 5 commits into
base: main
Choose a base branch
from
+18 −18
Open

Address some issues from the accessibility milestone #1562

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
5d497ac
show that welcome video is playable in alt-text
DragonSenseiGuy Sep 2, 2025
6826f5e
Add the full form of AoC in the alt texts
DragonSenseiGuy Sep 2, 2025
141aeb6
add alt-text to all images
DragonSenseiGuy Sep 2, 2025
d404f60
change alt-texts for timeline page
DragonSenseiGuy Sep 2, 2025
bc7b622
Add correct date
DragonSenseiGuy Sep 2, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion pydis_site/apps/timeline/entries/2018-02-03_our-logo-is-born.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,5 +5,5 @@ icon: pydis
---

<p style="background-color: #7289DA; border-radius: 10px;">
<img style="padding-right: 20px;" src="https://raw.githubusercontent.com/python-discord/branding/main/logos/logo_banner/logo_site_banner.svg">
<img style="padding-right: 20px;" src="https://raw.githubusercontent.com/python-discord/branding/main/logos/logo_banner/logo_site_banner.svg" alt="Python Discord Logo">
</p>
2 changes: 1 addition & 1 deletion pydis_site/apps/timeline/entries/2024-10-07_python-313-release-stream.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
---
title: Python 3.13 Release Stream
date: Oct 10th, 2022
date: Oct 10th, 2024
icon: pydis
---

Expand Down
4 changes: 2 additions & 2 deletions pydis_site/templates/events/main_events.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ <h2 class="title is-4"><a href="{% url "events:page" path="pyweek" %}">PyWeek</a
</div>
<div class="card">
<div class="card-image">
<img loading=lazy src="/static/images/events/gallery/adventofcode.png" alt="Server icon for AoC">
<img loading=lazy src="/static/images/events/gallery/adventofcode.png" alt="Server icon for Advent of Code">
</div>
<div class="card-content">
<h2 class="title is-4"><a href="{% url "events:page" path="adventofcode" %}">Advent of code</a></h2>
Expand All @@ -53,7 +53,7 @@ <h2 class="title is-4"><a href="{% url "events:page" path="adventofcode" %}">Adv
</div>
<div class="card">
<div class="card-image">
<img loading=lazy src="/static/images/events/gallery/adventofcode.png" alt="Server icon for AoC">
<img loading=lazy src="/static/images/events/gallery/adventofcode.png" alt="Server icon for Advent of Code">
</div>
<div class="card-content">
<h2 class="title is-4"><a href="{% url "events:page" path="revivalofcode" %}">Revival of Code</a></h2>
Expand Down
6 changes: 3 additions & 3 deletions pydis_site/templates/events/other_events.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ <h2 class="title is-4"><a href="https://www.youtube.com/watch?v=PTjLkvvjKnM">Fan
<article class="media">
<div class="media-left">
<p class="image">
<img loading=lazy class="is-rounded" src="https://s3.dualstack.us-east-2.amazonaws.com/pythondotorg-assets/media/files/python-logo-only.svg" style="width: 3rem;">
<img loading=lazy class="is-rounded" src="https://s3.dualstack.us-east-2.amazonaws.com/pythondotorg-assets/media/files/python-logo-only.svg" style="width: 3rem;" alt="">
</p>
</div>
<div class="media-content">
Expand Down Expand Up @@ -85,7 +85,7 @@ <h2 class="title is-4"><a href="https://www.youtube.com/watch?v=00CW1y-O8YQ">Dev
<article class="media">
<div class="media-left">
<p class="image">
<img loading=lazy class="is-rounded" src="https://s3.dualstack.us-east-2.amazonaws.com/pythondotorg-assets/media/files/python-logo-only.svg" style="width: 3rem;">
<img loading=lazy class="is-rounded" src="https://s3.dualstack.us-east-2.amazonaws.com/pythondotorg-assets/media/files/python-logo-only.svg" style="width: 3rem;" alt="">
</p>
</div>
<div class="media-content">
Expand All @@ -111,7 +111,7 @@ <h2 class="title is-4"><a href="https://www.youtube.com/watch?v=AHT2l3hcIJg">Pyt
<article class="media">
<div class="media-left">
<p class="image">
<img loading=lazy src="/static/images/events/pixels_logo_transparent.gif" style="width: 3rem;">
<img loading=lazy src="/static/images/events/pixels_logo_transparent.gif" style="width: 3rem;" alt="">
</p>
</div>
<div class="media-content">
Expand Down
6 changes: 3 additions & 3 deletions pydis_site/templates/events/scheduled_events.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ <h2 class="title is-5" style="margin-bottom: 2rem;">Scheduled events</h2>
<article class="media">
<div class="media-left">
<p class="image is-64x64">
<a href="{% url "events:page" path="code-jams/12" %}"><img class="is-rounded" src="/static/images/events/summer_code_jam_2025/logo.png"></a>
<a href="{% url "events:page" path="code-jams/12" %}"><img class="is-rounded" src="/static/images/events/summer_code_jam_2025/logo.png" alt=""></a>
Copy link
Contributor

Choose a reason for hiding this comment

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

Why do these three have alt=""? As proper links they should be clickable and with empty alt text it will be ignored by screen readers, right?

Copy link
Author

@DragonSenseiGuy DragonSenseiGuy Sep 21, 2025 •
edited
Loading

Choose a reason for hiding this comment

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

#1406 (comment)

"While descriptive text is imperative to describe images to those who can’t see them, these images are purely decorative and add no value to someone not seeing the page. Use alt=”” instead so the experience with a screen reader is less cluttered."

Copy link
Member

Choose a reason for hiding this comment

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

These images are not decorative. If they are the primary (and in this case sole) component within an <a> tag then they are by definition not decorative, they are serving a purpose as a hyperlink to the code jam pages and as such must have appropriate alt text.

Copy link
Author

Choose a reason for hiding this comment

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

These images are not decorative. If they are the primary (and in this case sole) component within an <a> tag then they are by definition not decorative, they are serving a purpose as a hyperlink to the code jam pages and as such must have appropriate alt text.

I'm just following what the issue says, but I can add it if needed.

Copy link
Member

Choose a reason for hiding this comment

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

I'm just following what the issue says, but I can add it if needed.

Yes, the issue generally covers the situations where that is a problem, but this is not one of them.

Hypothetically for the following content:

<div id="main">
  <!-- where this is a decorative graphic that holds no useful user information -->
  <img src="/some/graphic.png" />
</div>

The image there is decorative, is not clickable, serves no purpose and thus is not worth having alt text for, adding alt text here would just be noise for a screen reader. So, we'd add alt="":

<div id="main">
  <!-- where this is a decorative graphic that holds no useful user information -->
  <img src="/some/graphic.png" alt="" />
</div>

However, if the <img> is within an <a> then that image is clickable, and if there is nothing else in that <a> then there is nothing else to indicate to a user what they are clicking.

For example, basing things off your current PR, we have something like the following:

<a href="/login">
  <img src="/login_graphic.png" alt="" />
</a>

There is no descriptive text inside the <a>, so a screenreader cannot look at this and say anything to the user along the lines of "This is a login button", it has no idea how to describe the content because we have explicitly disabled the alt text.

It's very important to keep the descriptive text where the object is not decorative, obviously an image that is acting as a button/link is not decorative since clicking it takes you somewhere.

Break down your elements into three categories: informational, decorative or actions.

  • You can have buttons that are actions, they take you somewhere when you click them. These obviously must be eithered labelled with text elements or be an image element with alt text.
  • You can have images that may contain information or may add information to content surrounding them (even if accessibility tools cannot read the image content), these also obviously need alt text to symbolise to a screenreader/user using accessibility tooling what the content of that image is.
  • Decorative objects are objects where you could remove them from the document and the content and actions from the document would remain the same, you can gain the same information from the document and use the same actions to continue browsing to other areas of the webpage.

Decorative objects do not need accessibility text because it is not important that tools to help with visual impairment describe elements of a webpage that have no use to users who are visually impaired (for example, some fancy SVG background doesn't need explaining to a user who has no way to see the background).

Copy link
Author

Choose a reason for hiding this comment

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

On it, probably will have a new commit in like 1-2 days.

</p>
</div>
<div class="media-content">
Expand All @@ -26,7 +26,7 @@ <h5 class="title is-4"><a href="{% url "events:page" path="code-jams/12" %}">Sum
<article class="media">
<div class="media-left">
<p class="image is-64x64">
<a href="{% url "events:page" path="pyweek" %}"><img class="is-rounded" src="/static/images/events/icons/pyweek.png"></a>
<a href="{% url "events:page" path="pyweek" %}"><img class="is-rounded" src="/static/images/events/icons/pyweek.png" alt=""></a>
</p>
</div>
<div class="media-content">
Expand All @@ -49,7 +49,7 @@ <h5 class="title is-4"><a href="{% url "events:page" path="pyweek" %}">PyWeek 38
<article class="media">
<div class="media-left">
<p class="image is-64x64">
<a href="{% url "events:page" path="adventofcode" %}"><img class="is-rounded" src="/static/images/events/icons/adventofcode.png"></a>
<a href="{% url "events:page" path="adventofcode" %}"><img class="is-rounded" src="/static/images/events/icons/adventofcode.png" alt=""></a>
</p>
</div>
<div class="media-content">
Expand Down
2 changes: 1 addition & 1 deletion pydis_site/templates/events/sidebar/adventofcode/useful-links.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<div class="box">
<div class="has-text-centered">
<img src="https://raw.githubusercontent.com/python-discord/branding/main/events/christmas/server_icons/festive_256.gif" style="border-radius: 10px;" alt="Server icon for AoC">
<img src="https://raw.githubusercontent.com/python-discord/branding/main/events/christmas/server_icons/festive_256.gif" style="border-radius: 10px;" alt="Server icon for Advent of Code">
</div>
<p class="menu-label">Quick links</p>
<ul class="menu-list">
Expand Down
8 changes: 4 additions & 4 deletions pydis_site/templates/events/sidebar/main_sidebar.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ <h2 class="title is-5">Previous events</h2>
<article class="media">
<div class="media-left">
<p class="image is-32x32">
<img class="is-rounded" src="/static/images/events/summer_code_jam_2023/logo.PNG">
<img class="is-rounded" src="/static/images/events/summer_code_jam_2023/logo.PNG" alt="">
</p>
</div>
<div class="media-content">
Expand All @@ -16,7 +16,7 @@ <h5 class="title is-5"><a href="{% url "events:page" path="code-jams/10" %}">Sum
<article class="media">
<div class="media-left">
<p class="image is-32x32">
<img class="is-rounded" src="/static/images/events/icons/pyweek.png">
<img class="is-rounded" src="/static/images/events/icons/pyweek.png" alt="">
</p>
</div>
<div class="media-content">
Expand All @@ -29,7 +29,7 @@ <h5 class="title is-5"><a href="https://pyweek/36/">PyWeek 36</a></h5>
<article class="media">
<div class="media-left">
<p class="image is-32x32">
<img class="is-rounded" src="/static/images/events/icons/adventofcode.png">
<img class="is-rounded" src="/static/images/events/icons/adventofcode.png" alt="">
</p>
</div>
<div class="media-content">
Expand All @@ -42,7 +42,7 @@ <h5 class="title is-5"><a href="https://adventofcode.com/2023">Advent of Code 20
<article class="media">
<div class="media-left">
<p class="image is-32x32">
<img class="is-rounded" src="/static/images/events/icons/pyweek.png">
<img class="is-rounded" src="/static/images/events/icons/pyweek.png" alt="">
</p>
</div>
<div class="media-content">
Expand Down
2 changes: 1 addition & 1 deletion pydis_site/templates/events/sidebar/revivalofcode.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<div class="box">
<div class="has-text-centered">
<img src="https://raw.githubusercontent.com/python-discord/branding/main/events/christmas/server_icons/festive_256.gif" style="border-radius: 10px;" alt="Server icon for AoC">
<img src="https://raw.githubusercontent.com/python-discord/branding/main/events/christmas/server_icons/festive_256.gif" style="border-radius: 10px;" alt="Server icon for Advent of Code">
</div>
<p class="menu-label">Quick links</p>
<ul class="menu-list">
Expand Down
2 changes: 1 addition & 1 deletion pydis_site/templates/home/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@
span{height:1.5em;text-align:center;font:68px/1.5 sans-serif;color:#FFFFFFEE;text-shadow:0 0 0.1em #00000020}
</style>
<a href=https://www.youtube.com/embed/ZH26PuX3re0?autoplay=1>
<img src='{% static "images/frontpage/welcome.jpg" %}' alt='Welcome to Python Discord'>
<img src='{% static "images/frontpage/welcome.jpg" %}' alt='Welcome to Python Discord, click to play'>
<span>▶</span>
</a>"
allow="autoplay; accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
Expand Down
2 changes: 1 addition & 1 deletion pydis_site/templates/timeline/timeline.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
<div class="timeline-icon-date">
<div class="timeline-icon {{ entry.icon_color }}">
{% if entry.icon == "pydis" %}
<img class="pydis" src="{% static "images/timeline/cd-icon-pydis.svg" %}" alt="Logo">
<img class="pydis" src="{% static "images/timeline/cd-icon-pydis.svg" %}" alt="">
{% else %}
<span class="icon"><i class="{{ entry.icon }}"></i></span>
{% endif %}
Expand Down