accessibility and asp:button

Discussion in 'ASP .Net' started by JV, Jul 5, 2005.

  1. JV

    JV Guest

    This is for anyone who has tackled the accessibility issue on their web site
    (and if you haven't, I bet you will in future).

    Apparently the asp:button control always renders as '<input type="submit"
    ....' (a.k.a. submit button) and this can have a big impact on your web
    site's keyboard handling. Default IE behavior when you have the keyboard
    focus on an edit field is to find the first submit button and trigger a
    click event on it (NOTE: Submit buttons behave similarly to a default
    button in a Windows GUI application -- often the "Ok" button -- so their
    border is drawn darker to indicate that they are the default for that form.
    Of course, blind people cannot detect that, but hey...).

    Anyway, if you use multiple asp:button controls on your web form, the ENTER
    key's behavior may surprise your users. Did you put a LOGIN/LOGOUT button
    on all of your pages? Maybe ENTER logs them out instead of clicking the
    SUBMIT button you expected it to click.

    So, it's probably not a good idea to use the asp:button control more than
    once on your form, and then only for the most obvious, sensible default
    button.

    Has anyone else run into this?

    --JV

    P.S. Before you freak out, keep in mind this only applies when keyboard
    focus is on an edit field. If it is on a button or hyperlink, default
    behavior is to click that button or hyperlink.
    JV, Jul 5, 2005
    #1
    1. Advertising

  2. I ran in similar situation when I was designing the City of North Vancouver
    website www.cnv.org



    Many of the online forms have different sections, typically: the site search
    section and the application section. I used the following JavaScript in
    every textbox to associate it with a specific button:



    function fnTrapKD(btn){
    if (document.all){
    if (event.keyCode == 13)
    {
    event.returnValue=false;
    event.cancel = true;
    btn.click();
    }
    }
    }



    For the site search textbox, I add the attribute:
    onkeydown="fnTrapKD(document.all.btnSearch)"



    For other textboxes within any form I pass the button ID that would submit
    the section, which in turn would cause the postback event to be triggered.



    ---

    www.webswapp.com

    www.societopia.net



    "JV" <> wrote in message
    news:%...
    > This is for anyone who has tackled the accessibility issue on their web

    site
    > (and if you haven't, I bet you will in future).
    >
    > Apparently the asp:button control always renders as '<input type="submit"
    > ...' (a.k.a. submit button) and this can have a big impact on your web
    > site's keyboard handling. Default IE behavior when you have the keyboard
    > focus on an edit field is to find the first submit button and trigger a
    > click event on it (NOTE: Submit buttons behave similarly to a default
    > button in a Windows GUI application -- often the "Ok" button -- so their
    > border is drawn darker to indicate that they are the default for that

    form.
    > Of course, blind people cannot detect that, but hey...).
    >
    > Anyway, if you use multiple asp:button controls on your web form, the

    ENTER
    > key's behavior may surprise your users. Did you put a LOGIN/LOGOUT button
    > on all of your pages? Maybe ENTER logs them out instead of clicking the
    > SUBMIT button you expected it to click.
    >
    > So, it's probably not a good idea to use the asp:button control more than
    > once on your form, and then only for the most obvious, sensible default
    > button.
    >
    > Has anyone else run into this?
    >
    > --JV
    >
    > P.S. Before you freak out, keep in mind this only applies when keyboard
    > focus is on an edit field. If it is on a button or hyperlink, default
    > behavior is to click that button or hyperlink.
    >
    >
    societopia.net, Jul 6, 2005
    #2
    1. Advertising

  3. JV

    JV Guest

    That would certainly work, and I could see doing that on sites with not too
    many forms, but on some sites it seems like that could turn into a lot of
    extra coding to tie that to every focusable control that is neither button
    nor hyperlink.

    "societopia.net" <> wrote
    >I ran in similar situation when I was designing the City of North Vancouver
    > website www.cnv.org
    >
    > Many of the online forms have different sections, typically: the site
    > search
    > section and the application section. I used the following JavaScript in
    > every textbox to associate it with a specific button:
    >
    > function fnTrapKD(btn){
    > if (document.all){
    > if (event.keyCode == 13)
    > {
    > event.returnValue=false;
    > event.cancel = true;
    > btn.click();
    > }
    > }
    > }
    >
    > For the site search textbox, I add the attribute:
    > onkeydown="fnTrapKD(document.all.btnSearch)"
    >
    > For other textboxes within any form I pass the button ID that would submit
    > the section, which in turn would cause the postback event to be triggered.
    JV, Jul 6, 2005
    #3
  4. The function fnTrapKD cost is only 8 lines of code that are shared by the
    entire page. Then in each textbox the only additional code is the function
    all: onkeydown="fnTrapKD(document.all.btnSearch)"

    You can also make a variation of that function for other boxes where you
    want the return key to cause the focus to be set to a subsequent textbox
    instead of to submit the form.

    ---

    "JV" wrote:

    > That would certainly work, and I could see doing that on sites with not too
    > many forms, but on some sites it seems like that could turn into a lot of
    > extra coding to tie that to every focusable control that is neither button
    > nor hyperlink.
    >
    > "societopia.net" <> wrote
    > >I ran in similar situation when I was designing the City of North Vancouver
    > > website www.cnv.org
    > >
    > > Many of the online forms have different sections, typically: the site
    > > search
    > > section and the application section. I used the following JavaScript in
    > > every textbox to associate it with a specific button:
    > >
    > > function fnTrapKD(btn){
    > > if (document.all){
    > > if (event.keyCode == 13)
    > > {
    > > event.returnValue=false;
    > > event.cancel = true;
    > > btn.click();
    > > }
    > > }
    > > }
    > >
    > > For the site search textbox, I add the attribute:
    > > onkeydown="fnTrapKD(document.all.btnSearch)"
    > >
    > > For other textboxes within any form I pass the button ID that would submit
    > > the section, which in turn would cause the postback event to be triggered.

    >
    >
    >
    =?Utf-8?B?c29jaWV0b3BpYS5uZXQ=?=, Jul 6, 2005
    #4
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Paul G
    Replies:
    1
    Views:
    388
    John Timney \(Microsoft MVP\)
    Feb 26, 2004
  2. James Brett

    asp.net and wai accessibility

    James Brett, May 21, 2004, in forum: ASP .Net
    Replies:
    0
    Views:
    362
    James Brett
    May 21, 2004
  3. Jonathan Carter

    ASP.NET 2.0 web part accessibility question

    Jonathan Carter, Dec 3, 2005, in forum: ASP .Net
    Replies:
    0
    Views:
    341
    Jonathan Carter
    Dec 3, 2005
  4. Replies:
    0
    Views:
    666
  5. =?Utf-8?B?TWlrZSBMb2dhbg==?=

    ASP.Net Control Accessibility

    =?Utf-8?B?TWlrZSBMb2dhbg==?=, Dec 15, 2006, in forum: ASP .Net
    Replies:
    7
    Views:
    683
    Steven Cheng[MSFT]
    Dec 19, 2006
Loading...

Share This Page