Accessibility

CodePlanet is designed to be accessible to all users, including those who use assistive technologies. This guide covers our accessibility features and how to use them.

Accessibility Statement

CodePlanet is committed to ensuring digital accessibility for people with disabilities. We continually improve the user experience for everyone by applying relevant accessibility standards.

Conformance Status

We aim to conform to WCAG 2.1 Level AA standards. This means:

• All functionality is keyboard accessible
• Content is readable and understandable
• The interface is compatible with assistive technologies

Keyboard Navigation

Global Shortcuts

Skip Links

Press Tab when a page loads to reveal a "Skip to content" link. This bypasses navigation and jumps directly to the main content.

Focus Management

• All interactive elements have visible focus indicators
• Focus is trapped inside modals until closed
• Focus is restored to the trigger element when modals close
• Logical tab order follows visual layout

Screen Reader Support

Tested Screen Readers

ARIA Implementation

We use ARIA attributes to enhance screen reader experience:

<!-- Expandable sidebar -->
<nav aria-label="Main navigation">
  <button 
    aria-expanded="true" 
    aria-controls="sidebar-content"
    aria-label="Toggle sidebar navigation"
  >
    ...
  </button>
</nav>
 
<!-- Loading states -->
<div aria-live="polite" aria-busy="true">
  Loading problems...
</div>
 
<!-- Error messages -->
<div role="alert" aria-live="assertive">
  Submission failed. Please try again.
</div>

Landmarks

We use semantic HTML landmarks for easy navigation:

• <header> — Site header
• <nav> — Navigation
• <main> — Primary content
• <aside> — Sidebar
• <footer> — Footer

Announcements

Dynamic content changes are announced:

• Sidebar collapse/expand state
• Form submission results
• Loading completion
• Error messages

Visual Accessibility

Color Contrast

All text meets WCAG AA contrast ratios:

• Normal text: 4.5:1 minimum
• Large text: 3:1 minimum
• UI components: 3:1 minimum

Color Independence

Information is never conveyed by color alone:

• Error states have icons and text
• Status indicators have labels
• Links are underlined (not just colored)

Text Sizing

• Base font size: 16px
• Text can be zoomed to 200% without loss of functionality
• No text as images

Dark Theme

The default dark theme is designed for accessibility:

• Reduced eye strain in low-light environments
• Sufficient contrast ratios maintained
• Light theme option available (Settings → Appearance)

Motion & Animation

Reduced Motion

We respect the prefers-reduced-motion setting:

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

When enabled:

• Animations are instant instead of smooth
• No auto-playing animations
• Transitions complete immediately

No Flashing Content

We never use content that flashes more than 3 times per second.

Code Editor Accessibility

Editor Announcements

• Syntax errors are announced
• Cursor position is tracked
• Line numbers are readable

Editor Shortcuts

High Contrast Mode

Enable high contrast mode for the code editor: Settings → Accessibility → High Contrast Editor

Forms & Inputs

Labels

All form inputs have associated labels:

<label for="email">Email address</label>
<input type="email" id="email" name="email" />

Error Handling

• Errors are associated with inputs
• Errors are announced to screen readers
• Clear error messages explain how to fix issues

Required Fields

Required fields are indicated with:

• Visual asterisk (*)
• aria-required="true"
• Clear validation messages

Mobile Accessibility

Touch Targets

All touch targets are at least 44x44 pixels for easy interaction.

Gestures

Alternative methods exist for gesture-based interactions:

• Swipe to open sidebar → Button also available
• Pinch to zoom → Zoom controls also available

Testing

We regularly test with:

• Keyboard-only navigation
• Screen readers (NVDA, VoiceOver)
• Browser zoom (up to 400%)
• Color contrast checkers
• axe DevTools automated testing

Known Issues

Current accessibility issues we're working on:

1. Code editor high contrast needs improvement
2. Some data tables may be complex for screen readers
3. Math equations need better descriptions

Reporting Issues

If you encounter accessibility barriers:

1. Email accessibility@acodeplanet.tech
2. Include:
   • The page/feature with the issue
   • What you were trying to do
   • Your assistive technology (if applicable)
   • What happened vs what you expected

We respond to accessibility issues within 48 hours.

Settings

Configure accessibility options:

Settings → Accessibility

• Enable/disable animations
• High contrast mode
• Large cursor
• Focus indicators
• Screen reader optimizations

Resources

• WebAIM WCAG Checklist
• A11y Project Checklist
• MDN Accessibility Guide

Next Steps

• Keyboard Shortcuts — All shortcuts
• Navigation — How to navigate
• Settings — Customize your experience