Guide to setting up your development environment for contributing to the Accessibility Widget.

Before you begin, ensure you have:

• Git - Version control
• Text Editor - VS Code, Sublime Text, or your preferred editor
• Web Browser - Chrome, Firefox, Safari, or Edge
• Local Web Server - For testing (optional but recommended)

git clone https://github.com/airforcerp/Website-Accessibility-Widget.git
cd Website-Accessibility-Widget

Website-Accessibility-Widget/
├── web/
│ ├── accessibility-plugin.js # Main plugin code
│ ├── accessibility-plugin.css # Plugin styles
│ ├── accessibility-config.js # Configuration
│ ├── example.html # HTML example
│ └── example-php.php # PHP example
├── index.html # Demo page
├── README.md # Main documentation
└── wiki/ # Wiki pages

Open web/example.html in your browser to see the plugin in action.

Recommended extensions:

• ESLint - JavaScript linting
• Prettier - Code formatting
• Live Server - Local development server
• GitLens - Git integration

Create .vscode/settings.json:

{
 "editor.formatOnSave": true,
 "editor.tabSize": 4,
 "javascript.format.indentSize": 4,
 "css.format.indentSize": 4
}

# Python 3
python -m http.server 8000
# Python 2
python -m SimpleHTTPServer 8000

Access at: http://localhost:8000

npm install -g http-server
http-server -p 8000

1. Install Live Server extension
2. Right-click example.html
3. Select "Open with Live Server"

• accessibility-plugin.js (1618 lines)

  • Main plugin logic
  • Widget creation
  • Feature implementations
  • API exports

• accessibility-plugin.css (885 lines)

  • Widget styles
  • Panel styles
  • Feature styles
  • Responsive design

• accessibility-config.js (67 lines)

  • Default configuration
  • User-customizable settings

• createWidget() - Creates the widget UI
• createControl() - Creates form controls
• togglePanel() - Opens/closes panel

• applySettings() - Applies all settings
• loadPreferences() - Loads saved preferences
• savePreferences() - Saves current preferences

• applyColorBlindnessFilter() - Color filters
• speakText() - Text-to-speech
• enableReadingGuide() - Reading guide
• And many more...

1. Open Example File

   open web/example.html
   # or
   python -m http.server 8000
   # Then visit http://localhost:8000/web/example.html

2. Test Features

   • Click accessibility button
   • Test all features
   • Check browser console for errors
   • Test in multiple browsers

Test in:

• ✅ Chrome (latest)
• ✅ Firefox (latest)
• ✅ Safari (latest)
• ✅ Edge (latest)
• ✅ Mobile browsers

• Widget appears and works
• All features function correctly
• No console errors
• Settings persist
• Responsive on mobile
• Keyboard navigation works
• TTS works (where supported)

1. Create Branch

   git checkout -b feature/your-feature

2. Make Changes

   • Edit files
   • Test changes
   • Check for errors

3. Test Thoroughly

   • Multiple browsers
   • Mobile devices
   • Different screen sizes

4. Commit Changes

   git add .
   git commit -m "Description of changes"

5. Push and PR

   git push origin feature/your-feature

• Indentation: 4 spaces
• Naming: camelCase for variables, kebab-case for CSS
• Comments: Add for complex logic
• Formatting: Consistent style throughout

// Check if plugin loaded
console.log(typeof AccessibilityPlugin);
// Get current settings
console.log(AccessibilityPlugin.getSettings());
// Test API methods
AccessibilityPlugin.toggle();

Add debug logging:

function debugLog(message) {
 if (window.DEBUG_ACCESSIBILITY) {
 console.log('[Accessibility]', message);
 }
}

The plugin is pure JavaScript and CSS - no build step needed!

For production, you can minify:

# Using terser for JS
npx terser accessibility-plugin.js -o accessibility-plugin.min.js
# Using cssnano for CSS
npx cssnano accessibility-plugin.css accessibility-plugin.min.css

1. Widget Not Appearing

   • Check file paths
   • Check browser console
   • Verify Boxicons is loaded

2. Features Not Working

   • Check browser compatibility
   • Verify settings are applied
   • Check for JavaScript errors

3. Styles Not Applied

   • Check CSS file is loaded
   • Verify no conflicts
   • Check specificity

• Browser DevTools: F12
• Console: Check for errors
• Network Tab: Verify file loading
• Elements Tab: Inspect DOM

• API Documentation
• Architecture
• Configuration Guide

• Web Speech API
• WCAG Guidelines
• MDN Web Docs

1. Read Architecture documentation
2. Review Contributing guide
3. Pick an issue or feature to work on
4. Create a branch and start coding!

• Check Troubleshooting guide
• Review FAQ
• Open an issue on GitHub
• Email: support@airforcerp.com

Last Updated: November 2025