Accessibility Audit

Web Accessibility in a Harm-Reduction Context

Harm-reduction portals occupy a unique ethical position on the web. Unlike a news site or e-commerce store, a resource about psilocybin mushrooms is frequently accessed by people who may be in emotionally or cognitively vulnerable states — someone researching for the first time after an unexpectedly intense experience, a caregiver looking for safety information, or a person in ongoing mental-health recovery exploring therapeutic options. The stakes of inaccessible content are therefore higher than average.

Accessibility on Psilobase is not a checkbox exercise. It is a core harm-reduction commitment. If a screen reader user cannot navigate the dosage safety section, they may turn to less reliable sources. If a dyslexic visitor cannot parse a warning about drug interactions, a preventable harm may occur. If someone on a low-end mobile device with poor connectivity cannot load a safety checklist, that gap has real-world consequences.

Who Visits a Psilobase-Type Portal?

The audience for a psilocybin harm-reduction site is unusually diverse:

• First-time researchers — often young adults with no prior experience, possibly anxious, reading on mobile devices late at night.
• People with mental-health conditions — including depression, PTSD, anxiety disorders, who are exploring psilocybin-assisted therapy evidence.
• Older adults — possibly with age-related vision decline, less digital fluency, seeking therapeutic alternatives.
• Neurodivergent users — ADHD, autism spectrum, dyslexia — who benefit enormously from predictable layouts, clear language, and sensory-considerate design.
• Medical professionals and researchers — needing fast, precise navigation to cited content.
• People in crisis or altered states — who need simple, calm, unambiguous presentation with no cognitive overload.
• Non-native English speakers — who rely on clear sentence structure and consistent terminology.
• Users with physical disabilities — keyboard-only users, switch access users, voice control users.

Designing for this audience means designing for everyone. Accessibility improvements on Psilobase simultaneously serve the screen reader user, the person with cognitive fatigue, the non-native speaker, and the person reading on a cracked phone screen with a damaged touchscreen.

WCAG 2.1 AA Standards: Practical Explanations

The Web Content Accessibility Guidelines (WCAG) 2.1 Level AA is the internationally recognised standard adopted by law in many jurisdictions, including the EU Web Accessibility Directive and the UK Equality Act 2010. The guidelines are organised around four principles, remembered by the acronym POUR.

1. Perceivable

All information and user interface components must be presentable to users in ways they can perceive. This means the content is available to at least one of the senses — sight, hearing, or touch — regardless of disability.

• Text alternatives (1.1.1): Every non-text element — images, icons, charts, infographics — must have a text alternative. For a Psilobase species identification photo of Psilocybe cubensis, the alt text should describe identifying features, not just say "mushroom."
• Captions and audio descriptions (1.2.x): Any video content about mushroom cultivation or integration practices must include accurate captions. Pre-recorded audio must include a transcript.
• Adaptable content (1.3.x): The structure and relationships in the content — headings, lists, tables — must be conveyed by more than just visual formatting. A dosage table must use proper <th> headers, not just bold text in cells.
• Distinguishable (1.4.x): Colour must not be the only visual means of conveying information. Text must have sufficient contrast. Audio must be controllable. Content must reflow at 400% zoom without loss of information.

Psilobase practical example: A warning notice using only a red border to signal danger fails this criterion. The warning must also include an icon with appropriate alt text (e.g., "Warning:") and text that stands alone without colour context.

2. Operable

User interface components and navigation must be operable — meaning all functionality must be available via keyboard and users must have enough time to interact with content.

• Keyboard accessible (2.1.x): Every interactive element — the dosage calculator, the species filter, the integration journal form — must be fully operable with a keyboard alone. No keyboard traps. Focus must be visible at all times.
• Enough time (2.2.x): If Psilobase ever implements session timeouts or auto-advancing content, users must be able to extend or disable time limits.
• Seizures and physical reactions (2.3.x): No content should flash more than three times per second. This is especially relevant given that some visitors may have epilepsy exacerbated by psychedelic experiences.
• Navigable (2.4.x): Skip links must be provided. Pages must have descriptive titles. Headings and labels must describe the topic or purpose. Focus order must be logical.
• Input modalities (2.5.x): Touch targets must be large enough (minimum 44×44 CSS pixels). Pointer gestures like swipe-to-filter must have single-pointer alternatives.

Psilobase practical example: The mobile navigation hamburger menu must open and close with the Enter or Space key, trap focus within the open menu, and return focus to the trigger button when closed. This is a common failure on static HTML sites.

3. Understandable

Information and the operation of the user interface must be understandable.

• Readable (3.1.x): The page language must be set (lang="en" on the <html> element). Unusual words (psilocybin, serotonergic, mycelium) should be explained or linked to a glossary.
• Predictable (3.2.x): Navigation must appear in a consistent location across all pages. Components that look the same must behave the same way.
• Input assistance (3.3.x): Forms — including integration journal entries and mood trackers — must provide clear labels, error identification, error suggestions, and the opportunity to review before submission.

Psilobase practical example: If a user enters an invalid dose in the calculator (e.g., a letter instead of a number), the error message must specifically identify the problem ("Please enter a number for the dose field") and suggest a correction, not just highlight the field in red.

4. Robust

Content must be robust enough that it can be reliably interpreted by a wide variety of user agents, including current and future assistive technologies.

• Compatible (4.1.x): HTML must be valid and well-formed. ARIA attributes must be used correctly. Status messages must be programmatically determinable so screen readers can announce them without focus moving.

Psilobase practical example: When the dosage calculator produces a result, the result text must be placed in an aria-live="polite" region so screen reader users hear the updated value without needing to manually find it.

Screen Reader Optimisation for Sensitive Content

Screen readers convert on-screen text and structure to speech or Braille output. The three dominant screen readers — NVDA (Windows, free), JAWS (Windows, commercial), and VoiceOver (Apple, built-in) — each have slightly different behaviours, but all rely on the same underlying accessibility tree exposed by the browser.

Landmark Regions

Landmark regions allow screen reader users to jump directly to sections of a page. Psilobase should implement all of the following landmarks consistently across every page template:

• <header> (or role="banner") — site header, appears once per page.
• <nav aria-label="Primary navigation"> — the main navbar. Use a distinct aria-label if there are multiple nav elements on a page (e.g., "Footer navigation").
• <main id="main-content" role="main"> — the primary content area. The skip link target.
• <aside aria-label="Related resources"> — sidebar or related content panels.
• <footer> (or role="contentinfo") — site footer.

Screen reader users navigating a Psilobase article should be able to jump with a single keystroke from the banner straight to the main content, bypassing the 13-item navigation menu. This is what the skip-link provides visually, and what landmark navigation provides for NVDA/JAWS users pressing the R key (for region).

Heading Hierarchy

NVDA users commonly navigate by heading. The heading hierarchy on every Psilobase page must follow a strict logical order:

1. <h1> — one per page, the page title (e.g., "Psilocybe Cubensis: Species Profile").
2. <h2> — major sections (e.g., "Identification", "Pharmacology", "Safety Considerations").
3. <h3> — subsections within h2 sections.
4. <h4>–<h6> — used sparingly and never as styling shortcuts.

A heading audit using NVDA's heading list (Insert+F7) or the HeadingsMap browser extension will reveal any broken hierarchy immediately. Skipping from h2 to h4 is a common error that disrupts screen reader navigation.

ARIA Roles for Interactive Components

Native HTML elements should always be preferred over ARIA roles, as they carry implicit semantics. Where custom components are necessary, use ARIA correctly:

• Accordion / FAQ items: use <details> and <summary> natively, or implement with role="button", aria-expanded, and aria-controls.
• Dosage calculator output: wrap in <div aria-live="polite" aria-atomic="true">.
• Modal dialogs (e.g., a "talk to someone" crisis resource popup): use role="dialog", aria-modal="true", aria-labelledby pointing to the dialog heading, and trap focus within the modal.
• Tab interfaces (e.g., switching between species info panels): use role="tablist", role="tab", role="tabpanel", with proper aria-selected and keyboard arrow-key navigation.

Sensitive Content and Screen Reader Announcements

Harm-reduction content about drug interactions, contraindications, and crisis resources should use role="alert" or aria-live="assertive" for truly critical safety messages — this interrupts the screen reader's current speech to announce the message immediately. Use this sparingly and only for genuinely urgent information; overuse desensitises users.

Colour Contrast Requirements

WCAG 2.1 Success Criterion 1.4.3 requires that normal text has a contrast ratio of at least 4.5:1 against its background. Large text (18pt / 24px or 14pt bold / 18.67px bold) requires at least 3:1. Interactive UI components and graphical elements require at least 3:1 against adjacent colours under criterion 1.4.11.

Psilobase Brand Green #2c5f2d on White #ffffff

The brand primary colour is #2c5f2d (a deep forest green). Calculating the contrast ratio against white (#ffffff):

• Relative luminance of #2c5f2d: approximately 0.0595
• Relative luminance of #ffffff: 1.0
• Contrast ratio: (1.0 + 0.05) / (0.0595 + 0.05) = approximately 9.6:1

This significantly exceeds both AA (4.5:1) and AAA (7:1) thresholds for normal text. The brand green on white is an excellent accessible combination. The challenge arises in interactive states and decorative uses.

Interactive States

Every interactive element must maintain contrast in all states:

• Default link colour: #2c5f2d on white — passes at 9.6:1.
• Hover state: If lightened to, say, #4a8c4b, verify the ratio does not drop below 4.5:1. A lightened green at #4a8c4b yields approximately 4.8:1 — just passing. Going lighter than this risks failure.
• Focus outline: The default browser focus ring should be supplemented or replaced with a clearly visible custom outline. A solid 3px outline in #2c5f2d or an offset outline in a high-contrast colour is recommended.
• Disabled state: Disabled buttons and inputs are typically exempt from contrast requirements (WCAG explicitly excludes them), but providing visible differentiation from active states via both colour and texture or labelling is good practice.
• Visited links: If visually distinct from unvisited links, the visited state colour must also pass contrast. A purple visited state (#6b2d8b) on white passes at approximately 8.1:1.

Dark Mode Considerations

If Psilobase implements a dark theme (responding to the prefers-color-scheme: dark media query), contrast requirements apply equally. The brand green #2c5f2d on a dark background such as #1a1a1a yields approximately 4.7:1 — just passing for normal text. For large hero headings, this would pass comfortably. A lighter tint of the green, such as #5fa860, on a dark background of #121212 provides approximately 6.1:1 — a safer margin for body text in dark mode.

Dark mode also benefits users with photophobia, a condition that can be triggered or exacerbated during post-psychedelic sensitivity periods. Providing a respectful dark mode is both an accessibility and a harm-reduction measure for Psilobase's specific audience.

Keyboard Navigation for Interactive Tools

Psilobase's dosage calculators and protocol selectors are among the highest-stakes interactive components on the site. A user relying on keyboard navigation — whether because of a motor disability, a broken touchscreen, or a preference — must be able to use every feature without a mouse.

Tabindex Management

The tab order must match the visual reading order. Do not use positive tabindex values (e.g., tabindex="3") as these override the natural document order and create unpredictable navigation. Use only:

• tabindex="0" — to add a non-interactive element (e.g., a custom <div>-based component) to the tab sequence.
• tabindex="-1" — to remove an element from the tab sequence while keeping it focusable programmatically (useful for managing focus in dialogs and composite widgets).

Dosage Calculator Keyboard Flow

A well-implemented dosage calculator on Psilobase should support the following keyboard interactions:

1. Tab to the body weight input field; type a number.
2. Tab to the experience level selector; use Up/Down arrow keys to select an option (if implemented as a custom widget) or Tab to the next native <select>.
3. Tab to the "Calculate" button; press Enter or Space to submit.
4. The result appears in an aria-live region and is announced by screen readers automatically.
5. Tab continues to any follow-up actions (e.g., "Save to journal", "View safety guidelines for this dose").

Focus Trap in Modals

When a modal dialog opens (e.g., a crisis support resource popup), focus must be trapped inside the modal. This means:

• The first focusable element inside the modal receives focus when it opens.
• Tab and Shift+Tab cycle only through focusable elements within the modal.
• Escape key closes the modal and returns focus to the trigger element.
• Background content is hidden from assistive technologies using aria-hidden="true" on the rest of the page while the modal is open.

Protocol Selector Keyboard Navigation

If Psilobase implements a multi-step protocol selector (e.g., "Choose your intention", "Select experience level", "Review protocol"), each step must:

• Move focus to the heading of the new step when it appears.
• Announce the step change via aria-live or by moving focus programmatically.
• Allow backward navigation to review and change previous selections.
• Not require drag-and-drop interactions without providing an alternative.

Alt Text Best Practices for Mushroom Images

Image alt text on Psilobase is not a minor SEO consideration — it is a safety-critical requirement. Species identification images must convey enough information to be genuinely useful to someone who cannot see the image.

Descriptive Images: Species Identification

For a species profile image where visual identification matters, alt text must be detailed and precise:

• Poor alt text: alt="mushroom"
• Acceptable alt text: alt="Psilocybe cubensis mushroom"
• Good alt text for harm reduction: alt="Psilocybe cubensis: golden-brown convex cap with white stem and blue bruising at the base where the stipe meets the substrate"

The "good" version conveys the key identification features — cap colour, stem characteristics, and the diagnostic blue bruising (a sign of psilocybin/psilocin oxidation) — that a sighted user would assess visually. This information is genuinely important for someone who cannot see the image but is using the species guide for harm-reduction purposes.

Decorative Images

Background textures, divider flourishes, and purely ornamental images should use an empty alt attribute: alt="". This instructs screen readers to skip the image entirely. Never use alt="decorative" — screen readers will speak the word "decorative" unnecessarily.

Emotional and Metaphorical Images

Psilobase may use evocative imagery — fractal patterns, nature photography, abstract artwork — to create an atmosphere of calm and wonder appropriate to the subject matter. Alt text for these images should convey the emotional intent:

• Poor: alt="fractal image"
• Good: alt="Intricate geometric fractal pattern in blue and gold, evoking the visual complexity reported during psilocybin experiences"

Complex Informational Images

Charts showing dose-response curves, diagrams of serotonin receptor binding, or infographics about mushroom life cycles require more than a brief alt text. Use a combination of a short alt attribute and a longer description:

• Short alt: alt="Dose-response curve for psilocybin — see description below"
• Long description: provided in adjacent text, or linked via aria-describedby pointing to a following paragraph.

Form Accessibility for Integration Journals and Mood Trackers

Integration journals and mood trackers are among the most sensitive interactive features Psilobase could offer. Users may be in emotionally vulnerable states when completing these forms. Inaccessible form design in this context is not merely inconvenient — it is a barrier to self-care tools at a critical moment.

Label Association

Every form input must have an associated <label>. The association is created either by wrapping the input in the label, or by using for/id matching:

<label for="mood-score">Overall mood today (1–10)</label>
<input type="number" id="mood-score" name="mood-score" min="1" max="10" required aria-describedby="mood-score-hint">
<p id="mood-score-hint" class="form-hint">1 = very low, 10 = excellent</p>

Placeholder text is not a substitute for a visible label. Placeholders disappear on focus and have insufficient contrast in most browsers by default. They also do not consistently work with all screen reader/browser combinations.

Error Messages

Error messages must be:

1. Specific: Tell the user exactly which field has an error and why.
2. Actionable: Tell the user exactly how to fix it.
3. Persistent: Remain visible while the user corrects the error.
4. Programmatically associated: Linked to the input via aria-describedby or aria-errormessage so screen readers announce the error when focus enters the field.

<input type="text" id="session-date" aria-describedby="session-date-error" aria-invalid="true">
<p id="session-date-error" role="alert">Please enter the date in DD/MM/YYYY format, e.g., 15/06/2026</p>

Required Fields

Required fields must be indicated both visually and programmatically. Do not rely solely on an asterisk (*) — add a note at the top of the form explaining the convention ("Fields marked with * are required") and add the required attribute (or aria-required="true") to each required input.

Grouping with Fieldset and Legend

Related form controls — such as a set of radio buttons for "How would you describe your experience?" — must be grouped with <fieldset> and labelled with <legend>:

<fieldset>
  <legend>How would you describe your overall experience?</legend>
  <label><input type="radio" name="experience" value="positive"> Positive</label>
  <label><input type="radio" name="experience" value="neutral"> Neutral</label>
  <label><input type="radio" name="experience" value="challenging"> Challenging</label>
  <label><input type="radio" name="experience" value="difficult"> Difficult</label>
</fieldset>

Screen readers will announce "How would you describe your overall experience?" before each radio option, giving the user the essential context they need to make a selection.

Autocomplete and Sensitive Data

Integration journals may contain sensitive personal health information. Do not set autocomplete attributes that cause browsers to offer to save and autofill sensitive journal entries. Use autocomplete="off" for fields containing personal health data, with the explicit intent of protecting user privacy.

Mobile Accessibility

Over 60% of visits to harm-reduction websites occur on mobile devices, often during or shortly after experiences when desktop access is unavailable. Mobile accessibility is therefore a primary — not secondary — concern for Psilobase.

Touch Target Sizes

WCAG 2.5.5 (Level AAA) recommends a minimum touch target size of 44×44 CSS pixels. At Level AA, the minimum is 24×24 pixels (WCAG 2.2, criterion 2.5.8), but the 44×44px guideline should be treated as the de facto standard for Psilobase given its mobile-first audience.

Specific targets to audit on Psilobase:

• Navigation menu items in the collapsed mobile menu — each item should have a minimum 44px touch height.
• Accordion expand/collapse triggers in the FAQ section.
• "Copy" or "Share" buttons on dosage information.
• Form submit buttons — must be wide enough to tap reliably.
• Breadcrumb links — typically rendered small and close together; ensure adequate padding.
• Social sharing icons — if used, must have adequate tap areas even if the icon itself is small.

Zoom Support

The viewport meta tag on Psilobase reads:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

This is correct. What it must not include are user-scalable=no or maximum-scale=1. These attributes disable pinch-to-zoom and are prohibited under WCAG 1.4.4 (Resize Text). Users with low vision depend on pinch-to-zoom; disabling it is one of the most impactful mobile accessibility failures a site can make. WCAG 1.4.4 requires that text can be resized up to 200% without loss of content or functionality. Pinch-to-zoom is the primary mechanism mobile users rely on to achieve this.

Orientation Lock

Do not lock the screen orientation. Users with physical disabilities may have their device mounted in a fixed position (landscape or portrait). WCAG 1.3.4 requires that content does not restrict its view to a single display orientation unless a particular orientation is essential. No content on Psilobase meets the "essential" exemption.

Pointer Coarse (Touch) Media Query

CSS can detect touch-primary devices and adjust UI accordingly:

@media (pointer: coarse) {
  .nav-menu a {
    padding: 12px 16px; /* Increase touch target */
  }
  .btn {
    min-height: 44px;
    min-width: 44px;
  }
}

This ensures touch users get enlarged interactive targets while mouse users see a more compact UI appropriate for precise pointing.

Testing Tools and Methodologies

Automated tools catch approximately 30–40% of WCAG failures. The remaining 60–70% require manual testing. A comprehensive accessibility audit for Psilobase must combine both approaches.

Automated Testing Tools

• axe DevTools (browser extension by Deque): The most accurate automated checker. Install in Chrome or Firefox, open the browser DevTools, and run a scan on any Psilobase page. axe categorises issues by severity and links to detailed explanations. The free version catches a substantial portion of failures; the Pro version adds guided tests and full-page scanning.
• WAVE (WebAIM): A browser extension that overlays visual indicators directly on the page, making it easy to see where errors and warnings occur in context. Particularly good at identifying missing alt text, empty links, and contrast failures.
• Lighthouse (built into Chrome DevTools): Run an accessibility audit from the Lighthouse tab. Provides a score out of 100 and a list of specific failures. Note that the score is weighted and a 100/100 Lighthouse score does not guarantee full WCAG compliance — it only means the automated checks passed.
• Pa11y: A command-line tool and CI/CD integration. Run pa11y https://psilobase.com/safety/ to get a list of WCAG failures that can be incorporated into a build pipeline to prevent regressions.
• Colour Contrast Analyser (by TPGi, free desktop app): Pick any two colours on-screen with an eyedropper tool and get the exact contrast ratio with a pass/fail verdict against AA and AAA thresholds.

Manual Testing: NVDA Screen Reader Walkthrough

NVDA (NonVisual Desktop Access) is the most widely used free screen reader. To test a Psilobase page with NVDA:

1. Download and install NVDA from nvaccess.org. It is free.
2. Open Firefox (preferred) or Chrome. NVDA works best with Firefox for web testing.
3. Navigate to a Psilobase page, e.g., a species profile.
4. Press NVDA+F7 (where NVDA key is Insert by default) to open the Elements List. Check headings — is the hierarchy correct? Are there descriptive h1, h2, h3 elements?
5. Press H to move forward through headings, Shift+H to move backward. Does the reading order match the visual order?
6. Press F to move through form fields. Do all fields announce their labels?
7. Press K to navigate links. Do all links have descriptive text? (Not just "click here" or "read more".)
8. Press G to navigate images. Does every informational image have a useful alt text?
9. Tab through interactive elements (calculator, forms, nav) with NVDA active. Is each element's role, name, and state announced correctly?
10. Trigger form errors and confirm they are announced.

Keyboard-Only Testing

Disconnect or ignore the mouse and navigate through the entire Psilobase site using only the keyboard. Use Tab, Shift+Tab, Enter, Space, and arrow keys. Document every moment where you cannot complete a task or where focus is lost or invisible.

Zoom Testing

In the browser, zoom to 200% and then 400%. At 400% zoom, WCAG 1.4.10 (Reflow) requires content to reflow to a single column without requiring horizontal scrolling at a viewport width of 320 CSS pixels (equivalent to the full-width view at 400% zoom on a 1280px-wide screen). Test all Psilobase page templates at this zoom level.

How Accessibility Helps Harm Reduction Reach Diverse Communities

Harm-reduction information historically concentrated in academic and professional settings has failed to reach the communities with the greatest need. Web accessibility is one of the most practical tools available to break down those barriers.

Multilingual Users

While Psilobase primarily publishes in English, the use of clear language, defined technical terms, consistent terminology, and logical sentence structure directly assists non-native English speakers. Accessibility features that support multilingual use include:

• Setting the correct lang attribute on the <html> element — this ensures text-to-speech engines use the correct language pronunciation and can be especially important if someone uses an auto-translate tool alongside a screen reader.
• Defining specialist terminology (psilocybin, serotonin, mycelium, integration) in plain language on first use.
• Using short sentences and active voice, which survive machine translation more reliably than complex passive constructions.
• Consistent navigation labels across all pages — if a non-English speaker memorises "Safety" as a navigation destination, it must always be "Safety", not "Safety Information" on some pages and "Safe Use" on others.

Low-Literacy Users

WCAG 3.1.5 (Level AAA) recommends providing reading comprehension support for content that requires a higher reading ability than lower secondary education. For Psilobase, this means:

• Providing a glossary of scientific terms (already a priority given the pharmacology content).
• Offering summary boxes at the start of long articles.
• Using numbered lists for step-by-step safety information rather than dense paragraphs.
• Including visual aids (with proper alt text) to support text-based content.

Users in Crisis States

Someone experiencing a difficult psychedelic experience — or helping another person through one — needs information fast, under stress, with potentially reduced cognitive capacity. Accessibility for these users means:

• Crisis resources (e.g., Fireside Project hotline) must be in a consistent, prominent, easily findable location on every page.
• The most important safety information must be available above the fold, not behind multiple scrolls or tabs.
• Plain language with short sentences reduces cognitive load under stress.
• High contrast and large text are easier to read when visual processing is altered.
• Avoiding auto-playing audio or video, which can be startling and distressing.

Elderly Users

Research interest in psilocybin for age-related depression and end-of-life anxiety is growing. Older adults may access Psilobase. Accessibility features with disproportionate benefit for elderly users include large text options, high contrast, large touch targets, straightforward navigation without complex interactions, and content that does not require the user to hover to access information.

Neurodiversity Considerations

Neurodivergent users — including those with ADHD, autism spectrum conditions, dyslexia, and related differences — make up a significant portion of the population and are overrepresented in communities interested in psychedelics for therapeutic self-exploration. Designing inclusively for neurodivergent users is essential for Psilobase.

ADHD: Attention and Distraction

Users with ADHD may struggle with long, undivided content, auto-playing media, animation, and complex navigation. Psilobase accommodations for ADHD:

• Clear visual hierarchy: Distinct headings, bullet points, and summary boxes help users scan and find what they need without reading everything.
• No auto-playing content: Auto-play video or audio can cause immediate abandonment and distress for users with attention regulation difficulties.
• Reduced animation: Implement the prefers-reduced-motion media query to disable animations, parallax scrolling, and transitions for users who have requested reduced motion in their OS settings:

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      transition-duration: 0.01ms !important;
    }
  }

• Short paragraphs: Keep paragraphs to 3–5 sentences. Use white space generously.
• Consistent, predictable layout: Navigation, footers, and content zones must appear in the same position on every page.
• Progress indicators: For multi-step tools (protocol selectors, calculators), show a clear progress indicator so users know where they are.

Autism: Sensory Sensitivity and Predictability

Autistic users may have heightened sensory sensitivity to visual complexity, unexpected changes, and social/ambiguity in content. Psilobase accommodations:

• Predictable navigation: Never move navigation elements or change their labels between pages.
• Literal and unambiguous language: Avoid idioms, metaphors, or sarcasm in safety-critical content. "This dose is not recommended" is clearer than "This dose might not be for everyone."
• No unexpected changes of context: Do not open links in new tabs without warning, or redirect users without explanation. If a link opens in a new tab, indicate this with text or an icon with alt text.
• Calm visual design: Avoid busy, highly saturated, or rapidly changing visual elements. The Psilobase brand aesthetic — earthy greens and natural imagery — is naturally well-suited here.
• Explicit structure: Make all structure visible. If a page has four sections, say so at the top: "This article covers: Identification | Pharmacology | Safety | Integration."

Dyslexia: Fonts, Spacing, and Line Length

Dyslexic users benefit from typographic choices that reduce visual confusion between similar characters and improve reading flow. Psilobase typographic recommendations:

• Font choice: Use a sans-serif font with clear character differentiation. Avoid fonts where lowercase "l", uppercase "I", and the numeral "1" look similar. Good choices include Open Sans, Atkinson Hyperlegible (designed specifically for low-vision and dyslexic users), or similar humanist sans-serifs.
• Line spacing: Set line-height to at least 1.5 (WCAG 1.4.8 recommends 1.5 for body text). This is especially important given Psilobase's long-form articles.
• Letter spacing: A slight increase in letter spacing (letter-spacing: 0.05em) can reduce letter confusion for dyslexic readers without affecting aesthetics significantly.
• Line length: WCAG 1.4.8 recommends a maximum of 80 characters per line. Psilobase's container width should be constrained so that body text does not exceed approximately 75 characters per line on desktop.
• Left-align text: Justify (text-align: justify) creates uneven word spacing that is particularly difficult for dyslexic readers. Use text-align: left for body text.
• Avoid all-caps text: All-caps text removes the distinctive word shapes that dyslexic readers use as reading cues. Use text-transform: uppercase in CSS rather than typing in capitals, so screen readers still read the original case.

Low-Vision Users and Psychedelic Portals

Low-vision users — those with significant visual impairment that is not fully corrected by glasses and who do not use a screen reader — represent a large and often overlooked accessibility audience. Estimates suggest 253 million people worldwide have vision impairment, with the vast majority having low vision rather than total blindness.

Large Text and Zoom Compatibility

Low-vision users frequently operate browsers with default zoom levels of 150–400%. All Psilobase layouts must be responsive at these zoom levels:

• Use relative font units (rem or em) rather than px for font sizes. This ensures text scales with the user's browser font size preference.
• The base font size should be set in rem on the body: font-size: 1rem (do not override the 16px browser default without good reason).
• Ensure all content reflows to a single column at 320px viewport width (WCAG 1.4.10).
• Test with text-only zoom enabled in Firefox (View > Zoom > Zoom Text Only) as well as full-page zoom.

High Contrast Mode

Windows High Contrast Mode (now called "Contrast Themes" in Windows 11) overrides all site colours with system-defined high-contrast colours. Many Psilobase design decisions may appear broken in this mode:

• Background images may be hidden — any informational content conveyed only by a background image will be lost. Always ensure informational content is also in foreground text.
• Custom focus outlines defined in CSS may be hidden. Test keyboard navigation in High Contrast Mode — the browser's default focus styling will take over, and it may be more or less visible depending on the theme.
• CSS border and outline declarations are generally respected in High Contrast Mode; box-shadow is not.
• Use the forced-colors: active media query to make specific adjustments for forced-colour environments.

Test Psilobase using the Windows "Aquatic" or "Desert" High Contrast themes to verify that all content remains perceivable and all interactive elements are visible.

Psychedelic-Specific Low-Vision Considerations

Some visitors may experience temporary visual disturbances (visual snow, afterimages, HPPD) following psychedelic use. These users may find:

• High-frequency patterns (tight stripes, fine grids) particularly uncomfortable — avoid using these as decorative backgrounds.
• Auto-playing animations more distressing than neurotypical users would — reinforcing the need for prefers-reduced-motion support.
• High contrast and large text more useful even at standard zoom levels.
• Simple, clean layouts less visually overwhelming than dense multi-column designs.

Practical Accessibility Audit Checklist

The following table provides a structured audit checklist for Psilobase. Each row corresponds to a WCAG success criterion relevant to the site's specific content and functionality.

Frequently Asked Questions