b1ff0b7b48
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
2.7 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 |
|---|---|---|---|
| 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") |
| R4 | #554 | 1.3.1 | <time datetime="..."> elements for relative timestamps |
Structure
deploy/gitea-a11y/
├── deploy-gitea-a11y.sh # Deployment script
├── README.md
└── custom/
├── public/
│ ├── css/
│ └── js/
└── templates/
├── custom/
│ └── time_relative.tmpl # R4: <time> helper
├── repo/
│ └── list_a11y.tmpl # R3: aria-label on counts
└── user/auth/
└── signin_inner.tmpl # R1+R2: password toggle + aria-required
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.
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-linkCSS rules (hidden off-screen, brought into view on:focus) - Implemented in
custom/header_banner.tmplalongside the banner landmark
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="2026-04-13T17:00:00Z">
providing both human-readable text and machine-readable ISO 8601 dates.