WordPress.org

Make WordPress Core

Opened 6 years ago

Closed 6 years ago

Last modified 4 years ago

#35049 closed defect (bug) (fixed)

Remove title attributes: the Dashboard

Reported by: afercia Owned by: afercia
Milestone: 4.5 Priority: normal
Severity: normal Version: 4.4
Component: Administration Keywords: has-screenshots, has-patch, commit, title-attribute
Focuses: ui, accessibility Cc:

Description

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:

https://cldup.com/oBh6QUz1tu.png

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.

Attachments (6)

35049.diff (1.1 KB) - added by perezlabs 6 years ago.
35049.1.diff (1.3 KB) - added by perezlabs 6 years ago.
35049.2.diff (1.3 KB) - added by perezlabs 6 years ago.
Taking care of the filter (privacy_on_link_title) in the Search Engines title attribute.
35049.3.diff (11.8 KB) - added by afercia 6 years ago.
35049.4.diff (11.6 KB) - added by afercia 6 years ago.
35049.5.diff (11.6 KB) - added by afercia 6 years ago.

Download all attachments as: .zip

Change History (24)

#1 follow-up: @SergeyBiryukov
6 years ago

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.

#2 @swissspidy
6 years ago

  • Keywords needs-patch added

@perezlabs
6 years ago

#3 @perezlabs
6 years ago

  • Keywords has-patch added; needs-patch removed

#4 @perezlabs
6 years ago

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

#5 in reply to: ↑ 1 @afercia
6 years ago

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
6 years ago

#6 @perezlabs
6 years ago

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

#7 @swissspidy
6 years ago

  • Owner set to afercia
  • Status changed from new to reviewing

#8 @afercia
6 years ago

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

@perezlabs
6 years ago

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

This ticket was mentioned in Slack in #core by afercia. View the logs.


6 years ago

#10 @afercia
6 years ago

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:

https://cldup.com/qFmXDyR2fZ.png

New patch incoming.

@afercia
6 years ago

#11 @afercia
6 years ago

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

#12 @afercia
6 years ago

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! :)

#13 @ocean90
6 years ago

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' );

#14 @afercia
6 years ago

  • Keywords commit added

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

@afercia
6 years ago

@afercia
6 years ago

#15 @afercia
6 years ago

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

#16 @afercia
6 years ago

  • Resolution set to fixed
  • Status changed from reviewing to closed

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.

#17 @DrewAPicture
5 years ago

In 36823:

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

See #35049. See #35986.

#18 @afercia
4 years ago

  • Keywords title-attribute added
Note: See TracTickets for help on using tickets.