[BUG]: Ensure buttons have discernible text

[KolliAnitha]

Describe the bug

Buttons must have discernible text

Steps To Reproduce

1. Open Fractions exploration
2. Click Continue till you reach the page 'Very good! Now look at these cakes...'
3. Run axe devtools
4. See errors
   Element location:
   .multiple-choice-option-container.e2e-test-multiple-choice-option-container[dir="auto"]:nth-child(1) > .multiple-choice-option
   .oppia-learner-hint-solution-button

Expected Behavior

No errors must be seen in axe devtools
Fix at least (1) of the following:
Element does not have inner text that is visible to screen readers
aria-label attribute does not exist or is empty
aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
Element has no title attribute
Element's default semantics were not overridden with role="none" or role="presentation"

Screenshots/Videos

What device are you using?

Desktop

Operating System

Other

What browsers are you seeing the problem on?

Chrome

Browser version

108.0.5359.111

Additional context

No response

[KolliAnitha]

Similar behavior observed in contributor dashboard.
Element Location:
.e2e-test-delete-interaction

[kanishkcs]

hi @Priyansh61 , i would like to work on this issue , shall i just create a fix PR , or can i be assighned with this issue?

[Priyansh61]

Hello @kanishkcs! Per the guidance at https://github.com/oppia/oppia/wiki/Contributing-code-to-Oppia#choosing-a-good-first-issue, please provide an explanation of what your PR will do (with names of files you're changing, what you plan to change in each file, etc.). If it looks good, we can assign you to this issue.

Please also follow the other instructions on that wiki page if you have not yet done so. Thanks!

[kanishkcs]

Hi @Priyansh61 thanks for the reply ,
as this issues is about button missing discernible text
I will add the "aria-label" or "aria-labelledby" attribute to the button element to provide a descriptive text that screen readers can use to announce the purpose of the button.

I am currently in the process of identifying the files that need to be changed in order to resolve this issue.
Once I complete my analysis and have determined the files that need to be changed. Soon I'll find it and let you know.

[CodeWizarz]

@Priyansh61 i think i can fix the element that is not having inner text visible to the screen by simply adding the aria-label to the element like this

Submit

i'm not sure but correct me if i'm wrong

[a-s-t-e-y-a]

@Priyansh61 I fix the the issue by adding aria-label="multipleChoice" in the directory as follows:-

extensions/interactions/MultipleChoiceInput/directives/multiple-choice-input-interaction.component.html

I also create a PR . If it seems fine to you
kindly merge it

[jeyasurya373]

this accessibility isse will gone if you add text for button and using style make the font-size: 0; .. now Element have inner text that is visible to screen readers not for user

[Priyansh61]

@a-s-t-e-y-a I can't merge that PR since it is a change on your fork, before working on a issue, Please take a look at https://github.com/oppia/oppia/wiki/Contributing-code-to-Oppia#choosing-a-good-first-issue.

And for creating a PR take a look at this wiki https://github.com/oppia/oppia/wiki/Make-a-pull-request and follow the guidelines.

[Priyansh61]

Hi Everyone,

Please Per the guidance at https://github.com/oppia/oppia/wiki/Contributing-code-to-Oppia#choosing-a-good-first-issue, please provide an explanation of what your PR will do (with names of files you're changing, what you plan to change in each file, etc.). If it looks good, we can assign you to this issue.

Please also follow the other instructions on that wiki page if you have not yet done so. Thanks!

[dsg1320]

is this issue still open

[Priyansh61]

Yes @dsg1320 The issue is still open

[driptanil]

Please Review my pull requests

[driptanil]

Please Assign me this Issue

[seanlip]

@driptanil Per the guidance at https://github.com/oppia/oppia/wiki/Contributing-code-to-Oppia#choosing-a-good-first-issue, please provide an explanation of what your PR will do (with names of files you're changing, what you plan to change in each file, etc.). If it looks good, we can assign you to this issue.

Please also follow the other instructions on that wiki page if you have not yet done so. Thanks!

[B1TSH3LL]

I want to work on this issue please assign this to me.

What i gonna do here ?
To make sure that Ensure buttons have discernible text, you can follow these guidelines:

1. Use clear and concise language: The text on the Ensure button should clearly state what action the button will perform. Avoid using vague or ambiguous terms that may confuse the user.
2. Use contrasting colors: The text on the Ensure button should be easy to read and stand out from the background. Use contrasting colors to make sure that the text is easily visible.
3. Use a consistent style: Ensure buttons should have a consistent style throughout your application or website. This will help users to easily recognize the buttons and understand their purpose.
4. Avoid using generic text: Instead of using generic text such as "OK" or "Cancel," use text that is specific to the action being performed. For example, instead of "OK" use "Confirm" or "Save."
5. Test the readability: Before publishing your application or website, test the readability of the Ensure button text with real users. This will help you to identify any issues and make necessary improvements.

By following these guidelines, you can make sure that Ensure buttons have discernible text and are easy for users to understand and use.

[seanlip]

@B1TSH3LL This is a generic response. It doesn't suffice to demonstrate that you understand how to solve the issue, and responses like this will not result in our assigning you to it. Instead, please explain specifically what your PR will do and what files you are modifying, per the guidelines linked in my previous comment. Thanks.

[hemantmm]

Hi, @seanlip, @Priyansh61 I have tried to fix 6 issues out of 7 by changing the file,

oppia/extensions/interactions/MultipleChoiceInput/directives/multiple-choice-input-interaction.component.html
By adding aria-label="choice"

oppia/core/templates/pages/exploration-player-page/layout-directives/exploration-footer.component.html
By adding <ul></ul> for the list

By adding .oppia-lesson-info { width: 15rem; }

oppia/core/templates/components/common-layout-directives/navigation-bars/top-navigation-bar.component.html
By removing aria-expanded="false" in the file

RESULT :

[Praashh]

Hey please assign me this issue

[prafulbbandre]

@9520prashant Per the guidance at https://github.com/oppia/oppia/wiki/Contributing-code-to-Oppia#choosing-a-good-first-issue, please provide an explanation of what your PR will do (with names of files you're changing, what you plan to change in each file, etc.). If it looks good, we can assign you to this issue.

Please also follow the other instructions on that wiki page if you have not yet done so. Thanks!

[Priyansh61]

@hemantmm The learner might not be able to discriminate btwn the n options presented by the screen reader since all of them are having the same aria-label as 'choice' so can we think of something different?

[hemantmm]

@Priyansh61 is this fine now?
aria-label="Select the option"

[seanlip]

The readout for each multiple-choice option should be the alt text of the corresponding image. Please show a video showing that this behaviour is achieved.

[Patel-Muhammad]

This is issue is no longer reproducible on test server.
(Running the axeDevtools does not give any error related to: "Buttons must have discernible text")

[Patel-Muhammad]

Closing as no longer reproducible