Skip to content

website: Fix accessibility issues to match a11y standards #4313

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
rohit-bharmal wants to merge 2 commits into
base: master
Choose a base branch
from
+105 −11
Open

website: Fix accessibility issues to match a11y standards #4313

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
038227d
website: Fix accessibility issues to match a11y standards
rohit-bharmal Feb 19, 2026
a5f40a1
website: Enhance accessibility for adopters button and main content area
rohit-bharmal Feb 19, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
94 changes: 94 additions & 0 deletions assets/scss/_styles_project.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -895,6 +895,100 @@ nav.foldable-nav {
a > code {
color: unset;
}

// a11y: links distinguishable without color alone (underline, focus)
a:not(.btn) {
text-decoration: underline;
text-underline-offset: 0.15em;

&:focus-visible {
outline: 2px solid currentColor;
outline-offset: 2px;
}
}
}

// a11y: same for homepage content sections (links not relying on color only)
#overview a:not(.btn),
#community a:not(.btn),
#pageContent a:not(.btn) {
text-decoration: underline;
text-underline-offset: 0.15em;

&:focus-visible {
outline: 2px solid currentColor;
outline-offset: 2px;
}
}

// --------------------------------------------------
// a11y: sufficient contrast for navbar badges and adopters button
// --------------------------------------------------
.td-navbar .badge-warning {
background-color: #b38600;
color: #fff;
}

// Adopters button: ensure 4.5:1+ contrast (light theme = dark blue on light bg)
[data-theme="light"] #adopters .btn-outline-primary {
color: #003d99;
border-color: #003d99;
font-weight: 500;

&:hover {
color: #fff;
background-color: #003d99;
border-color: #003d99;
}

&:focus-visible {
outline: 2px solid #003d99;
outline-offset: 2px;
}
}

// Adopters button: dark theme = light blue on dark bg
[data-theme="dark"] #adopters .btn-outline-primary {
color: #7eb8ff;
border-color: #7eb8ff;
font-weight: 500;

&:hover {
color: #0d1117;
background-color: #7eb8ff;
border-color: #7eb8ff;
}

&:focus-visible {
outline: 2px solid #7eb8ff;
outline-offset: 2px;
}
}

// Fallback when data-theme not set (e.g. no-JS)
#adopters .btn-outline-primary {
font-weight: 500;

&:focus-visible {
outline: 2px solid currentColor;
outline-offset: 2px;
}
}

// a11y: sufficient contrast for main content area (background and text)
.td-main main {
background-color: $body-bg;
color: $body-color;
}

[data-theme="light"] .td-main main {
background-color: #ffffff;
color: #212529;
}

[data-theme="dark"] .td-main main {
background-color: #0d1117;
color: #e6edf3;
}

// --------------------------------------------------
Expand Down
2 changes: 1 addition & 1 deletion config.toml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,7 @@ ignoreFiles = []
[[menu.main]]
name = ""
weight = -1000
pre = "<span style='display:inline-flex; align-items:center;'><img src='/events/images/cloud-native-ai-2025.png' style='height:60px; width:auto; margin-right:8px;'><span style='display:flex; flex-direction:column; justify-content:center;'><span class='badge badge-warning' style='margin-bottom:4px;'>March 23rd, 2026</span><span class='badge badge-warning'>Amsterdam, Netherlands</span></span></span>"
pre = "<span style='display:inline-flex; align-items:center;'><img src='/events/images/cloud-native-ai-2025.png' alt='Cloud Native AI 2025 event' style='height:60px; width:auto; margin-right:8px;'><span style='display:flex; flex-direction:column; justify-content:center;'><span class='badge badge-warning' style='margin-bottom:4px;'>March 23rd, 2026</span><span class='badge badge-warning'>Amsterdam, Netherlands</span></span></span>"
post = ""
url = "https://events.linuxfoundation.org/kubecon-cloudnativecon-europe/co-located-events/cloud-native-ai-kubeflow-day/"
# [[menu.main]]
Expand Down
18 changes: 9 additions & 9 deletions content/en/_index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,16 +19,16 @@
<i class="fas fa-brain ml-1"></i>
</a>
<div class="mt-2">
<a class="btn btn-link text-light" href="#overview">
<i class="fa-solid fa-circle-chevron-down" style="font-size: 350%"></i>
<a class="btn btn-link text-light" href="#overview" aria-label="Scroll to overview">
<i class="fa-solid fa-circle-chevron-down" style="font-size: 350%" aria-hidden="true"></i>
</a>
</div>
</div>
{{</blocks/cover>}}

<div id="community-stats" class="text-center">
<div class="container">
<h3 class="section-head">
<h2 class="section-head">
<span class="border-bottom pb-2">Open Source. Battle-Tested. Community Built.</span>
</h3>
<div class="row justify-content-center">
Expand Down Expand Up @@ -62,7 +62,7 @@ <h3 class="section-head">

<div id="overview" class="text-center">
<div class="container">
<h3 class="section-head">
<h2 class="section-head">
<span class="border-bottom pb-2">What is Kubeflow?</span>
</h3>
<p class="mx-auto col-11 col-xl-7 px-0">
Expand All @@ -81,7 +81,7 @@ <h3 class="section-head">

<div id="adopters" class="text-center">
<div class="container">
<h3 class="section-head">
<h2 class="section-head">
<span class="border-bottom pb-2">Trusted by</span>
</h3>
<div class="mb-5 d-flex flex-wrap align-content-between align-items-center justify-content-center user-select-none">
Expand Down Expand Up @@ -129,7 +129,7 @@ <h3 class="section-head">

<section id="pageContent">
<div class="container">
<h3 class="section-head text-center">
<h2 class="section-head text-center">
<span class="border-bottom pb-2">Kubeflow Projects</span>
</h3>
<div class="card-deck">
Expand Down Expand Up @@ -290,7 +290,7 @@ <h3 class="section-head text-center">

<div id="community" class="text-center">
<div class="container">
<h3 class="section-head">
<h2 class="section-head">
<span class="border-bottom pb-2">Join our Community</span>
</h3>
<p class="mx-auto col-md-7 px-0">
Expand All @@ -306,13 +306,13 @@ <h3 class="section-head">
<img
src="/docs/images/logos/cncf.svg"
draggable="false"
class="show_light-only img-fluid
class="show_light-only img-fluid"
alt="Cloud Native Computing Foundation Logo"
/>
<img
src="/docs/images/logos/cncf-white.svg"
draggable="false"
class="show_dark-only img-fluid
class="show_dark-only img-fluid"
alt="Cloud Native Computing Foundation Logo"
/>
</div>
Expand Down
2 changes: 1 addition & 1 deletion layouts/partials/navbar.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
<nav class="js-navbar-scroll navbar navbar-expand-md navbar-dark
{{- if $cover }} td-navbar-cover {{- end }} td-navbar">
<div class="container px-0">
<a class="navbar-brand" href="{{ .Site.Home.RelPermalink }}">
<a class="navbar-brand" href="{{ .Site.Home.RelPermalink }}" aria-label="{{ .Site.Title }} - home">
{{- /**/ -}}
<span class="navbar-brand__logo navbar-logo">
{{- if ne .Site.Params.ui.navbar_logo false -}}
Expand Down