Web Accessor-Ease

A browser extension that empowers users to customize their web browsing experience based on their personal accessibility needs.

• Customize website accessibility settings on the fly
• Personalized accessibility preferences persist within browser through web navigation
• Quick toggles for common accessibility needs:
  • Font size adjustments
  • Contrast enhancement
  • Color modifications
  • Navigation assistance
  • Text-to-speech integration

Coming soon

1. Download or clone this repository
2. Open Chrome and navigate to chrome://extensions/
3. Enable "Developer mode" in the top right
4. Click "Load unpacked" and select the extension directory

• Node.js (v14 or higher)
• npm or yarn

# Clone the repository
git clone https://github.com/ShaneByrne0963/hackathon-nov-2024

# Navigate to project directory
cd hackathon-nov-2024

# Install dependencies
npm install

# Build the extension
npm run build

:root {
    --black: 0, 0, 0; /* #000000 */
    --white: 255, 255, 255; /* #FFFFFF */
    --offwhite: 250, 250, 250; /* #FAFAFA */

    --united-red: 255, 0, 0; /* #FF0000 */
    --united-orange: 255, 127, 0; /* #FF7F00 */
    --united-yellow: 255, 255, 0; /* #FFFF00 */
    --united-green: 0, 255, 0; /* #00FF00 */
    --united-blue: 0, 0, 255; /* #0000FF */
    --united-indigo: 75, 0, 130; /* #4B0082 */
    --united-violet: 139, 0, 255; /* #8B00FF */

    --united-grey-light: 125, 125, 125; /* #7D7D7D */
    --united-grey-dark: 58, 58, 58; /* #3A3A3A */

    --united-primary: 241, 26, 123; /* #F11A7B */
    --united-secondary: 152, 33, 118; /* #982176 */
    --united-tertiary: 0, 101, 119;  /* #006577 */
    --united-quaternary: 255, 201, 83; /* #FFC953 */
}

• Lato for all secondary text
• Font Awesome icons used throughout the site

• Form Inputs
  • All name inputs, checkboxes, and number inputs are required
  • Number inputs have default values for invalid entries
• User Interaction
  • Javascript disabled notifications implemented
• Anchors and Buttons
  • All links tested and working as intended
  • External pages open in new tabs
• Media Queries
  • Responsive design tested down to 320px width
• Cross-Browser
  • Tested on Google Chrome and Mozilla Firefox

• HTML files passed through W3C Markup Validator
• CSS files passed through Jigsaw W3C Validator
• Javascript files passed through JsHint Validator
• Contrast testing completed for all color combinations
• Lighthouse testing completed for performance metrics

Currently no known unfixed bugs

• Local storage tutorial
• Session storage tutorial
• Window resize event

• Images from Wikimedia Commons

The Accessibles Team:

• Shane Byrne - GitHub | LinkedIn
• Vasilika Schnitzer - GitHub | LinkedIn
• Alan Cruz - GitHub | LinkedIn
• Nonty Dazana - GitHub | LinkedIn
• Trevor Leslie - GitHub | LinkedIn
• Mike Sealey - GitHub | LinkedIn
• Mikael Johnsson - GitHub | LinkedIn

• Special thanks to Code Institute for hosting the hackathon
• Icons generated using AI tools (OpenAI's ChatGPT/Anthropic's Claude)
• Additional tools used: Photoscissors.com, DaVinci, Canva

• Support for additional browsers
• Enhanced screen reader integration
• Text-to-speech improvements
• User feedback system implementation
• Additional customization options
• Performance optimizations

Made with ❤️ for accessibility by The Accessibles Team