[wp-trac] [WordPress Trac] #35566: Remove title attributes: Tag cloud widget uses title to display topic count
WordPress Trac
noreply at wordpress.org
Mon Jun 13 10:13:36 UTC 2016
#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 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?
--
Ticket URL: <https://core.trac.wordpress.org/ticket/35566#comment:20>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform
More information about the wp-trac
mailing list