camicroscope / caMicroscope

Digital pathology image viewer with support for human/machine generated annotations and markups.
BSD 3-Clause "New" or "Revised" License
249 stars 289 forks source link

Issue Fixed #745 : Accessibility (WCA) standards #929

Closed barchakuz closed 6 months ago

barchakuz commented 6 months ago

Title: Improved Mobile-Friendly Navigation Bar

Summary

This pull request addresses the lack of mobile-friendly design elements, particularly in the navigation bar, on the current website. It ensures a responsive design that accommodates different screen sizes and enhances user experience on mobile devices. The fix adheres to Human-Computer Interaction (HCI) and Web Content Accessibility (WCA) standards, improving accessibility rates.

Motivation

The current navigation bar collapses into a single button on mobile devices, making it difficult for users with larger fingers to navigate efficiently. This update aims to improve accessibility and usability by providing a more user-friendly experience on mobile devices, aligning with HCI and WCA standards.

Testing

Testing has been performed on various devices and browsers, including iPhone 14 Pro Max, Samsung Galaxy S24, and Samsung Galaxy Fold, using iOS Safari and Android Chrome. The updated navigation bar ensures proper functionality and accessibility across different devices and screen sizes.

Screenshots

Before

https://github.com/camicroscope/caMicroscope/assets/66128370/67925d89-21fd-4023-82de-a997ae1d386c

After

https://github.com/camicroscope/caMicroscope/assets/66128370/0bf974c7-ff33-4f0b-9c9e-b1e11ec01a51