4e3be0f113
CSS and template overrides for WCAG 2.1 AA compliance. V3 (#547): Footer text contrast - Darken footer text to #767676 (4.54:1 on white) - Was light gray, failed 4.5:1 minimum V4 (#548): Green inline links contrast - Darken link color to #507020 (4.5:1 on white) - Add underline for non-color differentiation (SC 1.4.1) - Was #609926, failed 4.5:1 V5 (#549): Header/banner landmark - Add <header role="banner"> wrapper template - Screen readers now find the banner landmark - Was missing entirely (landmarks.banner: 0) Note: V6 (#550, h4→h1 on login) already fixed in PR #559. Closes #547, #548, #549
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 |
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.
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.