Skip to content

A mobile-responsive web application that provides tips and guidance on navigating digital content with accessibility in mind. This project focuses on keyboard navigation, screen readers, touch interfaces, and more.

License

Notifications You must be signed in to change notification settings

Jerlyn/Digital-Navigation-Helper

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

3 Commits
 
 
 
 
 
 
 
 

Repository files navigation

Digital Navigation Helper

A mobile-responsive web application that provides tips and guidance on navigating digital content with accessibility in mind. This project focuses on keyboard navigation, screen readers, touch interfaces, and more.

Features

  • Keyboard Navigation Tips: Learn essential keyboard shortcuts for navigating websites without a mouse
  • Focus Indicators: Understand the importance of visible focus states
  • Screen Reader Support: Best practices for making content work with screen readers
  • Text Size & Contrast: Guidance on readable text and good color contrast
  • Touch Navigation: Tips for making content touch-friendly
  • Voice Control: Support for voice-based navigation
  • Interactive Practice Area: Try keyboard navigation in a safe environment

Accessibility Features

  • High contrast color scheme (blue and yellow) with proper contrast ratios
  • Keyboard navigation fully supported
  • Skip to content link
  • Proper heading structure
  • Focus indicators
  • Responsive design for all device sizes
  • Support for high contrast mode
  • Reduced motion option
  • Semantic HTML structure

Getting Started

Prerequisites

No special tools are required to run this project. It's a pure HTML/CSS/JavaScript application.

Installation

  1. Clone the repository

    git clone https://github.com/Jerlyn/digital-navigation-helper.git
    
  2. Navigate to the project directory

    cd digital-navigation-helper
    
  3. Open index.html in your web browser

Live Demo

You can view a live demo at: https://jerlyn.github.io/digital-navigation-helper

Deployment

To deploy this project to GitHub Pages:

  1. Go to your GitHub repository
  2. Click on Settings
  3. Scroll down to GitHub Pages section
  4. Select the branch you want to deploy (usually main)
  5. Save the changes

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

  1. Fork the project
  2. Create your feature branch (git checkout -b feature/AmazingFeature)
  3. Commit your changes (git commit -m 'Add some AmazingFeature')
  4. Push to the branch (git push origin feature/AmazingFeature)
  5. Open a Pull Request

License

This project is licensed under the MIT License - see the LICENSE file for details.

Acknowledgements

  • Font Awesome for the icons
  • The accessibility community for guidance and inspiration

Accessibility Statement

This project aims to be accessible to all users, regardless of ability or method of navigation. If you encounter any accessibility issues, please report them as an issue on GitHub.

About

A mobile-responsive web application that provides tips and guidance on navigating digital content with accessibility in mind. This project focuses on keyboard navigation, screen readers, touch interfaces, and more.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages