Compare commits

...

1 Commits

Author SHA1 Message Date
Alexander Payne
b1ff0b7b48 feat(a11y): add skip navigation link (WCAG 2.4.1) — Closes #545
Some checks failed
Architecture Lint / Linter Tests (pull_request) Successful in 11s
Smoke Test / smoke (pull_request) Failing after 16s
Validate Config / YAML Lint (pull_request) Failing after 14s
Validate Config / JSON Validate (pull_request) Successful in 15s
Validate Config / Python Syntax & Import Check (pull_request) Failing after 49s
Validate Config / Python Test Suite (pull_request) Has been skipped
Validate Config / Cron Syntax Check (pull_request) Successful in 10s
Validate Config / Shell Script Lint (pull_request) Failing after 51s
Validate Config / Deploy Script Dry Run (pull_request) Successful in 10s
Validate Config / Playbook Schema Validation (pull_request) Successful in 20s
Architecture Lint / Lint Repository (pull_request) Failing after 17s
PR Checklist / pr-checklist (pull_request) Successful in 4m8s
Implements V1 skip navigation fix by:
- Adding .skip-link CSS to a11y-fixes.css (visually hidden until focus)
- Updating header_banner.tmpl to emit skip link as first element
- Updating README with V1 entry and description

Fixes #545
2026-04-26 01:51:01 -04:00
3 changed files with 28 additions and 0 deletions

View File

@@ -6,6 +6,7 @@ Applied fixes identified by the accessibility audit (#492):
| Fix | Issue | WCAG | Description |
|-----|-------|------|-------------|
| V1 | #545 | 2.4.1 | Skip navigation link — `<a href="#main" class="skip-link">Skip to content</a>` added to header, visually hidden until focus |
| R1 | #551 | Best Practice | Password visibility toggle (eye icon) on sign-in page |
| R2 | #552 | 3.3.1 | `aria-required="true"` on required form fields |
| R3 | #553 | 4.1.2 | `aria-label` on star/fork count links ("2 stars", "0 forks") |
@@ -43,6 +44,17 @@ bash deploy/gitea-a11y/deploy-gitea-a11y.sh root@my-gitea-host.com
Gitea supports custom template overrides by placing files in `custom/templates/`.
The templates here override the default Gitea templates with a11y improvements.
### V1: Skip Navigation Link
Adds a skip navigation link as the first focusable element in the header,
allowing keyboard users to bypass the navigation and jump directly to the main
content. The link is visually hidden by default and becomes visible on focus.
- Meets WCAG 2.4.1 (Bypass Blocks)
- Uses `<a href="#main" class="skip-link">Skip to content</a>`
- Styled via `.skip-link` CSS rules (hidden off-screen, brought into view on `:focus`)
- Implemented in `custom/header_banner.tmpl` alongside the banner landmark
### R1: Password Visibility Toggle
Adds an eye icon (👁) button next to the password field that toggles between

View File

@@ -9,3 +9,18 @@
.markdown-body a:focus {
color: #3a5518 !important;
}
/* V1 (#545): Skip navigation link — visually hidden until keyboard focus */
.skip-link {
position: absolute;
top: -40px;
left: 0;
background: #000;
color: #fff;
padding: 8px 16px;
z-index: 10000;
transition: top 0.3s ease-in-out;
}
.skip-link:focus {
top: 0;
}

View File

@@ -13,6 +13,7 @@
{{define "custom/header_banner"}}
<header role="banner">
<a href="#main" class="skip-link">Skip to content</a>
{{end}}
{{define "custom/header_banner_close"}}