Accessible WordPress Tag Cloud
April 12, 2009 – 15:45 by Dani Iswara. Words count: 453.Last updated: Wednesday, April 22, 2009 at 0:58.
Tags cloud on WordPress blogs is one of a well known format of navigation. In some cases, they are not accessible nor semantics.
See this sample of 50 popular tags on my blog (available on Categories and Popular Tags page):
aksesibilitas belajar seo blog blog dokter conference css desain design distro doctor dokter elearning foss health honcode indonesia information kebergunaan kedokteran kesehatan lomba medical medical informatic medicine 2.0 online oss week pemula peramban physician plos plugin rekomendasi semantic standar standar web telemedicine tips tools trust ubiquitous usable validator validome valid xhtml w3c web webagogo website xhtml yogyakarta
Actually, tags are a bunch of links. Depends on the markup, screen readers may read those links as usual words in paragraphs without a break.
What is tags?
Refer to Technorati (tags):
Think of a tag as a simple category name. People can categorize their posts, photos and videos with any tag that makes sense.
According to Microformats – Wiki (rel="tag"):
Rel-Tag is one of several MicroFormats. By adding
rel="tag"to a hyperlink, a page indicates that the destination of that hyperlink is an author-designated “tag” (or keyword/subject) for the current page. Note that a tag may just refer to a major portion of the current page (i.e. a blog post).
In my simple words, in WordPress, tags are keywords, we could find that words in a post and other posts which has the same tags/tagging with the same rel="tag".
Your tag cloud structure
If you already have a tag cloud on your blog, then view your source code.
You may see something like these structures:
- Default, not accessible (it needs non-link or printable characters (surrounded by spaces) between adjacent links), fixed font size
<a href='http://daniiswara.net/tag/aksesibilitas/' class='tag-link-232' title='14 topics' rel="tag" style='font-size: 13px;'>aksesibilitas</a> <a href='http://daniiswara.net/tag/belajar-seo/' class='tag-link-292' title='3 topics' rel="tag" style='font-size: 13px;'>belajar-seo</a> ... - Inside
<div>, fixed font size, less semantics<div><a href='http://daniiswara.net/tag/aksesibilitas/' class='tag-link-232' title='14 topics' rel="tag" style='font-size: 13px;'>aksesibilitas</a> <a href='http://daniiswara.net/tag/belajar-seo/' class='tag-link-292' title='3 topics' rel="tag" style='font-size: 13px;'>belajar seo</a> ... </div> - List style, more accessible, relative font size, styling with the help of Cascading Style Sheets (CSS), but still less semantics because of inline styling
<ul class='wp-tag-cloud'> <li><a href='http://daniiswara.net/tag/aksesibilitas/' class='tag-link-232' title='14 topics' rel="tag" style='font-size: 1.3606557377em;'>aksesibilitas</a></li> <li><a href='http://daniiswara.net/tag/belajar-seo/' class='tag-link-292' title='3 topics' rel="tag" style='font-size: 1em;'>belajar seo</a></li> ... </ul>
For the number 3, here is the source code in PHP (PHP: Hypertext Preprocessor):
<?php if ( function_exists('wp_tag_cloud') ) : ?>
<?php wp_tag_cloud('smallest=1&largest=3&unit=em&number=50&format=list'); ?>
<?php endif; ?>Read another option on Template tags/wp tag cloud (WordPress Codex).
CSS styling to hide listing type:
ul .wp-tag-cloud {list-style:none}
.wp-tag-cloud li {display:inline; line-height:2.2em}The main idea of this accessibility post is based on Marking Up a Tag Cloud (by Mark Norman Francis–one of semantics evangelist).
Do you have another rules? 
How to make smallest-largest fonts without inline CSS styling? How to insert semantics classes for the font sizes without plugins?
Comment by Cahya on April 20, 2009 at 23:07:19
using Mozilla Firefox 3.0.8 on Windows Vista
Hmm…, tag cloud sepertinya memberi pembaca kemudahan mencari topik-topik yang dia inginkan di sebuah halaman yang memiliki banyak topik.
Namun jujur saya, saya sendiri jarang sekali menggunakan deretan tag cloud pada sebuah blog yang saya kunjungi, kecuali itu menarik. Jadi jujur saya sering kali mempertanyakan keefektifan “pernik” yang satu ini.
Dalam hal ini, biasanya blog dikunjungi melalui pencarian di mesin pencari seperti Google atau Yahoo!Search, sehingga ia akan menuju sebuah judul artikel yang spesifik, setelah berkunjung, jarang ada orang yang melihat deretan topik-topik lain, Dan saya sangat jarang mendapati sebuah mesin pencari menampilkan link menuju sebuah topik pada sebuah blog atau halaman situs jaringan.
He he…, tapi buat hiasan kadang bagus juga (beginilah pendapat seorang pengguna blognimbus), apakah “tag” ini sesungguhnya dan manfaatnya?
Comment by Dani Iswara on April 21, 2009 at 00:41:18
using Mozilla Firefox 3.0.8 on Gentoo Linux
Cahya,
post updated..
Makasi komentarnya.
Ya sbg navigasi bantuan.
Tag lbh luas (internal dan eksternal) efeknya dibanding kategori, kecuali kategori diatur berfungsi sbg tag atau memiliki
rel="tag".Di WordPress, tag bisa dikonversi sbg kategori, dan sebaliknya. Tapi IMO, kurang aksesibel jika tag dan kategori memiliki anchor text/nama yg sama. Kalo ngga salah, slug/URI yg sama jg dianggap ber-tag/kategori yg sama, jika konversi di atas dilakukan..cmiiw
Saya pernah menulis ttg simulasi datang dari mesin pencari Internet.
Ada jg bbrp blogger yg mengatur via robots.txt agar halaman tags (termasuk halaman komentar, kategori) terindeks di mesin pencari Internet utk meningkatkan paparan pengunjung (trafik, visibility, findability, searchability, dkk-nya).
Lainnya berpendapat itu memicu duplikasi konten (debatable). Satu konten terbaca di lbh dari 1 URI (mis. URI post asli, URI tags, URI kategori, URI #comments, URI situs copy paste, URI agregator, URI situs bookmarking, dll).
Tapi algoritma mesin pencari Internet katanya sudah mampu mendeteksi mana konten asli, mana bayangannya.
Tag sbg metadata sebenarnya berpotensi utk membantu penelitian/penelusuran antar situs web/blog. Tinggal menelusuri tags/keywords yg sesuai utk mencari topik serupa di Internet. Jika kategori yg bukan sbg tags/kata kunci, maka kategori di situs yg satu dan lainnya mungkin isinya tdk berkaitan.
D*mn jd bikin sub-blog..
Comment by Glenda Watson Hyatt on April 23, 2009 at 00:33:57
using Mozilla Firefox 3.0.8 on Windows XP
Excellent tips! I hadn’t considered the inaccessibility of tag clouds prior to reading your post. My blog is still cloudless.
Another feature that would benefit those using screen readers and those relying on the keyboard only is a link to jump over the cloud to save tabbing through all of those links.
Comment by Dani Iswara on April 23, 2009 at 01:03:45
using Mozilla Firefox 3.0.8 on Gentoo Linux
Glenda Watson Hyatt,
Thanks, Glenda. Your idea is also sounds interesting.
Due to space of my web page–compact-minimalist, I’ll suggest visitors to use search form or jump into my Categories & Tags page. Until I can make the tags cloud more semantics and customizable for this blog design.
Comment by Glenda Watson Hyatt on April 23, 2009 at 03:46:05
using Mozilla Firefox 3.0.8 on Windows XP
Dani, I like how you have your tag cloud on a separate page rather than on the sidebar. Its there for those who want it, but it isn’t cluttering your space.
Comment by Dani Iswara on April 23, 2009 at 08:59:57
using Mozilla Firefox 3.0.8 on Gentoo Linux
Glenda Watson Hyatt,
Only displayed top 50 now.
As long as it is usable and accessible for visitors. Actually, my tags are over 200 keywords (tags) now.
Comment by thegands on April 23, 2009 at 21:24:30
using Google Chrome 1.0.154.53 on Windows XP
i still don’t get the main idea. i know i understand a little bit. i’m kinda drowse. i’ll read tommorrow.. hehehehe…
Comment by Dani Iswara on April 23, 2009 at 22:57:22
using Opera 9.64 on GNU/Linux
thegands,
which one, bang?
FYI, it is based on WCAG 1.0,
but it will passes Section 508 and WCAG 2.0 checker.
Comment by thegands on April 24, 2009 at 08:43:53
using Mozilla Firefox 3.0.8 on Windows XP
no. i’m just kinda drowse yesterday night. I very2 sleepy… hehehehe… later i read this back… i have some program to do…
Comment by thegands on April 24, 2009 at 08:45:22
using Mozilla Firefox 3.0.8 on Windows XP
hahaha…. after i read back my prev comments, i’m just aware that my grammar very2 suck!! “I very2 sleepy” hahaha.. its kinda sucking grammar.. sorry…
Comment by Dani Iswara on April 24, 2009 at 10:32:04
using Mozilla Firefox 3.0.8 on Gentoo Linux
thegands,
no matter, bang, it’s still accessible, readable, and understandable to me
Comment by uwiuw on May 2, 2009 at 19:04:58
using Mozilla Firefox 2.0.0.1 on Windows XP
wah, dan, sy baru nyadar….ini yah kelemahan navigasi via tag. bad wp
Comment by Dani Iswara on May 2, 2009 at 19:27:47
using Mozilla Firefox 3.0.10 on Gentoo Linux
uwiuw,
tapi kalo aural agent/voice browser-nya canggih, bisa ngenalin
rel="tag", mungkin ngga masalah..spt jg WCAG 2.0 membolehkannya..cmiiwComment by uwiuw on May 2, 2009 at 19:59:53
using Mozilla Firefox 2.0.0.1 on Windows XP
sy sih ngak masalah ama aural agent hehehe bukannya rasis sama yg kurang panca indera. Sy lebih tertarik bagaimana reaksi bot. Setau saya sih kalau kita pake rel=”tag” maka bot paham kalau ini tuh internal link dan langsung mengindex. Apalagi bot dari situs tagging kayak technorati dan tagger
menurut statistik traffik mereka sekarang yg paling sibuk hilir mudik di blog saya hahahaha walau ngak ngasih taffik sih, minimalnya tau kalau web standar itu ada gunanya dan ngak sepenuhnya fancy fancy
.
Comment by Dani Iswara on May 2, 2009 at 23:04:58
using Mozilla Firefox 3.0.10 on Gentoo Linux
uwiuw,
namanya juga best practice..kalo menurut para master itu bagus, ya mungkin memang recommended,…tapi tidak terkait langsung dengan trafik, SEO, make money online, etc