Accessibility
GospeLib is designed to be usable by everyone. Accessibility requirements are not additive — they are embedded in every design decision from the start.
Text Size
- All text scales with the user's system font size preference AND the in-app font size slider
- Minimum text size: 11px for metadata — never smaller
- Scripture text minimum: 14px even at the smallest setting
- All icons scale proportionally with text size
- Touch targets are always minimum 44×44px regardless of icon size
Color Contrast
| Mode | Standard | Target |
|---|---|---|
| Light | All text/background combinations | WCAG 2.1 AA (4.5:1) |
| Study Dark | Chrome text on dark chrome | WCAG 2.1 AA (4.5:1) |
| Blackout | All combinations | WCAG 2.1 AAA (7:1) |
Color Is Never the Sole Carrier
The doctrinal color taxonomy uses both color AND position/icon to encode meaning. A user who cannot distinguish colors can still understand every annotation through:
- Positional indicators in the gutter
- Text labels on long-press/hover
- Distinct icon shapes per annotation type
- Tooltip labels for every doctrinal color ("Yellow — Jesus Christ / Atonement")
Screen Reader Support
- All interactive elements have descriptive accessibility labels
- The constellation/graph view has an alternative text summary mode — a structured list of connections that conveys the same information without visual layout
- Scripture text is marked with the
langattribute for correct text-to-speech pronunciation:lang="he"for Hebrew textlang="el"for Greek textlang="en"for English (default)
- Semantic HTML landmarks:
<main>for reader,<nav>for sidebar/tab bar,<aside>for context panel
Reduced Motion
All animations respect prefers-reduced-motion (iOS/Android system setting + in-app toggle).
| Normal Motion | Reduced Motion Substitute |
|---|---|
| Spring animations (highlight, bookmark) | Instant state change |
| Panel transitions (slide, scale) | Crossfade (opacity only) |
| Constellation zoom (camera pull-back) | Cut with crossfade |
| Page turn (horizontal slide) | Crossfade |
| Skeleton shimmer | Static placeholder |
The in-app toggle is at Settings → Accessibility → Reduce Motion and applies immediately.
Left-Hand Mode
A full left-hand accommodation mode mirrors the interface for left-handed users:
| Element | Default (Right-Hand) | Left-Hand Mode |
|---|---|---|
| Gesture gutter | Left edge | Right edge |
| Bottom tab bar | Standard order | Most-used tabs move right |
| Swipe-to-reveal | Left → cross-refs, Right → notes | Mirrors (Left → notes, Right → cross-refs) |
| Quick Settings tray | Centered handle | Content mirrors horizontally |
| Side rail (tablet) | Left edge | Right edge |
| Context panel (tablet/web) | Right side | Left side |
Toggle: Settings → Accessibility → Left-Hand Mode. Applies immediately with no restart.
Keyboard Navigation (Web)
- All actions have keyboard shortcuts
- ⌘+K — Command palette
- Tab / Shift+Tab — Navigate between interactive elements
- Enter / Space — Activate focused element
- Escape — Dismiss overlays, close panels
- Visible focus indicators on all interactive elements
- Focus trapping in modals and sheets
Focus Management
- When a panel opens, focus moves to the panel's first interactive element
- When a panel closes, focus returns to the element that triggered it
- The Floating Toolbar and Verse Action Sheet trap focus while open
- Skip links are available for the main reader content area
Related Pages
- Color System — contrast ratios and semantic color usage
- Dark Mode — AAA compliance in Blackout mode
- Reader Experience — adjustable density modes
- Design Tokens —
layout.touchTargetMin: 44