Filed in wordpress hack, wordpress trick
With 36 Comments
Create Accessible And Usable Comment Reply Link
Based on what I’ve written about How To Make A Reply Link To Comment(s) Without Plugin is not fully accessible or usable. My friend who is a physician Dani Iswara, has commented that post. He said that the reply link is not accessible, because its only provide a “reply” word as the screen text.
Like Dani said, its better to changes the reply word to more usable. Like “Reply to [author]’s comment. But I’ll add more details like “on [comment-date]” because a visitor can comment to a post more than once.
First, see my previous bad code on my previous post.
Here is the bad code.
<a href="javascript:void(0)" onclick="javascript:reply('<?php echo comment_id()?>','<?php comment_author()?>')">Reply</a>
As you see on the code above, the anchor tag is less of information, like the reply link is replying to whose comment. Also this is a bad approach to screen reader. Consider we should avoid the javascript:void(0) also.
Then, here is the solution.
- Solution 1 : This would make a Reply link with a title like “Reply to jef’s comment on 5 June, 2009, 17:44″
<a href="#" onclick="javascript:reply('<?php echo comment_id()?>','<?php comment_author()?>'); return false;" title="Reply to <?comment_author()?>'s comment on <?comment_date('j F, Y, G:i'); ?>">Reply</a></div>
- Solution 2 : This would make your anchor text very long.
<a href="#" onclick="javascript:reply('<?php echo comment_id()?>','<?php comment_author()?>'); return false;" >Reply <?comment_author()?>'s comment on <?comment_date('j F, Y, G:i'); ?></a></div>
- Solution 3 : This would make your anchor text link become “Reply author’s comment”. “Reply” text is needed to reply the comment and “author’s comment” made reference to which comment need to be replied.
<a href="#" onclick="javascript:reply('<?php echo comment_id()?>','<?php comment_author()?>'); return false;" title="Reply to <?comment_author()?>'s comment on <?comment_date('j F, Y, G:i'); ?>">Reply</a><a href="#<?php comment_ID() ?>"> <?comment_author()?>'s comment </a>
You should not make an nested anchor, based on this example. Here is the bad example.
<a href="#" onclick="javascript:reply('<?php echo comment_id()?>','<?php comment_author()?>'); return false;" title="Reply to <?comment_author()?>'s comment on <?comment_date('j F, Y, G:i'); ?>">Reply<a href="#<?php comment_ID() ?>"> <?comment_author()?>'s comment</a></a>
That bad code above would not make your author’s comment text referenced to current comment.
36 Comments so far
wow menarik jg nih bang gands…..
pertamax :super_man: :super_man:
bang gands linknya udh ada kok di blogku titlenya ” Bang Ganda Manurung”
Ga lht kale ada di sidebar kok :exciting:
in the last two weeks, I have some great experiences. Accidentally — yes, it’s true, I didn’t see any pingbacks or google alerts from others — I visited my friend’s web pages randomly. by directly typing its urls on my browser. And they mentioned my name there. Thanks. Just like here.
Thanks, bro. The solution no. 2 is my choice. Theoretically correct, I think. It would pass WCAG 1.0 checker.
I would give it a try later.
the lack of the solution no.1 (using more descriptive title) i.e.:
1) not all screen reader softwares are able to read the title attributes.
2) if they can, not all screen reader users turn it (feature/option to be able to read the title attributes) on.
3) the title attribute is mouse oriented only.
so the title attribute is not fully accessible and usable.
Nyoba ah ..
salam Kenal ..
Wow..greats gands… Scripnya kyak campuran html and js ,lanjut gands.
wah keren neh bro, mo di implementasikan ah. :red_heart:
Seep, tak simpan dulu bro
:grimace:
Oooo ini cara buat “reply” yang baru ya mas.. ckckckckckck.. mas memang hebat masalah beginian.. :super_man: :super_man: :super_man:
:greedy: :greedy: :greedy: :greedy: Wach makasih nich sharingnya………..
Weeeeeeeeee JavaScript,,,,,keren euy………..
@dani : You’re absolutely right doc. I’ve read about screen reader ability to read title tag in a mailing list(I forget which one). And this topic still a controversion to web developers. But they say, may be next time a new screen reader has ability to read title tag without to set it in options window.
@paman gober : Semoga berguna buat mu bro.
Wordpress baru memang sudah support ini, tapi jarang pembuat themes yang menggunakannya…
Kerenbro…
Nice tip.
Btw, I have a request. Can you write a tutorial for i) highlighting a comment if it is from author else ii)using alternate background colours for comment.
I can find tutorials for doing this seperately, but nothing for implementing both simultaneously.
. waaaa……
. lha kok Q pake’ blogspot . . .
. gak bisa donk . . . .
. numpang baca aja deh . . . :unhappy:
sip neh… keren keren…
Masih bingung implementasinya bos, masih puyeng.. heheheh maklum nubie yang ginian :haha:
@thegands:
even modern screen readers may be able to read title attribute (or element; not tag), title attribute is still an additional feature, only for the extra information, so it’s called the text alternative. do not put an important information on it. :girl:
wow..keren trikna..coba ya..
coba trikna ya…. :super_man: :super_man: :super_man:
wah keren… terapkan langsung!
Once again, I didn’t understand what you and dani ‘re talking about. I still confused about web accessibility, or whatever the hell name was.. :haha:
BTW I’m wondering what you explain above. Why didn’t you change this template to be threaded comment? You do not need to get rid your default template, Just do a little change on comment.php. There’s tons of blog that explain the tips. :grimace:
@rismaka:
di satu sisi, saya lebih setuju format reply seperti ini, alasannya: list comment akan menjadi lebih logis jika css di-disable. sangat berpeluang untuk menjadi lebih aksesibel.
tapi sedikit kekurangannya, terkesan direct discussion kurang mengena jika dibandingkan dengan threaded comment, padahal jika diklik link @[name], akan jelas nampak komen mana yang dibalas. :exciting:
tapi tetep aja, kalo mau strict gila, @[name] juga bisa dipertanyakan seperti yang terjadi pada kata “reply” dan “read more”, karena itu berarti pengulangan anchor text yang sama tapi menuju ke lokasi (url) berbeda. dan itu kurang aksesibel. :secret_smile:
@ardi : iya. saya tahunya dari BOB juga.
@pallab : sure pallab. I’ll send a trackback to you when i’m finish write the tutorial.
@nadia : Bisa di gunakan untuk blogspot kok. Tapi saya tidak ahli blogspot. namun intinya sama saja.
@seputar info : hehehe… biasa aja lah bro. jangan di ambil pusing. saya juga pusing kok membacanya.
@dani :yeah. but i prever using a simple screen text rather than long screen text. Base on modern screen reader able to read it, i think its acceptable. heheheh… furthermore, I see the sitepoint using title attribute also short text information.
@rismaka : hahaha.. i also still confuse at the beginning. but I anxious about that “accessibility” term. Thats why i read so much information about accessibility in the first place. This make my busy day becomes more busy.
Yeah, I know. I just wanna get rid this theme and changes to my current reconstructing theme. wait for it. I’ll use threaded comment, and fixing bug my blacy smilies plugin.
@dani : untuk diskusinya tentang thread menyulitkan visitor harus menscroll ke bawah untuk melihat tanggapan berikutnya. Hahahahaha… apakah harus gila2an pak? *saya sendiri sudah cukup gila dengan strictnya standar w3*
Thanks a lot. Waiting for your tut
kira2 ganti ga ya bang…? :the_iron_man:
wiiidiih.. ini yang aku cari di google dari kemaren2..
makasih bro.. :big_smile:
Hi, interest post. I’ll write you later about few questions!
@Pallab:
Sure pallab.
@arikaka:
terserah kamu. gak ada paksaan kok. :grimace:
@Akmal Online:
You’re welcome..
Thanks much for article. It’s very imformative stuff.
I love to browse gandamanurung.com.
teeth whitening walnut creek
@thegands:
So, let it flow aja deh. Tambah pusing klo harus mikir yg perfectnya gimana :haha:
@rismaka : hanya best practices aja bro
Great post!
Nah lho…saya mau ngomong apa ? pakar yang bicara, pengguna yang bahagia….he…he…
@aldy : aku juga bahagia. hahahaha
(…) though unrelated to my web site, still gandamanurung.com is one relavant source on this issue(…)