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 %}
{% macro member(name, description, avatar) %}
<div class="member">
<img src="{{ avatar }}"></img>
<h4 >{{ name }}</h4>
<div>{{ description }}</div>
{% macro comrade(name, title, alt, avatar) %}
<div class="comrade">
<img src="{{ avatar }}" alt-text="{{ alt }}" title="{{ title }}"></img>
<h4 aria-hidden="True">{{ name }}</h4>
</div>
{% endmacro %}
@ -52,9 +51,19 @@
where small is mighty, and fun knows no bounds!
{% endtrans %}
</p>
<div class="members">
{{ member("Aurel", "Art", "/img/aurel.png") }}
{{ member("Adrien", "Dev", "/img/adrien.png") }}
<div class="comrades">
{{ comrade(
"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>
{% endcall %}

View File

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