mirror of
https://github.com/kennethreitz/kjvstudy.org.git
synced 2026-06-05 23:00:16 +00:00
kennethreitz
789fd68ad2
- Remove sidebar toggle button on desktop (>1200px) - Sidebar now always visible on desktop for better navigation - Keep hamburger menu toggle on mobile/tablet (<1200px) - Remove backtick keyboard shortcut for sidebar toggle - Update accessibility page to remove backtick reference 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
636 lines
21 KiB
HTML
636 lines
21 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}Accessibility - KJV Study{% endblock %}
|
|
{% block description %}KJV Study is designed to be fully accessible with keyboard navigation, screen reader support, text-to-speech, and high contrast modes.{% endblock %}
|
|
|
|
{% block content %}
|
|
<article>
|
|
<h1>Accessibility</h1>
|
|
<p class="subtitle">Scripture for everyone, without barriers</p>
|
|
|
|
<nav class="toc" aria-label="Table of contents">
|
|
<strong>Contents</strong>
|
|
<ul role="list">
|
|
<li><a href="#our-commitment">Our Commitment</a></li>
|
|
<li><a href="#keyboard-navigation">Keyboard Navigation</a></li>
|
|
<li><a href="#text-to-speech">Text-to-Speech</a></li>
|
|
<li><a href="#visual-accessibility">Visual Accessibility</a></li>
|
|
<li><a href="#screen-readers">Screen Reader Support</a></li>
|
|
<li><a href="#feedback">Feedback</a></li>
|
|
</ul>
|
|
</nav>
|
|
|
|
<section>
|
|
<h2 id="our-commitment">Our Commitment</h2>
|
|
<p><span class="newthought">God's Word belongs to all</span>, and we believe every person should be able to read, study, and meditate on Scripture regardless of physical ability.<label for="sn-commitment" class="margin-toggle sidenote-number"></label>
|
|
<input type="checkbox" id="sn-commitment" class="margin-toggle"/>
|
|
<span class="sidenote">"So then faith cometh by hearing, and hearing by the word of God" (Romans 10:17). Access to Scripture has always been central to Christian faith.</span> KJV Study is designed from the ground up with accessibility in mind.</p>
|
|
|
|
<p>We strive to follow accessibility best practices including semantic HTML, sufficient color contrast, full keyboard operability, and compatibility with assistive technologies. While we haven't conducted a formal WCAG audit, accessibility is a priority in our development.</p>
|
|
</section>
|
|
|
|
<section>
|
|
<h2 id="keyboard-navigation">Keyboard Navigation</h2>
|
|
<p><span class="newthought">Full keyboard navigation</span> is available throughout the site. You never need a mouse to read or study Scripture.</p>
|
|
|
|
<h3>Global Shortcuts</h3>
|
|
<table class="keyboard-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Key</th>
|
|
<th>Action</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td><kbd>/</kbd></td>
|
|
<td>Focus search box</td>
|
|
</tr>
|
|
<tr>
|
|
<td><kbd>n</kbd></td>
|
|
<td>Navigate sidebar (then use j/k to move, Enter to select)</td>
|
|
</tr>
|
|
<tr>
|
|
<td><kbd>g</kbd></td>
|
|
<td>Quick verse lookup (prompts for reference)</td>
|
|
</tr>
|
|
<tr>
|
|
<td><kbd>Escape</kbd></td>
|
|
<td>Clear selection / close dialogs / stop speech</td>
|
|
</tr>
|
|
<tr>
|
|
<td><kbd>?</kbd></td>
|
|
<td>Show keyboard shortcuts help</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<h3>Quick Navigation Keys</h3>
|
|
<table class="keyboard-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Key</th>
|
|
<th>Destination</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td><kbd>0</kbd></td>
|
|
<td>Homepage</td>
|
|
</tr>
|
|
<tr>
|
|
<td><kbd>1</kbd></td>
|
|
<td>Genesis</td>
|
|
</tr>
|
|
<tr>
|
|
<td><kbd>2</kbd></td>
|
|
<td>Matthew</td>
|
|
</tr>
|
|
<tr>
|
|
<td><kbd>3</kbd></td>
|
|
<td>John</td>
|
|
</tr>
|
|
<tr>
|
|
<td><kbd>4</kbd></td>
|
|
<td>Romans</td>
|
|
</tr>
|
|
<tr>
|
|
<td><kbd>7</kbd></td>
|
|
<td>Psalms</td>
|
|
</tr>
|
|
<tr>
|
|
<td><kbd>8</kbd></td>
|
|
<td>Proverbs</td>
|
|
</tr>
|
|
<tr>
|
|
<td><kbd>9</kbd></td>
|
|
<td>Revelation</td>
|
|
</tr>
|
|
<tr>
|
|
<td><kbd>b</kbd></td>
|
|
<td>All Books</td>
|
|
</tr>
|
|
<tr>
|
|
<td><kbd>r</kbd></td>
|
|
<td>Resources</td>
|
|
</tr>
|
|
<tr>
|
|
<td><kbd>t</kbd></td>
|
|
<td>Topics</td>
|
|
</tr>
|
|
<tr>
|
|
<td><kbd>s</kbd></td>
|
|
<td>Stories</td>
|
|
</tr>
|
|
<tr>
|
|
<td><kbd>c</kbd></td>
|
|
<td>Strong's Concordance</td>
|
|
</tr>
|
|
<tr>
|
|
<td><kbd>f</kbd></td>
|
|
<td>Family Tree</td>
|
|
</tr>
|
|
<tr>
|
|
<td><kbd>v</kbd></td>
|
|
<td>Verse of the Day</td>
|
|
</tr>
|
|
<tr>
|
|
<td><kbd>.</kbd></td>
|
|
<td>Random Verse</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<h3>Navigation</h3>
|
|
<table class="keyboard-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Key</th>
|
|
<th>Action</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td><kbd>j</kbd> or <kbd>↓</kbd></td>
|
|
<td>Move to next item</td>
|
|
</tr>
|
|
<tr>
|
|
<td><kbd>k</kbd> or <kbd>↑</kbd></td>
|
|
<td>Move to previous item</td>
|
|
</tr>
|
|
<tr>
|
|
<td><kbd>h</kbd> or <kbd>←</kbd></td>
|
|
<td>Move left (in grids) / Go back</td>
|
|
</tr>
|
|
<tr>
|
|
<td><kbd>l</kbd> or <kbd>→</kbd></td>
|
|
<td>Move right (in grids) / Go forward</td>
|
|
</tr>
|
|
<tr>
|
|
<td><kbd>Enter</kbd></td>
|
|
<td>Select / follow link</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<h3>Verse Pages</h3>
|
|
<table class="keyboard-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Key</th>
|
|
<th>Action</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td><kbd>[</kbd></td>
|
|
<td>Previous verse</td>
|
|
</tr>
|
|
<tr>
|
|
<td><kbd>]</kbd></td>
|
|
<td>Next verse</td>
|
|
</tr>
|
|
<tr>
|
|
<td><kbd>←</kbd></td>
|
|
<td>Go back</td>
|
|
</tr>
|
|
<tr>
|
|
<td><kbd>→</kbd></td>
|
|
<td>Next verse (alternative)</td>
|
|
</tr>
|
|
<tr>
|
|
<td><kbd>Space</kbd></td>
|
|
<td>Read selected text aloud (press again to stop)</td>
|
|
</tr>
|
|
<tr>
|
|
<td><kbd>p</kbd></td>
|
|
<td>Download PDF</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<h3>Chapter Pages</h3>
|
|
<table class="keyboard-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Key</th>
|
|
<th>Action</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td><kbd>[</kbd></td>
|
|
<td>Previous chapter</td>
|
|
</tr>
|
|
<tr>
|
|
<td><kbd>]</kbd></td>
|
|
<td>Next chapter</td>
|
|
</tr>
|
|
<tr>
|
|
<td><kbd>→</kbd></td>
|
|
<td>Next chapter (alternative)</td>
|
|
</tr>
|
|
<tr>
|
|
<td><kbd>←</kbd></td>
|
|
<td>Go back</td>
|
|
</tr>
|
|
<tr>
|
|
<td><kbd>i</kbd></td>
|
|
<td>Interlinear view</td>
|
|
</tr>
|
|
<tr>
|
|
<td><kbd>p</kbd></td>
|
|
<td>Download PDF</td>
|
|
</tr>
|
|
<tr>
|
|
<td><kbd>=</kbd></td>
|
|
<td>Read entire chapter aloud</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<h3>Book Pages</h3>
|
|
<table class="keyboard-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Key</th>
|
|
<th>Action</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td><kbd>[</kbd></td>
|
|
<td>Previous book</td>
|
|
</tr>
|
|
<tr>
|
|
<td><kbd>]</kbd></td>
|
|
<td>Next book</td>
|
|
</tr>
|
|
<tr>
|
|
<td><kbd>→</kbd></td>
|
|
<td>Next book (alternative)</td>
|
|
</tr>
|
|
<tr>
|
|
<td><kbd>←</kbd></td>
|
|
<td>Go back</td>
|
|
</tr>
|
|
<tr>
|
|
<td><kbd>Enter</kbd></td>
|
|
<td>Navigate to selected chapter</td>
|
|
</tr>
|
|
<tr>
|
|
<td><kbd>p</kbd></td>
|
|
<td>Download book PDF</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<h3>Strong's Concordance Pages</h3>
|
|
<table class="keyboard-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Key</th>
|
|
<th>Action</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td><kbd>[</kbd></td>
|
|
<td>Previous Strong's number</td>
|
|
</tr>
|
|
<tr>
|
|
<td><kbd>]</kbd></td>
|
|
<td>Next Strong's number</td>
|
|
</tr>
|
|
<tr>
|
|
<td><kbd>j</kbd> or <kbd>↓</kbd></td>
|
|
<td>Select next card (info, related, occurrence)</td>
|
|
</tr>
|
|
<tr>
|
|
<td><kbd>k</kbd> or <kbd>↑</kbd></td>
|
|
<td>Select previous card</td>
|
|
</tr>
|
|
<tr>
|
|
<td><kbd>Enter</kbd></td>
|
|
<td>Follow link on selected card</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<p>Navigation keys are inspired by Vim conventions (<kbd>h</kbd><kbd>j</kbd><kbd>k</kbd><kbd>l</kbd>) for users familiar with that paradigm, while also supporting standard arrow keys for everyone else.</p>
|
|
|
|
<h3>A Note on Keyboard Navigation</h3>
|
|
<p>Building comprehensive keyboard navigation across a site of this complexity is challenging. While we strive for consistency, behavior may vary slightly between different types of pages—book pages, chapter pages, verse pages, grid layouts, and resource pages each have unique navigational needs. We're continuously working to improve the experience. If you encounter any issues or have suggestions, please <a href="https://github.com/kennethreitz/kjvstudy.org/issues" target="_blank" rel="noopener">let us know</a>.</p>
|
|
</section>
|
|
|
|
<section>
|
|
<h2 id="text-to-speech">Text-to-Speech</h2>
|
|
<p><span class="newthought">Listen to Scripture</span> read aloud using your browser's built-in speech synthesis. This feature uses the Web Speech API, which is supported in all modern browsers.</p>
|
|
|
|
<h3>How to Use</h3>
|
|
<ul>
|
|
<li>Select any paragraph with <kbd>j</kbd>/<kbd>k</kbd> and press <kbd>Space</kbd> to hear it read aloud</li>
|
|
<li>Press <kbd>Space</kbd> again to stop playback</li>
|
|
<li>Press <kbd>Escape</kbd> to stop and clear selection</li>
|
|
<li>On chapter pages, press <kbd>=</kbd> to read the entire chapter with auto-advance</li>
|
|
<li>The verse text, commentary, and other content can all be read aloud</li>
|
|
</ul>
|
|
|
|
<h3>Voice Selection</h3>
|
|
<p>Text-to-speech prefers the "Daniel" voice (British English) when available, as it provides a dignified reading suitable for Scripture. If Daniel is not available, it falls back to any British English voice, then any English voice available on your system.</p>
|
|
<p>The available voices depend on your browser and operating system. Most modern systems include Daniel or similar high-quality voices by default.</p>
|
|
</section>
|
|
|
|
<section>
|
|
<h2 id="visual-accessibility">Visual Accessibility</h2>
|
|
|
|
<h3>Dark Mode</h3>
|
|
<p>KJV Study supports both light and dark color schemes. The site respects your system preference automatically, or you can toggle manually using the theme switcher in the navigation bar.</p>
|
|
|
|
<h3>Color Contrast</h3>
|
|
<p>All text meets WCAG AA contrast requirements (minimum 4.5:1 for normal text, 3:1 for large text). We use carefully chosen color palettes for both light and dark modes.</p>
|
|
|
|
<h3>Typography</h3>
|
|
<ul>
|
|
<li>Readable serif fonts based on Edward Tufte's design principles</li>
|
|
<li>Generous line height (1.6-1.8) for comfortable reading</li>
|
|
<li>Responsive text sizing that works at any zoom level</li>
|
|
<li>Maximum line width for optimal readability</li>
|
|
</ul>
|
|
|
|
<h3>Zoom Support</h3>
|
|
<p>The site is fully functional at any zoom level up to 400%. All layouts adapt gracefully, and no content is lost or obscured when zooming.</p>
|
|
|
|
<h3>Reduced Motion</h3>
|
|
<p>If you have "reduce motion" enabled in your system preferences, animations and transitions are minimized or disabled.</p>
|
|
</section>
|
|
|
|
<section>
|
|
<h2 id="screen-readers">Screen Reader Support</h2>
|
|
<p><span class="newthought">KJV Study is built</span> with semantic HTML and ARIA attributes to ensure compatibility with screen readers.</p>
|
|
|
|
<h3>Semantic Structure</h3>
|
|
<ul>
|
|
<li>Proper heading hierarchy (<code><h1></code> through <code><h6></code>)</li>
|
|
<li>Landmark regions (<code><nav></code>, <code><main></code>, <code><article></code>, etc.)</li>
|
|
<li>Labeled form controls</li>
|
|
<li>Descriptive link text (no "click here")</li>
|
|
</ul>
|
|
|
|
<h3>ARIA Labels</h3>
|
|
<ul>
|
|
<li>Navigation menus are labeled with <code>aria-label</code></li>
|
|
<li>Interactive elements have appropriate roles</li>
|
|
<li>Dynamic content updates are announced</li>
|
|
<li>Tables have proper headers and captions</li>
|
|
</ul>
|
|
|
|
<h3>Skip Links</h3>
|
|
<p>A "Skip to content" link appears when you tab into any page, allowing you to bypass navigation and jump directly to the main content.</p>
|
|
|
|
<h3>Tested With</h3>
|
|
<ul>
|
|
<li>VoiceOver (macOS/iOS) in Safari</li>
|
|
</ul>
|
|
</section>
|
|
|
|
<section>
|
|
<h2 id="feedback">Feedback</h2>
|
|
<p>We are continually working to improve accessibility. If you encounter any barriers while using KJV Study, or have suggestions for improvement, please let us know:</p>
|
|
|
|
<ul>
|
|
<li><strong>GitHub Issues</strong>: <a href="https://github.com/kennethreitz/kjvstudy.org/issues" target="_blank" rel="noopener">Report an accessibility issue</a></li>
|
|
</ul>
|
|
|
|
<p>When reporting issues, please include:</p>
|
|
<ul>
|
|
<li>The page URL where you encountered the problem</li>
|
|
<li>Your browser and operating system</li>
|
|
<li>Any assistive technology you're using</li>
|
|
<li>A description of what you expected vs. what happened</li>
|
|
</ul>
|
|
</section>
|
|
|
|
<section style="margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--border-color);">
|
|
<p style="text-align: center; color: var(--text-secondary);">
|
|
<em>"The entrance of thy words giveth light; it giveth understanding unto the simple."</em><br>
|
|
<span style="font-size: 0.9rem;">— Psalm 119:130</span>
|
|
</p>
|
|
</section>
|
|
</article>
|
|
|
|
<style>
|
|
.subtitle {
|
|
font-size: 1.2rem;
|
|
color: var(--text-secondary);
|
|
margin-top: -1rem;
|
|
margin-bottom: 2rem;
|
|
font-style: italic;
|
|
}
|
|
|
|
section {
|
|
margin: 3rem 0;
|
|
}
|
|
|
|
section h2 {
|
|
margin-top: 2.5rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
section h3 {
|
|
margin-top: 1.5rem;
|
|
margin-bottom: 0.75rem;
|
|
font-size: 1.1rem;
|
|
}
|
|
|
|
.toc {
|
|
background: var(--code-bg);
|
|
border: 1px solid var(--border-color);
|
|
padding: 1.5rem 2rem;
|
|
margin: 2rem 0 3rem 0;
|
|
max-width: 400px;
|
|
}
|
|
|
|
.toc strong {
|
|
font-size: 0.9rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.toc ul {
|
|
margin: 1rem 0 0 0;
|
|
padding-left: 0;
|
|
list-style: none;
|
|
columns: 2;
|
|
column-gap: 2rem;
|
|
}
|
|
|
|
.toc li {
|
|
margin: 0.4rem 0;
|
|
}
|
|
|
|
.toc a {
|
|
color: var(--text-color);
|
|
text-decoration: none;
|
|
font-size: 0.95rem;
|
|
}
|
|
|
|
.toc a:hover {
|
|
color: var(--link-color);
|
|
}
|
|
|
|
kbd {
|
|
display: inline-block;
|
|
padding: 0.2rem 0.5rem;
|
|
font-family: 'Consolas', 'Monaco', monospace;
|
|
font-size: 0.85rem;
|
|
background: var(--code-bg);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 4px;
|
|
box-shadow: 0 1px 0 var(--border-color);
|
|
}
|
|
|
|
.keyboard-table {
|
|
width: 100%;
|
|
max-width: 500px;
|
|
margin: 1rem 0 1.5rem;
|
|
border-collapse: collapse;
|
|
}
|
|
|
|
.keyboard-table th,
|
|
.keyboard-table td {
|
|
padding: 0.5rem 1rem;
|
|
text-align: left;
|
|
border-bottom: 1px solid var(--border-color);
|
|
}
|
|
|
|
.keyboard-table th {
|
|
font-weight: 600;
|
|
font-size: 0.9rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.03em;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.keyboard-table td:first-child {
|
|
width: 120px;
|
|
}
|
|
|
|
code {
|
|
background: var(--code-bg);
|
|
padding: 0.15rem 0.4rem;
|
|
border-radius: 3px;
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
ul {
|
|
margin: 1rem 0;
|
|
}
|
|
|
|
li {
|
|
margin: 0.5rem 0;
|
|
}
|
|
|
|
a[target="_blank"]::after {
|
|
content: " ↗";
|
|
font-size: 0.8em;
|
|
opacity: 0.6;
|
|
}
|
|
|
|
/* Keyboard navigation selection */
|
|
.nav-paragraph.selected {
|
|
outline: 2px solid #4a7c59;
|
|
outline-offset: 4px;
|
|
background: rgba(74, 124, 89, 0.05);
|
|
border-radius: 4px;
|
|
}
|
|
|
|
[data-theme="dark"] .nav-paragraph.selected {
|
|
outline-color: #6b9b7a;
|
|
background: rgba(107, 155, 122, 0.1);
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
(function() {
|
|
// Get all navigable paragraphs
|
|
const paragraphs = Array.from(document.querySelectorAll('article section p, article section li')).filter(function(p) {
|
|
if (p.closest('.toc')) return false;
|
|
if (p.style.textAlign === 'center') return false;
|
|
return true;
|
|
});
|
|
|
|
paragraphs.forEach(function(p) {
|
|
p.classList.add('nav-paragraph');
|
|
});
|
|
|
|
let selectedIndex = -1;
|
|
|
|
function clearSelection() {
|
|
paragraphs.forEach(function(p) {
|
|
p.classList.remove('selected');
|
|
});
|
|
}
|
|
|
|
function selectParagraph(index) {
|
|
clearSelection();
|
|
selectedIndex = Math.max(0, Math.min(index, paragraphs.length - 1));
|
|
paragraphs[selectedIndex].classList.add('selected');
|
|
paragraphs[selectedIndex].scrollIntoView({
|
|
behavior: 'auto',
|
|
block: 'center'
|
|
});
|
|
}
|
|
|
|
function getSelectedText() {
|
|
if (selectedIndex < 0 || selectedIndex >= paragraphs.length) return null;
|
|
const clone = paragraphs[selectedIndex].cloneNode(true);
|
|
clone.querySelectorAll('.sidenote, .marginnote, .sidenote-number, .margin-toggle').forEach(function(el) {
|
|
el.remove();
|
|
});
|
|
return (clone.textContent || clone.innerText || '').trim();
|
|
}
|
|
|
|
document.addEventListener('keydown', function(e) {
|
|
if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA' || e.target.tagName === 'SELECT') {
|
|
return;
|
|
}
|
|
// Don't handle if sidebar navigation is active
|
|
if (KJVNav.sidebarActive) return;
|
|
|
|
if (e.key === 'j' || e.key === 'ArrowDown') {
|
|
e.preventDefault();
|
|
selectParagraph(selectedIndex < 0 ? 0 : selectedIndex + 1);
|
|
}
|
|
|
|
if (e.key === 'k' || e.key === 'ArrowUp') {
|
|
e.preventDefault();
|
|
selectParagraph(selectedIndex < 0 ? 0 : selectedIndex - 1);
|
|
}
|
|
|
|
if (e.key === ' ' && selectedIndex >= 0) {
|
|
e.preventDefault();
|
|
const text = getSelectedText();
|
|
if (text && window.KJVSpeech) {
|
|
window.KJVSpeech.toggle(text);
|
|
}
|
|
}
|
|
|
|
if (e.key === 'Escape') {
|
|
clearSelection();
|
|
selectedIndex = -1;
|
|
if (window.KJVSpeech) {
|
|
window.KJVSpeech.stop();
|
|
}
|
|
}
|
|
|
|
if (e.key === 'ArrowLeft') {
|
|
e.preventDefault();
|
|
history.back();
|
|
}
|
|
});
|
|
})();
|
|
</script>
|
|
{% endblock %}
|