[wp-trac] [WordPress Trac] #35566: Remove title attributes: Tag cloud widget uses title to display topic count

[WordPress Trac]

#35566: Remove title attributes: Tag cloud widget uses title to display topic count
--------------------------+--------------------------------
 Reporter:  adamsoucie    |       Owner:  afercia
     Type:  defect (bug)  |      Status:  assigned
 Priority:  normal        |   Milestone:  Future Release
Component:  Widgets       |     Version:  trunk
 Severity:  normal        |  Resolution:
 Keywords:  has-patch     |     Focuses:  ui, accessibility
--------------------------+--------------------------------

Comment (by 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).

--
Ticket URL: <https://core.trac.wordpress.org/ticket/35566#comment:14>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform