Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
wants to merge 1 commit into
base: master
Choose a base branch
from

Conversation

We13b-MD
Copy link

@We13b-MD We13b-MD commented Mar 28, 2024

                                                         ### 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 We13b-MD changed the title test for accessibility and corrected Test for accessibility with Axe-core and corrected according to WCAG Accessibility Guidelines Mar 28, 2024
@We13b-MD We13b-MD changed the title Test for accessibility with Axe-core and corrected according to WCAG Accessibility Guidelines Test for accessibility with Axe-core and corrected according to WCAG Accessibility Guidelines on Workbench Mar 28, 2024
@We13b-MD
Copy link
Author

@birm still waiting for your review

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants