Reminder: audit all the aria-labels

[afercia]

More a task to fulfill when the UI will be consolidated and naming conventions better established, than a real issue.

The tooltips added in #2293 help to see the aria-label text used on several controls. In some cases, the text is outdated and should be changed accordingly to the new naming conventions.

For example, the post settings are now just "Settings".

[danielbachhuber]

@afercia Would it be possible / helpful to programmatically generate a list of all the aria-label text for easier review?

[afercia]

@danielbachhuber I'd say if it's a 5 mins job, then sure it could help 🙂 but if requires more than 5 mins, I'd say to not spend time on this: the search in any decent editor is enough.

[danielbachhuber]

Fair enough. Would it make most sense to perform this task pre-merge, and move it to some pre-merge checklist document?

[rianrietveld]

pinging @grahamarmfield

[aardrian]

@grahamarmfield per our chat: ARIA Label Bookmarklet http://www.last-child.com/aria-label-bookmarklet/

[grahamarmfield]

Thanks @aardrian for the link to the bookmarklet. Given the proximity of things the output is a bit scrambled, so I think I'll need to find another way to do this.

[samikeijonen]

@grahamarmfield Any news on this one?

[designsimply]

I tested the label for the "x" button for post settings and found that it no longer says 'Close post settings sidebar' as in the screenshot and now it says 'Close settings.'

^{Seen at http://alittletestblog.com/wp-admin/post.php?post=13830&action=edit running WordPress 4.9.6 and Gutenberg 3.1.0 using Firefox 60.0.2 on macOS 10.13.5.}

[designsimply]

@afercia or @grahamarmfield, in order to make this issue more actionable, can you give some tips for how to find the text that needs to be checked? Or are you proposing to check all aria-label texts?

I noticed that the Editor README.md says that title: string from becomes the tooltip label for icon controls which seems like it might make searching for icon-only tooltips a bit tough and I was wondering if that means icon controls simply need to be audited manually?

[afercia]

We've discussed this issue last week during the accessibility meeting on Slack, agreed the aria-labels should be audited when there's feature freeze and no major changes in the UI will be introduced.

I noticed that the Editor README.md says that title: string from becomes the tooltip label

I think this applies to the block formatting toolbar. Other components use a different prop, for example the IconButton uses label or tooltip. I guess the only way is to manually check all the aria-labels, as best as possible. This is particularly important when the same UI component is references in different places, for example

• there's an option "Fix Toolbar to Top" where "Top" is the toolbar at the top :)
• but then on the toolbar at the top we use an aria-label "Editor toolbar"

this is a bit confusing, and I guess there are other cases where the same UI part is referenced in different ways.

[afercia]

One more example: at some point we've decided to not refer to the settings sidebar as "sidebar", because any reference to position or placement doesn't make much sense to screen reader users. However, we're still calling it "Sidebar" in a few places, for example in the NUX tips:

However, the aria-label for the sidebar region is Editor settings. The close button says "Close settings". Should we add "sidebar" to these labels? Or should the word "sidebar be removed from the NUX tip?

[mtias]

Can we extract actionable issues here that we can assign and fix? For example: "remove mention of sidebar in NUX tip".

[tofumatt]

I'm closing this issue as it is explicitly labelled as a reminder and not a discrete, actionable issue.

If there are any labels which could use improving, please submit an issue labelling them or a PR with fixes 🙂