Remove title attributes: Tag cloud widget uses title to display topic count

[adamsoucie]

Currently, the Tag Cloud widget displays the topic count for each tag by using the title attribute.

As part of @afercia and the Accessibility team's ongoing mission to remove improper uses of the title attribute, I propose removing the title attribute completely.

While this eliminates the additional count information, there is perhaps a better place to put it (if it is deemed necessary to display).

[adamsoucie]

Patch to remove title attribute completely

[adamsoucie]

Related tickets: #35374, #35191, #35111, #35050

[SergeyBiryukov]

If we're going to remove the tooltip, the topic_count_text_callback argument should probably be deprecated.

[afercia]

Replying to adamsoucie:

there is perhaps a better place to put it (if it is deemed necessary to display)

Yep, we should try to find a new way to convey the tag count info to all users. Probably in plain text wrapped in an element that theme authors can style, or using screen-reader-text or aria-label or something. Thinking this will need a bit of research and user testing.

Meanwhile, a couple of resources. Not saying we should necessarily follow these examples, but it's a start :)

IBM Accessibility
​http://www-03.ibm.com/able/news/accessibleanalyticsfull.html
(scroll down to the "Tag Clouds" section)

24 ways
​https://24ways.org/2006/marking-up-a-tag-cloud

[Samantha Miller.]

I'm currently at WordCamp London Contributor Day, and the accessibility team is looking at this ticket.

Suggestions:

• Use HTML unordered list for tag cloud with an ARIA label to explain the content. This will be translatable.
• Remove title attribute for links. This currently contains the post count (topics) for the tag. Replace with screen-reader-text. This will continue to be translatable.
• For sighted users, trigger a popup with the post count on either hover or focus. This will require CSS, which can be dequeued.
• Change the font size units to ems instead of pts.
• Allow the minimum and maximum font size to be filterable by the theme author

We are proposing to build this as a future plugin which replaces the core widget. We don’t want to break older themes that don’t support screen reader text.

[emirpprime]

We worked it up into a plugin: ​https://github.com/mikelittle/accessible-tag-cloud-widget which creates a new accessible widget.

I've attached a patch for testing that implements a slightly modified version. This always outputs the accessible version of the links, and an ugly inline style block to reduce the chance of it breaking themes (this definitely needs looking at). The defaults of the wp_tag_cloud function are not changed, however the WP_Widget_Tag_Cloud class now defaults to an accessible version.
Tested against Twenty Sixteen -> Ten and looks ok.

[rianrietveld]

Which tag cloud is better, the old one, currently in core or the new one, developed as a plugin by during WordCamp London?
We asked the test team to compare the current one ( nr 1 ) and the new plugin ( nr 2 ) and this is what they found (conclusion at the bottom of this post).

Example code for tag cloud 1 in Twenty Sixteen:
The number of topics are in the title attribute

<section id="tag_cloud-2" class="widget widget_tag_cloud">
  <h2 class="widget-title">Tag cloud number 1</h2>
  <div class="tagcloud">
     <a href="http://wpaccess.org/nightly/tag/8bit/" class="tag-link-66 tag-link-position-1" title="1 topic" style="font-size: 1em;">8BIT</a>
    <a href="http://wpaccess.org/nightly/tag/alignment-2/" class="tag-link-67 tag-link-position-2" title="3 topics" style="font-size: 1em;">alignment</a>
    <a href="http://wpaccess.org/nightly/tag/articles/" class="tag-link-68 tag-link-position-3" title="1 topic" style="font-size: 1em;">Articles</a>
  </div>
</section>

Example code for tag cloud 2 in Twenty Sixteen:
The number of topics are in a screen-reader-text class in side the link ans show on hover using CSS.

<section id="atc_tag_cloud-2" class="widget widget_atc_tag_cloud">
<h2 class="widget-title">Tag cloud number 2</h2>
<div class="tagcloud" aria-label="Tag cloud number 2">
  <ul class="wp-tag-cloud">
    <li><a href="http://wpaccess.org/trunk/src/tag/8bit/" class="tag-link-66"><span style="font-size: 1em;">8BIT</span>
<span class="screen-reader-text">1 topic</span></a></li>
    <li><a href="http://wpaccess.org/trunk/src/tag/alignment-2/" class="tag-link-67"><span style="font-size: 1.64516129032em;">alignment</span>
<span class="screen-reader-text">3 topics</span></a></li>
    <li><a href="http://wpaccess.org/trunk/src/tag/articles/" class="tag-link-68"><span style="font-size: 1em;">Articles</span>
<span class="screen-reader-text">1 topic</span></a></li>
    <li><a href="http://wpaccess.org/trunk/src/tag/aside/" class="tag-link-69"><span style="font-size: 1em;">aside</span>
<span class="screen-reader-text">1 topic</span></a></li>
    </ul>
  </div>
</section>

Michelle DeYoung (developer)
I prefer Tag Cloud 2. I think it is beneficial to have the number of list items announced as well as the number of topics for each item.
AT used: Window 7 Enterprise, FF NVDA and Window 7 Enterprise, IE11, Jaws 17

Gabriela (developer)
With Tag Cloud 1 is easier to navigate from one link to another, more direct. Tag Cloud 2 requires to access the group of items first and then navigate between the list of tags, but I love the extra info about the number of tags on the cloud and topics for each tag.
If we could have the best of the two tag clouds: easy to navigate and to offer the information about a number tags and topics it will be perfect!
AT used: Safari + VoiceOver

Shaun Everiss (screen reader user)
I prefer the tag cloud nr 2. I like to know the topics and how many posts in each and topics etc.
AT used: NVDA, Windows 7, Firefox 45.

Geof Collis (screen reader user & developer)
I like nr 1, the second is 2 verbose, I really don’t care how many topics there are, if I want it I'll click on it but if there are no tags then hopefully the tag wont show in the list.
AT used: Windows 7, JAWS 14.5, IE 11.0.96

Bart Simons (screen reader user & developer)
Second one, because it uses ul. No need to repeat the word "topic" in each link. I would put the number between brackets.

Nick Giannak (screen reader user & developer)
Nr 2, I like the fact that it shows the number of topics, and that it's in a ul tag.

Tobias Clemens Häcker (screen reader user & developer)
I prefer nr 2 because of the ul tags and the additional information about topics.
When clicking on tags usually I want some more context on a topic, so a tag that provides more results is more likely to lead to useful information.
However I agree that reading through all of the announcement of topic numbers could be tiresome. An option to sort tags by number of topics would be a helpful addition.

Sirisha Gubba (developer)
For visual users I prefer nr 1 and for AT users I don't prefer both of them. I would suggest to create a "Tag Cloud heading" and put all the tags as list.
Also when I'm using the screen reader in virtual mode it is not reading from left to right, and top to bottom. It is skipping lost of links in between.
AT used: FF on Window7, NVDA

Tina Tedesco (developer)
Tag cloud nr 2 was the once I chose.
As I arrowed down the list it first told me how many items in the list and then told me how many topics were associated with each one. This was easier to understand.
The first tag cloud confused me.
AT used: I used IE 11 and JAWS 17.

Conclusion:
There is a difference in opinion if it's a good thing to have the number of topics read out, including the word topic.
It's a lot of extra text to digest. The tag cloud in an ul seems to be an improvement, maybe we should think about how to announce the number of topics differently (shorter).

[emirpprime]

I've made some tweaks and I'm attaching a new patch. Importantly the "x topics" text is now only output when the styling options are set to vary the text size - this gives parity between the visual and screen reader information.
I have also changed "topics" to be "items" as that seemed more accurate to me as the count information is reflecting the number of items that have that tag attached - topic was a misnomer.

I would welcome suggestions on any structural changes to the code to improve accessibility, however I didn't see a clear need for changes from the testing, as it seemed to come down to assumptions and personal preferences. Perhaps more testing (if possible) would help clarify this?

[emirpprime]

New version of the patch fixing use of incorrect escaping function attached.

[emirpprime]

Thinking about this more, and reading some other tickets where afercia highlighted the increasing use of aria-label in wp-admin, I am attaching an alternative version (35566_4) that uses aria-label instead of a screen-reader-text span. This has the added benefit of reducing the amount of inline CSS required.

Thought process:

• the 'title' attribute should not be used to provide additional information (as currently in core) because that is semantically incorrect usage, imho; it should be a title or description of the destination content.
• the 'title' attribute should not be used to provide content to assistive technology for usability reasons.
• using screen-reader-text is providing another node that can be navigated which seems undesirable.
• using the 'aria-label' attribute seems to be a semantically correct way to provide an alternative label that replicates the link text but includes other information (the count) that is conveyed visually.

This creates this output:

• with visual size differences off:

  <section id="tag_cloud-2" class="widget widget_tag_cloud">
  	<h2 class="widget-title">Tags</h2>
  	<div class="tagcloud" aria-label="Tags list">
  		<style>
  			ul.wp-tag-cloud {
  				list-style: none;
  				margin: 0;
  				padding: 0;
  			}
  			ul.wp-tag-cloud li {
  				display: inline-block;
  				position: relative;
  			}
  		</style>
  		<ul class="wp-tag-cloud">
  			<li><a href="http://localhost:8888/WordPress/tag/8bit/" class="tag-cloud-link tag-link-67 tag-link-position-1">8BIT</a></li>
  			<li><a href="http://localhost:8888/WordPress/tag/alignment-2/" class="tag-cloud-link tag-link-68 tag-link-position-2">alignment</a></li>
  			<li><a href="http://localhost:8888/WordPress/tag/articles/" class="tag-cloud-link tag-link-69 tag-link-position-3">Articles</a></li>
  			<li><a href="http://localhost:8888/WordPress/tag/aside/" class="tag-cloud-link tag-link-70 tag-link-position-4">aside</a></li>
  			<li><a href="http://localhost:8888/WordPress/tag/audio/" class="tag-cloud-link tag-link-71 tag-link-position-5">audio</a></li>
  			<li><a href="http://localhost:8888/WordPress/tag/captions-2/" class="tag-cloud-link tag-link-72 tag-link-position-6">captions</a></li>
  		</ul>
  	</div>
  </section>
  

• With visual size differences turned on:

  <section id="tag_cloud-2" class="widget widget_tag_cloud">
  	<h2 class="widget-title">Tags</h2>
  	<div class="tagcloud" aria-label="Tags list">
  		<style>
  			ul.wp-tag-cloud {
  				list-style: none;
  				margin: 0;
  				padding: 0;
  			}
  			ul.wp-tag-cloud li {
  				display: inline-block;
  				position: relative;
  			}
  		</style>
  		<ul class="wp-tag-cloud">
  			<li><a href="http://localhost:8888/WordPress/tag/8bit/" class="tag-cloud-link tag-link-67 tag-link-position-1" aria-label="8BIT (1 item)" style="font-size: 1em;">8BIT</a></li>
  			<li><a href="http://localhost:8888/WordPress/tag/alignment-2/" class="tag-cloud-link tag-link-68 tag-link-position-2" aria-label="alignment (3 items)" style="font-size: 1.64516129032em;">alignment</a></li>
  			<li><a href="http://localhost:8888/WordPress/tag/articles/" class="tag-cloud-link tag-link-69 tag-link-position-3" aria-label="Articles (1 item)" style="font-size: 1em;">Articles</a></li>
  			<li><a href="http://localhost:8888/WordPress/tag/aside/" class="tag-cloud-link tag-link-70 tag-link-position-4" aria-label="aside (1 item)" style="font-size: 1em;">aside</a></li>
  			<li><a href="http://localhost:8888/WordPress/tag/audio/" class="tag-cloud-link tag-link-71 tag-link-position-5" aria-label="audio (1 item)" style="font-size: 1em;">audio</a></li>
  			<li><a href="http://localhost:8888/WordPress/tag/captions-2/" class="tag-cloud-link tag-link-72 tag-link-position-6" aria-label="captions (2 items)" style="font-size: 1.38709677419em;">captions</a></li>
  		</ul>
  	</div>
  </section>
  

• another alternative not currently in a patch is dropping the word "items" all together as suggested by some test subjects would produce:

  <section id="tag_cloud-2" class="widget widget_tag_cloud">
  	<h2 class="widget-title">Tags</h2>
  	<div class="tagcloud" aria-label="Tags list">
  		<style>
  			ul.wp-tag-cloud {
  				list-style: none;
  				margin: 0;
  				padding: 0;
  			}
  			ul.wp-tag-cloud li {
  				display: inline-block;
  				position: relative;
  			}
  		</style>
  		<ul class="wp-tag-cloud">
  			<li><a href="http://localhost:8888/WordPress/tag/8bit/" class="tag-cloud-link tag-link-67 tag-link-position-1" aria-label="8BIT (1)" style="font-size: 1em;">8BIT</a></li>
  			<li><a href="http://localhost:8888/WordPress/tag/alignment-2/" class="tag-cloud-link tag-link-68 tag-link-position-2" aria-label="alignment (3)" style="font-size: 1.64516129032em;">alignment</a></li>
  			<li><a href="http://localhost:8888/WordPress/tag/articles/" class="tag-cloud-link tag-link-69 tag-link-position-3" aria-label="Articles (1)" style="font-size: 1em;">Articles</a></li>
  			<li><a href="http://localhost:8888/WordPress/tag/aside/" class="tag-cloud-link tag-link-70 tag-link-position-4" aria-label="aside (1)" style="font-size: 1em;">aside</a></li>
  			<li><a href="http://localhost:8888/WordPress/tag/audio/" class="tag-cloud-link tag-link-71 tag-link-position-5" aria-label="audio (1)" style="font-size: 1em;">audio</a></li>
  			<li><a href="http://localhost:8888/WordPress/tag/captions-2/" class="tag-cloud-link tag-link-72 tag-link-position-6" aria-label="captions (2)" style="font-size: 1.38709677419em;">captions</a></li>
  		</ul>
  	</div>
  </section>
  

This last variant in particular may need careful testing with (as far as possible) "average" users. I wonder if having the extra context of saying "xxx 3 items", at the expense of too much verbosity for some users, is better as it might address the needs of a wider group of users?

[GrahamArmfield]

Replying to emirpprime:
Definitely favour the inclusion of the word items (or suitable equivalent) to provide context for the numbers.

[MikeLittle]

The standalone github version now includes the latest patch 35566_4 ​https://github.com/mikelittle/accessible-tag-cloud-widget/commit/afbfccb8f3d74e91bf48e790ce4de526beb166fc

Also added is the ability to filter out the inclusion of the front side CSS file.

[afercia]

This ticket is in ​today's dev meeting agenda, anyone interested welcome!

To quickly recap: both the attached patch and the standalone plugin on GitHub would need some refresh but before moving on I'd say the dev chat is a perfect opportunity to discuss a bit the best path forward, backwards compatibility, etc. There are basically two proposals, both remove the title attribute and:

1
Uses a screen-reader-text (or aria-label) to add a "formatted count" string and uses that to display a tooltip on hover and focus (this is on the GH version before the last commit). Screenshot:

This option would be accessible since the text (or aria-label) are always announced. Some additional CSS for the frontend is required, but we could provide a filter for that.

2
Same, but without generating any tooltip :)

[afercia]

The new patch proposes a new approach based on some of the points discussed in the Slack conversation linked above and the work done by @emirpprime, @MikeLittle, and @adamsoucie, trying to get the best of both worlds.
By default, there are no visual changes other then the removal of the title attribute.

• removes the title attribute
• no additional CSS required
• no screen-reader-text required, so it doesn't introduce visual changes in old themes that don't support the screen-reader-text CSS class
• adds an option in the widget to display the counts, consistently with what other widgets already do (Archives, Categories), see screenshots below
• uses an aria-label attribute to match the information conveyed visually with the one exposed to assistive technologies
• changes the strings '%s topic', '%s topics' to '%s item', '%s items': the tag cloud can be used for any taxonomy not just Tags so "topic" isn't appropriate
• forces role="list" on the tags list, see inline comment
• adds a couple of CSS classes to make styling easier
• topic_count_text and topic_count_text_callback still work and they're used for the aria-label $formatted_count string

Things to consider:

Maybe build the strings and escape at a later stage.

Ideally, the tag cloud should be an unordered list <ul> but I think we shouldn't force the list format as in the previous patches; that would require to print out some inline stylesheet (I guess there's consensus that it should be avoided). Also, the tag cloud is used in several places, for example in the tags meta box and in Press This. A better option would be passing the format argument on a case by case basis instead of forcing the list format by default.
I'd say this should be definitely done for the tag meta box and Press This. I'd recommend that also the bundled themes should use the list format to show best practices to theme authors. These issues should be addressed in new, separate, tickets.

Maybe add an option to sort tags by number of items. There are already the orderby (name, count, and the tag_cloud_sort filter) and the order (ASC, DESC, and RAND) arguments for that. To discuss: whether this should be a front-end control, or a new option in the widget settings, or both.

Screenshots:

The new option in the Widget settings:

Twenty Seventeen: Tag Cloud, Archives, and Categories displaying the counts

Twenty Sixteen: Tag Cloud with same font-size tags and styled counts

Twenty Eleven: Tag Cloud with different font-size tags and styled counts

Aria label in action

Worth noting the counts in other widgets would need some a11y improvements:

[afercia]

35566.tests.diff​ tries to adjust the related tests.

[afercia]

Worth noting while Twenty Sixteen filters the Tag Cloud widget arguments to make the tags font size be the same:

function twentysixteen_widget_tag_cloud_args( $args ) {
	$args['largest'] = 1;
	$args['smallest'] = 1;
	$args['unit'] = 'em';
	return $args;
}
add_filter( 'widget_tag_cloud_args', 'twentysixteen_widget_tag_cloud_args' );

and based on the fact the smallest and largest arguments are the same, the aria-label attribute is not printed out, Twenty Seventeen instead just overrides the inline styles with an !important set on the font-size declaration thus making impossible to implement the same logic.

[afercia]

Related: #40138

[sami.keijonen]

I tested the latest patch and I like the approach.

and based on the fact the smallest and largest arguments are the same, the aria-label attribute is not printed out, Twenty Seventeen instead just overrides the inline styles with an !important set on the font-size declaration thus making impossible to implement the same logic.

@afercia: I'm trying to read this but don't fully understand it and I'm not sure is Twenty16 or Twenty17 doing it right:).

I take Twenty16 as an example. Are you suggesting that we add $args['format'] = 'list' like this:

function twentysixteen_widget_tag_cloud_args( $args ) {
	$args['largest']  = 1;
	$args['smallest'] = 1;
	$args['unit']     = 'em';
	$args['format']   = 'list';
	return $args;
}
add_filter( 'widget_tag_cloud_args', 'twentysixteen_widget_tag_cloud_args' );

And then small tweaks to CSS like this:

/* Tag Cloud widget */
.tagcloud ul {
	list-style: none;
	margin: 0;
}

.tagcloud li {
	display: inline-block;
}

.tagcloud a {
	border: 1px solid #d1d1d1;
	border-radius: 2px;
	display: block;
	font-family: Montserrat, "Helvetica Neue", sans-serif;
	line-height: 1;
	padding: 0.5625em 0.4375em 0.5em;
	margin: 0 0.1875em 0.4375em 0;
}

That does print out aria-label="alignment (3 items)" for example.

[afercia]

@sami.keijonen yes in Twenty Sixteen that should work: the aria-label shouldn't be printed out when the checkbox in the widget options isn't checked. Instead, Twenty Seventeen takes a different approach, overriding the inline styles with !important... so I'm not sure what can be done there.
One option could be adding a new checkbox to let users decide if they want the tags displayed with different sizes or not, but I guess this would require even more CSS adjustments in the themes to avoid layout breakage.

[sami.keijonen]

Got it! I'll comment in ticket #40138.

[adamsilverstein]

This worked well in my testing.

Here is the markup I see using tewntyfifteen.

Before:

After:

[westonruter]

Combining the two previous patches into one

[westonruter]

Add some trailing commas to arrays

[westonruter]

Use boolean for $show_count; clean up whitespace indentation

[afercia]

In 40816:

Widgets: Remove the title attributes used in the Tag cloud widget.

• improves accessibility using an aria-label attribute to match the information conveyed visually with the one exposed to assistive technologies
• adds an option in the widget to display the item counts, consistently with what other widgets already do (Archives, Categories)

Props adamsoucie, emirpprime, Samantha Miller., MikeLittle, rianrietveld, sami.keijonen, adamsilverstein, westonruter, afercia.
See #24766.
Fixes #35566.