Uses Bootstrap v 2.2.2
Tooltips
A tooltip is like windows tooltip you probably might have noticed that in windows tooltip cannot be used with a keyboard-
Changes:
- Can be used with both mouse and keyboard
- role="tooltip" for the tooltip
- aria-describedby for the anchor
Modal Dialog
Launch demo modal-
Changes:
- Role document inside Modal, so that AT can come out of application mode to read text
- role="button" for launch link
DropDown
Dropdown-
Changes:
- aria-haspopup="true" and role="button" for launch link
- role="menu" for UL
- role="presentation" for li
- role="menuitem" for anchor inside li
- role="separator" for separator link
Tab Panel
Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.
-
Changes:
- role="tablist" for tab ul
- role="tab", aria-control="tabpanelid", aria-selected and aria-expanded="true" for tab
- role="presentation" for tab li
- role="tabpanel" , tabIndex="0" and aria-expanded for tabpanel
- up and left arrow navigates tab and down and right also navigates tab
Accordion
-
Changes:
- role="tablist" and aria-multiselectable="true" for tab div
- role="tab", aria-control="tabpanelid" , aria-selected, aria-expanded="true" for tab div
- role="tabpanel" , tabIndex="0",aria-expanded,aria-hidden and aria-labelledby for tabpanel
- up and down arrow navigates accordion header and enter expands accordion
Carousel
‹Previous
First Thumbnail label
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
Second Thumbnail label
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
Third Thumbnail label
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
-
Changes:
- role="button" for previous next
- role="listbox", aria-labelledby for carousel container
- role="option" and aria-selected for accordion item
- up and down arrow navigates carousel items
Typeahead
-
Changes:
- Label for typeahead text box
- role="presentation" for li and tabIndex -1 for lisitem
- up and down arrow updates textbox so that value is exposed to AT