Comments on: More about the <button> element http://nickcowie.com/2005/accessible-buttons-more/ Web standards, accessibility and such like with a bias toward Government web sites Wed, 19 Nov 2008 04:20:42 +0000 http://wordpress.org/?v=2.6.3 By: RE Mogul http://nickcowie.com/2005/accessible-buttons-more/#comment-37021 RE Mogul Wed, 25 Jun 2008 23:32:19 +0000 http://nickcowie.com/?p=36#comment-37021 Buttons should be usable, without the ability to read their text. For example, the button I clicked to post this was obvious. It submits. It is the only one. What else would it do? If you asked me later, I wouldn't be able to tell you what it actually read. I can easily discern its function from context. Focus on context. Everything else is simply diversion, in regards to accessibility. :::::::::CODING for the KEYBOARD::::::::: IN THE PERFECT WORLD: All developers design keyboard-friendly interfaces. Case in Point: Keyboard a submit button, make it read: [SHIFT] [ENTER] to Submit. Notice the shift-enter convenience. Try it. It just feels right. Use actual keyboard button images. It would make for a super-large button -- an EZ target. Precision-pointing is the most difficult thing one can ask of a user. Need Proof? Program a robot to point and click a virtual button. Then program a robot to shift-enter. Then tell me which is the EZiest task. Buttons should be usable, without the ability to read their text.

For example, the button I clicked to post this was obvious.
It submits. It is the only one. What else would it do?

If you asked me later, I wouldn’t be able to tell you what it actually read. I can easily discern its function from context. Focus on context.

Everything else is simply diversion, in regards to accessibility.

:::::::::CODING for the KEYBOARD:::::::::

IN THE PERFECT WORLD:
All developers design keyboard-friendly interfaces.

Case in Point:

Keyboard a submit button, make it read:

[SHIFT] [ENTER] to Submit.

Notice the shift-enter convenience.
Try it. It just feels right.
Use actual keyboard button images.

It would make for a super-large button — an EZ target.

Precision-pointing is the most difficult thing one can ask of a user.
Need Proof? Program a robot to point and click a virtual button. Then program a robot to shift-enter. Then tell me which is the EZiest task.

]]> By: adrian http://nickcowie.com/2005/accessible-buttons-more/#comment-17095 adrian Wed, 15 Aug 2007 02:13:24 +0000 http://nickcowie.com/?p=36#comment-17095 On Safari 2.0.4, it seems like BUTTON elements are not included in the forms.elements collection. Has there been a fix to this? On Safari 2.0.4, it seems like BUTTON elements are not included in the forms.elements collection. Has there been a fix to this?

]]> By: Nick Cowie » I am doing a presentation http://nickcowie.com/2005/accessible-buttons-more/#comment-300 Nick Cowie » I am doing a presentation Mon, 06 Mar 2006 10:09:02 +0000 http://nickcowie.com/?p=36#comment-300 [...] The advantage of doing a presentation on the button element, which are the most popular posts on this blogs, is I have already done most of the research for those posts: Stylish Accessible Buttons, More about the button element and a half written post about how to position buttons. So there is very little work to do, except try and find out how IE7 beta deals with the button element and exactly what extra padding IE5 and IE6 adds to the button element, it is not as I previously stated a fixed amount but appears to be proportional to the width of the button element. Still all of this can be packaged into a 30 minute presentation, as long I only briefly touch on conditional comments for serving an additional stylesheet to IE and how to use absolutely position an element inside a relatively positioned element. [...] [...] The advantage of doing a presentation on the button element, which are the most popular posts on this blogs, is I have already done most of the research for those posts: Stylish Accessible Buttons, More about the button element and a half written post about how to position buttons. So there is very little work to do, except try and find out how IE7 beta deals with the button element and exactly what extra padding IE5 and IE6 adds to the button element, it is not as I previously stated a fixed amount but appears to be proportional to the width of the button element. Still all of this can be packaged into a 30 minute presentation, as long I only briefly touch on conditional comments for serving an additional stylesheet to IE and how to use absolutely position an element inside a relatively positioned element. [...]

]]> By: Lea de Groot http://nickcowie.com/2005/accessible-buttons-more/#comment-186 Lea de Groot Tue, 27 Dec 2005 06:04:28 +0000 http://nickcowie.com/?p=36#comment-186 Ah, much better :) Ah, much better :)

]]> By: Kay Smoljak http://nickcowie.com/2005/accessible-buttons-more/#comment-175 Kay Smoljak Mon, 26 Dec 2005 02:40:35 +0000 http://nickcowie.com/?p=36#comment-175 I fall into the category of not really knowing about the button element (at least until I read this). Thanks Nick for edja-ma-catin' me! I fall into the category of not really knowing about the button element (at least until I read this). Thanks Nick for edja-ma-catin’ me!

]]> By: Lea de Groot http://nickcowie.com/2005/accessible-buttons-more/#comment-97 Lea de Groot Sat, 24 Dec 2005 11:53:05 +0000 http://nickcowie.com/?p=36#comment-97 Probably want to check those buttons in Safari before you go live - the icon is overlapping the words :( Looks fine in Mac/FF, of course :) I must admit that I don't use Buttons, principally because I didn't know what an appropriate usage was; I shall experiment with them next time I do a form (oh, look, thats scheduled for sometime next week :)) Lea Probably want to check those buttons in Safari before you go live - the icon is overlapping the words :(
Looks fine in Mac/FF, of course :)

I must admit that I don’t use Buttons, principally because I didn’t know what an appropriate usage was; I shall experiment with them next time I do a form (oh, look, thats scheduled for sometime next week :))

Lea

]]>