Saturday, August 16, 2014

The Anchor Button: Bad for Accessibility, Bad for Usability

<a href="#">I'm a button, click me</a> — this is the anchor button. Designers and developers have been creating buttons interchangeably with the <div>, <span>, and <a> elements instead of button and input. Who cares—on the surface things look great, right? Well, the easy answer is, wrong—incorrectly using HTML elements is a bad thing, and usually creates additional work to then add the expected default behaviors of the correct elements.

I'll first explain what the spec says about these elements and then I'll explain why following it is important and easy—the HTML 5 specification is actually not that difficult to understand, especially regarding these elements.

The DIV and SPAN

You've probably seen HTML markup that looks like a sea of <div> elements. Here's what the spec says about the <div>:
…The <div> element has no special meaning at all…authors are strongly encouraged to view the <div> element as an element of last resort…use of more appropriate elements…leads to better accessibility for readers and easier maintainability for authors.
The <span> element should be treated with similar consideration:
The <span> element doesn't mean anything on its own…

The Anchor

It's not uncommon to see anchors used like this <a href="#">I'm a button, click me<a/> with some corresponding javascript that will get triggered when the link is clicked. According to the specification, the <a> element should be used as follows:
If the <a> element has no href attribute, then the element represents a placeholder...if [it] has an href attribute, then it represents a hyperlink...[hyperlinks] are links to other resources...

Bad Semantics is Bad for Accessibility and Usability

Buttons and anchors have expected behaviors and states. When you use the wrong elements, these will not be present unless additional work is done to add them.
tab order
<div> and <span> elements are NOT by default in the tab order; button and input are. <a> elements without an href attribute are also NOT in the tab order. Elements typically not in the tab order can be added by setting the tabindex attribute to 0 on that element.
hover and focus states
<div> and <span> elements do NOT by default have a hover and focus state (note: some browsers do provide a default focus state for all elements); button and input do. You can add these states via CSS using :focus and :hover.
click and keypress
Unlike button and input elements, <div> and <span> do NOT by default trigger the associated click event on keypress of both the ENTER and SPACE keys. Additional work will also be required for an <a> element to trigger the click event on keypress of the SPACE key.
assistive technologies
Buttons—or anything else–marked up with a <div> or <span> appear only as plain text to assistive technologies. Also, while <a> elements are treated uniquely, it's common to identify all links on a page using assistive technologies to more easily navigate throughout a site. Therefore, it might be strange having those intended to be used as a button to be mixed up with the other actual links. Any element intended to be a button not marked up using button or input can have the ARIA role attribute set to button—keep in mind, though, all the behaviors/states above still need to be implemented.
Check out this Pen on CodePen to further understand the behaviors/states above. I've also created the a11yButton jQuery plugin that will add the behaviors above to non-button elements.

If it Looks Like a Duck and Quacks Like a Duck...

The simplest rule of thumb is to just use the right HTML elements for the content. Realistically, this is not possible 100% of the time—just remember, when using the wrong elements keep in mind there are behaviors and states that may be expected that will need to be accounted for.

73 comments :

  1. Some remarks:
    * "click and keypress": The fact that pressing space does not trigger a link has nothing to do with the contents of its href attribute. AFAIK, no browser reacts to space when a link is focused but rather just scrolls the page.
    * "hover and focus states": Most browsers just define "global" :focus styles (see http://meiert.com/en/blog/20070922/user-agent-style-sheets/, e.g.). And since they are global, any element receiving focus will be styled accordingly. So there is no need defining :focus styles for divs or spans but rather a need to make those elements focusable in the first place (if they are misused as button elements).

    IMHO, your title is a bit misleading. While a button ist often a better choice than a link with a href value of "#", the accessibility of the latter is not decisively impaired (in total contrast to using spans or divs). http://www.karlgroves.com/2013/05/14/links-are-not-buttons-neither-are-divs-and-spans/ gives a good overview of the topic.

    ReplyDelete
    Replies
    1. Thomas, thanks for these points and the great article from Karl Groves. I'll make clarifications to your points today.

      Delete
  2. There are many jquery plugin development there, some great some not as great. It appears that most plugins are 95% finished and only somewhat additional exertion would take them from great to awesome. Through the composition and investigation of numerous plugins I have assembled a layout that serves to manufacture plugins as well as to keep up and upgrade them too.

    ReplyDelete
  3. Thanks for the informative article. This is one of the best resources I have found in quite some time. Nicely written and great info. I really cannot thank you enough for sharing.helpful hints school signs uk

    ReplyDelete
  4. I am Alecia,from what I can read. It has been sad news and scam to everyone about Voodoo casters or so. But to me they are so real cause one worked for me not quite long ago.i met this man on a blog his name is Dr Abalaka is a very powerful man.I traveled down to where his shrine his and we both did the ritual and sacrifice.he had no website yet but he promised to create one as costumers are requesting for it, and now i'm free from the powders of sickness.I don't know about you but Voodoo is real;love marriage,finance, job promotion ,lottery Voodoo,poker voodoo,golf Voodoo,Law & Court case Spells,money voodoo,weigh loss voodoo,diabetic voodoo,hypertensive voodoo,high cholesterol voodoo,Trouble in marriage,Barrenness(need a child),Luck, Money Spells,he also cure any cancer and HIV,it's all he does. I used my money to purchase everything he used he never collected a dime from. He told me I can repay him anytime with anything from my heart. Now I don't know how to do that. If you can help or you need his help write him on (dr.abalaka@outlook.com) and also his cell number: 760-935-3804 you can text him because he use to be very busy some times,i believe that your story will change for better,or if you have any question you can contact me here as 1001madonado@gmail.com best of luck.

    ReplyDelete
  5. Your blog has given me that thing which I never expect to get from all over the websites. Nice post guys!


    Web Designer

    ReplyDelete
  6. love the article that you make really very inspiring terimakasjh for this
    sinidomino

    ReplyDelete
  7. REALLY GOOD! i like it so much<3 Thanks for the Good Artickle Sir.
    poker online terbaik

    ReplyDelete
  8. teresting content of this article give inspiration thanks : Togel online Singapura

    ReplyDelete
  9. very interesting content of this article give inspiration thanks : bandar judi poker online yang paling aman

    ReplyDelete
  10. I was very impressed by this post, this site has always been pleasant news. Thank you very much for such an interesting post. Keep working, great job! In my free time, I like play game
    Bandar togel Hongkong


    I was very impressed by this post, this site has always been pleasant news. Thank you very much for such an interesting post. Keep working, great job! In my free time, I like play game
    Bandar togel Hongkong








    ReplyDelete

  11. want to read this interesting article for this month immediately click my article and get a great experience after reading my article on:
    poker online

    ReplyDelete
  12. melindatan22454@gmail.com

    ReplyDelete
  13. interesting articles and this is my first first reading a very interesting article thanks for this article that fits with the theme news.
    raja poker

    ReplyDelete

  14. your article is really good, visit also my article in: judi poker

    ReplyDelete
  15. amazing content of this article inspiring many thanks
    judi poker online terbesar

    ReplyDelete
  16. interesting articles and this is my first first reading a very interesting article thanks for this article that fits with the theme news.
    aladinqq

    ReplyDelete
  17. very interesting and I really like your article thanks for this very interesting thought hopefully the future will be great :)
    bandar judi online

    ReplyDelete
  18. Situs Agen PokerOnline Yg Banyak Bonus
    Kami Sedang Menyediakan Bonus"Yang Tidak
    poker88

    ReplyDelete

  19. is very fond of this article because it gives a lot of inspiration thanks judi poker

    ReplyDelete
  20. This comment has been removed by the author.

    ReplyDelete
  21. Disini Tempatnya Para Pemain Poker Beraksi!!
    Bonus Deposit Ada Setiap Harinya Ayo Buruan!!
    dewa poker

    ReplyDelete
  22. AGEN DOMINOQQ BADOQQ MEMBERIKAN BONUS MELIMPAH UNTUK SEMUA MEMBERNYA
    Bonus cashback dari BadoQQ adalah sebesar 0,3% - 0,5% yang di bagikan seminggu sekali pada hari kami. Selain bonus cashback, Agen DominoQQ BadoQQ juga memberikan bonus referral untuk member yang mengajak teman bermain di BadoQQ sebesar 15%. Segera ajak teman anda untuk bergabung dengan BadoQQ dan dapatkan bonusnya. Bonus referral yang didapat bisa dimainakan dan di withdraw.

    www.badoqq.org

    ReplyDelete
  23. After I read and try to understand this article and finally amazing.
    we are all grateful for the existence of this article can add even more insight for us all
    thank you
    sbobet<br

    ReplyDelete
  24. Situs Judi Online Berbonus Extra Banyak??
    (www.badoqq.org)

    ReplyDelete
  25. Cari Agen PokerOnline Banyak Bonusnya??
    (www.badoqq.org)

    ReplyDelete
  26. articles that are very interesting to read and I really like the mindset you thank :)
    togel singapura

    ReplyDelete

  27. very interesting content of this article give inspiration thanksraja poker

    ReplyDelete
  28. Cari Agen PokerOnline Berbonus Deposit?
    (www.badoqq.org)

    ReplyDelete

  29. is very fond of this article because it gives a lot of inspiration thanks dewa poker


    ReplyDelete

  30. very interesting content of this article give inspiration thanks agen judi poker online terpercaya di indonesia

    ReplyDelete
  31. is very fond of this article because it gives a lot of inspiration thanks dewa poker

    ReplyDelete
  32. Cari Agen PokerOnline Banyak Bonus Extra??
    http://www.badoqq.com/

    ReplyDelete
  33. interesting articles and this is my first first reading a very interesting article thanks for this article that fits with the theme news.
    www.badoqq.org

    ReplyDelete
  34. interesting articles and this is my first first reading a very interesting article thanks for this article that fits with the theme news.
    judi poker online yang aman dan terpercaya

    ReplyDelete
  35. Bergabunlah bersama kami di situs judi online terpercaya100%
    PokerOnline/DominoQQ dan masih banyak game yang bisa anda mainkan
    Berapapun Akan kami bayar100% aman,Banyak Bonus yang sedang menanti anda
    info selanjutnya (www.badoqq.org)

    ReplyDelete


  36. amazing content of this article inspiring many thanks raja poker



    ReplyDelete
  37. Agen poker uang asli BadoQQ 100% fair play, tanp robot, dan menang berapapun pasti akan di bayar. Memberikan kenyamanan, kepercayaan untuk member adalah prioritas utama Bandar Ceme Terpercaya BadoQQ, Jadi anda tidak perlu ragu untuk bermain di sini karena BadoQQ sudah di kenal bertahun tahun oleh pemain poker online indonesia (www.badoqq.org)

    ReplyDelete


  38. is very fond of this article because it gives a lot of inspiration thanks judi poker

    ReplyDelete
  39. After I read and try to understand this article and finally amazing.
    we are all grateful for the existence of this article can add even more insight for us all
    thank you
    judi online

    ReplyDelete
  40. Sudah Waktunya Mendekati Lebaran Pasti Butuh Uang Tambahan Kan?
    Ayo Coba Keberuntungan anda bersama kami di situs judi online
    Pokeronline,dominoqq,bandarqq,ceme banyak promo bonus menanti anda
    Silahkan (www.badoqq.org)

    ReplyDelete

  41. amazing content of this article inspiring many thanks raja poker

    ReplyDelete

  42. amazing content of this article inspiring many thanks mgmdomino

    ReplyDelete
  43. Badoqq adalah situs judi online terpercaya 100%
    Banyak Promo Bonus Extra Yang Kami Sediakan.!
    Ayo Langsung Saja Hubungi Kami Untuk Info..
    (www.badoqq.org)

    ReplyDelete

  44. many articles provide important and inspiring information thanks mgmdomino

    ReplyDelete
  45. Cari Agen PokerOnline Yang Berlimpah Bonus Extra
    Kami sedang menyediakan banyak promo bonus menarik untuk anda
    100% Fair player vs player info selanjutnya hubungi kami di
    (www.badoqq.org)

    ReplyDelete
  46. good article, if u like you can visit new article very good at : pokerbintang

    ReplyDelete



  47. is very fond of this article because it gives a lot of inspiration thanks raja poker

    ReplyDelete
  48. intext:"I am continually browsing online for tips that can benefit me. Thx!"
    domino qiu qiu

    ReplyDelete
  49. Cari Situs PokerOnline Yang Banyak Bonusnya Kali Ini BADOQQ
    Agen Judi Online Poker DominoQQ BANDARQQ CEME Sedang Menyediakan
    Promo Bonus Extra Untuk Anda Semua Para PokerMania Info Ayo
    (www.badoqq.org)

    ReplyDelete

  50. is very fond of this article because it gives a lot of inspiration thanks judi poker

    ReplyDelete
  51. very interesting content of this article give inspiration thanks poker online

    ReplyDelete


  52. amazing content of this article inspiring many thanksraja poker

    ReplyDelete
  53. It is very delicious food. I like this kind of cooking, my boyfriend likes me very much, I really like it and I will learn to eat it. ดูดวงแม่น

    ReplyDelete
  54. artikelen die leuk en heel interessant zijn Ik lees graag de artikelen die je maakt
    togel online

    ReplyDelete
  55. best comedian post I found here on. I laughed a lot and learnt so many things. Thank you.

    Real estate consulting service Dubai

    real estate dealer in dwarka

    ReplyDelete
  56. ฟิลเลอร์มีคุณลักษณะ



    ยังไง





    ?
    คุณลักษณะ



    ของฟิลเลอร์ ช่วยสำหรับเพื่อการ







    เก็บกัก



    น้ำของชั้นผิวที่ได้รับการปรับปรุง









    หน้าตอบ ร่องปน



    ลึก ฟิลเลอร์จะช่วยเติมเต็มช่องว่างให้กับเซลล์ผิวหนัง หรือเพิ่มความจุ





    ให้กับผิว เปรียบเทียบ





    ได้กับการตำหนิ





    ดสปริงให้กับผิว ให้ผิวยืดหยุ่น เต่งตึงกระชับชั้นผิวเรียบเท่ากัน



    ลดริ้วรอยเหี่ยวเฉา





    หร่น





    ทำให้บริเวณใบหน้า



    มอง



    เด็กลงอย่างแจ่มแจ้ง





    รวมถึง



    การปรับรูปหน้า เติมเต็มรูปหน้าให้ได้ส่วน





    ได้รูปเพิ่มขึ้น



    รวมทั้ง







    จะเสื่อมสภาพ





    ไปได้อย่างธรรมชาติ สำหรับหมอ



    ผู้ที่มีความเชี่ยวชาญ







    จะสามารถนำฟิลเลอร์ มาเติมเต็มได้ทุกส่วนของผิวฉีดฟิลเลอร์จมูก
    ฉีดฟิลเลอร์ปาก
    ฉีดฟิลเลอร์ ที่ไหนดี

    ReplyDelete
  57. Valuable site, where did u come up download kiss 918 with the information in this posting I am pleased I discovered it though, ill be checking back soon to find out what new content pieces u have.

    ReplyDelete
  58. I'd like to know how 918kiss play everything is going with this.

    ReplyDelete