Button Description Accessibility

[accordproject]

Button Description Accessibility

[irmerk]

I originally opened this as an open and general issue, mostly following these two links:

1. https://www.w3.org/WAI/WCAG21/quickref/?showtechniques=244#link-purpose-in-context
2. https://www.wuhcag.com/link-purpose-in-context/

I think this will most likely require using a screen reader to go through trial and error to see how links and buttons respond to that software.

[irmerk]

@irmerk I used ChromeVox for trial and error and the link descriptions seem to work fine. Do you want me to give more detailed description to them?

This could very well be the case. This could also give some indication that more buttons need to be accessible, and thus have descriptions. For instance, the + Add to contract and Details buttons in the TemplateLibrary on the right of template-studio-v2 aren't accessible via they keyboard. So we're not seeing that they could very well not have accessible descriptions, either.

These kind of branching off issues could be made into new issues or worked on from this issue.

[irmerk]

Hacktoberfest:

This issue can possibly provide for multiple pull requests.

[anishaswain]

Hello @irmerk . I am interested in this issue. I installed the node_moules and tried running the project with npm run start. The code is getting compiled successfully but I am getting a completely blank page in my localhost. The error I am receiving is, Uncaught TypeError: Cannot read property 'div' of undefined. Please help me resolve the issue.

[irmerk]

@anisha1234 for reference, this is being solved here: accordproject/markdown-editor#90

[anishaswain]

@irmerk I am being solve the setup issue by referencing #147. So from now, I would love to focus on the current issue. I would appriciate more info on the issue. In my localhost, I can see the following with waiting

[irmerk]

@anisha1234 You'll most likely want to develop cicero-ui within a web-app for the time being. Right now that's easiest in template-studio-v2, so you'll use these instructions and use template-studio-v2 for your "main app directory".

[anishaswain]

@irmerk yes, I am being able to run the template-studio-v2 project as well. I would like to know which Ambiguous buttons are we referring here.

[anishaswain]

@irmerk I used ChromeVox for trial and error and the link descriptions seem to work fine. Do you want me to give more detailed description to them?

[sanyamdogra]

Hi @irmerk, a <span> tag with a className='sr-only' can be used to add textual data only for screen readers. I am new to this project, please correct me if wrong. Thanks!

[irmerk]

@sanyamdogra I'm not as familiar with sr-only, but it looks like that's in Bootstrap for a Skip To Main functionality for screen readers.

[adrijshikhar]

@irmerk i would like to work on this issue, can you please assign to me? Thanks.

[sanyamdogra]

Hi @irmerk, why can't we use aria-label property to add a description for a button?

[irmerk]

Hi @irmerk, why can't we use aria-label property to add a description for a button?

Unsure why we can't?

[sanyamdogra]

I went through semantic UI docs and found that adding an aria-label to the Buttons will lead to a HTML code with the same aria-label for screen readers.

Ref:-https://react.semantic-ui.com/elements/button/#types-button

I can start by adding these from component to component? We can create a separate issue with list of components utilizing Buttons, maybe to create a track. What's your take on this? @irmerk
Thanks

[irmerk]

I'm not sure I follow. semantic-ui-react supports aria-label, and you're saying we can't use it? But also that we should add these?

[sanyamdogra]

Nope I didn't meant that we can't use them. I am saying that we should use them to enhance button description accessibility, thus fixing this issue. My question is that, will adding aria-label solve this issue? Or you are expecting something else.

[irmerk]

Ah okay. Yes, that is what I had in mind.

[sanyamdogra]

Alright, I'll get on with the PR then. I guess there are 2 places that have buttons:

• TemplateLibrary > Buttons
• Demo

Am I missing some?

[irmerk]

I believe so.