Skip to content

Commit 6ee46fe

Browse files
pierrespierres
committed
Improve accessibility: add skip link, aria-labels, and semantic markup
Add skip-to-content link, aria-label on icon links and chart/map components, proper label element for search input, aria-label on footer nav, and replace impressum table with a definition list.
1 parent 9224532 commit 6ee46fe

9 files changed

Lines changed: 29 additions & 37 deletions

File tree

‎internal/ui/compare/templates.templ‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ templ CompareContent(names []string, excessNames []string, data chartdata.Data)
1818
</a>
1919
</div>
2020
}
21-
<popularity-chart>
21+
<popularity-chart role="img" aria-label={ "Chart comparing popularity of " + strings.Join(names, ", ") + " over time" }>
2222
@templ.JSONScript("", data)
2323
</popularity-chart>
2424
<div class="mt-3">

‎internal/ui/countrypage/templates.templ‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import "pkgstatsd/internal/countries"
55
templ CountriesContent(countryPopularities []countries.CountryPopularity) {
66
<h1 class="mb-4">Countries</h1>
77
<p>Explore the distribution of the submitted package statistics.</p>
8-
<country-map>
8+
<country-map role="img" aria-label="World map showing distribution of submitted package statistics by country">
99
@templ.JSONScript("", toSvgMapValues(countryPopularities))
1010
</country-map>
1111
}

‎internal/ui/fundetail/templates.templ‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ templ FunDetailCurrentContent(category string, topPkgs []packages.PackagePopular
2929
templ FunDetailHistoryContent(category string, data chartdata.Data, compareURL string) {
3030
<h1 class="mb-4">{ category } statistics</h1>
3131
@components.TabNav(funTabs(category, "history"))
32-
<popularity-chart>
32+
<popularity-chart role="img" aria-label={ category + " popularity over time" }>
3333
@templ.JSONScript("", data)
3434
</popularity-chart>
3535
@funCompareLink(compareURL)

‎internal/ui/layout/base.templ‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,7 @@ templ Base(page Page, contents templ.Component) {
4343
}
4444
</head>
4545
<body>
46+
<a href="#content" class="visually-hidden-focusable">Skip to main content</a>
4647
<div id="page">
4748
@Navigation(page.Path)
4849
<main id="content" class="container">
@@ -101,7 +102,7 @@ templ navLink(currentPath, href, label string) {
101102

102103
templ Footer() {
103104
<footer id="footer">
104-
<nav class="nav justify-content-end mt-4">
105+
<nav class="nav justify-content-end mt-4" aria-label="Footer">
105106
<a class="nav-link" href="/api/doc">API</a>
106107
<a class="nav-link" href="/privacy-policy">Privacy policy</a>
107108
<a class="nav-link" href="/impressum">Impressum</a>

‎internal/ui/legal/templates.templ‎

Lines changed: 16 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -2,34 +2,22 @@ package legal
22

33
templ ImpressumContent() {
44
<h1 class="mb-4">Impressum</h1>
5-
<div class="d-inline-flex">
6-
<table class="table table-sm">
7-
<tbody>
8-
<tr>
9-
<th></th>
10-
<td>Pierre Schmitz</td>
11-
</tr>
12-
<tr>
13-
<th>Address</th>
14-
<td>
15-
Saarstr. 1
16-
<br/>
17-
53175 Bonn
18-
<br/>
19-
Germany
20-
</td>
21-
</tr>
22-
<tr>
23-
<th>Phone</th>
24-
<td>+49 228 9716608</td>
25-
</tr>
26-
<tr>
27-
<th>E-Mail</th>
28-
<td><a href="mailto:pierre@archlinux.de">pierre@archlinux.de</a></td>
29-
</tr>
30-
</tbody>
31-
</table>
32-
</div>
5+
<dl>
6+
<dt>Name</dt>
7+
<dd>Pierre Schmitz</dd>
8+
<dt>Address</dt>
9+
<dd>
10+
Saarstr. 1
11+
<br/>
12+
53175 Bonn
13+
<br/>
14+
Germany
15+
</dd>
16+
<dt>Phone</dt>
17+
<dd>+49 228 9716608</dd>
18+
<dt>E-Mail</dt>
19+
<dd><a href="mailto:pierre@archlinux.de">pierre@archlinux.de</a></dd>
20+
</dl>
3321
}
3422

3523
templ PrivacyPolicyContent() {

‎internal/ui/operatingsystems/templates.templ‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import "pkgstatsd/internal/chartdata"
55
templ CompareContent(data chartdata.Data) {
66
<h1 class="mb-3">Compare Operating Systems</h1>
77
<p class="mb-3">Relative usage of operating system distributions</p>
8-
<popularity-chart>
8+
<popularity-chart role="img" aria-label="Chart showing relative usage of operating system distributions over time">
99
@templ.JSONScript("", data)
1010
</popularity-chart>
1111
}

‎internal/ui/packagedetail/templates.templ‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import "pkgstatsd/internal/chartdata"
55
templ PackageDetailContent(name string, data chartdata.Data) {
66
<h1 class="mb-3">{ name }</h1>
77
<p class="mb-3">Relative usage of <strong>{ name }</strong></p>
8-
<popularity-chart>
8+
<popularity-chart role="img" aria-label={ "Chart showing popularity of " + name + " over time" }>
99
@templ.JSONScript("", data)
1010
</popularity-chart>
1111
}

‎internal/ui/packagepage/templates.templ‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -49,13 +49,13 @@ templ PackagesContent(list *packages.PackagePopularityList, query string, curren
4949
<h2>Package Search</h2>
5050
<form method="GET" action="/packages" class="mb-4">
5151
<div class="input-group">
52-
<span class="input-group-text" id="package-search-label">Package name</span>
52+
<label class="input-group-text" for="package-search">Package name</label>
5353
<input
54+
id="package-search"
5455
class="form-control"
5556
type="search"
5657
name="query"
5758
placeholder="Search packages"
58-
aria-describedby="package-search-label"
5959
value={ query }
6060
/>
6161
if compare != "" {
@@ -100,6 +100,7 @@ templ CompareTable(pkgs []packages.PackagePopularity, query string, offset int,
100100
class="text-danger"
101101
href={ toggleURL(query, offset, limit, compare, pkg.Name) }
102102
title={ "Remove " + pkg.Name }
103+
aria-label={ "Remove " + pkg.Name }
103104
>
104105
@templ.Raw(iconTrash)
105106
</a>
@@ -134,6 +135,7 @@ templ PackageTable(pkgs []packages.PackagePopularity, query string, offset int,
134135
class="text-danger"
135136
href={ toggleURL(query, offset, limit, compare, pkg.Name) }
136137
title={ "Remove " + pkg.Name }
138+
aria-label={ "Remove " + pkg.Name }
137139
>
138140
@templ.Raw(iconTrash)
139141
</a>
@@ -142,6 +144,7 @@ templ PackageTable(pkgs []packages.PackagePopularity, query string, offset int,
142144
class="text-primary"
143145
href={ toggleURL(query, offset, limit, compare, pkg.Name) }
144146
title={ "Add " + pkg.Name }
147+
aria-label={ "Add " + pkg.Name }
145148
>
146149
@templ.Raw(iconPlus)
147150
</a>

‎internal/ui/systemarchitectures/templates.templ‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ templ CompareContent(presets []preset, activePreset string, data chartdata.Data)
99
<h1 class="mb-3">Compare System Architectures</h1>
1010
<p class="mb-3">Relative usage of system architectures</p>
1111
@components.TabNav(presetTabs(presets, activePreset))
12-
<popularity-chart>
12+
<popularity-chart role="img" aria-label="Chart showing relative usage of system architectures over time">
1313
@templ.JSONScript("", data)
1414
</popularity-chart>
1515
}

0 commit comments

Comments
 (0)