SmartAccessible CMS ToolKit

SmartAccessible CMS Toolkit — Create, edit, and publish content faster with AI-powered accessibility checks, seamless previews, and a unified workflow across web, mobile, and CLI.

Comment

Inspiration

In today's fast-paced digital world, content creators are constantly under pressure to produce high-quality content quickly and efficiently. However, this often comes at the expense of accessibility, which is frequently treated as an afterthought. The process of manually checking for accessibility issues is time-consuming and can significantly slow down the content creation workflow.

The SmartAccessible CMS Toolkit was born out of the need to bridge this gap. We envisioned a world where accessibility is not a barrier but an integral part of the content creation process. Our goal is to empower creators with the tools they need to produce inclusive content without sacrificing speed or quality. By integrating AI-powered accessibility checks and live previews directly into the CMS workflow, we aim to make inclusive content creation the new standard.

What it does

The SmartAccessible CMS Toolkit is a comprehensive, multi-platform solution that streamlines the content creation process while ensuring the highest standards of accessibility.

Web App

  • React + Tailwind CSS: A responsive and accessible web interface for content creation and management.
  • Drag-and-Drop Editor: Easily create and arrange content with a user-friendly drag-and-drop interface.
  • Inline AI Suggestions: Get real-time AI-powered suggestions for improving your content's clarity, tone, and accessibility.
  • Real-time Preview: Instantly see how your content will look on different devices with a live preview feature.
  • Accessibility Scoring: Get a detailed accessibility score for your content, with actionable feedback on how to improve it.

Mobile App

  • React Native + Expo: A cross-platform mobile app that allows you to create and edit content on the go.
  • Gesture-based Editing: A mobile-first editing experience with intuitive gesture-based controls.
  • AI-generated Alt-text: Automatically generate descriptive alt-text for images using AI.
  • On-the-go Previews: Preview your content on mobile devices to ensure a seamless user experience.
  • Accessibility Scoring: Track and improve your content's accessibility score from your mobile device.

CLI Tool

  • Node.js + Commander.js: A powerful command-line interface for developers and power users.
  • Interactive Terminal Editing: Create and edit content directly from your terminal with an interactive interface.
  • AI Suggestions: Get AI-powered suggestions for improving your content in the terminal.
  • Offline-first Sync: Work offline and sync your changes when you're back online.
  • Scan/Fix Accessibility Issues: Quickly scan and fix accessibility issues in your content from the command line.

AI Accessibility Engine

Our AI-powered accessibility engine detects a wide range of issues, including:

  • Missing alt texts
  • Low contrast ratios
  • Heading misuse
  • Readability issues

The accessibility score is calculated using the following formula: (Accessibility Score = (Passed Checks / Total Checks) * 100)

How we built it

Web App

The web app is built with React and Tailwind CSS, providing a responsive and accessible user interface. It features a drag-and-drop content editor, inline AI suggestions, and a real-time preview of your content from Storyblok. We have also implemented keyboard navigation and ARIA roles to ensure the app is fully accessible.

Mobile App

The mobile app is a cross-platform solution built with React Native and Expo. It offers a gesture-based editing experience, live previews, and AI-generated alt-text for images. The app also supports offline content editing and provides an accessibility score for your content.

Backend & AI

The backend is a Node.js and Express API that handles all communication between the clients and the Storyblok CMS. We use the OpenAI API for AI-powered text suggestions and accessibility improvements. Our accessibility rules engine validates content against WCAG 2.1 AA compliance. MongoDB is used to store undo/redo history, queued offline edits, and user preferences.

Offline-first & Conflict Resolution

The toolkit supports offline editing using Conflict-Free Replicated Data Types (CRDTs) for conflict-free merging. The offline sync formula is as follows: Final Document = Base Version + sum_{i=1}^{n} Δ_i where Δ_i are the queued changes from multiple clients.

CLI Tool

The CLI tool is built with Node.js and Commander.js. It supports interactive content creation, AI suggestions, and accessibility scanning. It also operates in an offline-first mode, with queued synchronization to the backend.

Example CLI commands:

smartcms scan content.md --fix
smartcms new 'Landing Page'

Accessibility-first Design

All our interfaces are designed to comply with WCAG 2.1 AA standards. This includes ARIA roles, keyboard navigation, focus indicators, and a reduced-motion mode. The accessibility score is calculated using the following formula: Accessibility Score = (Passed Checks / Total Checks) * 100 We also use the Flesch–Kincaid readability formula to assess the readability of the content: Score = 206.835 - 1.015 (Words / Sentences) - 84.6 (Syllables / Words)

Testing & Deployment

We use GitHub Actions for CI/CD. The web app is deployed on Vercel, the mobile app is distributed via Expo and the respective app stores, and the CLI tool is available on npm. We use Cypress for end-to-end testing of the web app and Detox for the mobile app. Unit tests are written with Jest for both the backend and frontend logic.

Challenges we ran into

  • Optimizing AI response time vs. accuracy: We had to find the right balance between providing fast AI-powered suggestions and ensuring their accuracy.
  • Implementing offline sync and conflict resolution: Ensuring a seamless offline experience with conflict-free merging was a major challenge.
  • Ensuring consistent UX across web and mobile: We worked hard to create a consistent and intuitive user experience across all platforms.
  • Validating accessibility and reducing false positives: We had to fine-tune our accessibility engine to provide accurate results and reduce false positives.
  • Scaling AI calls efficiently: We had to optimize our backend to handle a large number of AI API calls efficiently.
  • Maintaining responsive and accessible design across platforms: Ensuring a responsive and accessible design across all platforms was a top priority.

Accomplishments that we're proud of

  • Multi-platform ecosystem: We have created a comprehensive ecosystem that supports web, mobile, and CLI users.
  • AI-driven accessibility integration: Our AI-powered accessibility engine is seamlessly integrated into the content creation workflow.
  • Offline-first conflict resolution: We have successfully implemented a robust offline-first solution with conflict-free merging.
  • Gamified accessibility feedback: Our accessibility scoring system provides a gamified experience that encourages users to create more inclusive content.
  • Responsive and accessible UI: We are proud of our responsive and accessible user interface, which is designed to be used by everyone.
  • Seamless Storyblok integration: Our toolkit is seamlessly integrated with the Storyblok CMS, providing a smooth and efficient workflow.

What we learned

  • AI + rule-based accessibility improves quality: Combining AI with a rule-based accessibility engine results in higher quality and more accurate suggestions.
  • Offline-first design is essential for mobile and CLI: An offline-first approach is crucial for providing a seamless experience for mobile and CLI users.
  • Micro-interactions increase adoption: Small, well-designed micro-interactions can significantly improve the user experience and increase adoption.
  • Transparent scoring builds trust: A transparent and easy-to-understand accessibility scoring system helps build trust with users.
  • Cross-platform UX consistency is challenging but crucial: While challenging, maintaining a consistent user experience across all platforms is essential for a successful multi-platform solution.

What's next for SmartAccessible CMS ToolKit

  • Storyblok marketplace plugin: We plan to create a plugin for the Storyblok marketplace to make our toolkit even more accessible to Storyblok users.
  • Multilingual AI translation with inclusivity validation: We will be adding support for multilingual AI translation with inclusivity validation to ensure that translated content is also accessible and inclusive.
  • Analytics dashboard for accessibility scores: We will be creating an analytics dashboard that allows users to track their accessibility scores over time.
  • Enterprise features: We plan to add enterprise features such as SSO and compliance exports.
  • Fine-tune AI to adapt to brand voices: We will be working on fine-tuning our AI to adapt to different brand voices and styles.

Built With

Share this project:

Updates