Deployable custom template overrides for WCAG 2.1 AA compliance. R1 (#551): Password visibility toggle on sign-in page - Eye icon button toggles type=password / type=text - Updates aria-label dynamically ("Show/Hide password") R2 (#552): aria-required on required form fields - aria-required="true" on username and password inputs - Screen readers now properly announce required state R3 (#553): aria-label on star/fork count links - aria-label="2 stars" / aria-label="0 forks" - Screen readers announce meaning, not just numbers R4 (#554): <time> elements for relative timestamps - <time datetime="ISO8601">2 minutes ago</time> - Machine-readable dates for screen readers and crawlers Closes #551, #552, #553, #554
2.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 |
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.