c28d462c4a
Add R5 skip navigation link template and supporting CSS to meet WCAG 2.4.1 Bypass Blocks (A).
- New template: deploy/gitea-a11y/custom/templates/custom/skip_link.tmpl
Provides a "Skip to main content" anchor as the first focusable element.
- Updated deploy/gitea-a11y/custom/public/css/a11y-fixes.css (V5):
Styles for .skip-link, visually hidden off-screen until focus.
- Updated README.md with R5 documentation and activation instructions.
- deploy-gitea-a11y.sh: include R5 in deployed fixes list.
Usage: Insert `{{template "custom/skip_link" .}}` immediately after <body> in custom/header.tmpl.
Targets #545. Part of STEP35 FREE BURN — Gitea-first a11y V1.
3.1 KiB
Gitea Accessibility Fixes
Custom template overrides for WCAG 2.1 AA compliance on the Timmy Foundation Forge.
Applied fixes identified by the accessibility audit (#492):
| Fix | Issue | WCAG | Description |
|---|---|---|---|
| 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") |
| R4 | #554 | 1.3.1 | <time datetime="..."> elements for relative timestamps |
| R5 | #545 | 2.4.1 | Skip navigation link for keyboard users |
Structure
deploy/gitea-a11y/
├── deploy-gitea-a11y.sh # Deployment script
├── README.md
└── custom/
├── public/
│ ├── css/
│ │ └── a11y-fixes.css # Global CSS fixes (R4, R5)
│ └── js/
└── templates/
├── custom/
│ ├── a11y_head.tmpl # R4: Inject CSS into <head>
│ ├── header_banner.tmpl # Bypass: <header role="banner">
│ ├── skip_link.tmpl # R5: Skip navigation link (WCAG 2.4.1)
│ └── time_relative.tmpl # R4: <time> helper
├── user/auth/
│ └── signin_inner.tmpl # R1+R2: password toggle + aria-required
└── repo/
└── list_a11y.tmpl # R3: aria-label on star/fork counts
Deploy
bash deploy/gitea-a11y/deploy-gitea-a11y.sh
# or to a specific host:
bash deploy/gitea-a11y/deploy-gitea-a11y.sh root@my-gitea-host.com
Template Overrides
Gitea supports custom template overrides by placing files in custom/templates/.
The templates here override the default Gitea templates with a11y improvements.
R1: Password Visibility Toggle
Adds an eye icon (👁) button next to the password field that toggles between
type="password" and type="text". Updates aria-label dynamically.
R2: aria-required
Adds aria-required="true" to the username and password inputs, which
properly communicates required state to screen readers.
R3: Star/Fork aria-label
Wraps star and fork count links with aria-label="2 stars" so screen
readers announce the meaning, not just the number.
R4: <time> Elements
Wraps relative timestamps ("2 minutes ago") in <time datetime="...">
providing both human-readable text and machine-readable ISO 8601 dates.
R5: Skip Navigation Link (WCAG 2.4.1)
Adds a "Skip to main content" link as the first focusable element. Keyboard users can press Tab at the top of a page to jump directly to the main content area, bypassing repeated navigation menus.
Template: custom/skip_link.tmpl
Insert: At the very start of <body> in your custom header.tmpl:
{{template "custom/skip_link" .}}
Gitea's default page layout uses <main id="main"> as the content target.
If your instance uses #content, adjust the href in the template.
The CSS in a11y-fixes.css visually hides the link off-screen until it
receives keyboard focus, meeting WCAG 2.4.1 Bypass Blocks (A).