fix: improve workers pictures accessibility

This commit is contained in:
Corentin 2024-05-22 21:50:56 +02:00
parent b985744971
commit f61cb5d66e
2 changed files with 19 additions and 10 deletions

View File

@ -1,10 +1,9 @@
{% from "lib/section.html" import section %} {% from "lib/section.html" import section %}
{% macro member(name, description, avatar) %} {% macro comrade(name, title, alt, avatar) %}
<div class="member"> <div class="comrade">
<img src="{{ avatar }}"></img> <img src="{{ avatar }}" alt-text="{{ alt }}" title="{{ title }}"></img>
<h4 >{{ name }}</h4> <h4 aria-hidden="True">{{ name }}</h4>
<div>{{ description }}</div>
</div> </div>
{% endmacro %} {% endmacro %}
@ -52,9 +51,19 @@
where small is mighty, and fun knows no bounds! where small is mighty, and fun knows no bounds!
{% endtrans %} {% endtrans %}
</p> </p>
<div class="members"> <div class="comrades">
{{ member("Aurel", "Art", "/img/aurel.png") }} {{ comrade(
{{ member("Adrien", "Dev", "/img/adrien.png") }} "Aurel",
gettext('Aurel works on art'),
gettext("drawing of Aurel's face"),
"/img/aurel.png"
) }}
{{ comrade(
"Adrien",
gettext('Adrien works on programming'),
gettext("drawing of Adrien's face"),
"/img/adrien.png"
) }}
</div> </div>
</div> </div>
{% endcall %} {% endcall %}

View File

@ -3,7 +3,7 @@
background: white; background: white;
} }
.members { .comrades {
display: flex; display: flex;
justify-content: center; justify-content: center;
gap: var(--space-medium); gap: var(--space-medium);
@ -12,7 +12,7 @@
} }
} }
.member { .comrade {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;