ARIA Tabs Example

WAI-ARIA 1.1: Tabs

Pizza Ordering Example

Chocolate Chip Cookies

Ingredients

  • 3/4 cup granulated sugar
  • 3/4 cup packed brown sugar
  • 1 cup butter or margarine, softened
  • 1 teaspoon vanilla
  • 1 egg
  • 2 1/4 cups flower
  • 1 teaspoon baking soda
  • 1 package Chocolate chips (12oz/2cups)

Directions

  • Heat oven to 375ºF
  • Mix sugars, butter, vanilla and egg in large bowl. Stir in flour, baking soda and salt (dough will be stiff). Stir in Chocolate chips.
  • Drop dough by rounded tablespoonfuls about 2 inches apart onto ungreased cookie sheet
  • Bake 8 to 10 minutes or until light brown (centers will be soft). Cool slightly; remove from cookie sheet. Cool on wire rack.

Oatmeal Raisin Cookies

Ingredients

  • 3/4 cup granulated sugar
  • 1/2 cup packed brown sugar
  • 1 cup butter or margarine, softened
  • 1 1/2 teaspoons vanilla
  • 2 egg
  • 1 1/2 cups flower
  • 1 teaspoon baking soda
  • 1 teaspoon ground cinnamon
  • 1/2 teaspoon salt
  • 3 cups oats
  • 1 cup raisins or other dried fruit

Directions

  • Heat oven to 350°F. Line cookie sheet with Reynolds Parchment Paper; set aside. In large bowl, beat all ingredients except oats, flour and raisins with electric mixer on medium speed until well blended, or mix with spoon. Stir in oats, flour and raisins.
  • On lined cookie sheet, drop dough by rounded tablespoonfuls about 2 inches apart.
  • Bake 10 to 12 minutes or until light brown. Cool 2 minutes; remove from cookie sheets. Cool completely; store tightly covered.

Sugar Cookies

Ingredients

  • 3 cup powdered sugar
  • 2 cup butter or margarine, softened
  • 2 teaspoons vanilla
  • 1 teaspoons almond extract
  • 2 egg
  • 5 cups flower
  • 2 teaspoon baking soda
  • 2 teaspoon cream of tartar

Glaze

  • 4 cups powdered sugar
  • 1/4 cup water
  • 1/4 cup light corn syrup
  • 1 teaspoons almond extract
  • Food colors as desired

Directions

  • In large bowl, beat 3 cups powdered sugar, the butter, vanilla, 1 teaspoon almond extract and eggs with electric mixer on medium speed, or mix with spoon. Stir in flour, baking soda and cream of tartar. Cover and refrigerate at least 2 hours.
  • Heat oven to 375°F. Lightly grease cookie sheet. Divide dough in half. On lightly floured surface, roll each half 1/8 inch thick. Cut into desired shapes with 3-inch cookie cutters. Place about 2 inches apart on cookie sheet.
  • Bake 5 to 7 minutes or until edges are light brown. Remove from cookie sheet to wire rack. Cool completely, about 30 minutes.
  • In small bowl, beat all glaze ingredients except food colors on low speed until smooth. Divide among several small bowls. Stir desired food color, one drop at a time, into each until desired color. Decorate cookies with glaze and other decorations as desired.

Peanut Butter Cookies

Ingredients

  • 1/2 cup granulated sugar
  • 1/2 cup packed brown sugar
  • 1/4 cup butter or margarine, softened
  • 1 egg
  • 1 1/4 cups flower
  • 3/4 teaspoon baking soda
  • 1/2 teaspoon baking powder
  • 1/2 cup shortening
  • 1/4 teaspoon salt
  • 1/2 cup peanut butter

Directions

  • Mix sugars, peanut butter, shortening, butter and egg in large bowl. Stir in remaining ingredients. Cover and refrigerate about 2 hours or until firm.
  • Heat oven to 375ºF
  • Shape dough into 1 1/4-inch balls. Place about 3 inches apart on ungreased cookie sheet. Flatten in crisscross pattern with fork dipped into sugar.
  • Bake 9 to 10 minutes or until light golden brown. Cool 5 minutes; remove from cookie sheet. Cool on wire rack.

Accessibility Features

Keyboard Support

Key Function
Left Arrow Key The tab to the left of the current tab is focused and put into tab-order in place of the previous tab.
Right Arrow Key The tab to the right of the current tab is focused and put into tab-order in place of the previous atb.
Return Key and Space Bar Activate the selected tab

ARIA Roles, Properties and States

Role Property/State Usage
Div tabpanel

Source Code: Example