WordPress.org

Make WordPress Core

Opened 5 years ago

Last modified 5 weeks ago

#26562 new enhancement

Remove title attributes: class-wp-admin-bar.php

Reported by: joedolson Owned by:
Milestone: Future Release Priority: normal
Severity: normal Version: 3.3
Component: Toolbar Keywords: ui-feedback title-attribute
Focuses: ui, accessibility Cc:

Description (last modified by SergeyBiryukov)

Related: #24766

// class-wp-admin-bar.php
_render_item()

Attachments (1)

26562.patch (1.0 KB) - added by Mte90 3 years ago.
replaced title with aria-label

Download all attachments as: .zip

Change History (26)

#1 @SergeyBiryukov
5 years ago

  • Description modified (diff)

#2 follow-up: @joedolson
5 years ago

This function does not provide a title attribute by default, only if provided in arguments. That means there's a risk of people using it in a way which provides meaningless information, but also means that it provides added info, and should possibly be left as a dev decision when adding new menu items. Also, since this is an admin-side function, we can readily add JS to expose this information on keyboard focus, so it's my opinion that this should be dealt with by adding screen reader and keyboard support for the information via JS. 2nd Opinions welcome.

#3 @joedolson
5 years ago

  • Keywords 2nd-opinion added

#4 @nacin
4 years ago

  • Component changed from Accessibility to Toolbar
  • Focuses accessibility added

#5 @joedolson
3 years ago

Since this isn't used by core, I think we should close this and mark wontfix. In looking at usage of the attribute, it appears to be very low usage in plug-ins, as well.

What may be a good idea, instead of addressing the usage of the title attribute would be deprecating or removing support for title attributes in the admin bar.

#6 follow-up: @morganestes
3 years ago

  • Keywords dev-feedback added
  • Type changed from defect (bug) to enhancement
  • Version set to 3.3

After looking through core, I found that the title attribute is used by Comments and Updates for noting counts, but didn't find any other uses. Since there's not another clear way to indicate the number within the context of what it's counting (number of updates available, types of comments, etc.), I think our options are to leave it in, or find another way to include the information.

I'd prefer that we use aria-label instead of title, but understand we'd just be trading one potential abusive entry point for another. Even still, I vote for deprecating the title attribute and moving towards ARIA, especially since it's only two places in core to start with.

#7 @afercia
3 years ago

Related: #29022

#8 in reply to: ↑ 6 @afercia
3 years ago

Replying to morganestes:

I vote for deprecating the title attribute and moving towards ARIA, especially since it's only two places in core to start with.

I'd totally second this. Would recommend to consider to deprecate $args['meta']['title'] and encourage the use of ARIA. Worth remembering the HTML5 spec discourages the use of the title attribute: http://www.w3.org/TR/html/dom.html#the-title-attribute

About the "Updates" and "Comments" notifications, we should definitely avoid to provide the same information twice, see screenshot below:

https://cldup.com/rPbY93DaHy.png

where (part of) the link text and the title attribute say the same thing. This would be read out this way:

three one Plugin Update, one Theme Update, Translation Updates visited link one Plugin Update, one Theme Update, Translation Updates

About the visual part, we should find a new way to provide the expanded information, especially for touch-only users.

#9 in reply to: ↑ 2 @afercia
3 years ago

  • Focuses ui added

Replying to joedolson:

since this is an admin-side function, we can readily add JS to expose this information on keyboard focus

Seen on GitHub, pure CSS solution using content: attr(aria-label). That's not to suggest to use tooltips! :) Just to say it is possible to display content on hover, focus, and active states and at the same time providing that content in an accessible way. Any thoughts more than welcome.

https://cldup.com/ZtoXLevHHz.png

#10 @afercia
3 years ago

Some design/UI feedback here would be greatly appreciated. This would be a nice opportunity for designers to chime in with new ideas :) To recap:

  • we'd like to discourage the use of title attributes and remove them wherever possible
  • at the same time we need to display the info about updates and comments count

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


3 years ago

@Mte90
3 years ago

replaced title with aria-label

#12 @afercia
3 years ago

  • Keywords ui-feedback added; 2nd-opinion dev-feedback removed

@Mte90 thanks for the patch, it's a start :) We should also find a way to display the Updates information. Wondering if splitting the current icon in 3 different icons could be a solution. Need some design feedback.

This ticket was mentioned in Slack in #accessibility by rianrietveld. View the logs.


2 years ago

#14 @joedolson
2 years ago

Related: #35566 for a proposed example of tooltip.

This ticket was mentioned in Slack in #accessibility by rianrietveld. View the logs.


2 years ago

#16 @afercia
2 years ago

  • Milestone changed from Awaiting Review to Future Release

This would need some UI feedback and decisions first, setting to future release for now.

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


22 months ago

#18 @afercia
22 months ago

Discussed a bit this ticket at today's accessibility weekly meeting. There's probably the need of a new idea and new approach here. Maybe, instead of trying to make the current content fit in a place where it is not available to all the different devices and assistive technologies, it would be better to simplify and say just e.g. "3 updates" without specifying their type. Users can always click on the icon and get the details. This would allow to remove the title attribute and use just the icon + number and an aria-label attribute. It would be easier to update the updates count via JavaScript too, if I remember correctly @pento worked on this a while ago and I'd greatly appreciate his thoughts on this.

Alternatively, a more advanced idea would be introducing a sort of notification area: users click the icon and a panel expands with all the relevant details in plain text and links/buttons for further actions.

Personally, I'd rather keep it simple and go with the first option, without excluding the second option for the future :)

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


22 months ago

#21 @afercia
16 months ago

  • Keywords title-attribute added

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


12 months ago

This ticket was mentioned in Slack in #design by boemedia. View the logs.


5 weeks ago

#24 @boemedia
5 weeks ago

  • Keywords changed from ui-feedback, title-attribute to ui-feedback title-attribute

@afercia does this ticket still need design input? Or can we merge it with #33030 for the notification alternative? Would this be something to brainstorm on at upcoming Contributor Day in Belgrade? If so, I can note this down for a group of people to work on some mockups.

#25 @afercia
5 weeks ago

@boemedia yes I think in a way this ticket is similar to #33030 but still different, as the icon in the top bar groups all types of updates while the icons in the left admin bar work differently (also: themes don't' show an updates icon in the admin bar). Some brainstorming during WCEU contributor day would be very welcome!

Note: See TracTickets for help on using tickets.