Skip to content

Commit c220247

Browse files
ShanwisShanwis
committed
Improve website accessibility to address Lighthouse audit findings from #7019 
1 parent 93a4f21 commit c220247

8 files changed

Lines changed: 40 additions & 19 deletions

File tree

‎docs/assets/scss/_styles_project.scss‎

Lines changed: 20 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,10 +28,16 @@
2828

2929
.long-description {
3030
font-weight: 600;
31-
color: $gray-500;
31+
color: #c9d1e0;
3232
margin-bottom: 2.5rem;
3333
}
3434

35+
.btn-secondary {
36+
color: #1a2744;
37+
background: #28beeb;
38+
border-color: #28beeb;
39+
}
40+
3541
.core-values {
3642
max-width: 80rem;
3743
}
@@ -65,6 +71,19 @@
6571
margin-left: -1rem;
6672
}
6773

74+
footer a {
75+
text-decoration: underline;
76+
color: inherit;
77+
}
78+
79+
.td-cover-block a {
80+
text-decoration: underline;
81+
}
82+
83+
.td-box a {
84+
text-decoration: underline;
85+
}
86+
6887

6988
@include media-breakpoint-down(md) {
7089
.value-title {

‎docs/content/en/_index.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -15,13 +15,13 @@
1515
</div>
1616

1717
<div class="mx-auto">
18-
<a class="btn btn-lg btn-primary mr-3 mb-4" target="_blank" href="https://play.pipecd.dev?project=play">
18+
<a class="btn btn-lg btn-primary mr-3 mb-4" target="_blank" rel="noopener noreferrer" href="https://play.pipecd.dev?project=play">
1919
Try on Playground <i class="fas fa-arrow-alt-circle-right ml-2"></i>
2020
</a>
2121
<a class="btn btn-lg btn-primary mr-3 mb-4" href="https://pipecd.dev/docs/quickstart/">
2222
Quick Start <i class="fas fa-arrow-alt-circle-right ml-2"></i>
2323
</a>
24-
<a class="btn btn-lg btn-secondary mr-3 mb-4" target="_blank" href="https://github.com/pipe-cd/pipecd">
24+
<a class="btn btn-lg btn-secondary mr-3 mb-4" target="_blank" rel="noopener noreferrer" href="https://github.com/pipe-cd/pipecd">
2525
GitHub <i class="fab fa-github ml-2 "></i>
2626
</a>
2727
<a class="btn btn-lg btn-primary mr-3 mb-4" href="https://pipecd.dev/docs-v1.0.x/">
@@ -31,7 +31,7 @@
3131
</div>
3232

3333
<div class="mx-auto">
34-
<a class="release-panel" target="_blank" href="https://github.com/pipe-cd/pipecd/releases">
34+
<a class="release-panel" target="_blank" rel="noopener noreferrer" href="https://github.com/pipe-cd/pipecd/releases">
3535
PipeCD <span class="bolder">{{< blocks/latest_version >}}</span> is now available! Check out the release notes <i class="fas fa-arrow-alt-circle-right ml-2"></i>
3636
</a>
3737
</div>

‎docs/layouts/partials/footer.html‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -5,22 +5,22 @@
55
{{ if .IsHome }} {{ $text_color = "text-dark" }} {{ end }}
66
{{ $cncf_logo := "https://www.cncf.io/wp-content/uploads/2022/05/CNCF_logo_white.svg" }}
77
{{ if .IsHome }} {{ $cncf_logo = "https://www.cncf.io/wp-content/uploads/2022/07/cncf-color-bg.svg" }} {{ end }}
8-
<div class="{{ $bg_color }} row d-print-none">
8+
<footer class="{{ $bg_color }} row d-print-none">
99
<div class="container-fluid py-3 mx-sm-5">
1010
<div class="row">
1111
<div class="col-8 py-3 order-sm-2 {{ $text_color }}">
1212
<a href="https://www.cncf.io/projects/pipecd/" target="_blank">
1313
<img src="{{ $cncf_logo }}" alt="cncf logo" width="250">
14-
<div class="py-2 {{ $text_color }}">PipeCD is a Cloud Native Computing Foundation sandbox project.</div>
14+
<p class="py-2 {{ $text_color }}">PipeCD is a Cloud Native Computing Foundation sandbox project.</p>
1515
</a>
1616
</div>
1717
<div class="col-4 order-sm-3 d-flex align-items-center justify-content-center">
1818
{{ with $links }}
1919
{{ with index . "developer"}}
2020
<ul class="list-inline mb-0">
2121
{{ range . }}
22-
<li class="list-inline-item mx-2 h3" data-toggle="tooltip" data-placement="top" title="{{ .name }}" aria-label="{{ .name }}">
23-
<a class="text-white" target="_blank" rel="noopener noreferrer" href="{{ .url }}">
22+
<li class="list-inline-item mx-2 h3" data-toggle="tooltip" data-placement="top" title="{{ .name }}">
23+
<a class="text-white" target="_blank" rel="noopener noreferrer" href="{{ .url }}" aria-label="{{ .name }}">
2424
<i class="{{ .icon }} {{ $text_color }}"></i>
2525
</a>
2626
</li>
@@ -30,8 +30,8 @@
3030
{{ with index . "user"}}
3131
<ul class="list-inline mb-0">
3232
{{ range . }}
33-
<li class="list-inline-item mx-2 h3" data-toggle="tooltip" data-placement="top" title="{{ .name }}" aria-label="{{ .name }}">
34-
<a class="text-white" target="_blank" rel="noopener noreferrer" href="{{ .url }}">
33+
<li class="list-inline-item mx-2 h3" data-toggle="tooltip" data-placement="top" title="{{ .name }}">
34+
<a class="text-white" target="_blank" rel="noopener noreferrer" href="{{ .url }}" aria-label="{{ .name }}">
3535
<i class="{{ .icon }} {{ $text_color }}"></i>
3636
</a>
3737
</li>
@@ -48,4 +48,4 @@
4848
see <a href="https://www.linuxfoundation.org/trademark-usage/">Trademark Usage</a>.</small>
4949
</div>
5050
</div>
51-
</div>
51+
</footer>

‎docs/layouts/partials/navbar-version-selector.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<a class="nav-link dropdown-toggle navbar-version-menu" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
22
{{ (index .Site.Params.versions 1).version }}
33
</a>
4-
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
4+
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
55
{{ range .Site.Params.versions }}
66
<a class="dropdown-item" href="{{ .url }}">{{ .version }}</a>
77
{{ end }}

‎docs/layouts/partials/navbar.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{{ $cover := .HasShortcode "blocks/cover" }}
2-
<nav class="js-navbar-scroll navbar navbar-expand navbar-dark {{ if $cover}} td-navbar-cover {{ end }}flex-column flex-md-row td-navbar">
2+
<nav class="js-navbar-scroll navbar navbar-expand navbar-dark {{ if $cover}} td-navbar-cover {{ end }}flex-column flex-md-row td-navbar" aria-label="Main navigation">
33
{{ if not $cover }}
44
<a class="navbar-brand" href="{{ .Site.Home.RelPermalink }}">
55
<span class="navbar-logo">{{ if .Site.Params.ui.navbar_logo }}{{ with resources.Get "icons/logo.svg" }}{{ ( . | minify).Content | safeHTML }}{{ end }}{{ end }}</span>
@@ -16,7 +16,7 @@
1616
{{ end }}
1717
{{ $url := urls.Parse .URL }}
1818
{{ $baseurl := urls.Parse $.Site.Params.Baseurl }}
19-
<a class="nav-link{{if $active }} active{{end}}" href="{{ with .Page }}{{ .RelPermalink }}{{ else }}{{ .URL | relLangURL }}{{ end }}" {{ if ne $url.Host $baseurl.Host }}target="_blank" {{ end }}><span{{if $active }} class="active"{{end}}>{{ .Name }}</span></a>
19+
<a class="nav-link{{if $active }} active{{end}}" href="{{ with .Page }}{{ .RelPermalink }}{{ else }}{{ .URL | relLangURL }}{{ end }}" {{ if ne $url.Host $baseurl.Host }}target="_blank" rel="noopener noreferrer"{{ end }}><span{{if $active }} class="active"{{end}}>{{ .Name }}</span></a>
2020
</li>
2121
{{ end }}
2222
{{ if and .Site.Params.versions (not .IsHome) (ne .Section "community") (ne .Section "blog") }}

‎docs/layouts/partials/sidebar-tree.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,14 +5,14 @@
55
{{ if not .Site.Params.ui.sidebar_search_disable -}}
66
<form class="td-sidebar__search d-flex align-items-center">
77
{{ partial "search-input.html" . }}
8-
<button class="btn btn-link td-sidebar__toggle d-md-none p-0 ml-3 fas fa-bars" type="button" data-toggle="collapse" data-target="#td-section-nav" aria-controls="td-docs-nav" aria-expanded="false" aria-label="Toggle section navigation">
8+
<button class="btn btn-link td-sidebar__toggle d-md-none p-0 ml-3 fas fa-bars" type="button" data-toggle="collapse" data-target="#td-section-nav" aria-controls="td-section-nav" aria-expanded="false" aria-label="Toggle section navigation">
99
</button>
1010
</form>
1111
{{ else -}}
1212
<div id="content-mobile">
1313
<form class="td-sidebar__search d-flex align-items-center">
1414
{{ partial "search-input.html" . }}
15-
<button class="btn btn-link td-sidebar__toggle d-md-none p-0 ml-3 fas fa-bars" type="button" data-toggle="collapse" data-target="#td-section-nav" aria-controls="td-docs-nav" aria-expanded="false" aria-label="Toggle section navigation">
15+
<button class="btn btn-link td-sidebar__toggle d-md-none p-0 ml-3 fas fa-bars" type="button" data-toggle="collapse" data-target="#td-section-nav" aria-controls="td-section-nav" aria-expanded="false" aria-label="Toggle section navigation">
1616
</button>
1717
</form>
1818
</div>

‎docs/layouts/shortcodes/blocks/feature.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,5 +6,5 @@
66
</div>
77
<p class="h4">{{ .Get "title" | markdownify }}</p>
88
<p class="mb-0">{{ .Inner }}</p>
9-
{{ with .Get "url" }}<p><a href="{{ . }}">{{ with $url_text }}{{ $url_text }}{{ else }}{{ T "ui_read_more" }}{{ end }} …</a></p>{{ end }}
9+
{{ with .Get "url" }}<p><a href="{{ . }}" aria-label="{{ with $url_text }}{{ $url_text }}{{ else }}{{ T "ui_read_more" }}{{ end }} - {{ $.Get "title" }}">{{ with $url_text }}{{ $url_text }}{{ else }}{{ T "ui_read_more" }}{{ end }} …</a></p>{{ end }}
1010
</div>

‎docs/layouts/shortcodes/blocks/value.html‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
{{ $_hugo_config := `{ "version": 1 }` }}
22
{{ $value_image := resources.GetMatch (printf "**%s*" .Params.image) }}
3+
{{ $value_title := .Params.title }}
34

45
<div class="row justify-content-center core-value {{ if eq .Params.image_position "right" }} flex-row-reverse {{ end }} border-bottom">
56

@@ -14,6 +15,7 @@
1415
class="mw-100 h-auto align-self-center"
1516
width="500"
1617
height="250"
18+
alt="{{ $value_title }}"
1719
src="{{ $image_resized_500.RelPermalink }}"
1820
srcset="{{ $image_resized_500.RelPermalink }},
1921
{{ $image_resized_750.RelPermalink }} 1.5x,
@@ -26,7 +28,7 @@
2628
{{ end }}
2729

2830
<div class="col-md">
29-
<div class="value-title h2">{{ .Params.title }}</div>
30-
<p class="value-body">{{ .Inner }}</p>
31+
<h2 class="value-title">{{ $value_title }}</h2>
32+
<div class="value-body">{{ .Inner }}</div>
3133
</div>
3234
</div>

0 commit comments

Comments
 (0)