AccessClimate AI

Inspiration

Climate action tools often exclude people with disabilities and diverse accessibility needs. While climate change affects everyone, the digital tools to address it frequently lack proper accessibility features, leaving behind users with visual, motor, cognitive, or hearing impairments. I wanted to create an AI-powered climate platform that prioritizes accessibility from the ground up, ensuring that environmental action is truly inclusive and available to all users.

What it does

AccessClimate AI provides comprehensive climate action tools with accessibility considerations:

🌡️ Climate Dashboard: Real-time environmental monitoring with weather data from OpenWeather API and location-based climate insights.

🌾 Drought-Resistant Crops: AI-powered crop recommendations based on local climate conditions, soil type, and rainfall patterns.

💧 Water Conservation: Smart water management strategies with rainwater harvesting calculations and drought preparedness planning.

☀️ Solar Panel Optimizer: Solar panel placement optimization with irradiance data, system sizing, and ROI calculations.

🛡️ Habitat Protection: AI recommendations for protecting and restoring natural habitats with conservation planning advice.

🚜 Farm Carbon Calculator: Agricultural carbon footprint calculator analyzing equipment and operations for sustainability improvements.

📷 Impact Scanner: AI vision technology that analyzes objects to reveal their environmental footprint and suggests sustainable alternatives.

🤖 AI Climate Advisor: Conversational AI mentor providing personalized climate action guidance and environmental advice.

📊 Impact Predictor: Climate simulation tool modeling long-term environmental impact of lifestyle and policy decisions.

🎯 Smart Goal Tracking: Environmental goal setting with AI-calculated impact measurements and progress tracking.

Accessibility Features:

Floating Accessibility Toolbar: Always-available accessibility menu with keyboard shortcuts and voice navigation options
Context-Aware AI Assistant: Page-specific AI help that understands current content and provides relevant assistance
Voice Recording & Transcription: Voice input capability that transcribes speech to text for AI interactions
Text-to-Speech Responses: AI responses can be read aloud for users who prefer audio feedback
Keyboard Navigation: Basic keyboard shortcuts for main navigation (Alt+1-9, Alt+H, Alt+B)
Theme Support: Light and dark mode options for visual comfort

How we built it

Built with Next.js 14 and TypeScript with accessibility as a core design principle, specifically targeting diverse climate action use cases. Integrated Google Gemini 2.5 Flash for all AI features including bushfire risk assessment, crop recommendations, water conservation strategies, solar optimization, habitat protection, carbon calculations, vision scanning, and conversational AI with accessibility-focused prompts and responses. Used Supabase for authentication with accessible login flows and database with PostgreSQL and Row Level Security. Implemented real-time weather data via OpenWeather API with climate alerts and environmental monitoring. Created responsive UI with Tailwind CSS and shadcn/ui components. Deployed on Vercel with edge functions for optimal performance.

Technical Implementation:

Floating Toolbar System: Implemented persistent accessibility and AI assistant toolbars using React components with fixed positioning
Voice Integration: Used Web Speech API for voice recording and transcription, integrated with Google Gemini for voice-to-text processing
Context-Aware AI: Built page-specific AI assistant that analyzes current page content to provide relevant help and guidance
Keyboard Shortcuts: Implemented Alt+number keyboard navigation system for quick page switching
Audio Feedback: Integrated text-to-speech for AI responses using Web Speech Synthesis API
Theme System: Built light/dark mode toggle with Tailwind CSS and Next.js theme provider

Challenges we ran into

Voice Recognition Integration: Implementing reliable Web Speech API integration for voice recording and transcription across different browsers and devices.
Context-Aware AI: Building an AI assistant that understands page-specific content and provides relevant help without overwhelming users.
Floating UI Components: Creating persistent accessibility and AI toolbars that work across all pages without interfering with page content.
Audio Feedback Implementation: Integrating text-to-speech functionality that works reliably across different browsers and operating systems.
Keyboard Navigation: Implementing comprehensive keyboard shortcuts that don't conflict with browser or assistive technology shortcuts.
Cross-Browser Compatibility: Ensuring voice features and accessibility tools work consistently across different browsers and devices.

Accomplishments that we're proud of

Built comprehensive climate platform with 10+ specialized environmental tools including dashboard, crops, water, solar, habitat, carbon calculator, scanner, advisor, predictor, and goal tracking
Implemented floating accessibility toolbar that provides consistent access to accessibility features across all pages
Created context-aware AI assistant that understands page content and provides relevant help for each climate tool
Integrated voice recording and transcription allowing users to interact with AI using speech input
Added text-to-speech responses enabling users to listen to AI responses instead of reading
Built keyboard navigation system with Alt+number shortcuts for quick page switching
Developed theme support with light and dark modes for visual comfort
Successfully integrated Google Gemini AI across all climate features with accessibility considerations
Implemented real-time weather data with OpenWeather API integration for location-based climate insights

What we learned

Building accessibility features requires balancing ambition with realistic implementation. Voice interfaces and AI can enhance accessibility when properly integrated. Context-aware assistance provides more value than generic help systems. Floating UI components need careful positioning to avoid interfering with main content. Cross-browser compatibility remains challenging for voice and audio features.

What's next for AccessClimate AI

Enhanced Voice Commands: Expand voice navigation to include more specific actions within each tool
Improved Audio Feedback: Better text-to-speech integration with more natural-sounding voices
Screen Reader Optimization: Add proper ARIA labels and semantic markup for better screen reader support
Mobile Accessibility: Optimize accessibility features for mobile devices and touch interfaces
User Testing: Conduct testing with users who have disabilities to identify real-world improvements
Advanced AI Context: Improve AI assistant's understanding of user intent and accessibility needs