Pull Request Title: Enhance Button Accessibility (Naming & Color Contrast)
### Description
This pull request introduces improvements to button accessibility by addressing two key areas:
Button Naming: Buttons now have clear and descriptive names that accurately convey their function. This enhances user understanding, especially for users who rely on screen readers or other assistive technologies.
Before Change:
After Change
Color Contrast: Button color contrast has been adjusted to meet WCAG 2.1 guidelines. This ensures sufficient visual distinction between text and background colors, improving visibility for users with visual impairments.
These changes contribute to a more inclusive user experience for all website visitors.
Before Change
As you can see from above
After Change
The Color Contrast on the button in the workbench section has a contrast ratio Before Change of 3.56:1 which fails according to the Accessibility Guidelines of (WCAG) 2.1 is bad especially for website visitors who have eye defects and for older people. After change we have a Color Contrast of 21:1 which passes according to the Accessibility Guidelines of (WCAG) 2.1
Result:
After Change:
As you can see from above the Color Contrast is corrected by the contrast ration is now 21:1 which is a pass according to the Accessibility Guidelines of (WCAG) 2.1
.
Testing:
Manual testing and Automatic testing has been conducted to verify the clarity of button names and sufficient color contrast.
This was done by using the Axe-core library for Accessibility the results are shown below:
Before correction
After correction
Pull Request Checklist
All code changes are included in this pull request.
Manual testing has been conducted to verify accessibility improvements.
Please review these changes and merge this pull request when ready.
### Questions
1. Naming Conventions:
Are the newly assigned button names clear, concise, and accurately reflect their function?
Do you have any suggestions for alternative names for specific buttons?
2. Color Contrast:
Does the adjusted color contrast provide sufficient readability for the buttons?
Are there any concerns about the chosen color combinations for specific buttons within the overall design theme?
Pull Request Title: Enhance Button Accessibility (Naming & Color Contrast)
This pull request introduces improvements to button accessibility by addressing two key areas:
Button Naming: Buttons now have clear and descriptive names that accurately convey their function. This enhances user understanding, especially for users who rely on screen readers or other assistive technologies. Before Change:![wrongcontrastalgo](https://github.com/camicroscope/caMicroscope/assets/122805291/d62ddd36-8daf-4b90-8954-598258c9a2c1)
After Change![accessibilitytestresultpassbuildmodels](https://github.com/camicroscope/caMicroscope/assets/122805291/73d25bce-de75-4980-a323-e9c495a9365a)
Color Contrast: Button color contrast has been adjusted to meet WCAG 2.1 guidelines. This ensures sufficient visual distinction between text and background colors, improving visibility for users with visual impairments. These changes contribute to a more inclusive user experience for all website visitors.
Before Change
As you can see from above
After Change![contrastratioCorrect](https://github.com/camicroscope/caMicroscope/assets/122805291/74de3aca-c996-49dd-95f7-75d0168bef74)
The Color Contrast on the button in the workbench section has a contrast ratio Before Change of 3.56:1 which fails according to the Accessibility Guidelines of (WCAG) 2.1 is bad especially for website visitors who have eye defects and for older people. After change we have a Color Contrast of 21:1 which passes according to the Accessibility Guidelines of (WCAG) 2.1 Result:![wrongcontrastalgo](https://github.com/camicroscope/caMicroscope/assets/122805291/da95f8fa-5898-4e8f-b754-5fff5edfe4c4)
After Change:![accessibilitytestresultpassbuildmodels](https://github.com/camicroscope/caMicroscope/assets/122805291/27b9c87c-994f-4b3c-ab1f-43de72a12ce3)
As you can see from above the Color Contrast is corrected by the contrast ration is now 21:1 which is a pass according to the Accessibility Guidelines of (WCAG) 2.1
.
Testing:
Manual testing and Automatic testing has been conducted to verify the clarity of button names and sufficient color contrast. This was done by using the Axe-core library for Accessibility the results are shown below:
Before correction![Accessibilitytest workbench](https://github.com/camicroscope/caMicroscope/assets/122805291/dddfecfc-854d-4a80-88ad-c23d2789b2c6)
After correction![accessibility test result pass workbench](https://github.com/camicroscope/caMicroscope/assets/122805291/3e6929a7-5bc7-4c3d-8067-a669fd584ebf)
Pull Request Checklist All code changes are included in this pull request. Manual testing has been conducted to verify accessibility improvements. Please review these changes and merge this pull request when ready.
1. Naming Conventions:
Are the newly assigned button names clear, concise, and accurately reflect their function? Do you have any suggestions for alternative names for specific buttons?
2. Color Contrast:
Does the adjusted color contrast provide sufficient readability for the buttons? Are there any concerns about the chosen color combinations for specific buttons within the overall design theme?