c28d462c4a
Some checks failed
Architecture Lint / Linter Tests (pull_request) Successful in 26s
PR Checklist / pr-checklist (pull_request) Failing after 2m28s
Smoke Test / smoke (pull_request) Failing after 33s
Validate Config / YAML Lint (pull_request) Failing after 14s
Validate Config / JSON Validate (pull_request) Successful in 14s
Validate Config / Python Syntax & Import Check (pull_request) Failing after 43s
Validate Config / Python Test Suite (pull_request) Has been skipped
Validate Config / Shell Script Lint (pull_request) Failing after 36s
Validate Config / Cron Syntax Check (pull_request) Successful in 7s
Validate Config / Deploy Script Dry Run (pull_request) Successful in 11s
Validate Config / Playbook Schema Validation (pull_request) Successful in 30s
Architecture Lint / Lint Repository (pull_request) Failing after 28s
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.
89 lines
3.1 KiB
Markdown
89 lines
3.1 KiB
Markdown
# 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
|
|
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`:
|
|
|
|
```handlebars
|
|
{{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).
|