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
- Open the A11yFirst Help button and switch between a few topics.
- Use the Heading menu to add an H2 and H3, then add a bulleted list.
- 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
- Place the caret at the top and try to choose an H4 or H5 from the Heading menu.
- Insert an H2, then try to jump directly to H4 (skip H3).
- 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
- Select the image, open Image Properties (toolbar or right-click), and clear the alt text.
- Click “Apply accessibility metadata,” then run the “Run axe-core image audit” button.
- 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).
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.
Rooftop gardens provide insulation, food production, and peaceful gathering spaces. Public transit hubs powered by renewable energy connect neighborhoods through efficient rail networks.
Image Properties
Demo 4: Link-Focused Mode
Plugins demoed: A11yFirst Link, Help Button.
Manual test
- Select an existing link and open Edit Link (toolbar or right-click).
- Change the display text to a generic phrase like “Click here,” then apply.
- 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.
Select an existing link, then open A11yFirst Link Properties from the contextual toolbar button or right-click menu.
Open Source Energy Networks
Solar punk communities share power through decentralized microgrids that balance renewable generation across neighborhoods.
Community Solar Projects
Learn more about community solar initiatives and how they democratize access to clean energy for all residents.
Join local solar punk networks to participate in building sustainable infrastructure from the ground up.
A11yFirst Link
Demo 5: Character Style Mode
Plugins demoed: A11yFirst Character Styles, Help Button.
Manual test
- Select text and apply “Marker” or “Cited work.”
- Apply “Computer code” to a technical phrase.
- 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
- Click “Validate Lists” to evaluate the existing ordered and unordered lists.
- Add a fake list by typing “1. Item” as plain text, then validate again.
- 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
- Assess current energy sources and identify renewable alternatives
- Map community resources and establish sharing networks
- Create green spaces and wildlife corridors
- Install pollinator gardens on rooftops
- Convert parking lots to community parks
- Establish urban forest zones
- Deploy distributed solar and wind power systems
- Launch education programs on sustainable practices
Demo 7: Paragraph Format Mode
Plugins demoed: Paragraph format validator (demo), Help Button.
Manual test
- Click “Validate Formats” and review the counts for blockquote, pre, and address.
- Remove the blockquote or address section and validate again.
- 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."
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 NetworkPacific 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
- Click “Validate Tables” and confirm the table shows caption and header results.
- Delete the caption or header row and validate again.
- 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.
Edit Table Caption
A caption describes what the table contains. It appears with the table and is read aloud by screen readers.
Use a summary for complex tables with multiple levels or difficult structures. Keep under 200 characters if possible.
Inclusive Solar Punk Infrastructure Priorities
This planning matrix compares initiatives that support both people and planet:
| 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
- Click “Run Checker Summary” to scan the intentional issues.
- Fix a problem (e.g., add alt text or change “Click here”) and re-run.
- 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
| Name | Age |
| Alice | 30 |
| Bob | 25 |
Table above has data cells without proper header identification.
Good Content Example
This section demonstrates proper structure:
Read the solar installation guide for details.