/** * Accessibility Enhancements - Ragnarok Frontier Manager * * This file provides: * 1. Screen-reader only content (.sr-only) * 2. Enhanced focus indicators * 3. Skip-to-content link * 4. High-contrast mode support * 5. Reduced motion preferences * 6. Form accessibility enhancements */ /* ============================================ SCREEN READER ONLY CONTENT ============================================ */ /** * Visually hide content but keep it accessible to screen readers. * Use for labels on icon-only buttons, table captions, etc. */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; border: 0; } /** * Allow .sr-only content to become visible when focused. * Useful for skip links. */ .sr-only-focusable:focus, .sr-only-focusable:active { position: static; width: auto; height: auto; padding: inherit; margin: 0; overflow: visible; clip: auto; clip-path: none; white-space: normal; } /* ============================================ SKIP TO CONTENT LINK ============================================ */ .skip-link { position: absolute; top: -100px; left: 50%; transform: translateX(-50%); z-index: 9999; padding: var(--space-3) var(--space-6); background: var(--primary); color: var(--primary-foreground); font-weight: 600; font-size: 14px; border-radius: var(--radius); text-decoration: none; box-shadow: var(--shadow-lg); transition: top 0.2s ease; } .skip-link:focus { top: var(--space-4); outline: 2px solid var(--ring); outline-offset: 2px; } /* ============================================ ENHANCED FOCUS INDICATORS ============================================ */ /** * Enhanced focus ring for better visibility. * Uses a double-ring technique for high contrast. */ :focus-visible { outline: 2px solid var(--ring); outline-offset: var(--ring-offset); } /* Dark background elements need light focus ring */ .sidebar :focus-visible, [data-theme="dark"] :focus-visible { outline-color: var(--ring); } /* Enhanced button focus */ .btn:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; box-shadow: 0 0 0 4px var(--primary-muted); } /* Icon buttons with enhanced focus */ .btn-icon:focus-visible, .modal-close:focus-visible, .theme-toggle:focus-visible, .sidebar-toggle:focus-visible, .topbar-hamburger:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; border-radius: var(--radius); } /* Form elements - enhanced focus */ input:focus-visible, textarea:focus-visible, select:focus-visible { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-muted); } /* Checkbox and radio focus */ input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; } /* Tab focus indicator */ .tab:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; border-radius: var(--radius-sm); } /* Table row focus (for keyboard navigation) */ tr:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; } /* Link focus */ a:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; border-radius: var(--radius-sm); } /* Sidebar item focus */ .sidebar-item:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; background: var(--bg-muted); } /* ============================================ HIGH CONTRAST MODE ============================================ */ /** * High contrast mode increases color differences for better readability. * Activated via [data-high-contrast="true"] on or body. */ [data-high-contrast="true"] { /* Increase text contrast */ --text-primary: #000000; --text-secondary: #333333; --text-muted: #555555; /* Increase border contrast */ --border: #888888; --border-strong: #555555; /* Increase focus ring visibility */ --ring: #0000FF; --ring-offset: 3px; } [data-theme="dark"][data-high-contrast="true"] { --text-primary: #FFFFFF; --text-secondary: #DDDDDD; --text-muted: #AAAAAA; --border: #777777; --border-strong: #AAAAAA; --ring: #FFFF00; } /* High contrast mode button styling */ [data-high-contrast="true"] .btn { border: 2px solid currentColor; } [data-high-contrast="true"] .badge { border: 1px solid currentColor; } /* ============================================ REDUCED MOTION PREFERENCES ============================================ */ /** * Respect user's motion preferences. * Disables animations and transitions for users who prefer reduced motion. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } /* Keep essential state transitions visible */ .toast { animation: none !important; opacity: 1 !important; transform: none !important; } .toast.removing { opacity: 0 !important; } /* Disable loading spinner animation */ .loading, .loading-spinner::before, .connection-indicator-dot.pulse { animation: none !important; } /* Show static indicators instead */ .loading::after { content: '...'; } /* Disable skeleton shimmer */ .skeleton, .skeleton-cell { animation: none !important; background: var(--bg-muted) !important; } } /** * Optional: User-controlled reduced motion setting * Applied via [data-reduced-motion="true"] */ [data-reduced-motion="true"] *, [data-reduced-motion="true"] *::before, [data-reduced-motion="true"] *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } /* ============================================ FORM ACCESSIBILITY ENHANCEMENTS ============================================ */ /* Required field indicator */ .form-group label.required::after, label.required::after { content: ' *'; color: var(--error); font-weight: normal; } /* Fieldset and legend styling */ fieldset { border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-4); margin-bottom: var(--space-4); } legend { font-weight: 600; font-size: 14px; padding: 0 var(--space-2); color: var(--text-primary); } /* Help text styling */ .form-help { font-size: 12px; color: var(--text-secondary); margin-top: var(--space-1); } /* Error states with proper ARIA */ input[aria-invalid="true"], textarea[aria-invalid="true"], select[aria-invalid="true"] { border-color: var(--error); background-color: var(--error-bg); } input[aria-invalid="true"]:focus, textarea[aria-invalid="true"]:focus, select[aria-invalid="true"]:focus { border-color: var(--error); box-shadow: 0 0 0 3px var(--error-bg); } /* ============================================ LIVE REGIONS ============================================ */ /** * Live region styles - content announces to screen readers. * These are typically invisible but critical for accessibility. */ [aria-live="polite"], [aria-live="assertive"] { /* No visual styling - these work via ARIA */ } /* Status message container (visible) */ .status-message { padding: var(--space-3) var(--space-4); border-radius: var(--radius); margin-bottom: var(--space-4); } .status-message[aria-live="assertive"] { background: var(--warning-bg); border: 1px solid var(--warning-border); color: var(--warning-text); } /* ============================================ SEMANTIC LANDMARK STYLING ============================================ */ /* Main content area */ main { /* Ensure main content is properly identified */ } /* Navigation regions */ nav[aria-label] { /* Labeled navigation regions */ } /* Complementary regions (sidebars) */ aside[role="complementary"] { /* Sidebar styling */ } /* ============================================ TABLE ACCESSIBILITY ============================================ */ /* Sortable column indicator */ th[aria-sort] { cursor: pointer; } th[aria-sort="ascending"]::after { content: ' \2191'; /* Up arrow */ font-size: 0.8em; } th[aria-sort="descending"]::after { content: ' \2193'; /* Down arrow */ font-size: 0.8em; } th[aria-sort="none"]::after { content: ' \2195'; /* Up-down arrow */ font-size: 0.8em; opacity: 0.5; } /* Row selection indicator */ tr[aria-selected="true"] { background: var(--primary-muted); } /* ============================================ ICON BUTTON ACCESSIBILITY ============================================ */ /** * Icon buttons should always have text alternatives. * Use aria-label or .sr-only spans for screen reader text. */ .btn-icon { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; min-height: 36px; padding: var(--space-2); } .btn-icon svg { width: 18px; height: 18px; } /* Ensure icon-only buttons have minimum touch target */ @media (pointer: coarse) { .btn-icon, .modal-close, .theme-toggle, .sidebar-toggle, .topbar-hamburger { min-width: 44px; min-height: 44px; } } /* ============================================ COLOR CONTRAST HELPERS ============================================ */ /** * Ensure information isn't conveyed by color alone. * Add visual indicators (icons, patterns, text) alongside color. */ /* Status indicators with patterns */ .status-indicator { display: inline-flex; align-items: center; gap: var(--space-1); } .status-indicator::before { content: ''; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .status-indicator.status-online::before { background: var(--success); } .status-indicator.status-offline::before { background: var(--text-muted); } .status-indicator.status-error::before { background: var(--error); } /* Add text label for color-blind users */ .status-indicator .status-text { font-size: 12px; } /* ============================================ DIALOG/MODAL ACCESSIBILITY ============================================ */ /* Modal focus trap indicator */ .modal[aria-modal="true"] { /* Modal is active */ } /* Modal close button focus */ .modal-close:focus-visible { background: var(--bg-muted); } /* ============================================ LOADING AND PROGRESS STATES ============================================ */ /* Progress bar accessibility */ [role="progressbar"] { position: relative; } [role="progressbar"][aria-valuenow]::after { content: attr(aria-valuenow) '%'; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 12px; color: var(--text-primary); } /* Loading state announcement */ [aria-busy="true"] { position: relative; } /* ============================================ PRINT STYLES FOR ACCESSIBILITY ============================================ */ @media print { /* Ensure content is readable when printed */ .sr-only { position: static !important; width: auto !important; height: auto !important; margin: 0 !important; clip: auto !important; clip-path: none !important; } /* Show URLs for links */ a[href^="http"]::after { content: ' (' attr(href) ')'; font-size: 0.8em; color: #666; } }