Button-ARIA-Plugin


            



    
Using the Button ARIA Plugin

/*margin and padding on body element
  can introduce errors in determining
  element position and are not recommended;
  we turn them off as a foundation for YUI
  CSS treatments. */
body {
  margin:0;
  padding:0;
}











    #button-example-form fieldset {
        border: 2px groove #ccc;
        margin: .5em;
        padding: .5em;
    }
  /*
    The Menu ARIA Plugin removes the "href" attribute from the  element of each MenuItem
    if the value of the "href" is set to "#", resulting in the focus outline no longer be 
    rendered in Gecko-based browsers when the  element is focused.  For this reason, 
    it is necessary to restore the focus outline for the . 
  */
  a[role=menuitem]:focus {
    outline: dotted 1px #000;
  }
  







Using the Button ARIA Plugin


  
The Button ARIA Plugin makes it easy to use the 
WAI-ARIA Roles and States with the Button
and ButtonGroup controls.
Using the ARIA plugin, Buttons are more interoperable with assistive technologies (AT),
such as screen readers, making them more accessible to users with disabilities.


Watch a screen cast of this example 
running in Firefox 3 with the NVDA screen reader, to see immediately the benefits that 
ARIA provides, or 
download the latest development snapshot of 
NVDA to test this example for yourself.




    (function () {
      
      var Event = YAHOO.util.Event,
        Button = YAHOO.widget.Button,
        UA = YAHOO.env.ua;
    Event.onContentReady("checkboxbutton-example", function () {    
      var oCheckButton1 = new Button("checkbutton1", { label: "Cheese" });
      var oCheckButton2 = new Button("checkbutton2", { label: "Mushrooms" });
      var oCheckButton3 = new Button("checkbutton3", { label: "Peperoni" });
      var oCheckButton4 = new Button("checkbutton4", { label: "Olives" });
    
    });
    Event.onContentReady("radiobutton-example", function () {
      //  Only apply the WAI-ARIA Roles and States for FF 3 and IE 8 since those
      //  are the only browsers that currently support ARIA.
    
      if ((UA.gecko && UA.gecko >= 1.9) || (UA.ie && UA.ie >= 8)) {
        // Remove the "for" attribute in favor of using the aria-labelledby attribute
        YAHOO.util.Dom.get("buttongroup-label").removeAttribute(YAHOO.env.ua.ie ? "htmlFor" : "for");
      }
      var oButtonGroup = new YAHOO.widget.ButtonGroup("buttongroup", { labelledby: "buttongroup-label" });
    
    });
    Event.onContentReady("menubutton-example", function () {
      var oMenuButton = new Button("menubutton-1", { type: "menu", menu: "menubutton-1-menu" });
    
    });
    Event.onContentReady("splitbutton-example", function () {
      var oMenuButton = new Button("splitbutton-1", { type: "split", menu: "splitbutton-1-menu" });
    
    });
    }());


  
    Pizza Toppings
    
    
    
    
    
  
  
    Radio Buttons
    
      Size

YUI Library JavaScript DHTML

Using the Button ARIA Plugin