search

camicroscope / caMicroscope

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

Test for accessibility with Axe-core and corrected according to WCAG Accessibility Guidelines on Workbench #896

Open We13b-MD opened 5 months ago

We13b-MD commented 5 months ago 
                                                         ### Summary

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: wrongcontrastalgo

After Change accessibilitytestresultpassbuildmodels

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 contratRatio workbench As you can see from above

After Change contrastratioCorrect

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

After Change: accessibilitytestresultpassbuildmodels

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 Accessibility test result pass workbench result accessibilitytestresultpassbuildmodels.

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

After correction accessibility test result pass workbench

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?

We13b-MD commented 5 months ago

@birm still waiting for your review