WordPress.org

Make WordPress Core

Opened 4 years ago

Last modified 3 months 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 23 months ago.
replaced title with aria-label

Download all attachments as: .zip

Change History (23)

#1 @SergeyBiryukov
4 years ago

  • Description modified (diff)

#2 follow-up: @joedolson
4 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
4 years ago

  • Keywords 2nd-opinion added

#4 @nacin
4 years ago

  • Component changed from Accessibility to Toolbar
  • Focuses accessibility added

#5 @joedolson
2 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
2 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
2 years ago

Related: #29022

#8 in reply to: ↑ 6 @afercia
2 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
2 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
2 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.


2 years ago

@Mte90
23 months ago

replaced title with aria-label

#12 @afercia
22 months 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.


18 months ago

#14 @joedolson
18 months ago

Related: #35566 for a proposed example of tooltip.

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


18 months ago

#16 @afercia
18 months 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.


13 months ago

#18 @afercia
13 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.


13 months ago

#21 @afercia
7 months ago

  • Keywords title-attribute added

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


3 months ago

Note: See TracTickets for help on using tickets.