Skip to content

Improve website accessibility to address Lighthouse audit findings from #7019#7029

Open
Shanwis wants to merge 1 commit into
pipe-cd:masterfrom
Shanwis:improve-accessibility-lighthouse
Open

Improve website accessibility to address Lighthouse audit findings from #7019#7029
Shanwis wants to merge 1 commit into
pipe-cd:masterfrom
Shanwis:improve-accessibility-lighthouse

Conversation

@Shanwis

@Shanwis Shanwis commented Jul 14, 2026

Copy link
Copy Markdown

What this PR does:
This PR addresses a focused subset of the Lighthouse accessibility recommendations from Issue #7019, improving the website's accessibility score from 81 to 100 without changing its appearance or functionality.

Direct Lighthouse Failure Fixes

  • value.html — Added alt="{{ $value_title }}" to tag → fixes Images missing alt attributes
  • feature.html — Added aria-label with title on auto-generated "Read more" links → fixes Links without discernible name and Identical links
  • footer.html — Moved aria-label="{{ .name }}" from
  • to on icon-only footer links → fixes Links without discernible name (footer)
  • _styles_project.scss — Added text-decoration: underline to footer a, .td-cover-block a, .td-box a → fixes Links rely on color to be distinguishable

General Improvements (not in Lighthouse failures)

  1. _index.html — Added rel="noopener noreferrer" to 3 external links (Playground, GitHub, releases)
  2. navbar.html — Added rel="noopener noreferrer" to external nav links
  3. navbar.html — Added aria-label="Main navigation" to <nav> element
  4. navbar-version-selector.html — Fixed aria-labelledby value from "navbarDropdownMenuLink" to "navbarDropdown" to match the element's id
  5. sidebar-tree.html — Fixed aria-controls value from "td-docs-nav" to "td-section-nav" to match data-target
  6. footer.html — Changed wrapping <div><footer> (semantic HTML)
  7. footer.html — Changed CNCF description <div><p> (semantic HTML)
  8. value.html — Changed <div class="value-title h2"><h2 class="value-title"> (proper heading hierarchy)
  9. value.html — Changed <p class="value-body"><div class="value-body"> (fixes invalid <ul> inside <p>)
  10. _styles_project.scss — Changed .long-description color from $gray-500 to #c9d1e0
  11. _styles_project.scss — Added .btn-secondary custom color override

Why we need it:
A Lighthouse audit identified several opportunities to improve the website's accessibility. This PR addresses the remaining automated accessibility failures (after #7020's SEO changes) by:

  • Ensuring ARIA attributes correctly reference their target elements
  • Providing accessible names for interactive elements navigated by screen readers
  • Meeting WCAG 2.1 AA color contrast requirements (4.5:1 for normal text)
  • Using semantic HTML elements (<h2>, <p>, <footer>, <nav>) for proper document structure and landmark navigation
  • Adding meaningful alternative text for images
  • Ensuring links are distinguishable from surrounding text without relying on color alone

Which issue(s) this PR fixes:
Fixes #7019

Does this PR introduce a user-facing change?:

Yes.

  • How are users affected by this change:
    • Screen reader users benefit from correct ARIA references, proper landmark regions, and descriptive link names
    • Users with low vision benefit from improved color contrast ratios meeting WCAG 2.1 AA
    • Users who cannot distinguish colors benefit from underlined links that are visually distinct from surrounding text
    • The homepage images now have descriptive alternative text for assistive technologies
  • Is this breaking change: No
  • How to migrate (if breaking change): Not applicable
image

@github-actions

Copy link
Copy Markdown
Contributor

👋 Hi @Shanwis, welcome to PipeCD and thanks for opening your first pull request!

We’re really happy to have you here

Before your PR gets merged, please check a few important things below.


Helpful resources


DCO Sign-off

All commits must include a Signed-off-by line to comply with the Developer Certificate of Origin (DCO).

In case you forget to sign-off your commit(s), follow these steps:

For the last commit:

git commit --amend --signoff
git push --force-with-lease

For multiple commits:

git rebase --signoff origin/master
git push --force-with-lease

Run checks locally

Before pushing updates, please run:

make check

This runs the same checks as CI and helps catch issues early.


💬 Need help?

If anything is unclear, feel free to ask in this PR or join us on the CNCF Slack in the #pipecd channel.
You can get your Slack invite from: https://communityinviter.com/apps/cloud-native/cncf

Thanks for contributing to PipeCD! ❤️

@Shanwis
Shanwis force-pushed the improve-accessibility-lighthouse branch from c220247 to 73bcb18 Compare July 14, 2026 08:32
@yashisrani

Copy link
Copy Markdown

@Shanwis looks good to me

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Improve website SEO by addressing Lighthouse recommendations

2 participants