Accessible by Design
At Glewell, we're committed to ensuring our platform is accessible to everyone. From our public marketing pages to our Premium wellness dashboard, we've built every experience following web accessibility standards so all users can track their health journey with ease.
Our Accessibility Commitment
Building a platform for all users
Accessible Across All Experiences
Public Marketing Site: Our public pages (glewell.com, feature pages, pricing) use semantic HTML5 structure, proper form labels, ARIA attributes for social links and interactive elements, keyboard-accessible dropdown navigation, and mobile-responsive layouts with hamburger menus. All forms include labeled inputs, and our color schemes meet WCAG contrast requirements.
Premium Dashboard App: The Glewell Premium dashboard includes collapsible sidebar navigation with clear icons, mobile-responsive design with breakpoints at 992px, 768px, and 480px for optimal viewing on all devices, focus indicators on interactive elements using :focus-visible, alt text on all images, progress rings with visual indicators, and touch-friendly buttons sized appropriately for mobile interaction.
We follow WCAG 2.1 Level AA guidelines throughout both our public site and dashboard application. Our commitment extends from the first marketing page a visitor sees to every dashboard feature a premium member uses daily.
Accessibility Features Across Our Platform
How we make both glewell.com and the Premium dashboard accessible
Semantic HTML5 Structure
Public Pages: Proper use of <header>, <nav>, <main>, <footer> elements with clear heading hierarchy.
Dashboard: Semantic <aside> for sidebar navigation, <section> for content areas, and structured card layouts with proper landmarks.
Full Keyboard Navigation
Public Pages: Tab through dropdown menus, navigate feature links, and access all forms using only keyboard.
Dashboard: Navigate collapsible sidebar, quick actions, metric cards, and all interactive elements with keyboard. Focus indicators using :focus-visible ensure you always know your position.
Mobile-First Responsive Design
Public Pages: Hamburger menu navigation, touch-friendly targets, proper viewport scaling with HandheldFriendly meta tag.
Dashboard: Three responsive breakpoints (992px, 768px, 480px), collapsible sidebar on mobile, optimized card layouts, and touch-friendly button sizing for all health tracking features.
Accessible Forms & Labels
Public Pages: All form inputs use <label for=""> associations, including email signup, contact forms, and login.
Dashboard: Food logging, water tracking, fitness activity forms with proper labels, error messages, and clear input validation feedback.
Meaningful Alt Text & ARIA Labels
Public Pages: Social media links include aria-label attributes (Instagram, LinkedIn, X, YouTube, Facebook).
Dashboard: All images have descriptive alt text, including logo ("Glewell Logo"), water tracking icons ("Cup", "Bottle", "Glass"), and metric visualizations.
Visual Progress Indicators
Dashboard Only: Circular progress rings for calories, macros, water, steps, and sleep tracking. Each includes percentage display, current/target values, and color-coded status messages that complement visual indicators for better comprehension.
Persistent & Collapsible Navigation
Public Pages: Fixed header navigation with dropdown submenus for Products, Features, and Learn sections.
Dashboard: Collapsible sidebar (stores state in localStorage) with clear icon navigation for Dashboard, Food Log, Meal & Nutrition, Fitness, Reports, Coaching, Support, and Settings.
Sufficient Color Contrast
Both: All text meets WCAG 4.5:1 contrast ratio minimum. Gold accent (#d4af37) used thoughtfully with dark backgrounds for premium aesthetic while maintaining readability. Focus states provide additional visual cues beyond color alone.
Focus Indicators & Visual Feedback
Dashboard: Buttons use :focus-visible with 2px solid gold outline (#d4af37, 50% opacity) and 2px offset. Hover states, active states, and loading animations provide clear feedback for all interactions with health tracking features.
Responsive Typography
Both: Text scales properly with browser zoom up to 200%. Font combinations include Playfair Display for elegance, Montserrat for UI clarity, all with appropriate fallbacks. Line heights and spacing ensure comfortable reading at all sizes.
Flexible Card-Based Layouts
Dashboard: Dashboard uses card-based architecture for metrics (Daily Summary), analytics (Macro Insights), and quick actions. Cards reflow gracefully on smaller screens, maintaining touch-friendly spacing and legible content hierarchy.
Persistent User Preferences
Dashboard: Sidebar collapse state saved in localStorage, maintains user's chosen navigation style across sessions. All settings persist to provide consistent, personalized experience for each user's accessibility needs.
Our Accessibility Standards
Commitment to global best practices across every experience
WCAG 2.1 Level AA Target
Implementation: Both public pages and dashboard follow WCAG 2.1 AA guidelines. This includes 4.5:1 color contrast ratios, keyboard operability, proper heading structure, form label associations, and responsive designs that work with browser zoom up to 200%.
Semantic HTML5 Structure
Public Pages: Proper use of <header>, <nav>, <main>, <footer>, and heading hierarchy (h1-h6). Dashboard: <aside> for sidebar navigation, <section> for content blocks, <button> for actions. ARIA landmarks ensure assistive technologies can navigate content efficiently.
Keyboard-First Design
All Elements: Every interactive component is keyboard accessible. Dashboard buttons use :focus-visible for modern focus indicators (2px gold outline with 2px offset). Dropdown menus, modals, sidebar navigation, and form inputs all support Tab, Shift+Tab, Enter, and Escape key interactions.
Mobile-First Responsive Architecture
Breakpoints: Dashboard implements three responsive breakpoints: 992px (tablets), 768px (small tablets), and 480px (phones). Public pages use similar mobile breakpoints with HandheldFriendly and MobileOptimized meta tags. All touch targets meet 44x44px minimum size on mobile.
Form Accessibility & Validation
Public Pages: Login, registration, and contact forms use <label for=""> associations with proper input types. Dashboard: Food logging, water tracking, and fitness forms provide clear validation feedback with visible error messages and success states.
Visual Indicator Best Practices
Dashboard: Progress rings use both color AND percentage numbers for calorie, macro, water, step, and sleep tracking. Status messages complement visual indicators. No information is conveyed by color alone - shapes, text, and icons provide redundant cues.
Image Alt Text & Icon Accessibility
Implementation: All decorative icons use Font Awesome with semantic HTML context. Functional images include descriptive alt text: "Glewell Logo", water container types ("Cup", "Bottle", "Glass"). Social links on public pages include aria-label for each platform (Instagram, LinkedIn, X, YouTube, Facebook).
Progressive Web App Standards
Dashboard: Includes manifest.json for PWA capabilities, apple-touch-icon for iOS, theme-color meta tag, and viewport-fit=cover for safe areas. Service worker implementation (service-worker.js) enables offline functionality without compromising accessibility.
Persistent State & User Preferences
Dashboard: Sidebar collapse state stored in localStorage provides consistent experience across sessions. Preference persistence prevents layout shifts and maintains user's chosen navigation style, reducing cognitive load for users with accessibility needs.
Ongoing Testing & Improvements
We test both public pages and dashboard with NVDA, JAWS, and VoiceOver screen readers. We validate keyboard navigation, test responsive breakpoints on real devices, and welcome community feedback. Accessibility is not a one-time implementation but an ongoing commitment to improvement.
Accessibility Support
We're here to help
Priority Support Chat
Available in Premium Dashboard
Accessible via Support page in-app
Help Us Improve Accessibility
Your feedback is essential to building a truly accessible wellness platform. If you encounter any accessibility barriers while using glewell.com or the Premium dashboard, whether navigating with a keyboard, using a screen reader, on mobile devices, or with any assistive technology, please contact us immediately. We're committed to addressing issues promptly and continuously improving the experience for all users across every part of our platform.