← Back to demo hub

A11yFirst CKEditor 5 Migration Preview

This preview demonstrates accessibility-first authoring patterns for inclusive Solar Punk content that works for both people and planet.

Demo 1: Standard A11yFirst Configuration

Plugins demoed: A11yFirst Heading, Image, Link, List, Table, Character Styles, Help Button.

Manual test

  1. Open the A11yFirst Help button and switch between a few topics.
  2. Use the Heading menu to add an H2 and H3, then add a bulleted list.
  3. Add or edit a link to confirm link editing still works alongside A11yFirst plugins.

Expected

  • Help dialog opens with topics and closes without errors.
  • Headings and lists insert normally with no warning status messages.
  • Status reads “Editor ready.” after load.

Building Tomorrow's Green Cities

Accessible and inclusive Solar Punk envisions a future where renewable energy, sustainable architecture, and thriving ecosystems coexist with social equity. In these urban landscapes, solar panels cover rooftops, vertical gardens climb building facades, and community spaces are designed for people of all abilities.

Core Principles

  • Renewable energy integration in all infrastructure
  • Circular economy practices and zero-waste systems
  • Biodiversity preservation within urban environments

Community-Driven Design

Solar Punk communities prioritize accessible transit, inclusive governance, shared resources, and open-source tools so we can build systems that support both people and planet.

Demo 2: High-Restriction Heading Mode

Plugins demoed: A11yFirst Heading (strict rules), Help Button.

Manual test

  1. Place the caret at the top and try to choose an H4 or H5 from the Heading menu.
  2. Insert an H2, then try to jump directly to H4 (skip H3).
  3. Paste or type headings that skip levels and observe normalization.

Expected

  • Disallowed heading selections are blocked with a clear status message.
  • Skipped heading levels trigger a warning and/or auto-normalization.
  • Status area shows strict mode guidance and test results.

2. Harmonic Urban Planning

3. Integrated Permaculture Zones

3. Community-Owned Solar Cooperatives

2. Reclaimed Materials & Tech

3. The Low-Tech Revolution

4. Mechanical Calculation Tools

5. Analog Water Clocks
5. Hand-Cranked Data Storage

2. Social Structures of the Future

Demo 3: Image-Focused Mode

Plugins demoed: A11yFirst Image, Help Button, axe-core audit integration.

Manual test

  1. Select the image, open Image Properties (toolbar or right-click), and clear the alt text.
  2. Click “Apply accessibility metadata,” then run the “Run axe-core image audit” button.
  3. Add a meaningful alt text and re-run the audit.

Expected

  • Missing alt text produces an advisory or blocking message in the results.
  • With good alt text, the audit reports pass or zero blocking issues.
  • If axe-core is unavailable, a fallback advisory message appears.

Uses CKEditor5 native text + image tools (bold, italic, link, text alternative, caption, and image styles), then runs external checker audits (axe-core). Integration targets: sa11y and editoria11y (Drupal).

Image insertion in this demo is URL-based through A11yFirst Image Properties to remain compatible with GitHub Pages (no binary upload flow).

Sa11y is disabled (opt-in).

Solar Punk Architecture

Buildings in solar punk cities blend seamlessly with nature, featuring living walls, transparent solar glass, and modular designs that adapt to community needs.

Futuristic building with vertical gardens cascading down glass walls
Vertical garden integration in modern solar punk architecture

Rooftop gardens provide insulation, food production, and peaceful gathering spaces. Public transit hubs powered by renewable energy connect neighborhoods through efficient rail networks.

Demo 4: Link-Focused Mode

Plugins demoed: A11yFirst Link, Help Button.

Manual test

  1. Select an existing link and open Edit Link (toolbar or right-click).
  2. Change the display text to a generic phrase like “Click here,” then apply.
  3. Update the display text to a descriptive phrase and apply again.

Expected

  • Generic link text triggers a guidance warning in the status area.
  • Descriptive link text clears the warning and leaves the editor in a ready state.

Demo 5: Character Style Mode

Plugins demoed: A11yFirst Character Styles, Help Button.

Manual test

  1. Select text and apply “Marker” or “Cited work.”
  2. Apply “Computer code” to a technical phrase.
  3. Use “Remove Styles” to clear all inline formatting.

Expected

  • Inline styles apply appropriate semantics (highlight, cite, code).
  • Remove Styles resets the text to plain formatting.

Apply inline character styles separately from structural heading controls, then remove styles or open Help.

Technology and Nature in Harmony

Solar punk reimagines our relationship with technology, moving from extractive industrial practices toward regenerative systems that restore ecosystems while meeting human needs.

As author Rebecca Solnit writes in Hope in the Dark, change happens when communities come together around shared visions. The solar punk movement embraces optimism in action as a guiding principle.

Key technologies include open-source 3D printing for decentralized manufacturing, biotech innovations for sustainable materials, and AI systems designed for resource optimization rather than profit extraction.

Demo 6: List Guidance Mode

Plugins demoed: A11yFirst List, Help Button.

Manual test

  1. Click “Validate Lists” to evaluate the existing ordered and unordered lists.
  2. Add a fake list by typing “1. Item” as plain text, then validate again.
  3. Create a nested list and re-run validation.

Expected

  • Valid lists report a green OK message and list counts.
  • Manual bullet/number patterns trigger a warning about fake lists.
  • Nested lists are detected and reported as a positive result.

Create accessible lists with proper structure. Use real list markup instead of manually typed bullets or numbers.

Principles of Solar Punk Design

Core values that guide sustainable community building:

  • Prioritize renewable energy in all infrastructure decisions
  • Design for circular economy and zero-waste systems
  • Preserve and enhance biodiversity in urban spaces
  • Foster community ownership and democratic governance

Implementation Roadmap

  1. Assess current energy sources and identify renewable alternatives
  2. Map community resources and establish sharing networks
  3. Create green spaces and wildlife corridors
    • Install pollinator gardens on rooftops
    • Convert parking lots to community parks
    • Establish urban forest zones
  4. Deploy distributed solar and wind power systems
  5. Launch education programs on sustainable practices

Demo 7: Paragraph Format Mode

Plugins demoed: Paragraph format validator (demo), Help Button.

Manual test

  1. Click “Validate Formats” and review the counts for blockquote, pre, and address.
  2. Remove the blockquote or address section and validate again.
  3. Add a code block inside <pre> with <code> tags and re-run validation.

Expected

  • Results list the number of semantic blocks found.
  • Removing blockquote/address reduces the count and updates the summary.
  • Adding <code> inside <pre> changes tips into OK results.

Use semantic paragraph formats to add meaning to content blocks. Choose blockquote for citations, preformatted for code, and address for contact information.

Solar Punk Manifesto

The Solar Punk movement envisions an accessible and inclusive future where communities thrive in harmony with nature. This philosophy merges ecological wisdom with civic participation and technology that works for everyone.

"We stand at a crossroads. One path leads to despair and destruction. The other leads to hope, renewal, and a world where green cities flourish. The choice is ours to make, together."

— Kim Stanley Robinson, The Ministry for the Future

Core Technologies

Solar punk communities rely on open-source tools and distributed systems. Here's a simple configuration for a community microgrid controller:

{
  "grid_id": "community_solar_west_001",
  "capacity_kw": 500,
  "storage_kwh": 2000,
  "distribution": {
    "residential": 0.6,
    "commercial": 0.25,
    "public_spaces": 0.15
  },
  "renewable_sources": ["solar", "wind", "geothermal"]
}

Get Involved

Join local Solar Punk initiatives and help build systems that support both people and planet. Contact your regional hub:

Solar Punk Community Network
Pacific Northwest Hub
1234 Green Avenue
Portland, OR 97201
Email: northwest@solarpunk.community
Phone: (503) 555-0142

Demo 8: Table Accessibility Mode

Plugins demoed: A11yFirst Table, Help Button.

Manual test

  1. Click “Validate Tables” and confirm the table shows caption and header results.
  2. Delete the caption or header row and validate again.
  3. Use “Edit Caption” to add a new caption and optional summary.

Expected

  • Valid tables report captions, headers, and scope tips.
  • Missing captions or headers trigger warning messages.
  • Saving a caption updates the table and status message.

Use tables for real tabular data, not layout. Add a caption, define headers, and keep structure clear for screen reader navigation.

No caption set. Use "Edit Caption" to add one.

Inclusive Solar Punk Infrastructure Priorities

This planning matrix compares initiatives that support both people and planet:

Community investment priorities for inclusive Solar Punk neighborhoods
Initiative Accessibility Benefit Planet Benefit Priority
Electric accessible bus network Step-free transit and audio/visual stop announcements Lower transport emissions and cleaner air High
Rooftop solar + battery co-ops Energy resilience for medically vulnerable residents Reduced fossil fuel dependence High
Cooling green corridors Safer mobility routes during extreme heat events Urban biodiversity and heat-island reduction Medium

Demo 9: A11y Checker Summary Mode

Plugins demoed: A11yFirst A11yChecker, Heading, Image, Link, List, Table, Help Button.

Manual test

  1. Click “Run Checker Summary” to scan the intentional issues.
  2. Fix a problem (e.g., add alt text or change “Click here”) and re-run.
  3. Use “Clear Summary” to reset the results panel.

Expected

  • Summary shows blocking and advisory lists based on current content.
  • Fixing issues reduces the counts when re-running the summary.
  • Clear removes the summary output and updates status.

Run an in-editor accessibility summary that combines axe-core results with A11yFirst-specific authoring checks. This works while focused in editor mode without relying on page overlays.

A11y Checker Test Content

This editor contains intentional accessibility issues to test the checker's ability to detect and report problems.

Heading Hierarchy Issues

The next heading jumps two levels (should be h3):

This skips h3 and h4

This breaks the proper heading ladder and confuses screen reader users.

Image Issues

Image above uses an empty alt attribute to indicate it is decorative.

Link Issues

Click here for more information.

Empty link above should have descriptive text.

Table Issues

NameAge
Alice30
Bob25

Table above has data cells without proper header identification.

Good Content Example

This section demonstrates proper structure:

Solar panels on a community building

Read the solar installation guide for details.