Gatsby: Aria-Label: change `{title} expand` to `expand {title}`

[muescha]

Summary

change order of words in aria label

Basic example

https://github.com/gatsbyjs/gatsby/blob/e36d73157e5964267fbcc62ed3b2d0e2582b735e/www/src/components/sidebar/section-title.js#L169-L172

 aria-label={ 
   isExpanded 
     ? i18n._(t`collapse ${item.title}`) 
     : i18n._(t`expand ${item.title}`) 

Motivation

when there are long titles then i guess it is better when the important part comes first when the voicereader say the label.

[capndave]

I'd like to work on this if @muescha is not already working on it! I haven't contributed to Gatsby yet so please let me know if there is a particular protocol to follow for checking out issues.

[muescha]

just waiting for @gatsbyjs/learning and a11y team if this change is ok

[madalynrose]

Hi there, @muescha and @capndave! I really appreciate the passion for accessibility!

That said, after consulting prior art around expand/collapse functionality, including the WAI-ARIA best practices, I've found that ${title} expanded/collapsed is how assistive technology interprets toggle button behavior using aria-expanded and since that is the behavior we are implementing in this component, we should be consistent with that behavior.

Upon further investigation, it looks like having expand or collapse in that string is redundant to the aria-expanded attribute, meaning that assistive technology would read "${item.title} collapse, expanded" for example.

I recommend that instead of reordering words that we remove expand and collapse from the label entirely and let aria-expanded denote current state itself.

Additionally, it looks like item.title isn't properly making it into the aria-label. If you'd like to tackle that in #23953 that'd be awesome but I can also open a separate issue if you'd like to leave this scoped to handling expanded state. Thank you so much for your contribution!

[muescha]

thanks for the response,

i was not able to find with google how is the advices for aria, i will dig into your link for best practices :)

yes - the best is to be consistent with the standards

Additionally, it looks like item.title isn't properly making it into the aria-label.

what this mean exactly? did you mean the {0} in the screenshot?

[madalynrose]

@muescha, yes! The {0} in the screenshot is where the title should appear. You can verify this without using a screen reader by using Chrome's Accessibility Pane in its developer tools.

This is what that same element looks like in the accessibility pane:

You can see the aria-label and the aria-expanded attributes have successfully made it into the accessibility tree but that the the label doesn't have the proper title. The title here should be "API Files"

[muescha]

thx - i did not know this pane before :)

[capndave]

Madalyn - what a great and thorough insight/explanation! I'll make the
changes you suggested to this pr and open a new one for the item.table
issue with aria-label. Best, -Dave

On Tue, May 12, 2020, 2:39 PM Madalyn [e-mail] wrote:

Hi there, @muescha https://github.com/muescha and @capndave
https://github.com/capndave! I really appreciate the passion for
accessibility!

That said, after consulting prior art around expand/collapse
functionality, including the WAI-ARIA best practices
https://www.w3.org/TR/wai-aria-practices/examples/accordion/accordion.html,
I've found that ${title} expanded/collapsed is how assistive technology
interprets toggle button behavior using aria-expanded and since that is
the behavior we are implementing in this component, we should be consistent
with that behavior.

Upon further investigation, it looks like having expand or collapse in
that string is redundant to the aria-expanded attribute, meaning that
assistive technology would read "${item.title} collapse, expanded" for
example.

[image: VoiceOver UI shows "{0} collapse, expanded, button"]
https://user-images.githubusercontent.com/3230904/81737407-0cc47c80-9466-11ea-940d-aab0c2bacf49.png

I recommend that instead of reordering words that we remove expand' and
collapsedfrom the label entirely and letaria-expanded` denote current
state itself.

Additionally, it looks like item.title isn't properly making it into the
aria-label. If you'd like to tackle that in this PR that'd be awesome but
I can also open a separate issue if you'd like to leave this scoped to
handling expanded state. Thank you so much for your contribution!

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/gatsbyjs/gatsby/issues/23948#issuecomment-627551062,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/ADTOOZP4QWTH3FNNNKHNOU3RRGQXNANCNFSM4M45IDJA
.

[muescha]

Did I see it right in the linked ARIA page with the acordeon that the button just had no aria title because the title is already in the DOM as an element and then the label is redundant?

[tesseralis]

@madalynrose, would it make more sense to label the toggle button ${item.title} toggle instead, to differentiate it with the actual item heading, which will also have a label of item.title?

[capndave]

@tesseralis great point. Making a distinct label for this button could help distinguish it from the adjacent button of the same/similar name. That being said I'm making the changes that @madalynrose suggested, with the understanding that we can still discuss/modify.

[LekoArts]

Since www isn't public anymore I've noted this internally as a ticket.