93ac4d275d
💡 What: Added a "Skip to content" link that is visually hidden by default but appears when focused via keyboard. Pointed it to the main content area using `id="main-content"` and `tabIndex={-1}`. 🎯 Why: Keyboard users and screen readers must otherwise tab through the entire navigation menu on every page load before reaching the actual page content. This is tedious and a poor UX. 📸 Before/After: Before, keyboard focus started on "Home" in the header. After, the first tab press shows the "Skip to content" link at the top left of the screen. ♿ Accessibility: Massively improves WCAG compliance (Bypass Blocks) and keyboard navigation efficiency. Co-authored-by: google-labs-jules[bot] <161369871+google-labs-jules[bot]@users.noreply.github.com> Co-authored-by: ralksta <ralksta@users.noreply.github.com>
2.9 KiB
2024-05-24 - Lightbox ARIA Attributes
Learning: Adding role="dialog", aria-modal="true", and aria-label to custom modal/lightbox overlays ensures screen readers announce them properly instead of just falling back to reading inner content without context. Additionally, toggles that show/hide panels (like the EXIF info button) must use aria-expanded and link to the panel via aria-controls for proper screen reader communication.
Action: When building or modifying custom overlays or toggle buttons in the future, always verify that ARIA attributes are set correctly to match the visual behavior.
2024-05-25 - SVG Icon Accessibility
Learning: Adding aria-hidden="true" to decorative <svg> icons within interactive elements (like <button> or <a>) that already have an aria-label is crucial. Otherwise, screen readers may read the raw vector nodes or fall back to confusing announcements in addition to the label. Similarly, when adding text to visual spinners, use role="alert" and aria-live="polite" on the container while hiding the SVG graphic.
Action: When adding or modifying interactive elements with icon graphics, always ensure the graphic is explicitly hidden from screen readers using aria-hidden="true" if a text alternative (aria-label) is provided.
2024-05-26 - Interactive Card ARIA Labels
Learning: When building interactive card components that contain multiple pieces of text or badges (like titles and photo counts), screen readers may announce them in a fragmented or confusing way.
Action: Always apply a comprehensive aria-label to the parent link/container that encompasses all meaningful visual data (e.g., titles and item counts). Use aria-hidden="true" on redundant text or visual child elements, and set alt="" on decorative images to consolidate screen reader announcements into a single, accurate interaction point.
2025-05-07 - Skip-to-Content Navigation
Learning: Keyboard users and screen readers need a way to bypass repetitive header navigation links. Without a visually hidden skip link that becomes visible on focus, these users must tab through every nav item before reaching the main content on every page load.
Action: Always include a "Skip to content" link as the first focusable element in the DOM, anchored to the main content container. Ensure the main container has tabIndex={-1} so it can programmatically receive focus without interrupting normal tab flow.
2024-06-18 - Dynamic Numeric Counters ARIA
Learning: When displaying dynamic numeric text changes during navigation (like a lightbox image counter), the visual presentation (e.g., "1 / 5") does not provide sufficient context for screen reader users and might not be announced automatically.
Action: Wrap the counter container with aria-live="polite" and aria-atomic="true". Use .sr-only to provide a context-rich screen reader string (e.g., "Photo 1 of 5") and hide the visual short-hand using aria-hidden="true".