Remove title attributes: the Dashboard

[afercia]

See related #24766 and all the following tickets about title attributes.

Some links in the Dashboard have title attributes with little or no benefit that should be removed. See in the screenshot below:

Search Engines Discouraged
The link points to the options screen where users can change this setting. The title attribute doesn't add any useful information. (and why the link text is capitalized?)

Links to edit posts
Comparing the Activity and Drafts widgets, only the links to edit Drafts have a title attribute. I'd suggest to just remove them and add to links in both widgets a screen-reader-text or aria-label to say "Edit {post name}".

Popular plugin links
The first link points to the Plugin page on the wp.org Plugin Directory but the link text is just the Plugin name so users have no clue about the link purpose. The second link says just "install" but actually opens the plugin details modal dialog so maybe it should say "Details and installation" or something similar.

[SergeyBiryukov]

The second link says just "install" but actually opens the plugin details modal dialog so maybe it should say "Details and installation" or something similar.

"Install" is shorter and easier to translate, so I'd prefer to keep that link as is and maybe add a screen-reader-text or aria-label with the plugin name if needed.

I agree with all other points.

[perezlabs]

Added a patch that removes titles with little benefit mentioned by @afercia.

[afercia]

Replying to SergeyBiryukov:

"Install" is shorter and easier to translate, so I'd prefer to keep that link as is and maybe add a screen-reader-text or aria-label with the plugin name if needed.

Was thinking if there's really the need to have two links. I'd consider to have just one link that opens the details modal and form there users can go to the Plugin page on wp.org, if they want.

@perezlabs thanks for the patch :) if I'm not wrong there's a string that's not translatable. Also, one of the proposed improvements was to use aria-label or a text hidden with screen-reader-text. You can see an example in the Post "publish" box were the visual link text is hidden for assistive technologies using aria-hidden and then an additional, expanded, text is provided with screen-reader-text.

[perezlabs]

New patch with some improvements based on feedback from @afercia, thanks for the feedback @afercia.

[afercia]

There's a filter on the Search Engines title attribute to take care of (privacy_on_link_title).

[perezlabs]

Taking care of the filter (privacy_on_link_title) in the Search Engines title attribute.

[afercia]

Recently noticed a bit of inconsistency in the way we're using .screen-reader-text and aria-label. ​Discussed on Slack with the accessibility team and decided to stick on aria-label when the intent is to completely replace the visible text and .screen-reader-text when adding additional text.

Other things in the Dashboard need some love, for example the title attributes on the Comments action links:

New patch incoming.

[afercia]

In the new patch:

• remove title attributes and use aria-label and screen-reader-text where appropriate
• remove the privacy_on_link_title title attribute by default, preserve the ability to use the filter
• add translator comments
• simplify the Popular plugin links
• unfortunately, comments don't have a title so the only way to give some context to the action links is using the text "this comment", far from ideal since they will suffer from the "Read more" link syndrome

The Comments and News widget need some accessibility improvements, will open new separate tickets

[afercia]

Would greatly appreciate feedback on the privacy_on_link_title filter that shouldn't output anything by default and also the translator comments introduced here. cc @SergeyBiryukov @ocean90 thanks! :)

[ocean90]

Feedback on 35049.3.diff​:

• src/wp-admin/includes/dashboard.php
  • $aria_label = sprintf( _nx( '%s comment in moderation', '%s comments in moderation', $num_comm->moderated, 'comments' ), $moderated_comments_count_i18n ); needs its own translator comment
  • The change to privacy_on_link_title filter looks good. It was added in [14237]. To be sure you could check some of the privacy plugins.
  • Translator comment "%s: draft title." should be "%s: post title" (No periods needed)
  • _( 'View this comment' ) should be esc_attr__( 'View this comment' )
  • sprintf( 'Edit “%s”', $draft_or_post_title ) is missing a gettext call, the whole string needs to be escaped for attributes
  • aria-label="' . sprintf( __( 'Install %s' ), esc_attr( $raw_title ) ) . '">: The whole string should be esc_attr'ed
  • '<a href="%1$s">%2$s <span class="screen-reader-text">(%3$s)</span></a>', doesn't need a translators comment
  • '<a href="%1$s" class="musublink">%2$s <span class="screen-reader-text">(%3$s)</span></a>', doesn't need a translators comment
  • __( 'Dismiss the browser warning panel' ) should be esc_attr__( 'Dismiss the browser warning panel' )
• src/wp-admin/index.php
  • _e( 'Dismiss the welcome panel' ); should be esc_attr_e( 'Dismiss the welcome panel' );

[afercia]

@ocean90 thanks. Apparently, I've missed just a few details. Patch refreshed.

[afercia]

For consistency, "Trash" should be capitalized. See refreshed patch.

[afercia]

In 36172:

Accessibility: Remove title attributes from the Admin Dashboard.

Uses aria-label and screen-reader-text where appropriate. Also removes
the default title attribute output by privacy_on_link_title, preserving
the ability to use the filter.

Fixes #35049.

[DrewAPicture]

In 36823:

Docs: Add a more descriptive changelog entry to the hook doc for the privacy_on_link_title filter.

See #35049. See #35986.