Match visible text with aria-labels

[Fenn-CS]

When the visible button label does not match the aria-label button activation via voice input cannot be guaranteed.

Resolves : http://local.nextcloud.test/index.php/apps/photos/

[Fenn-CS]

/compile amend

[susnux]

LGTM but if aria labels and button text should match, then we recommending something wrong here (NcButton)

ariaLabel Always try to provide an aria-label to your button. Make it more specific than the button's [text] by provide some more context.

[artonge]

Not sure who to ping, but @nextcloud/designers or @JuliaKirschenheuter, would it make sense to enforce in @nc/vue that the text of NcButton matches its aria-label?

[Fenn-CS]

LGTM but if aria labels and button text should match, then we recommending something wrong here (NcButton)

ariaLabel Always try to provide an aria-label to your button. Make it more specific than the button's [text] by provide some more context.

Nice pointer. While I do some research, I would ping @michaelnissenbaum if he can provide us with more context.

[susnux]

So it looks like it should match: https://www.w3.org/WAI/WCAG21/Techniques/general/G211.html

But I also understand that you might want to give context, as Add is not very helpful, while Add selected to album might be better (just examples).
So I guess aria-label should be the same as the text and a more detailed description should be set to aria-description or aria-describedby or just to title?

[Fenn-CS]

@susnux

In general, it is recommended to make the "aria-label" text as descriptive as possible, while still being concise. This is because users who are relying on assistive technologies such as screen readers may not be able to see the visible text on the button, and need a clear and concise description of what the button does. If the visible text is not descriptive enough, the "aria-label" should provide additional information. For example, if the visible text on a button is "Submit", the "aria-label" could be "Submit the form to save changes".

However, in some cases, it may be appropriate to use the same text for both the visible text and the "aria-label". This is typically the case when the visible text is already descriptive and concise enough to provide an adequate accessible name for the element. In this case, using the same text for both the visible text and the "aria-label" can help to reduce confusion for users who may be using both visual and assistive technologies.

In summary, the decision of whether to use the same text for the visible text and the "aria-label" attribute depends on the context and the user needs. In general, it is recommended to make the "aria-label" text as descriptive as possible, while still being concise, to provide clear and meaningful information for users who may not be able to see the visible text on the element.

References:

W3C Accessibility Guidelines (WCAG) 2.0: https://www.w3.org/TR/WCAG20/
WebAIM: https://webaim.org/techniques/aria/

I believe in this case the right thing to do would be to make the original buttons more descriptive themselves.