Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML

Posted by James Nelson
James Nelson
23,956 Points

Accessibility & buttons

I have been doing some usability testing in the project I am working on and I have seen both the button tag and a href link have been used to describe a button in the markup.

I would like to change all instances of a href action buttons to use the button html tag. Not only as I think its more semantic but it allows us to describe its visual state better e.g enabled, disabled states.

Does the button have been wrapped inside a form? Do you think this is a sensible thing to do to aid accessibility and general user experience?

Thanks

3 Answers

Logan R
Logan R
22,989 Points
Logan R
Logan R
22,989 Points

No, it does not have to be inside a form. I would suggest that you just do <a href="#"><button>Hello</button></a> and in the CSS add the code:

a[href], input[type='submit'], input[type='image'], label[for], select, button, .pointer {
       cursor: pointer;
}

So that the cursor changes to a finger so users know you can click it :)

Hope this helps!

Edit: If you encounter any problems in browsers, like IE8, while using HTML5, just use a shiv to create.element:

http://css-tricks.com/snippets/javascript/make-html5-elements-work-in-old-ie/

James Nelson
James Nelson
23,956 Points
James Nelson
James Nelson
23,956 Points

Yeah but that doesn't help to differente the differences between normal links and buttons, both have been marked up using the a href link.

Logan R
Logan R
22,989 Points

If you want to have a button with no a href link, then yes, you would have to put it inside of a <form> so the button knows where to redirect the browser :)

Logan R
Logan R
22,989 Points

If you want to have a button with no a href link, then yes, you would have to put it inside of a <form> so the button knows where to redirect the browser :)

James Nelson
James Nelson
23,956 Points
James Nelson
James Nelson
23,956 Points

Ahhh ok, so for semantic purposes you would recommend imbedding an a href link inside buttons. Will test this with a screen reader later to see if it makes a difference. The reason I ask was during screen reading testing of an application I found it very difficult to differente between functional buttons and links as CSS was being used to 'decorate' buttons rather than describing it in the markup.