Skip to content

Commit 3c97aaf

Browse files
EmiMEmiM
authored
Merge pull request #71 from wyslijco/fix/accessibility
Zwiększenie dostępności
2 parents ee1c48f + 96d71f8 commit 3c97aaf

File tree

5 files changed

+50
-45
lines changed

5 files changed

+50
-45
lines changed

‎site/templates/base.html‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<!DOCTYPE html>
2-
<html>
2+
<html lang="pl">
33
<head>
44
<title>wyślij.co {% block subtitle %}{% endblock %}</title>
55
<meta charset="utf-8" />
@@ -33,7 +33,6 @@
3333
<script src="/scripts.js" type="text/javascript"></script>
3434

3535
<link href="../output.css" rel="stylesheet" />
36-
<title></title>
3736
</head>
3837
<body class="bg-white lg:bg-background">
3938
{% include "svg_definitions.html" %}
@@ -43,7 +42,7 @@
4342
<div class="w-11/12 lg:w-11/12 xl:w-8/12 2xl:w-6/12 flex justify-between items-center">
4443
<div class="flex items-center">
4544
<a href="{{ url_for('index') }}">
46-
<svg class="h-8" viewBox="0 0 765.89 155.28" xmlns="http://www.w3.org/2000/svg" style="stroke: none; border: none; outline: none; box-shadow: none;">
45+
<svg class="h-8" viewBox="0 0 765.89 155.28" xmlns="http://www.w3.org/2000/svg" style="stroke: none; border: none; outline: none; box-shadow: none;" aria-label="Logo wyślij.co - powrót do strony głównej" role="img">
4746
<use href="#logo-wyslij"></use>
4847
</svg>
4948
</a>

‎site/templates/index.html‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,38 @@
11
{% extends "base.html" %}
22

33
{% block content %}
4-
<div class="min-h-screen overflow-x-hidden">
4+
<main class="min-h-screen overflow-x-hidden">
55
<div class="flex items-center justify-center px-6 md:px-8 py-8">
66
<div class="text-center max-w-4xl w-full">
77
<!-- Hero Text -->
88
<div class="text-3xl sm:text-5xl md:text-6xl lg:text-7xl font-light mt-6 mb-16 text-center leading-tight text-hero">
9-
<div class="text-sectionTitle font-medium">
9+
<h1 class="text-sectionTitle font-medium">
1010
WYŚLIJ.CO<span class="text-gray-500">/FUNDACJI</span>
11-
</div>
11+
</h1>
1212
</div>
1313

1414
<!-- Process Steps -->
1515
<div class="process-steps space-y-8 md:space-y-12 mb-6">
1616
<div class="process-step flex items-start text-left max-w-xs md:max-w-sm lg:max-w-md mx-auto">
1717
<div class="step-number">1</div>
1818
<div class="step-content">
19-
<h3 class="step-title">Wybierz produkt z listy</h3>
19+
<h2 class="step-title">Wybierz produkt z listy</h2>
2020
<p class="step-description">na stronie wybranej przez Ciebie organizacji</p>
2121
</div>
2222
</div>
2323

2424
<div class="process-step flex items-start text-left max-w-xs md:max-w-sm lg:max-w-md mx-auto">
2525
<div class="step-number">2</div>
2626
<div class="step-content">
27-
<h3 class="step-title">Zakup produkt online</h3>
27+
<h2 class="step-title">Zakup produkt online</h2>
2828
<p class="step-description">w podlinkowanym sklepie internetowym</p>
2929
</div>
3030
</div>
3131

3232
<div class="process-step flex items-start text-left max-w-xs md:max-w-sm lg:max-w-md mx-auto">
3333
<div class="step-number">3</div>
3434
<div class="step-content">
35-
<h3 class="step-title">Wyślij prosto do organizacji</h3>
35+
<h2 class="step-title">Wyślij prosto do organizacji</h2>
3636
<p class="step-description">na wskazany adres dostawy</p>
3737
</div>
3838
</div>
@@ -44,7 +44,7 @@ <h3 class="step-title">Wyślij prosto do organizacji</h3>
4444

4545
<!-- Organization Links -->
4646
<div class="organization-links text-center mb-12">
47-
<div class="text-xl md:text-2xl lg:text-3xl font-light" id="org-links-container">
47+
<div class="text-xl md:text-2xl lg:text-3xl font-light" id="org-links-container" aria-live="polite">
4848
<div class="flex justify-center items-start gap-4">
4949
<!-- Left side - WYŚLIJ.CO -->
5050
<div class="text-sectionTitle font-medium" style="min-width: 120px; text-align: right;">
@@ -55,19 +55,19 @@ <h3 class="step-title">Wyślij prosto do organizacji</h3>
5555
<div class="text-gray-700 text-left" style="min-width: 250px;">
5656
<div class="org-link-line">
5757
<span class="text-gray-600">/ </span>
58-
<a href="#" class="org-link hover:text-sectionTitle transition-colors" data-org-index="0"></a>
58+
<a href="#" class="org-link hover:text-sectionTitle transition-colors" data-org-index="0" aria-label="Link do organizacji"></a>
5959
</div>
6060
<div class="org-link-line">
6161
<span class="text-gray-600">/ </span>
62-
<a href="#" class="org-link hover:text-sectionTitle transition-colors" data-org-index="1"></a>
62+
<a href="#" class="org-link hover:text-sectionTitle transition-colors" data-org-index="1" aria-label="Link do organizacji"></a>
6363
</div>
6464
<div class="org-link-line">
6565
<span class="text-gray-600">/ </span>
66-
<a href="#" class="org-link hover:text-sectionTitle transition-colors" data-org-index="2"></a>
66+
<a href="#" class="org-link hover:text-sectionTitle transition-colors" data-org-index="2" aria-label="Link do organizacji"></a>
6767
</div>
6868
<div class="org-link-line">
6969
<span class="text-gray-600">/ </span>
70-
<a href="#" class="org-link hover:text-sectionTitle transition-colors" data-org-index="3"></a>
70+
<a href="#" class="org-link hover:text-sectionTitle transition-colors" data-org-index="3" aria-label="Link do organizacji"></a>
7171
</div>
7272
</div>
7373
</div>
@@ -78,7 +78,7 @@ <h3 class="step-title">Wyślij prosto do organizacji</h3>
7878
<a href="/organizacje/" class="zobacz-wiecej text-sectionTitle font-medium text-lg hover:underline">ZOBACZ WIĘCEJ</a>
7979
</div>
8080
</div>
81-
</div>
81+
</main>
8282
</div>
8383

8484
<script>

‎site/templates/info.html‎

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{% extends "base.html" %}
22

33
{% block content %}
4-
<div class="min-h-screen">
4+
<main class="min-h-screen">
55
<div class="info-container">
66

77
<!-- Section 1: Jak zacząć pomagać? -->
@@ -58,14 +58,14 @@ <h2 class="info-card-title">Pomóż w rozwoju projektu</h2>
5858
</section>
5959

6060
<section class="info-section">
61-
<h1 class="info-section-title">JAK DZIAŁA WYŚLIJ.CO?</h1>
61+
<h2 class="info-section-title">JAK DZIAŁA WYŚLIJ.CO?</h2>
6262

6363
<div class="info-grid-3">
6464
<div>
6565
<div class="info-step-header">
6666
<div class="info-step-number">1</div>
6767
<div>
68-
<h3 class="info-step-title">Oni rejestrują się u nas</h3>
68+
<h4 class="info-step-title">Oni rejestrują się u nas</h4>
6969
</div>
7070
</div>
7171
<div class="info-step-content">
@@ -83,7 +83,7 @@ <h3 class="info-step-title">Oni rejestrują się u nas</h3>
8383
<div class="info-step-header">
8484
<div class="info-step-number">2</div>
8585
<div>
86-
<h3 class="info-step-title">My weryfikujemy</h3>
86+
<h4 class="info-step-title">My weryfikujemy</h4>
8787
</div>
8888
</div>
8989
<div class="info-step-content">
@@ -101,7 +101,7 @@ <h3 class="info-step-title">My weryfikujemy</h3>
101101
<div class="info-step-header">
102102
<div class="info-step-number">3</div>
103103
<div>
104-
<h3 class="info-step-title">Ty wspierasz i wysyłasz</h3>
104+
<h4 class="info-step-title">Ty wspierasz i wysyłasz</h4>
105105
</div>
106106
</div>
107107
<div class="info-step-content">
@@ -118,12 +118,12 @@ <h3 class="info-step-title">Ty wspierasz i wysyłasz</h3>
118118
</section>
119119

120120
<section class="info-section">
121-
<h1 class="info-section-title">DLACZEGO WARTO WYSŁAĆ?</h1>
121+
<h2 class="info-section-title">DLACZEGO WARTO WYSŁAĆ?</h2>
122122

123123
<div class="info-grid-2-3">
124124
<div>
125125
<h3 class="info-benefit-title">
126-
<span class="info-benefit-bullet"></span>
126+
<span class="info-benefit-bullet" aria-hidden="true"></span>
127127
Pomoc każdego dnia
128128
</h3>
129129
<p class="info-benefit-text">
@@ -134,7 +134,7 @@ <h3 class="info-benefit-title">
134134

135135
<div>
136136
<h3 class="info-benefit-title">
137-
<span class="info-benefit-bullet"></span>
137+
<span class="info-benefit-bullet" aria-hidden="true"></span>
138138
Konkretne wsparcie
139139
</h3>
140140
<p class="info-benefit-text">
@@ -146,7 +146,7 @@ <h3 class="info-benefit-title">
146146

147147
<div>
148148
<h3 class="info-benefit-title">
149-
<span class="info-benefit-bullet"></span>
149+
<span class="info-benefit-bullet" aria-hidden="true"></span>
150150
Proste kroki
151151
</h3>
152152
<p class="info-benefit-text">
@@ -157,7 +157,7 @@ <h3 class="info-benefit-title">
157157

158158
<div>
159159
<h3 class="info-benefit-title">
160-
<span class="info-benefit-bullet"></span>
160+
<span class="info-benefit-bullet" aria-hidden="true"></span>
161161
Wygodna dostawa
162162
</h3>
163163
<p class="info-benefit-text">
@@ -169,7 +169,7 @@ <h3 class="info-benefit-title">
169169

170170
<div>
171171
<h3 class="info-benefit-title">
172-
<span class="info-benefit-bullet"></span>
172+
<span class="info-benefit-bullet" aria-hidden="true"></span>
173173
Przejrzyste zasady
174174
</h3>
175175
<p class="info-benefit-text">
@@ -181,7 +181,7 @@ <h3 class="info-benefit-title">
181181

182182
<div>
183183
<h3 class="info-benefit-title">
184-
<span class="info-benefit-bullet"></span>
184+
<span class="info-benefit-bullet" aria-hidden="true"></span>
185185
Otwarta inicjatywa
186186
</h3>
187187
<p class="info-benefit-text">
@@ -194,5 +194,5 @@ <h3 class="info-benefit-title">
194194
</section>
195195

196196
</div>
197-
</div>
197+
</main>
198198
{% endblock %}

‎site/templates/organization.html‎

Lines changed: 16 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -8,19 +8,20 @@
88

99
{% block content %}
1010

11-
<div class="mx-auto mt-6">
11+
<main class="mx-auto mt-6">
1212
<!-- ORGANIZATION INFO -->
1313
<div class="flex justify-center pb-8 md:pb-12">
1414
<div class="w-11/12 lg:w-11/12 xl:w-8/12 2xl:w-6/12">
1515
<div class="pb-4 flex justify-between items-center">
1616
<span class="text-md lg:text-lg font-bold"><span class="text-sectionTitle">wyślij.co/</span><span class="text-black">{{ data.adres }}</span></span>
1717
<div class="flex items-center gap-3">
18-
<button onclick="shareCurrentPage()" class="text-sectionTitle hover:text-amber-600 transition-colors">
18+
<button onclick="shareCurrentPage()" class="text-sectionTitle hover:text-amber-600 transition-colors" aria-label="Udostępnij stronę organizacji">
1919
<svg
2020
fill="none"
2121
stroke-width="1.5"
2222
stroke="currentColor"
2323
class="size-7 lg:size-9"
24+
aria-hidden="true"
2425
>
2526
<use href="#icon-share"></use>
2627
</svg>
@@ -36,19 +37,20 @@ <h1 class="text-black text-3xl lg:text-5xl">{{ data.nazwa }}</h1>
3637
Wybierz produkt z listy poniżej, a podczas realizacji zamówienia kopiuj i wklejaj dane poniżej, żeby wysłać bezpośrednio do organizacji.
3738
</div>
3839

39-
<h1 class="text-sectionTitle mb-2 pl-1 text-2xl">Dane do dostawy</h1>
40+
<h2 class="text-sectionTitle mb-2 pl-1 text-2xl">Dane do dostawy</h2>
4041

4142
<!-- Two-column layout on medium screens and up -->
4243
<div class="md:grid md:grid-cols-2 md:gap-6">
4344
<!-- Left column: Address -->
4445
<div class="pb-4">
45-
<h2 class="text-sectionTitle mb-2 pl-1 text-lg">Adres</h2>
46+
<h3 class="text-sectionTitle mb-2 pl-1 text-lg">Adres</h3>
4647
<div
4748
class="copyable-field-first"
4849
role="button"
4950
tabindex="0"
5051
onclick="copyText(this)"
5152
onkeydown="handleCopyKeydown(event, this)"
53+
aria-label="Kopiuj adres uliczny"
5254
>
5355
{{ data.dostawa.ulica }}
5456
<svg
@@ -57,6 +59,7 @@ <h2 class="text-sectionTitle mb-2 pl-1 text-lg">Adres</h2>
5759
stroke-width="1.5"
5860
stroke="currentColor"
5961
class="size-6"
62+
aria-hidden="true"
6063
>
6164
<use href="#icon-copy"></use>
6265
</svg>
@@ -67,6 +70,7 @@ <h2 class="text-sectionTitle mb-2 pl-1 text-lg">Adres</h2>
6770
tabindex="0"
6871
onclick="copyText(this)"
6972
onkeydown="handleCopyKeydown(event, this)"
73+
aria-label="Kopiuj kod pocztowy"
7074
>
7175
{{ data.dostawa.kod }}
7276
<svg
@@ -200,20 +204,21 @@ <h2 class="text-sectionTitle mb-2 pl-1 text-lg">Uwagi do dostawy</h2>
200204
<!-- PRODUCTS -->
201205
<div class="flex justify-center pb-8 md:pb-12">
202206
<div class="w-11/12 lg:w-11/12 xl:w-8/12 2xl:w-6/12">
203-
<h1 class="text-sectionTitle mb-2 pl-1 text-2xl">Potrzebne produkty</h1>
207+
<h2 class="text-sectionTitle mb-2 pl-1 text-2xl">Potrzebne produkty</h2>
204208

205209
<!-- Progressive grid layout: 1 col mobile, 3 md, 4 lg -->
206210
<div class="products-grid">
207211
{% for produkt in data.produkty %}
208212
<div class="product-tile">
209213
<a href="{{ produkt.link }}" target="_blank" class="flex flex-col h-full group">
210214
<div class="flex justify-between items-start mb-2">
211-
<h2 class="product-title">{{ produkt.nazwa }}</h2>
215+
<h3 class="product-title">{{ produkt.nazwa }}</h3>
212216
<svg
213217
fill="none"
214218
stroke-width="1.5"
215219
stroke="currentColor"
216220
class="product-icon"
221+
aria-hidden="true"
217222
>
218223
<use href="#icon-external-link"></use>
219224
</svg>
@@ -236,17 +241,17 @@ <h2 class="product-title">{{ produkt.nazwa }}</h2>
236241

237242
<div class="flex justify-center pb-6">
238243
<div class="w-11/12 lg:w-11/12 xl:w-8/12 2xl:w-6/12">
239-
<h1 class="text-sectionTitle mb-2 pl-1 text-2xl">Dodatkowe informacje</h1>
244+
<h2 class="text-sectionTitle mb-2 pl-1 text-2xl">Dodatkowe informacje</h2>
240245

241246
<!-- Two-column layout on medium screens and up -->
242247
<div class="md:grid md:grid-cols-2 md:gap-6">
243248
<div class="pb-4">
244-
<h2 class="text-sectionTitle mb-2 pl-1 text-lg">Numer KRS</h2>
249+
<h3 class="text-sectionTitle mb-2 pl-1 text-lg">Numer KRS</h3>
245250
<div class="info-field">{{ data.krs }}</div>
246251
</div>
247252

248253
<div class="pb-4">
249-
<h2 class="text-sectionTitle mb-2 pl-1 text-lg">Strona internetowa</h2>
254+
<h3 class="text-sectionTitle mb-2 pl-1 text-lg">Strona internetowa</h3>
250255
<a
251256
class="website-link"
252257
href="{{data.strona}}"
@@ -259,6 +264,7 @@ <h2 class="text-sectionTitle mb-2 pl-1 text-lg">Strona internetowa</h2>
259264
stroke-width="1.5"
260265
stroke="currentColor"
261266
class="size-6 ml-2"
267+
aria-hidden="true"
262268
>
263269
<use href="#icon-external-link"></use>
264270
</svg>
@@ -267,6 +273,6 @@ <h2 class="text-sectionTitle mb-2 pl-1 text-lg">Strona internetowa</h2>
267273
</div>
268274
</div>
269275
</div>
270-
</div>
276+
</main>
271277

272278
{% endblock content %}

‎site/templates/organizations.html‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{% extends "base.html" %}
22

33
{% block content %}
4-
<div class="min-h-screen">
4+
<main class="min-h-screen">
55
<div class="info-container">
66

77
<!-- Main title -->
@@ -21,18 +21,18 @@ <h1 class="org-list-title">
2121

2222
<!-- Organizations list -->
2323
<div class="max-w-5xl mx-auto">
24-
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 md:gap-6">
24+
<ul class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 md:gap-6">
2525
{% for organization in organizations %}
26-
<div class="org-list-item">
27-
<span class="org-list-bullet"></span>
26+
<li class="org-list-item">
27+
<span class="org-list-bullet" aria-hidden="true"></span>
2828
<a href="/{{ organization.adres }}" class="org-list-link">
2929
{{ organization.nazwa }}
3030
</a>
31-
</div>
31+
</li>
3232
{% endfor %}
33-
</div>
33+
</ul>
3434
</div>
3535

3636
</div>
37-
</div>
37+
</main>
3838
{% endblock %}

0 commit comments

Comments
 (0)