New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Reminder: audit all the aria-labels #2387

Closed
afercia opened this Issue Aug 12, 2017 · 13 comments

Comments

Projects
10 participants
@afercia
Contributor

afercia commented Aug 12, 2017

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".

screen shot 2017-08-12 at 12 22 17

@danielbachhuber

This comment has been minimized.

Member

danielbachhuber commented Jan 23, 2018

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

@afercia

This comment has been minimized.

Contributor

afercia commented Jan 24, 2018

@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

This comment has been minimized.

Member

danielbachhuber commented Jan 24, 2018

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

@karmatosed karmatosed added this to the Merge Proposal milestone Jan 25, 2018

@karmatosed karmatosed modified the milestones: Merge Proposal, Merge Proposal: Accessibility Apr 12, 2018

@rianrietveld

This comment has been minimized.

Member

rianrietveld commented Apr 13, 2018

pinging @grahamarmfield

@aardrian

This comment has been minimized.

aardrian commented Apr 13, 2018

@grahamarmfield

This comment has been minimized.

grahamarmfield commented Apr 16, 2018

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

This comment has been minimized.

Contributor

samikeijonen commented Apr 25, 2018

@grahamarmfield Any news on this one?

@designsimply

This comment has been minimized.

Contributor

designsimply commented Jun 25, 2018

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.'

screen shot 2018-06-25 at mon jun 25 4 16 06 pm
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

This comment has been minimized.

Contributor

designsimply commented Jun 25, 2018

@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

This comment has been minimized.

Contributor

afercia commented Jun 26, 2018

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

This comment has been minimized.

Contributor

afercia commented Jun 26, 2018

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:

screen shot 2018-06-26 at 09 15 45

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

This comment has been minimized.

Contributor

mtias commented Oct 3, 2018

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

@mtias mtias removed the Priority High label Oct 3, 2018

@mtias mtias removed this from the Merge: Accessibility milestone Oct 3, 2018

@tofumatt

This comment has been minimized.

Member

tofumatt commented Oct 4, 2018

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 🙂

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment